Mobile First Design

With the rapid rise in popularity of mobile devices, and with mobile devices becoming a central part of many people’s lives, it is no surprise that there are many more considerations when designing for the web. Recent statistics show that mobile devices now account for a significant proportion of the total traffic on the web, and so designing with mobile in mind is very important.

Some numbers:

  • The percentage of mobile web use increased in just two years by 69% in the USA, 183.43% in Europe, and 192.46% for Asia
  • 71% of mobile users expect a site to load fast
  • 74% of users will abandon a site if loading takes longer than 5 seconds

(statistics from http://zurb.com/word/mobile-first)

This I hopes highlight two issues, firstly that mobile is definitely on the rise, but secondly, we should be looking not only to optimise the design for mobile, but also performance, as part of the whole user experience with a device.

What is Mobile First?

It’s not new the idea that you have to take mobile web into account when designing for the web. Historically we have seen the creation of separate mobile websites, and the rise of the responsive design. Both of these aimed to adapt existing websites to the mobile web, by either producing a cut down website that was served to mobile devices, or adapting the existing website to display nicely on a mobile device.

Mobile first brings a new idea to the table. Instead of designing for desktop, then thinking how we display this on a mobile device, we should design for the mobile device, then think how we should adapt to a desktop device. This is a mindset of ‘progressive enhancement’ rather than of ‘graceful degradation’.

Why does Mobile First make sense?

The key thing mobile first does is it makes us design with the greatest set of constraints first. We begin by building an optimised website, with the key content being the main focus, and only serving the minimal amount of data to provide the best performance possible. We then build on top of this as the constraints are removed. With this philosophy we start by looking at exactly what matters, the content, and our website builds around this, often leading to better desktop experience as a result.

Further to this we have to consider mobile for user journeys. We need to identify the key flows through our website, and make these as simple as possible on a website. Large, touch friendly navigation, short user journeys, easy access to key parts of the website, all of these make sense in a desktop environment, but they become vitally important in a mobile environment.

The best way to think about mobile first is to use feature detection. The website is built assuming we only have access to the very basic functionality (we can decide what our base requirements will be and what we will support). We then detect what features are available, whether it is features like geolocation and an accelerometer, or the screen size we have available, and then add features, or rearrange content based on this. We are only ever really thinking about building on top of our base, rather than the traditional mindset of removing elements for mobile devices.

Performance in Mobile First

So you’ve decided that mobile first may have some basis for consideration, but how would you go about designing mobile first. The first thing you need to consider is displaying your content in a small viewport. We write our basic CSS for this small viewport. We then provide media queries to handle the screen getting bigger. This differs from the current common practice of adding media queries to handle small screens.

The next thing to consider is serving up images. We want to provide small, low resolution images to fit on the small viewport, but also to use the minimal amount of bandwidth, something that becomes more important when we take into consideration mobile contracts and data usage limits. Then as the viewport increases in size we can serve larger images as we can begin to assume that we are on desktop machines with faster connections. The <picture> element is designed to support this  in future, but until this becomes supported, we have to look for alternative solutions such as the PictureFill JS library. It can add a great amount of work however to provide many different sizes for each image, so it may be an idea to provide an image service that you can request sizes of images, and it will handle re-sizing the image on the server to provide you with the optimised image for the device.

You also have to consider videos and files. Many files are not going to be supported on a large majority of mobile devices. Looking to use native browser implementations (ie the video tag) for video is key. We also have to consider whether we provide mobile optimised video streams, and improve the stream quality on desktops, or whether we let the user decide on the quality of the video (as youtube does).

The main issue we have in developing for performance is that we don’t actually know what connection the user is on. In general we have to assume that a small screen size, or a user agent string representing a mobile device, means the user could be on a poor connection and optimise accordingly. There are discussions about providing some sort of API to discover the bandwidth of the client, however whether this is feasible is a question, so I certainly wouldn’t be relying on it appearing anytime soon.

Designing for Touch

The other point to remember is most devices use a different method of interaction to your regular desktop: touch (rather than mouse and keyboard). This method is imprecise and requires a number of changes to our usual UI. Key interaction elements should be large (not necessarily a bad idea anyway), and easy to touch. This however brings us a problem as we have a small viewport, and want a larger navigation menu, so we have to consider a reactive design to start with a collapsed menu and a menu button, and then expand this out into a full menu when the viewport becomes larger.

We also have the ability to support gestures. To speed up navigation on touch devices we can detect and react to swipes, pinches, and possible other gestures. There are a number of JavaScript touch events we can use to detect and react to gestures, and libraries that aim to help us in this respect (take a look at hammer.js for example). It’s important to keep user journey’s as simple as possible on mobile devices to make sure we keep the user experience as friendly as possible.

Summary

It is clear that mobile devices are becoming increasingly popular for browsing the web. There are a great variety of devices as well, from basic mobiles with a browser, to tablets with great capabilities and processing power as well as larger screens. It is difficult to provide a website tailored to every device, so responsive design is an excellent way to provide one website for all.

Mobile first is a great design philosophy that aims to provide us with the ability to target what is available. The idea of progressive enhancement means that every device is considered on it’s capabilities, and if we implement this correctly, enables a good user experience across all devices, fully utilising what each device offers. To make your website feel like it belongs on each device is going to keep users of every device come back time and again.

Leave a Reply