Responsive Web Design

For most situations, a technique called responsive web design (RWD) is the best solution for providing a good user experience across desktops, laptops, tablets, smartphones, and other devices.

Unless there is a good justification for it, all new websites and web applications should be built using the RWD technique.

What is responsive web design?

Responsive web design is an approach for building websites that adapt to different devices based on screen size and the device's capabilities. The aim of RWD is to provide a single website that works on all devices.

A prime example of effective responsive web design is Microsoft's home page, as illustrated below:

Microsoft's home page

The Microsoft.com website, viewed from various devices. Left to right: desktop, iPad (portrait), and iPhone (portrait).

In the example above, you'll notice that several design elements change from device to device.

  • The global navigation bar changes into a clickable menu with icon.
  • The red text box in the promo area changes size and position. Clickable navigation arrows appear in the smartphone version.
  • The photo of the smiling man shrinks as the screen becomes smaller.
  • The placement and orientation of the "Discover" header and navigation changes.
  • The 3 items in the "Discover" section collapse into a single column in the smartphone version.

Despite these differences in presentation, the same content and navigation options are kept intact across all devices.

The term "responsive web design" was coined by Ethan Marcotte in a May 2010 article in A List Apart.

Why responsive web design?

The biggest reasons for RWD are matters of user experience and the practicality of needing to only manage 1 website behind the scenes.

People often switch between devices while researching products and services

According to research by Google, between 60 and 80% of today's Internet users use multiple devices to browse the web and shop online, depending on the task performed. Many users start their research on their smartphones and continue it later on a tablet, laptop, or desktop computer.

You want for the experience of your website to be as consistent as possible across the different devices that people use. If a visitor found a piece of information on your site using their smartphone, then they should be able to find it again easily on their tablet or laptop. If you present completely different information in each context, you will surely lose and frustrate visitors.

Only 1 site to maintain

It's simple logic, really. If there are 2 different versions of your website, you've already increased the complexity of managing your website significantly. Basically, you end up with 2 systems and user experiences to monitor and maintain.

If your content differs significantly on each version of your site, or if you're serving different content altogether, you also have to remember to update and review both versions of your site when you need to make changes.

While having a responsive website still requires you to monitor your site on different devices, you can relax a tad more, knowing that at least the exact same content is being presented on all devices.

Challenges introduced by responsive design

Every technical solution has trade-offs. Responsive web design is not a perfect solution and has its own disadvantages that should be considered.

Performance

Perhaps the biggest criticism of responsive web design is the challenges it introduces in keeping your website performing fast. In order to serve one website for all devices, you end up needing to include extra code that must be downloaded and processed by the devices.

This can prove challenging if your website is accessed often by users who are on slow Internet connections, particularly slow cellular connections.

Responsive websites are harder to build and maintain

It is indeed harder to build a responsive website than it is to simply ignore mobile devices altogether. During the development of your website, you need to keep your eye on how the implementation affects the user experience on different devices. Certainly, this will increase the effort needed to build your website.

Fortunately, the majority of these problems are mainly experienced during your up-front investment of building the site (or while building major additions to an existing website).

If your content strategy is solid and your web designers are competent at building websites using RWD technique, then long-term maintenance issues should be comparable to a non-responsive website's.

Browser support

CSS @media queries, a linchpin feature of the RWD technique, is not supported by all versions of Microsoft Internet Explorer. If you must support users of Internet 8 or older, then you may experience major issues in implementing your website using RWD.

It's worth noting that you can use a technique called Mobile First to code your responsive website. Using Mobile First, the small screen size version of your website ends up being presented to users of Internet Explorer version 8 or lower. This isn't ideal in the desktop environment, but at least you are presenting a workable version of your website to users with older browsers.

Issues of browser compatibility for RWD dimish each and every day as users of Internet Explorer upgrade their browsers. This section will be removed when it is largely no longer an issue.

Alternatives to RWD

Sometimes there are reasons to not implement responsive web design. Following are some common alternatives.

Don't worry about mobile

One alternative is simple: don't worry about having any sort of mobile version of your website. The implementation will be less expensive, and all users will still be able to use your website.

If your website is not responsive, users will usually need to pinch and zoom on smaller devices like smartphones. This experience is not ideal but is workable.

Lastly, if you initially build your website to not be responsive, making it responsive later can be quite challenging and expensive. RWD is more of a foundational practice and not simply something that you "add on" to your website.

All in all, this is generally not a good path to take. Mobile is continuing to grow at a rapid pace, and your website needs to be ready for it.

Separate mobile site

Some websites will serve an entirely different interface with different code if they detect that you have a mobile device (particularly if it's a smartphone).

This approach can be useful if there is a very specific need to have an interface streamlined for the context of using a smartphone. A minimal amount of code is downloaded, and web designers can focus their efforts on just the mobile interface, rather than weaving it together with the full website's code.

Mobile version of the New York Times website

The New York Times provides a separate mobile version of its content at mobile.nytimes.com.

Disadvantages of creating a separate mobile site

  • You end up with a separate website to update and maintain in addition to your full website.
  • Users will often switch devices when researching products and services. If you provide a separate experience and different content in each context, that will often lead to confusion and lost sales.
  • Sharing links between the 2 versions of the site via email and social media often leads to frustration, especially when a reliable link to the "full site" is not easily accessible.

Fluid-width layouts

Some older websites have layouts that will shrink or expand to the width of your device. Each column in the interface is set to be a percentage of the screen's width, and the layout sticks to those percentages no matter what.

This approach is fairly predictable and low-maintenance. You know that each column in the layout will always take up a specific percentage of the screen.

Primary disadvantage of fluid-width layouts

This approach ends up looking really bad when the screen width is narrow.

A website with a fluid width

A traditional fluid-width website looks messed up when you're using a device with a narrow width. In this example, some of the main paragraph text is so condensed that only 1 word appears on some lines.

How to implement responsive web design

The RWD technique mainly involves use of CSS @media queries and some other CSS coding techniques, but sometimes JavaScript and server-side technologies are also utilized to enhance the user experience.

Responsive grid frameworks

A responsive website can be coded fully from scratch, but "reinventing the wheel" is an absurd task after you consider the wide array of responsive CSS frameworks available. These frameworks handle mundane implementation details and cross-browser support, and they often add additional styles for commonly-used interface elements.

Best of all, the popular CSS frameworks are peer-reviewed by thousands of web designers, so they are usually free of major bugs.

My favorite CSS grid frameworks are used in most of my new web projects:

Mobile First

Along with RWD comes another common approach called "Mobile First." The Mobile First approach involves building the responsive website's small smartphone version first—and then enhancing it from there for larger screen sizes.

Mobile First is a decision, and I have decided to use Mobile First on all RWD projects.

This approach tends to be cleaner than building the website starting from the large desktop version because the smaller mobile version forces you to be intentional about prioritizing content and design elements. When developing the mobile version, you need to answer questions like, "Which content is most important? Which content is second-most important?" Et cetera.

From there, you can adapt the larger-screen versions of the website to better utilize the extra screen space, and you already have your design priorities defined by the mobile version.

The term "Mobile First" was first coined by Luke Wroblewski in a November 2009 blog post.

  1. Why you need a responsive design for your website, Live Editor Blog
  2. Responsive Web Design, A List Apart
  3. Responsive Web Design book by Ethan Marcotte
  4. Responsive web design, Wikipedia
  5. Microsoft Home Page, an example of effective responsive web design
  6. The New Multi-Screen World Study, Google Think Insights
  7. Mobile version of New York Times website, an example of a separate mobile site
  8. Zurb Foundation CSS framework
  9. Twitter Boostrap CSS framework
  10. Mobile First, Luke Wroblewski

Last updated: