Responsive Web Design

A responsive website delivers an appropriate design to the device that accesses it. A mobile phone screen would render a different design than a large desktop monitor.

A quick test to determine whether a site is responsive or not is to resize your browser window. Does the layout noticeably change? If it does, it mights the website design is responsive.

Try resizing the browser window on these sites:

Media Queries

You've probably heard of CSS Media Queries before. Media queries allow developers to conditionally deliver CSS:

@media print {
  .no-print { display: none; }
}

The above snippet will hide elements with class no-print for visitors printing out a website. These elements will still be present on the screen.

Turns out, media queries can use the device width as a condition:

@media screen and (max-width: 320px) {
  /* targets screen widths <= 320px */
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

@media screen and (min-width: 321px) and (max-width: 500px) {
  /* 321px <= screen width <= 500px */
}

min-width and max-width are the most widely used for responsive web design, but there are a few other useful ones:

orientation, which can be portrait or landscape
aspect-ratio, a width to height ratio in this format 1280/720
color, device bit depth

The Viewport

Although a mobile phone's screen size may be 320px wide, it still tries to render a scaled down version of the page at 980px. For example, the New York Times will render on mobile phones as it does on desktops — just with everything scaled smaller.

In order for media queries to work correctly, you'll have to force the browser to render a non-scaled version. This can be done with the meta tag:

<meta name="viewport" content="initial-scale=1.0,width=device-width" />

The above says don't try to scale this website and use the exact device width for rendering. Now our media queries will work as expected.

Flexible Layout

I tend to use CSS inside max-width media queries to override a site's default CSS. A common approach is to have a fixed width layout for larger screens and a fluid width layout for smaller screens:

/* fixed width 960px and centered website */
body { text-align: center; }
#frame { width: 960px; margin: 0 auto; text-align: left; }

/* make it fluid on smaller screens */
@media screen and (max-width: 960px) {
  #frame { width: auto; margin: 0; }
}

There are a lot of layout tweaks you can do for smaller screens. Unfloat images where it makes sense. Wrap long lines in code blocks to prevent horizontal scroll bars. Superfluous elements can disappear.

@media screen and (max-width: 320px) {
  img.previously-floated-image { float: none; }
  pre.long-code { white-space: pre-wrap; }
  .superfluous-element { display: none; }
}

Flexible Fonts

I like to use larger fonts on smaller screens. Instead of overriding each individual element in a media query, it's easier to use the elastic method.

For the elastic method, the body's font size is set using px. All other elements whose font size differs should use em:

body { font-size: 14px; }
h1 { font-size: 2em; }  /* 2 x 14px = 28px */
h2 { font-size: 1.5em; } /* 1.5 x 14px = 21px */

Now the media query can simply change a single element's font size instead of dozens of font sizes:

@media screen and (max-width: 320px) {
  body { font-size: 18px; }
  /* other elements using em are now based off of 18px */
}

Some Considerations

Consider using larger target areas on smaller screens. Desktops and laptops have the luxury of precise cursors. Mobile phones and tablets viewers use their less precise fingers.

Along with losing the mouse cursor, all hover interactions are loss. Does your site use a lot of tooltips? You'll have to figure out a way to teach users without using tooltips.

Earlier, I made the assumption that a smaller width meant low bandwidth. There are a lot of assumptions based on viewport width we can make, but it's best to back up these assumptions with web analytics.

Is it a good business decision to make a mobile friendly version? Before you start, make sure a significant portion of your viewers are visiting your site with a small screen.

Media Queries

The Viewport

Flexible Layout

Flexible Fonts

Some Considerations

Further Reading