Mobile first.

It is almost five years ago today that Luke Wroblewski coined the term mobile first to indicate the need for a paradigm shift in web design. This year will be the year that mobile web users will overtake fixed web access for the first time making his mobile first approach now more relevant than ever.

Cover picture by James Theophane


A mobile first approach is not about designing websites with a traveling user in mind. A mobile first approach is neither about strictly designing a mobile website before its accompanying desktop version. Mobile first is a methodology, a mindset about embracing the constraints and capabilities that mobile devices provide to foster the design of all your viewports. But what are these constraints and capabilities and how can they benefit the overall content?

Screen size

With the immense variety of mobile devices and their different screen sizes, our beloved responsive web design becomes indispensable. It is important to look beyond the actual screens and treat any width with the same amount of love. The mobile first approach contributes to this idea of an internet with a fluid with. It also results in reconsidered navigation: since all items in a small mobile webpage that are not unquestionably necessary will only occupy valuable content space, the fluff and fripperies will probably not show themselves on large devices too.

Performance

Judging performance, mobile cannot compete with desktop devices. Mobile devices often have to rely on their battery and wireless connections, have costly data plans and have processors that can’t outperform any modern computer. Will they be able to do so in the future? Perhaps. But I don’t think that this question will ever be relevant. The point is that regardless of how technology matures, optimizing is always necessary. Furthermore, in a world where a load slowdown of just one second can cost a large webshop millions of dollars, a design approach that’s inherently focused on optimization is the way to go.

Finger size

You can’t compare your finger with the mouse pointer on your desktop but online they do often have the same functionality. A mobile first approach can help to rethink navigation but more important is that it prepares all viewports for touch interaction. With Window’s new operating system, Windows 10, the company has introduced the most touch-friendly desktop OS yet.

Mobile behavior

Since mobile users visit your website on a different medium, it is important to see how people are typically using their mobile devices and why. When looking at this mobile behavior, four different interaction types can be distinguished (source: A List Apart issue no. 337).

  • Lookup/Find (urgent info, local): I need an answer to something now — frequently related to my current location in the world.
  • Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
  • Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
  • Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

These interaction types indicate the wide variety of different reasons a user may have to visit your mobile website. Taking these reasons into account is essential for your visitors that are using a mobile viewport but it also forces you to think about the relevant reasons that your desktop visitors might have.


A mobile first approach to web design does not bring world peace, it wil even make your life harder. But it forces you to focus and enables you to innovate in ways you previously couldn’t. Designing the small viewports will help you build a framework that prioritizes content and facilitates you in making cogent choices for larger viewports. When done right, a mobile first approach will benefit your content everywhere — not just on a smartphone.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.