Designing for the User with Responsive Web Design

Have you ever been in a situation where you wanted to find information on a topic and all you had was your smartphone? You Google the topic, find a link to a site that looks promising, click on it and…

Smashing Mobile Phone

You can’t read the text. The links are so tightly grouped that you don’t know what you will get when you tap one. The images are tiny. It’s a mess! You are frustrated, and you are gone! (or even worse, you smashed your phone but I recommend against this)

This is what happens when a site is not optimized for the user experience. This is what happens when your site designer does not use Responsive Web Design. So, what is Responsive Web Design?

Responsive Web Design

Smashing Magazine gives this definition of Responsive Web Design:

Recommended for YouWebcast: The Art of Community Development: Turning Brand Awareness Into Sales

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.

Designing your website using this approach allows the layout to transform and adjust specifically for the user’s screen. So, instead of having a website, a mobile site, a tablet site, you have one website that adjusts for all users.

The coding of the website will allow it to expand and reshape to the device being used to view it. For example, if you open this responsive web design example and adjust the size of your browser window you will see that the layout, navigation and page elements will move to fit the display window.

As you can see, the design adjusts smoothly no matter the screen size. This means that this design will work seemlessly on a desktop, tablet, or any type of smartphone. Neat, huh? But, so what?

The Zero Moment of Truth

Well, let’s talk for a minute about the Zero Moment of Truth or ZMOT. ZMOT is a term coined by Google and it is a moment you need to target. This is the moment when an idea is born and information is desired.

This could be…

  • A guy in a bar thinking about his future, looking up engagement rings.
  • A woman taking the train to work, looking for career change.
  • A hungry tourist, looking for the best places to eat.
  • A dad at a playground, looking up charter schools in his community.

This is the moment before the so-called first moment of truth or FMOT when the consumer is staring at a shelf full of products about to grab one. This is the moment when the idea to look for that product strikes and they want to find out more about it.

ZMOT occurs now more than ever because of the easy access to information via tablets and smartphones. No longer do consumers need to make a phone call or jump in their car to find more information on a product, service, event, etc. Now, they simply reach for the device and start searching. Where are you in this moment?

Responsive Web Design and ZMOT

Simply applying responsive web design coding to your website does not mean you have a mobile marketing strategy in place. It means you have a site that will render appropriately for the mobile user. This is good and necessary, but it is simply the first step.

With ZMOT we now know that we are targeting these consumers when they are inspired and need information. They are on the go, impatient and expect answers quickly.

Instead of offering the mobile user the same pages, links and information that they would get on your standard website, offer them a page tailored to their needs as a mobile user. Consider their needs in this role. What information will they be looking for and what information will help you turn them into a client?

Your web developer can create a mobile landing page (or series of them if you are taking this to the next level) that’s geared specifically towards the mobile user. When this user accesses your page your site knows they are on a mobile browser and the page that loads will be the mobile landing page. On this page will only be information that they need (or that you want them to access first).

Here is an example of a mobile landing page next to the same page on a tablet. Same site, different access strategies…


See the difference? The number of choices and the information available is dramatically different. You can still access all of the same information. The difference is that the mobile user is guided to areas of the site tailored to the needs while in that ZMOT.

Of course all of this hinges on you knowing your target client. You want to identify the buyer personas and list out their needs and your expectations. But that is another post altogether.

What do you think about responsive web design and ZMOT? How are you using this as a client and as a marketer? Let me know in the comments below.

Comments: 1

Add a New Comment

Thank you for adding to the conversation!

Our comments are moderated. Your comment may not appear immediately.