So you built a Web site 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 Web site. Then you realize that it isn’t optimized for touchscreens 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 then...well, you get the idea.
How to create for the multi-device world
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.
Responsive Web design
Responsive Web design is where the layout and content of a Web site 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 have not been invented yet.
To see more examples of sites using responsive design, go to http://mediaqueri.es/.
Mobile use is big and getting bigger. It is predicted to outpace desktop browsing by 2015. By then, there will be more devices than people.
Maybe your current Web site 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?
It also cuts down on the production and maintenance costs, because you’re only programming and designing once -- not each time a new device explodes onto the scene.
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. All your traffic can now be combined into one big number.
Is this right for your site?
Nobody wants to change, especially if you already have a Web site that’s working well. But user experience problems will only multiply as devices proliferate.
Consumer adoption of new devices has been so rapid 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.
Understand your users' needs
Understand 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 Web site. For example, someone looking at a restaurant’s Web site 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 (the 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 is that responsive Web design allows you to turn on or off 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 that you really need a mobile app vs. a mobile Web site.
Responsive design is not a magic bullet, but it goes a long way to solve the multi-device problem. It should 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.