Six Responsive Layout Techniques
- Tip 1: Use 'Mobile First' Media Queries
- Tip 2: Support Older IE Versions with a Polyfill
- Tip 3: Use a Very Wide Header Image to Suit Multiple Screen Widths
- Tip 4: Use Viewport Meta Sparingly, and Let Users Zoom
- Tip 5: Serve Larger Images for High-Resolution Displays
- Tip 6: Avoid Using Images and Other Separate Asset Files
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.