The Drawbacks of Media Queries for Responsive Design

By Ben Sargent on Thursday, October 17, 2013

The Drawbacks of Media Queries for Responsive Design
As we covered earlier, media queries are a powerful tool that enabled the responsive design movement. By providing different CSS rules based on screen width, a web page can “respond” to its environment by changing the layout.

Grid Systems


The traditional workflow for designing a responsive site was to create a grid-based layout that worked well at desktop size, and transitioned to a columnar layout for smaller screens. By taking advantage of CSS’ cascade, a developer could create rules for desktop and then override them for mobile. 

One of the most popular responsive layout frameworks, Bootstrap, used this approach (up until version 3) and it quickly became common practice.

The disadvantage of this approach is that mobile devices, usually the most constrained in terms of bandwidth and memory, need to download the entire desktop layout as well as the mobile-optimized layout. Many of the rules don’t apply to a mobile device, and this increases the file size and reduces rendering speed.

Many new frameworks have emerged, such as Bootstrap version 3, which reverse this approach; the initial layout is specified for mobile devices, and the desktop rules are layered on top of it. This reduces file size, but still requires the developer to make smart choices about the breakpoints where layout rules differ. Tablets often get stuck in the middle.

Images


Media queries power a page’s layout and styling, but they can’t modify traditional HTML properties such as the <img> tag’s src attribute. Often a mobile device should use a differently sized or cropped image, and devices with high pixel-density displays should be sent a higher resolution image.

One common approach is to use CSS’ background-image property for a block element as opposed to an image tag, but this isn’t always feasible and can have the unintended side-effect of downloading the image twice if not used carefully. Another approach is to use JavaScript to rewrite the src attribute after the page has loaded, but this is not optimal on mobile devices. 

The emerging srcset attribute promises to fix this issue, but it has not yet been widely implemented in common browsers. 

Conclusion


The industry is moving towards solutions to these common problems, but these are emerging standards which may not be implemented quickly or correctly, and don’t provide much value to today’s devices and browsers. As the device ecosystem grows, it becomes impossible for any single developer to account for the wide range of screen sizes and device properties. 

Soon we’ll reveal how Moboom’s adaptive design approach solves these problems without requiring developers to relearn responsive design principles.

DevKit Templates

Find the website template you want in the Moboom Market