Why should my company consider a responsive design for my mobile website?

Drastic increases in web traffic from mobile devices prove that marketers need to take their mobile web presence seriously. If your business or department is making that investment, you want to make sure your web infrastructure will continue to work as years pass and technology advances. When it comes to mobile websites, invest in a responsive design.

Wander through the aisles at any Best Buy and you’ll see dozens of different cell phones and tablets, all different manufacturers, all different screen sizes. How can you practically and economically have a mobile website that looks and functions well on all the endless number of mobile devices out there and those yet to be released?

The old way to build mobile websites

In the past, web developers had to target a specific screen size by height and width when creating a mobile website. For example, we could build a website that would look perfect specifically on a 960x640 pixel iPhone4S screen.

But what do your customers on different sized Android phones see? And what happens when a new iPhone is released that has a larger screen (as happened when the iPhone5 was released last year)? Ultimately, this approach for building mobile websites was too inflexible.

The paradigm shifts: responsive mobile websites

Responsive web design lets web developers create a site flexible enough to accommodate lots of different screen sizes, including desktop screens, without having to define a specific height and width.

A responsive website intelligently detects information about a device and serves up a version of the website that will suit that device best. The same website code will present the website accurately on any variety of displays — desktops, phones, tablets and anything in between. iPhone, Android, iPad, Nook, new device that hasn’t been invented yet? This approach is most future-friendly approach for mobile websites at this time.

Here’s a very basic explanation of what happens on the technical side of things: A site’s behavior is defined based on size ranges. All layouts are variations of each other.

• A screen less than 500 pixels may show X layout
• A screen width between 500-700 pixels may show Y layout
• A screen width between 700-1200 pixels may show Z layout, and so on.

Layout changes may be accommodated by changing how images scale, text wraps, navigation is displayed and in some cases, may mean hiding page elements to keep the user experience streamlined and optimized for a smaller viewing area.

Potential downsides of responsive design

• A different way of thinking of design approval - Remember that this approach means that your website could have a large number of possible layouts. For most projects, creating a design mockup of all variations of all possibilities would be costly. Trust that each variation of your site will still achieve two goals: 1) it will maintain the spirit and professionalism of your design, 2) it will serve up your content in a manner best suited for the visitor’s screen.
• No “view full site” link - The ability to go back and forth between mobile site and desktop site comes from the old mobile web design paradigm.

For most companies, the benefits of a responsive website outweigh the downsides. As with all good things, certainly a better way to build websites will eventually come along but for the time being, a responsive approach is the best way to accommodate your visitors across a wide multitude of devices.

Related links:

• Why your company needs a mobile website
• Go mobile or go home
• Digett's newest responsive website: visitboerne.org

[Image: adactio]