Responsive Design: Build it Once and Build for All

One of the most resilient web trends to come out of 2012 is responsive web design. In the past, mobile browsers were weak, while websites served watered down content on a separate site, often under a domain different from the desktop version. Responsive layouts take advantage of the latest CSS to resize the same HTML elements to appropriately fit desktop, large television displays, and mobile devices.

Mobile Mishaps and Myths
For years, it was assumed that mobile traffic was a novelty and its users were in a hurry. Developers would implement text-only versions of their sites which would strip away many of the features of the full site on a separate domain and have a different URL structure entirely. The dumbed down pages did render slightly faster, but every other experience was diminished for the users.

These practices came from a time when feature phones and featureless Java web browsers were commonplace. Over the past half-decade, more powerful phones running standard-compliant browsers, such as Chrome and Safari, found their way into consumer’s hands. With the introduction of newer mobile browsers, users were more capable of viewing desktop pages, but many of the sites did not scale gracefully to smaller form factors.

Fast forward to today and businesses, developers, and search engines are already taking responsive design into the mainstream. This new standard of web design practically eliminates the headaches of yesternet, such as maintaining separate code bases, mobile-only URL structures, and slow device detection redirects that can fail and hurt search engine ranking.

If you care about SEO, listen to Google.
Except under certain circumstances, you will want to gets along with search engines. Search engine optimization, or SEO, is just about as ubiquitous as email or SMS. Since Google is by far the leader in search, anyone interested in ranking at the top of their results needs to play by their rules. Luckily for webmasters, there are several guides to ensure your website is easily and effectively indexed.

Google supports most mobile site configurations, but the search giant strongly recommends using responsive web design. They emphasize that your visitors should be able to retrieve the same HTML using the same URL, no matter what devices you are trying to access it from.

The industry standard to detect mobile traffic is by reading a visitor’s user agent: a string of text which identifies their browser version and operating system. While it’s possible to catch most handheld devices, user agent detection is error-prone and spoofable. Adding a redirect to your site also increases your page’s load time, which the company’s latest search update considers to be unsatisfactory.

If you are running a mobile-only site or are returning mobile-friendly HTML from the same URLs as desktop users, this requires additional labor to ensure your site is properly tagged to avoid being penalized. Sites with a poorly configured mobile site could be seen by Google as having duplicate content. Responsive layout sites serve the same HTML on the same URL to all devices, because the focus is on content and not the browser.

One Page to Render, One Internet to Rule Them
The technology that makes responsive web design possible is simple enough: code an HTML document once and use a CSS3 feature, "media queries," to toggle styles depending on the width of the browser window. Javascript or plugins are not needed to achieve the effect and, when coded properly, the page falls back gracefully on legacy browsers.

A notable example is the web design blog Smashing Magazine (smashingmagazine.com), which is -- no coincidence -- a great resource for those interested in responsive web design. Loading the page and resizing the browser horizontally will show how the page’s navigation collapses from a list to a drop down and the images automatically fit the width of the container. The user will never scroll horizontally on any screen.

Existing web pages can be retrofitted with responsive code, but this would be counter intuitive. Taking full advantage of responsive code on your own site requires knowledge of the latest CSS and usability standards. CSS is easy to pick up, but learning how to logically convert a website to fit different screen sizes takes lots of experimenting and research.

Bootstrap (getbootstrap.com) is a boilerplate HTML template created by a few Twitter employees which lowers the learning curve of making responsive website layouts that are cross-browser safe. Using a 12-column grid system, developers can easily code a layout that will rearrange itself on lower resolutions. Bootstrap also comes with various already styled html elements, like inputs, buttons, and applications like dropdowns.

Responsible Web Design
Mobile websites are no longer relevant to users needs. With devices coming equipped with cameras, sensors, and an always "on" connection, it’s important to give handheld users a better experience. Knowing the issues with running mobile-only sites puts the benefits of responsive web design into a better perspective.

As cellular networks get faster and processors become more powerful, responsive design becomes more and more like the holy grail of web development. Serving the same content to all users regardless of screen size has become widely accepted as the best solution for the foreseeable future. It solidifies the belief that while there are more ways to access the Internet, there is still just one Internet.