What's New

So you built a website and it seems to do everything you need. Then someone points out that it looks pretty terrible on a phone, so you build a mobile website. Then you realize that it isn’t optimized for touch screens and doesn’t work on an iPad, so you build an iPad version. Then you get a memo from the Chairman asking why it doesn’t work right on his wife’s new Kindle Fire, and your sales director calls and says it looks terrible on his Mac Mini, which he is viewing on his 42” living room TV, and then…well, you get the idea.

The moral of the story is that the one thing you can count on in our technology drenched world is change, which is why you need a better way to approach creating things for digital channels.  That better way is called Responsive Web Design. Not very catchy, but as you’ll see in a minute, the name pretty much sums it up.

What is Responsive Web Design?

Responsive Web Design is where the layout and content of a website adapt to the user’s environment, which includes screen size, platform, and even orientation.

Basically, it means writing code to create a site that will work on the majority of devices, including those that haven’t been invented yet.

To see more examples of sites using responsive design, go to http://mediaqueri.es/.

Why you should care

Your customers and prospects are discovering your brand on all sorts of devices now, and there just isn’t any excuse for not having a good digital experience waiting for them every time. Consumers expect brands to care enough about them to get it right, so when they come upon a brand that hasn’t produced a good user experience they infer the obvious; that your brand doesn’t care.

This is all part of the customer experience puzzle that a brand must get right if it wants to be a competitor today. Responsive Web Design solves a part of the digital piece of this puzzle.

How does it work?

The basic idea is you only have to create or edit a website once and it appears the way it should on a multitude of screen sizes and formats.

Responsive Web Designs contain three core ingredients:

• Flexible, grid-based layout
• Flexible images and media (show only what you want to)
• Media queries, a module from the CSS3 specification

Responsive Web Design is Device future-friendly

Mobile use is big and getting bigger. It’s predicted to outpace desktop browsing by 2015, and by then there will be more devices than people.

Maybe your current website works great on desktops, mobile phones, and tablets, but will it work on projectors, TVs, netbooks, eReaders, game systems, and all the devices that haven’t been thought of yet?

Responsive Web Design is not perfect, but you get closer to ensuring that your content can flow into any device; designed once for all platforms. Of course it also cuts down on the production and maintenance costs, because you’re only programming and designing once, and not each time a new device explodes onto the scene.

Responsive Web Design helps Search

Search engine rankings are strongly influenced by the amount of traffic you generate, but search engines keep the search traffic from different versions of your site separate. Now with Responsive Web Design all your traffic is combined into one big number.

In the example below you see how Google doesn’t combine your main website (domain.com) and its mobile counterpart (m.domain.com) and you lose the search ranking that a 10 million number might deliver. Responsive Web Design solves this.

By creating one site with one URL, all traffic to your site—no matter where it comes from—is counted in the total. That means your search rankings go up. This is particularly important if you already have a legacy of great SEO for your main website.

How do you apply?

Responsive Web Design still requires innovation. There’s not a single model that fits all websites. However, patterns are starting to emerge. Luke Wroblewski documented many of these patterns in his article “Multi-Device Layout Patterns.” The following are two examples he shared.

Which pattern is right for your site?

Each site is unique, so yours may not fit neatly into a pattern. This is where a good UX/design agency can help:

• Content strategists review your current content and help you think about future content. Then they inventory what you have and what you’ll have eventually, so you know what to allow for.

• Experience architects help you figure out what features and functions you want the site to have and then prioritize those with your content. They can also help you determine what size points to use (i.e., the screen sizes you already know you must design for).

• Designers create a visual language for your site and determine the best way to scale the content, features, and functions for each screen size.

• Developers build the site. They follow coding standards to ensure your site works across as many devices and platform types as possible and scales smoothly from one screen size to the next.

Is Responsive Web Design right for your site?

Nobody wants to change, especially if you already have a website that’s working well. But user experience problems will only multiply as devices proliferate.

Consumer adoption of new devices has been so fast that most existing brand sites are only now waking up to the demands of the multi-device marketplace. Designing Responsive sites is more expensive, but it’s cheaper than making custom sites for each device.

An easy first step would be to shift your site to a fluid layout instead of fixed layout. This is where the width of the site automatically adjusts. But even this has been slow to catch on. Our recent review of the Alexa Top 50 U.S. Sites showed that only 6 were ‘fluid’.

Support for media queries is broad and growing

Most modern desktop browsers support Media queries, the technology involved powering Responsive Web Design. Most mobile browsers also support Media queries. This is great news, because mobile devices are one of the areas where Responsive Web Design is needed most.

Understand your users’ needs.

Some argue that users looking at your site on a phone have different needs than users looking at your site on a desktop so you need to create a separate mobile website. For example, someone looking at a restaurant’s website while walking down the street probably needs an address and a basic menu. They are not interested in large images of the food.

Be wary of this argument.

It’s true that context (e.g., user on the street versus sitting on their couch) should influence design, but knowing what device a person is using does not necessarily tell you their context. The good news, however, is that Responsive Web Design allows you to turn on or off and content on your site depending on the device or platform it will appear on.

Sometimes a separate mobile site may be appropriate, such as with a conference site that requires specific capabilities. But this may mean you really need a mobile app vs. a mobile website (check out IQ’s white paper on mobile web vs. native apps if you’re facing that decision).

A final thought

Responsive Design is not a magic bullet, but it goes a long way to solve the multi-device problem. It should, of course, be part of a bigger process of understanding your consumer’s needs, when and where they are likely to use digital channels, and what they are trying to accomplish in each context.

Technology will continue to evolve and brands will continue to have to adapt, the question is when is the right time to move. The speed that device technology, like tablets, is being adopted seems to indicate that brands can’t afford to sit on the sidelines and allow second-rate user experiences much longer.