Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

Six Responsive Layout Techniques

  • Print
  • + Share This
  • 💬 Discuss
Opera's Chris Mills, author of Practical CSS3: Develop and Design, provides top tips for optimizing your web layouts for as many different devices and users as possible.

This article provides six tips to help you implement effective responsive designs, working with media queries, viewport, and more.

Tip 1: Use 'Mobile First' Media Queries

Among other options, media queries provide us with the ability to serve different sizes of background images to browsers with different viewport sizes. For example:

header {
  background: url(large-masthead-image.png);
}

@media all and (max-width: 480px) {
  header {
    background: url(small-masthead-image.png);
  }
}

The concept behind this example is good—a small-screen device such as a mobile phone doesn't need a large masthead image to fill its space. This technique is also advantageous in terms of file size—a smaller image is smaller in "weight," and therefore better for mobile devices, which are likely to be on a slow network. The trouble with the example above is that the default rule outside the media query loads the large masthead image for all browsers, because it's not being told to do otherwise. Then, for narrower screens, the media query kicks in, and the smaller image is also loaded. This design works against what we hoped to achieve.

To solve this problem, use the "mobile first" technique, in which you do things the opposite way around—you make the default rule the mobile rule, and kick in the rule for wider browsers when the viewport goes over a certain width:

header {
  background: url(small-masthead-image.png);
}

@media all and (min-width: 480px) {
  header {
    background: url(large-masthead-image.png);
  }
}

With the code structured this way, the small masthead image is loaded for all browsers, and the large image is loaded only for wider screens. Much better.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus