Responsibly responsive. Mobile First Responsive Design. Part 1

15 March 2012
Bernard Lange
Frink_Cognifide_2016_HeaderImages_0117

Multiple mobile devices showing same web page

It's no secret the web has become ubiquitous. It's on our computers, phones, game consoles, TVs or even home appliances. With such diversity, came new challenges. How do you design for old, new and yet to come devices, how do you adapt to the variety of screen sizes, capabilities and control inputs? Surely, old "fixed-width-desktop-only" approaches will not work, and there's a need for a shift in paradigm of how sites should be designed and implemented.

If you're in a hurry, I have a short summary of what "Mobile First Responsive Web Design" should mean for you!

  1. Think in responsive units like em's and percentages.
  2. Begin with a lightweight mobile default
  3. Embrace the CSS cascade - add what's needed to enhance for wider screens
  4. Keep layout fluid within the resolution ranges
  5. Use multiple files with media queries inside
  6. Responsive design (media-queries) is not enough, won't work for JS
    • feature detection for JS is required
    • detecting can be done on client side, or server side eg. like Wurfl or Device Atlas.
  7. Responsive images
    • start with the smallest
    • detect bigger sizes and serve bigger images
    • do not resize huge images down for mobile device (bandwith, CPU, latency)
    • no easy way out
Now, the rest of you who are just rearing to know more, shall we dig straight in?

Quick recap on Responsive Web Design

For many of us, responsive web design refers to a methodology and term coined (a while ago) by Ethan Marcotte, probably seems like the most viable idea or even perfect solution. And that is partially true, since at its core, responsive web design's goal is to embrace uncertainty and prepare your site to be flexible.

But, what's exactly behind responsive web design? Speaking purely in technical terms, it takes three core ingredients:
  1. flexible, grid-based layout
  2. Flexible images and media
  3. Media queries, a module from the CSS3 specification.
Flexible layout, you say? It's nothing new. It's been around since dinosaurs, so what's all that noise really about? In short, nothing. But combined with new tools we've been given nowadays (media queries) and a pint of creative thinking, these can be a powerful solution for contemporary challenges.

I strongly urge you to read Ethan's ALA article on responsive web design to get the grasp of RWD basics. I'll recap here real quick. Imagine a desktop site, primarily designed for 1024x768 resolution.

Desktop Site Unoptimized

Now, start resizing down your browser window and observe. Certain parts are becoming obscured and the nasty scrollbar rears its ugly head. That's not really adaptive.

Desktop site shown in narrow browser window with scrollbar

With responsive web design (RWD), you convert this layout to its fluid counterpart (changing pixels to percentages), take a bunch of media-queries and tweak styles for smaller screen widthS. E.g - if the right column does not fit anymore, let's make it narrower, drop it below the main content or maybe even hide it (if it's not that important).
@media screen and (max-width: 768px) {
    .column {
        float: none;
    }
}

But that's not enough, once the screen gets smaller and smaller, new problems arise! Navigation gets cramped, line length becomes too narrow, images too wide for their containers. So, new media queries are added, hefty css tricks for scaling images to fit on small resolutions are developed.

Usually, working through different resolutions, we end up with a linearised version of the layout, with all the parts happily placed one after another: Responsive web design example shown at different resolutions After such a curation your css might look similar to this:
//basic styles
.column {
    float: right;
}

@media (min-width:320px) {
    .column {
        float: none;
    }
}
@media (min-width:480px) {
  ...
}
@media (min-width:780px) {
   ...
}
@media (min-width:960px) {
  ...
}
@media (min-width:1100px) {
  ...
}
Where each part addresses different screen width range overriding desktop styles to solve its problems (adjusting elements width, placement, font sizes, backgrounds etc.)

A note on media query break points

Breakpoints presented above are just examples, so please do not take them blindly. Actual breakpoints you'd choose, would obviously depend on the devices your users use, intended supported device classes, their screen resolutions, media sizes on your site and/ or type of the content you primarily serve.
Also, it might be, you'll need much less or more of them. Quite an interesting approach helping identify break points is to define them at resolutions at which the design breaks visually not at resolutions defined by particular device screen dimensions.

But it's all plain wrong for mobile

Let me start with a quote from a article on mobile performance by Jason Grigsby:
All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code.

The Usual RWD approach as proposed across the web, works top-down. Starting with desktop resolutions, progressively tweaking certain parts of design to accommodate it to smaller screen estate, solving other problems on the way. As a result, we end up with a bigger, more bloated, sometimes more JS heavy solution to solve mobile use case. That's just plain wrong.

The general pain points are:
  • devices with no media-query support
  • big desktop size images treated with max-width
  • more data to download for mobile

 Let's look at these issues in a little more detail now.

Devices with no media-query support

Devices without media-query support will not see any of your precious tweaks that you've done for smaller screen sizes. While this might be fine for IE, which is a desktop browser, serving desktop layout to older BlackBerry phones, most Nokia phones, Windows Phone (until the Mango update) and Windows Mobile phones sounds like a bad idea.

Big desktop images for small screens

Originally, RWD proposes a concept of fluid images, which when treated with:
img {
   max-width: 100%;
}
will resize nicely when their container shrinks. But, what's the point of sending 600x300 pixels 200K image to a phone in order to resize it to 150x75 pixels?  That's wasted bandwidth, CPU time, battery power, not to mention that quality and readability of such images often deteriorates due to resizing algorithms.

More data sent to mobile devices

If you start with desktop version and adapt it to smaller screens, you'll usually add a bunch of media queries in your css disabling  specific styling you have added for full layout (eg. removing floats)
@media (min-width:320px) {
    .column {
        float: none;
    }
}
 That's not really effective.  Lots of unnecessary code only to remove the effect of other code. We can do better than that.

To be continued

In the next part , we'll take a look at mobile first responsive web design and how it can be applied to create flexible mobile friendly site.