Why Mobile First for Responsive Web Design

This came out of a discussion elsewhere but (as pre Fermat’s Last Theorem) the margins were too small to provide a complete answer. 🙂

Responsive Web Design refers to a design process to with the goal to display a site scaled appropriately to its device, and made up of 3 techniques :

• Fluid Grids : with element sizing to be in relative units like percentages or EMs
• Media Queries : to detect the size of the device or browser view port.
• Flexible Images : sized in relative units

Mobile First is a design process (coined by Luke Wroblewski in 2009) with an emphasize on content over navigation, where you scale the design for a smallest mobile device first and then scale up from there.

So a question was asked how mobile first responsive web design relates to the desktop web design (responsive or not).

First of all, I would say that sometimes the navigation or task list is the content, sometimes, and could be the first priority content. (But, Branding is never priority content; Advertising is never priority content.)

In general, “Mobile First” forces a focus on identifying and prioritizing the content: what is absolutely necessary, and how is that going to work/look on a 320px wide device. This is very much in the “Less is More ” web design school of thought.

And, this is often be very, very, hard.

However, this focus it makes it easier to say “no”, which was very difficult when everyone was looking with 1024px + wide monitors. That was why many sites got cluttered : No one could say no, and garbage filled the margins until all you saw was the garbage.

Note: 3rd order content is dealt with Glengarry Glen Ross style.

Once the priority content is identified, you still need to designed it. Then add secondary content / navigation (or indications to it).

As you progress to larger container areas (view ports), you can choose how to resize the primary content, and how to display (if at all) secondary content & navigation, but you don’t want to jump around too much; just flow, reveal and surface.

There are key differences between mobile devices and non mobile devices: a) mobile devices are usually touch enabled, and mouseover hovers don’t make sense or work. b) and you have to make your designs finger friendly rather than mouse pointer sized, unless your users have tiny tiny fingers or large rats. That is where feature detection and Progressive Enhancement come in.

“Mobile First” design is important because it puts mobile device first in the design process.

Rather than design for the desktop first and the shrinking to a mobile device (which is how all those m.website.com sites are designed), it says design for mobile device and the expand to the desktop, and other devices, both in size and functionality.

Not because this is easy but because it is less hard than the other way.

The reason for “Mobile First” is not just because more and more mobile devices are being used instead of desktops (there are); or just because there are fewer less capable “legacy” browsers on mobile devices (there are); but because, at the end of the day, “Mobile First” Design is “Good Design” regardless of the size of the viewport.

And remember, there is no “Mobile Web” / “Desktop Web” split, there is only the Web.