Responsive Web Design and Mobile First

A common complaint with regards to responsive web design is that all content, scripts, style sheets and images are always (read as: also on mobile devices) loaded. The loading of the resources normally isn’t regarded as a problem (because of the fast broad band connections that are assumed for desktop users). For mobile devices however (so they say) you are better off building a dedicated mobile website, that only serves the resources that are absolutely necessary for the visitors.

In the real world

Ofcourse it’s hard to argue against this logic. After all, for every visitor (desktop, tablet, mobile, etc.) it is an optimal situation when only the resources that are required are loaded. The problem however, is that in the real world mobile websites are often mobilized versions of the desktop website that are still loading lots of unnecessary resources. For example I rarely find mobile websites that don’t load Javascript or only load images that are absolutely mandatory. What are these people building a and maintaining a separate website for then?

False assumptions

Furthermore this logic is based on several assumptions, that in many cases are in fact false. For example, it is assumed that mobile users are surfing over a slow data plan (linking screen resolution and bandwidth) and that mobile users are doing ‘on the move’ activities (linking screen resolution and user goals). However, as Luke Wreblowski mentions many mobile users will use their phones from their houses, which often have fast wifi connections. Mark Kirby chips in by saying that based on the perceived screen resolution of the device you can’t make any assumptions about the context or user goals.

Based on the above, what can we do to make sure that only one version of the website will be loaded and yet at the same time load as few resources as possible? Luke Wroblewski is proposing the following: work mobile first.

What is mobile first?

A new approach that states that website should be developed with the mobile user as a primary point of focus. When it is assumed that the mobile user (often) has a small screen size, (often) has a less than optimal internet connection and (often) is in a hurry, that forces you to change the way you look at your website.

All the sudden the space above the fold is only a couple thousand square pixels (instead of over a million on desktop monitors). This makes it extra important to think about what content you will display there. Is that large photo really so important on your main page? What about that ‘short’ history about your company’s history?

Improved performance for everyone

Mobile first actually matches up really well with responsive web design. When a website is built based on the idea of mobile first, both the fast broadband desktop user and the slow data plan mobile user will benefit from have to load as few images and scripts as possible.

What is really important?

Because content on mobile phones is usually displayed in a single column, the priority of the different elements on your page becomes really important. While on a desktop computer (or even tablet) you could get away with displaying important elements ‘high on the page’ or use color or even motion to attract attention to it, on a mobile phone you can’t. Aside from analyzing which elements should be displayed on the page in the first place, a mobile first approach forces people to also think about the order in which their items will be displayed.

Conclusion

In conclusion I want to state the by applying the principles of mobile first to a responsive website, you can have the best of both worlds. You can create a website that loads the fewest possible resources (while still showing all content on all devices), but at the same time optimize for every screen resolutions without needing multiple versions of your website for that.

Comments are currently closed.