Mobile-First Responsive Web Design

Posted in Responsive Web Design

This is the third article in a series that I was asked to write for work. The previous articles discussed the changes in workflow and some of the technical ingredients of responsive web design. In this final article, we dive a bit deeper and discuss some more advanced techniques in order to optimize a website for mobile performance as well as legacy browser support.


We previously wrote about changes in workflow and basic techniques of responsive web design, so now let’s dive into something more challenging: optimizing website performance for mobile. While we’re adding complexity, let’s go ahead and add a dash of legacy browser support as well. This may seem like an odd mix of requirements, but let’s face it: Sometimes we find ourselves in a position where we have to simultaneously forge ahead with modern technologies while ensuring that we don’t forget about site visitors with less capable browsers.

To demonstrate some handy mobile-first methods, we’ll be referencing techniques used on the Media Multiplyer site. It’s a fairly small site (only a few pages), but it was a perfect opportunity to explore experimental front-end development techniques.

Luckily we’re not alone

One of my favorite things about the web development industry is the wonderfully open community of developers who are willing to share their knowledge and expertise. Brad Frost is one of those generous and impressively talented developers. He has written extensively on the subject of mobile and responsive web design, and his expertly curated collection of responsive patterns is an excellent resource to which I often refer. He’s also written an article, “Creating a Mobile-First Responsive Web Design,” that I consider a great primer on mobile-first techniques that we can use in our work today.

I was already excited about responsive web design, but admittedly I had certain reservations about performance on mobile devices. For instance, if we build a site that looks and works great on our large desktop monitors with high-speed local area networks, how will that same site perform on phone screens with a significantly slower data connection? In Brad’s article, he references Luke Wroblewski’s concept of mobile first, which encourages teams to “focus on only the most important data and actions” in an application. In other words, consider small screens first and concentrate on what’s really important for the user: easily accessing high-quality content.

Brad’s mobile-first technique starts by including two style sheets: a basic style sheet that gets downloaded on all devices, and an enhanced style sheet that only gets downloaded on tablets and larger screens. The basic style sheet has colors, typography, and minimal layout styles—the stuff that looks good on a small screen. The enhanced style sheet does heavy lifting by layering on more complex styles for layout, flexible grids, large background images, etc.

The advantage of this technique is that small-screen mobile devices will only download what’s included in the basic style sheet. Larger screen devices, such as tablets, laptops and desktop computers will benefit from both style sheets.

Don’t tell me. Show me.

Let’s take it one step at a time and go through the Media Multiplyer site code together. The first thing we need to do is set the screen width to the actual width of the device using the meta viewport tag. This will start the process of optimizing our site for a mobile experience.

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

We’re accomplishing two things: We’re setting the viewport width to the width of the device as well as setting the zoom level to 100% (that’s the 1.0 part at the end). It’s important to note that we’re not disabling the user’s ability to zoom the page itself by adding “maximum-scale=1″ or “user-scalable=no” properties. You may have seen these in the wild before. Or you may have run across sites on your mobile device that didn’t allow you to zoom in and wondered why. With our simplified meta viewport tag, the user will still be able to pinch-to-zoom to take a closer look at the images, text and other content.

The next step is to include both style sheets. We link the basic style sheet as usual:

<link rel="stylesheet" href="basic.css"
   media="screen, handheld">

…and then we link the enhanced style sheet using a clever media query trick:

<link rel="stylesheet" href="enhanced.css"
   media="screen and (min-width: 40em)">

We’re downloading the enhanced.css file, but also adding a media query attribute that specifies a minimum screen width, preventing it from getting downloaded on small screens. So, in turn, any large background images or other assets specified in the enhanced style sheet won’t get downloaded either.

You may also have noticed that we’re specifying the “min-width” media query with an em-based instead of px-based unit of measurement. This will create a proportional media query that will help users who have used the zoom feature in their browser to increase text size, etc. In our example, a media query of 40em is calculated with the following simple formula:

640px target ÷ 16px context = 40em result

In other words, a 40em “min-width” media query is roughly equivalent to 640px, assuming a baseline font size of 16px.

The other important thing to note is the use of a “min-width” instead of “max-width” media query. If we used a “max-width” media query, the enhanced.css file would also download on devices with small screens. We’re going to continue that trend of using “min-width” media queries in our enhanced.css file as we progressively enhance our styles for larger screens. So, for instance, we could add a media query like the following:

h2 {
    font-size: 21px;
}

@media all and (min-width: 52em) {
    h2 {
        font-size: 24px;
    }
}

In this example, the font size for our h2 elements will be 21px by default and 24px for everything with a screen width larger than 52em (about 832px).

We can even change the layout from two columns to four columns:

.column {
    width: 50%;
}

@media all and (min-width: 48em) {
    .column {
        width: 25%;
    }
}

Of course, there’s just one small catch in our plan: Our original media query attribute is not supported by Internet Explorer 8 since it doesn’t support CSS3 media queries. So site visitors browsing our site with IE 8 will only get the basic styles. This could be a problem because we need to support IE 8 in our project, so what can we do?

Consider the options

On the subject of support for IE 8, there are a few options to consider:

  1. Do we simply ignore IE 8 since we’re concentrating on “emerging technologies” for our site?
  2. Do we accept the fact that IE 8 will get a basic yet functional experience compared to modern browsers?
  3. Can we somehow enable IE 8 to take advantage of our enhanced style sheet?

Admittedly, the first option is probably not a practical solution. Internet Explorer 8 usage still represents a significant proportion of the overall browser market, so it’s important not to ignore it.

While the second option is better, we can go one step further.

Another option to consider is redundantly referencing the enhanced style sheet for IE 8 only. This creates an additional server request, but that shouldn’t be a big deal since we’re restricting it to non-mobile devices. Here’s how to achieve that:

<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="enhanced.css">
<![endif]-->

So now non-mobile IE 8 devices will download the enhanced style sheet and all is good, right? Well, not quite yet. Our enhanced.css file will naturally contain media queries too, so we’ll need to add some CSS rules specifically for IE 8 to fully cover our bases.

If we wrap the html element in a conditional comment, we can conveniently add a class for IE 8:

<!--[if IE 8 ]> <html lang="en-US" class="ie8"> <![endif]-->

Now we can duplicate the media queries we’ve added in enhanced.css and target IE 8 with a CSS rule of its own. For example, we could add a CSS rule like this:

.ie8 h2 {
    font-size: 24px;
}

Fine-tune the details

Using this method, we can go through the enhanced.css file and make sure that IE 8 will get the same (or at least similar) styles as all the modern browsers. We don’t necessarily need to duplicate every single style included in the media queries. None of the fun CSS3 features, like rounded corners, box shadows and gradients will be available to IE 8, so there’s no need to include them. But we can tailor the experience for IE 8 to include the important elements like layout, background images and font sizes.