Responsive design for all screens

Published by | Thursday, March 21st, 2013

Is your audience getting the whole picture?

Is your audience getting the whole picture?

Responsive design has long been on the minds of web designers and developers, and over the last couple of years, it has become a focal topic among industry insiders and clients alike. Is the site responsive? Should it be responsive? Is responsive web design a good idea, or are we focusing on it as an exclusive solution to a much broader set of problems? Going to web design conferences these days you hear as many takes on the topic as there are people, and a common theme among them is that responsive design is profoundly confusing and complicated.

But does it have to be?

Responsive web design—the original definition

The term responsive web design was first coined by Ethan Marcotte in a May 2010 A List Apart article. In it he defines responsive web design as using CSS3 media queries, fluid grids, and flexible width images to produce layouts that change and reshape to fit different screen widths and shapes. This concept came about when Marcotte was working on the redesign of a newspaper site and wanted to tackle fitting content onto an iPhone screen without forcing the visitor to scroll sideways or zoom in and out to see everything.

The idea was revolutionary and spawned an entirely different way of thinking about web design. But with new ideas come new problems. For one, it quickly turned out that using CSS3 media queries, fluid grids, and flexible images to fit a site designed for a large desktop monitor on a small mobile screen wasn’t the best idea. To make this work, designers had to download large images and content to the mobile phone only to resize or hide them on the phone, wasting valuable bandwidth. And designers were frustrated with the reality of having to design multiple layouts for multiple screen sizes instead of just one layout.

To curb these issues, new concepts emerged, such as mobile-first design, server-side enhancements, unobtrusive JavaScript, browser sniffing, progressive enhancement, and other ideas, but none of them was a silver bullet. On the other side of the debate stood the native solution/app development crowd shouting, “Responsive design is stupid! Build mobile-only sites or apps instead!”

The responsive revolution

While the web literati fought over the definition of responsive web design and whether it was a good idea or the beginning of the end of the web, web designers and developers were working to get a grip on this new reality. Regardless of definition or strategy, modern websites needed to be accessible across multiple screen sizes. And so a responsive revolution began.

Across the web, more and more designers and developers started applying their own varying interpretations of responsive web design principles to their sites, with equally varying results.  And as time progressed, so did their creativity and ingenuity (see http://mediaqueri.es/ for thousands of examples). The age-old “design in Photoshop first, then build” approach began unraveling at the seams as designers and developers turned to the browser as their design surface. In response to this move, new tools appeared online and the bigwigs in the industry started working on solutions like Adobe Edge Reflow.

The breakpoint design fallacy

New design patterns emerged in the midst of this, chief among them breakpoint design. Working with responsive layouts is challenging because we’re used to seeing content as fixed, not fluid. To get around this, designers and developers quickly realized they could set predefined breakpoints and design toward them. That way they didn’t have to worry about true fluidity but could instead create a set number of predefined pixel-perfect layouts to fit predefined screen sizes. Emerging from this came a set of responsive design media-query templates that shipped with breakpoints for the standard screen sizes, including iPad horizontal, iPad vertical, iPhone horizontal, and iPhone vertical.

A common opinion among designers at the time was that most people accessing a website use one of the standard screen sizes, so they should design for these sizes alone and be done with it. This produced a simple design approach firmly rooted in the old way of doing things: statically. And it ignored the very essence of responsive web design; that is, we need to design for the future, and we don’t know what the future will bring.

The result of the breakpoint design approach can be seen today on a large percentage of purportedly responsive websites: resize your browser window to a screen size not defined and you’re cutting off content. And tools like Edge Reflow run the risk of perpetuating this problem.

Of course, some will say this isn’t really an issue: you can just define new media queries to fit the new screen widths. But that’s ignoring the simple reality that you do not know or control the width of your visitor’s browser window. Think about it: Windows 7 allows you to snap any window to half the width of the screen, and in Windows 8 you can dock any window to roughly one-quarter of the screen making the number of screen-width permutations virtually infinite.

A way forward—and a new definition

When responsive web design was first defined back in 2010, the intention was likely to get people to think beyond fixed layouts and use modern technologies to make the content on websites accessible to everyone regardless of their choice of platform, browser, screen size, or even method. However, as the term became popular, it became interpreted as a strict definition pertaining to the use of CSS3 media queries, fluid grids, and flexible images alone to achieve this goal. Whether Marcotte agreed with this evolution of his original intent or not is beside the point. The reality is that this definition has become inflexible, focused on technologies rather than results. What we need is a new definition, something that encapsulates “the use of modern design and development techniques to create consistent web experiences across current and future browsers, devices, and screen sizes.”

When we build responsive websites, CSS3 media queries, fluid grids, and flexible images are just a starting point for making sites responsive. And while our designs may use breakpoints, they also accommodate all the screen sizes in between—because our job is to give end users (visitors) an experience they expect regardless of how they choose to access our sites.

When making my site projects truly responsive I also use server-side scripts to serve up appropriately sized images for the receiving screen and to exclude content from download when necessary, I use JavaScripts to move content around on bigger screens for more desktop-friendly experiences, and both server side and JavaScripts are leveraged to track the type of device being used and serving device–relevant content when necessary. Think about it: Why provide an iPhone user with a link to the Google Play Store when you don’t have to?

The tools at our disposal allow us to provide end users with an experience that feels appropriate and provides the functionality they require to use our websites and services, regardless of the devices and screens they’re experienced with. It’s time we move past the discussion of what responsive web design means and start talking about how we can use all of the technologies at our disposal to make web experiences consistent and truly responsive.

Learn more:

All Responsive Design courses at lynda.com
Morten Rand-Hendriksen’s courses at lynda.com
Start a free trial membership at lynda.com

Share this:Share on Facebook24Tweet about this on Twitter9Share on Google+4Pin on Pinterest0Share on LinkedIn3

lynda.com - start learning today

Tags:


5 Responses to “Responsive design for all screens”

  1. Alto Miller says:

    How do we handle responsive websites and animation? do we eleminate animation altogether except for the desktop version?

    • Morten Rand-Hendriksen, lynda.com author says:

      @Alto: It all depends. You will notice that some websites do the opposite: They have special story sliders that only appear on mobile devices. Generally speaking you want to serve up appropriate sized content (images and video) to the device so you don’t waste valuable bandwidth forcing large content onto small screens.

  2. Kathy says:

    I’m new to web design and just starting to explore responsive design. Where in the world do I start? I understand media queries, etc. but don’t have any experience with java scripts or other server side scripts and how to use them. Help!

  3. linda says:

    Good information provided thanks

  4. Advertising Agency Dubai says:

    Nowadays, Responsive layout is much important because 80% of people use smart phones. Thank for the post!

Leave a Reply