The Move Towards Responsive Web Design

mobile Internet passes desktopMobile Internet access is forecasted to overtake traditional fixed Internet access by 2014. More and more people are (finally) realizing just how important it is to have a website that is “mobile friendly.” However, “mobile friendly” no longer only applies to mobile phones. With the advent of tablets and other mobile Internet devices, web developers are finding an increasing need to build websites that are not only accessible, but easy to read on smaller screens.

Before, having a mobile friendly website meant serving mobile site visitors a more simplified, scaled-down version of your website. Typically, early mobile site designs focused heavily on navigation and were usually void of images to enable quicker load times. Since smartphones and tablets are able to render websites in their entirety (graphics and all), screen size becomes the biggest issue. If your site doesn’t conform to mobile sensibilities, fonts and navigation are reduced to Lilliputian proportions when viewed on smaller screens, making your site’s usability a real issue. Enter responsive design.

So what is responsive web design?

The term was coined by Ethan Marcotte back in May 0f 2010 in an article he penned for A List Apart Magazine. It’s basically an approach to web development in which a site is designed to adjust itself based upon screen size or the type of device it’s being viewed from. Or as Wikipedia puts it, “a site designed to provide an optimal viewing experience–easy reading and navigation with a minimum of resizing, panning, and scrolling–across a wide range of devices from desktop computer monitors to mobile phones”. Seems simple enough, but it can also be used for more than just adjusting a site’s layout to conform to different device screens. Responsive design can also be used to deliver unique content tailored to each specific device. Not only are you able to serve up your full site with scaled down navigation options, but you can even offer a completely different user interface that will allow for easier use on smaller screens (a la traditional mobile site design).

Here’s an example of a responsive site as it looks in a desktop browser:

responsive site example

And the scaled-down site:

responsive site scaled-down example

Part of the allure to responsive web design is the idea of having one site that can function across all platforms. This obviously makes site updates more effortless since you’re typically only updating one site. However, there are also various advantages to having the ability to serve up custom content based upon the device that’s accessing it. Assessing the needs of your users will go a long way in determining whether responsive web design, in one form or another, is the right option for your website.

As Google points out, they recommend following “the industry best practice of using responsive web design for mobile devices.” Responsive design uses the same URLs and the same html but different CSS to determine how the page is rendered. One easy way to see if a site is “responsive” is to adjust the size of your browser. If the site adjusts accordingly, then the site is built with responsive design.

Finally, here are a few reasons why Google recommends responsive design over dynamically serving different HTML on the same URL or using separate mobile URLs:

  • Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Google’s algorithms assign the indexing properties for the content.
  • No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience.
  • It saves resources for both your site and Google’s crawlers. For responsive web design pages, any Googlebot user agents needs to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh.

Need help creating a mobile website? Call us toll free or click here to schedule a consultation on our affordable mobile website development services.

The following two tabs change content below.

Rusty

Rusty heads up the creative division, or “magic kingdom” as he likes to call it, here at CM. When he’s not designing he can be found working on developing a sense of humor.

Latest posts by Rusty (see all)

  • Michael

    Great post – and example – of a responsive design. When I talk to clients, it’s a pretty easy sell when you say it’s three-sites-in-one.

    • Hey – speaking of which, you’ve got a great responsive design over there at FourTopper! Nicely done.