What experience comes first: mobile or simple?

Today, for a personal project, I was looking for a way to make images adapt to the device they were being accessed on. My only two requirements were as follows:

  1. Images should scale down in size as the viewport width gets smaller.
  2. A mobile browser should not need to download the large image.

The simple CSS technique of setting the maximum width of <img> tag to 100% (img {max-width: 100%;}) works great making images render at their native dimensions and only take up the width of 100 per cent of its container. But it does not satisfy my second requirement.

Just a couple of clicks after I started my research, I came across Matt Wilcox’s adaptive-images.com. He recorded a video explaining the method in all its details, too. At the very beginning of the video, Matt described what responsive web design means to him and how it relates to mobile first.

I work for a local government, the municipality of Örebro. Last week, my colleagues and I were presented with two approaches for what is going to be an overhaul of our not-yet-mobile-ready website orebro.se. The first was responsive, safe and well-tried. The second was mobile first, uncomfortable and unknown. Since the presentation, I’ve been thinking about how responsive web design relates to the mobile first approach. Here’s an excerpt from an e-mail I sent to my colleagues today (I borrowed largely Matt’s ideas):

I think it is important for us to have the simplest citizen experience first instead of mobile experience first as a starting point. The simplest experience often means mobile, but not always. It is also important that we make sure that every user gets the most efficient results, when they visit our site. As to the two approaches, I prefer a combination of “desktop first” and “mobile first” (in any case, the end product will be responsive), with a focus on user experience before the viewport size.

Watch Matt’s presentation here:

Adaptive Images is a video by Matthew Wilcox on Vimeo

Leave a Reply

Your email address will not be published. Required fields are marked *