Web Design Priority: Mobile First.

You may be thinking that designing mobile first is obvious, not a new concept and something that everyone is already on board with, but you would be wrong. Despite the powers that be pushing for mobile first design and responsive development, there are many instances in which the world wide web is still somewhat lacking.

Mobile first must be considered as more than design, its focuses on the user experience and their overall journey through a site on a mobile device. It requires more than the obvious awareness of small screen size, it necessitates consideration for how this encounter is different to that on a desktop or computer.

Furthermore, by designing for mobile, you naturally take into consideration and accommodate for all screen sizes and instances of contact with the site. You gain a deeper understanding of the user, and a better strategy for ensuring results are generated from interactions with the site.

The mobile-first approach is a tenet of progressive enhancement. It is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier. Therefore, the smallest of the designs will have only the essential features, so right away you have designed the heart of your UX (user experience).

The opposite approach is graceful degradation. This incorporates all of the complexities right from the start, then strips them away later for smaller devices. The problem with graceful degradation is that when you build the all-inclusive design right from the start, the core and supplementary elements merge and become harder to distinguish and separate. The entire philosophy runs the risk of treating mobile design as more of an afterthought since you’re “cutting down” the experience.

Now you know why mobile first designing is important, here are some of our top tips for getting it right:

• User experience must always come first – a responsive framework for design may help with this
• Display important and relevant information, give them what they want and nothing they don’t need
• Content inventory spreadsheet – agree this with the client first.
• Prioritise content (visual hierarchy) – then work from most to least important.
• Remember 75% are thumb only users – note the inaccuracy and the centre screen focus, apple recommends 44 pixels square for key touch targets
• Make it easy and quick to navigate
• Test on a real device – there is no better way to test mobile than on a mobile device
• Site speed is even more important on mobile devices
• Don’t rely on hovers – there is no hover control for fingertips yet.