Responsive web design is a mindset

Responsive Web Design
Photo courtesy of Jeremy Keith

Some people think that responsive web design is the answer to every single one of their problems: “Conversion rate’s low? Well, is our site responsive? No? I think I’ve made my point.”

Responsive web design is just as much a solution as it is a mindset. It’s more than look-what-happens-when-you-resize-your-window thing. It is how you approach your little part of the world wide web in the first place. What is the purpose of your presence online? Who is your target audience? What goals are your trying to attain?

Digging deep into the why’s can help you figure out the how’s.

This post is part of the #blogg100 challenge—100 blog posts à 100 words in 100 days.

Why mobile first isn’t dead

I read the article, Neil Mohan. Do you know what mobile first or responsive web design is? Because you are wrong. Mobile first is alive.

Back in 2011, Luke’s idea came from offering users an opportunity to accomplish their tasks “without the extraneous detours and general interface debris that litter many of today’s websites”. Still true today.

Mobile first isn’t just “focusing on mobile” and “solving yesterday’s problems”, as you note. It’s never been mobile only or responsive exclusively. Every device has opportunities to utilise. Designing for device- and audience-specific experience is paramount for achieving complete customer experience. Still true.

This post is part of the #blogg100 challenge—100 blog posts à 100 words in 100 days.

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 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 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