About Responsive Design

Nov
30

It started with 800x600

When I started building websites, there was a maximum width I had to work with - 800x600. That was the default resolution of many 15" monitors in use at the time (late 90s). You couldn't build a website wider than that, or it would force the user to scroll HORIZONTALLY, the most dreaded of all fates!

Kidding aside, scrolling horizontally is not very user-friendly, and confusing to many. Then the day came when it was safe to assume most users had a monitor width of 1024x768. JOY! Finally, websites would begin to stretch out, and designs could expand. Huge background images and large slideshows could be used. And with widescreen laptops and 24" iMacs, we could keep getting wider!

But then we'd be ignoring the truth. The Mobile Web is here to stay. More users are accessing the Internet on their tiny iPhones or Androids than on large LCDs. People are using iPads and other tablet computers. Plus monitors from 13" laptops to 30" super monitors. How do you design a website to cover all of these different sized monitors? How do you create a good user experience for both the smartphone and the desktop monitor?

The Answer(s)

There are generally 3 approaches to take.

1) Create an App – this means a dedicated piece of software for mobile users. There are several I've used on my iPhone that I enjoy more than the website itself (e.g - Craigslist Times). But you have to build your app for both Android and iPhone (at least). They can be costly and time-consuming, and not ideal for many smaller organizations.

2) Mobile Version of a Website – Redirect any of your website visitors on a mobile device to a mobile version of your website, often under the same URL but proceeded by an "m" or ending with ".mobi" instead of .com. Using much of the same content of the .COM site, but dropping some content that isn't crucial (sidebar stuff), and utilizing JavaScript and CSS to create the appearance of an App, but with HTML. A good example is Hotels.com. The mobile version strips a lot of content away, and changes the browsing experience to short, tabbed links that "swipe" to additional content, similar to an app. This is generally less costly than a dedicated mobile app, but still involves a second domain or subdomain, syncing content between the 2 sites, and a lot of extra styling and scripting.

3) Responsive Design - Keep the same site for all users, but adjust the style and layout "on the fly". Meaning that as the browser window shrinks, content starts to shift around the page. The long horizontal menu bar suddenly condenses into a short, stacked menu, or turns into a dropdown menu. Images shrink in size. Sidebars drop away or are pushed beneath the main content. And everything fits with your browser window, whether it's an iPhone, iPad or iMac. Best of all, it cost less to implement than either option 1 or 2.

It's All The Rage

Responsive design is quite trendy right now, and for good reason. Through the use of Media Queries, your site can be scripted to easily tell the type of device your visitor is using. And not only whether they are using an iPad, but if they are viewing your site horizontally or vertically! They have different widths, you know, and with Responsive Design, we can adjust for site for both.

From a web designers standpoint, the site is designed initially for a "traditional" screen width, and then a series of stylesheets are made to adjust the layout, depending on the device and browser width that a site visitor is using. Of course it's a bit more complex than that, but that is it the essence of what is happening.

Web designers intending to use Responsive Design should plan for it in their initial mockups, because the design of the site affects how easily (or how difficult) an adjustment in width will affect the site layout. Sites need to accommodate being stretched and squished like an accordion, while keeping the integrity and legibility of their original design.

I recently launched my 1st example of Responsive Design for QBS.com, a Twin-Cities based IT Consulting Agency. From it's initial width, the layout adjusts to the narrower width of iPad, and adjusts again for a smaller smartphone. Images adjust somewhat, although in future iterations, I think they could scale more. Either way, it's a cool experience and a good 1st try.

Responsive Design is here to stay and it's something I will be embracing on all future web designs.