A Responsive Web Development Primer

As modern browsers like Google Chrome and Mozilla Firefox become commonplace, web developers are more often given the opportunity to utilize emerging technologies. As a prime example, CSS3 provides an entirely new set of tools to leverage the flexibility of these modern browsers and provide users with an even more satisfying web experience.

What is it?

In a nutshell, responsive development means you're creating a site that responds to the requirements of a user's web browser, whether that be a standard desktop browser, tablet or smartphone. This generally refers to flexible layouts whose elements shift position to optimize the user's experience for the size of the viewport a website is being loaded in.

See it in action

Examples are always useful, so check out bostonglobe.com. If you resize your browser window, you'll notice three different layouts as the viewport size gets smaller. There are also quite a few subtle changes to enhance user experience. One of the most noticeable changes is condensing the navigation into an expandable single item labeled 'sections.'

How's it done?

The CSS3 @media rule and media queries are what make it all possible. Basically, these allow you to set CSS styles based on a user's viewport size. This opens up all sorts of possibilities to rearrange content depending on the device a user is accessing your site from.

Here are a couple quick examples of what it might look like to actually implement media queries in your stylesheet.

  1. @media screen and (max-width: 600px) {
  2. .class {
  3. background: #ccc;
  4. }
  5. }
  6. @media screen and (min-width: 600px) and (max-width: 900px) {
  7. .class {
  8. background: #000;
  9. float: left;
  10. }
  11. }

The media queries above would apply two different sets of styles to a browser with a viewport size smaller than 600 pixels and between 600 and 900 pixels. Anything above 900 pixels would default to the styles outside of those media queries. When building a responsive site, it's important to consider early in the development process whether the largest or smallest version of the site will contain the default styles.

Check this out for a great reference with more examples of how media queries can be implemented on just about any website.

Don't forget to plan

While a responsive website may seem like a must-have for the platform agnostic future, it's important to consider your users and content before going all in. The fact that the same website is going to be served on a desktop computer with a broadband connection and a smartphone with a 3G connection requires quite a bit more planning than the standard combination of a separate mobile and desktop website. Without careful content planning and design consideration a graphics-heavy responsive website could render the site unusable on devices with slower connections or an impaired ability to render websites at the same speed as a standard desktop browser.

Mobile + Responsive

In many cases, it just may not be worth sacrificing the graphics or layouts required to produce the website that fits your needs. In these situations it's not a bad idea to utilize a combination of responsive development and browser detection to serve a minimized version of your site to users on mobile devices with slower connections, just be sure to provide a way for users to switch between the two.

As the number of different devices people use to access the internet increases, the flexibility of a website will only become more important. Responsive web design and development can go a long way toward making a better experience across multiple devices, but it's not a one size fits all solution. As long as the proper planning, analysis and research go into a site, it can produce great results.