Mobile Commerce

Beyond Media Queries

While creating flexible layouts is important, there’s a whole lot more that goes into truly exceptional adaptive web experiences ... We need to go beyond media queries in order to preserve the web’s ubiquity and move it in a future-friendly direction.

In the first two parts of our series we've taken a look at some issues you're likely to run into when employing Responsive Web Design (RWD) as a mobile solution.

Some of the challenges are with experience, some with development. Long page loads and the lack of distinctly mobile features creates a poor experience.The drastically different page structure requires a painful rebuild.

While they are exceptionally innovative tools, media queries, fluid grids, and flexible images are not - and were never meant to be - a complete mobile solution.

While creating flexible layouts is important, there’s a whole lot more that goes into truly exceptional adaptive web experiences ... We need to go beyond media queries in order to preserve the web’s ubiquity and move it in a future-friendly direction.

Brad Frost

Beyond Squishy: The Principles of Adaptive Design


So while RWD is the visible tip of the iceberg, there are many other elements to adaptive design. We'll look at two such elements that can be coupled with responsive design to solve some of its more problematic experience issues.

Responsive Web Design and Mobile First

The approach that stays closest to home with responsive style tools is "Mobile First" development.

In the early days of the responsive era (back when the CSS3 media query was just a lil' tike you could bounce on your knee), the pervasive approach was to take a desktop site, and, through these amazing new fluid grids and flexible images, have it gracefully collapse as the browser narrows.

Perhaps the best example of this would be the Baker Street Inquirer sample site Ethan Marcotte created for his seminal Responsive Web Design article.

Media queries apply the width-appropriate CSS styling option, allowing any site to be laid out without horizontal scrolling. In the Inquirer sample site, by the time it has reached a smartphones width the page is displayed as a simple single column.

However, since the mobile device is being asked to process a desktop site, this top down approach often results in visitors having to download unnecessary logic or content.

Around the time responsive was beginning to turn heads, another design philosophy called Mobile First was also gaining traction.

The fundamental concept of Mobile First is to think of design from the mobile up, not the desktop down.

A great example of a Mobile First solution is this sample t-shirt store page created by Brad Frost. This approach creates more customized mobile experiences and drastically cuts back over-downloading.

However, as Mobile First sites scale up to the desktop, they tend to be rather simple. And, in some instances, "dumbed-down" to the point of hurting the desktop experience.

Both the top-down and bottom-up approach works fairly well for simpler sites, but it's a give-and-take process. Each format dictates concessions for the other. When sites grow in complexity, more and more concessions are necessary to maintain the single front-end.

Server Side Components

More than anything, Responsive Web Design with Server Side Componentes (RESS) is about making a device adapt your site less, and adapting your site to the device more. The difference between the two is subtle, but it's there Adaptability works both ways, and often with responsive design too much of the load is on the client's side.

By moving some of the process to the server, a site can begin adapting before it even hits a vistor's browser.

The three core features of RESS are:

  • Device Recognition - RESS identifies devices before it begins delivering the page content
  • Server side selection - Based on the device, the server selects the appropriate media and page components
  • Responsive Content - Common content can still be styled responsively to adapt to device variance
    By only delivering the content and logic the specific device needs, RESS avoids the over-downloading and slow page loads. And by delivering selected page components RESS allows for creation of better experiences. The server can pre-select and deliver a nice wide drop-down page navigation for a desktop visitor who has the precision selection and hover capability of a mouse, and it can deliver an accordion menu for mobile visitors using a touchscreen.

And all of this content can still be responsively styled. So while one tablet might have slightly different dimensions than another, the tablet site experience can easily adapt to that device variation.

RESS makes a ton of sense. It seems to fix all that ails RWD, right? But there's just one problem: RESS is only a philosophy. While you have your choice of RWD frameworks - like Twitter Bootstrap, Base, or Tritan - the teaming of those frameworks with server side components is a young technology.

It's wonderful and great, but there hasn't been a RESS platform out there to develop on. Without a practical RESS solution, anyone looking to use it needs to create their own personalized solution, and that means custom coding. A lot of it.

Next Time

RESS is too smart of an approach to fall by the wayside. But it's also prohibitively difficult to independently develop as a solution for your site.

In the conclusion of our RWD series we'll take a look at an alternative approach that's emerging, one that harnesses all the power of RESS and leverages existing web assets, allowing for fast and powerful creation of compelling mobile experiences.

Want to take your site to the next level?
Join the Layer0 Newsletter for the latest updates on performance.
Thank you! You've been added.
Oops! Something went wrong.
Thanks for registering, you're being redirected!
Oops! Something went wrong.

Don't wait another second. Go instant.

Get started in seconds