What you need to know about 'Mobile First' design

‘Mobile first’ is a concept created by Luke Wroblewski that prioritizes mobile experiences. This means that instead of the typical design process, where you design the desktop version of a site, then the tablet version, and last the mobile version, you start with your mobile site and grow it from there.

A mobile approach forces you to really focus on what your site needs to communicate to your users. With a limited amount of space in your screen you will need to prioritize the actions and content available on your site.

Benefits

• Reach more users (mobile devices are increasingly becoming the preferred device to consume content)
• You can take advantage of Geolocation for marketing and tracking purposes.
• Design focused on core content and functionality, eliminating fluff and improving user experience

Testing with one eyeball and one thumb

When designing for a mobile first approach, you should think of your users as having ‘one eyeball and one thumb’. Smartphone users are using their devices and navigating websites in many different situations and in most cases, they are distracted. Think about where you use your phone: at home, at work, during lunch or meetings, as a second screen while watching TV, walking down the street – the list goes on. In all of these situations, you’re multitasking while using your mobile device, so in order for users to have the best experience on your mobile site, your site should require minimal concentration and just one hand for a quick and simple interaction.

Mobile navigation using one hand

Remember that most of your mobile users are only using one hand to navigate on their device. This is something to keep in mind when designing items in your site like buttons and how a users navigates through your site (i.e. swiping, tapping, etc.) See an example of one hand navigation testing for “Polar App”:

Performance

By forcing your design to be simple and effective, it can be a very good thing for your site's performance. Another performance benefit is that mobile first CSS lets you separate non-mobile CSS into a different stylesheet - which means the experience will be optimized for low bandwidths.

Overall experience

Mobile first is not a quick fix to your website experience. It requires careful planning and execution, but if done correctly, payoff can be huge.