Mobile First Design - 5 Top Tips

What is mobile first design I hear you say? Typically when developing & planning website it’s designed for a desktop, then modified to smaller screen sizes like tablets and mobiles.

Now, considering that smart phones and tablets are sold almost 3 times more than desktops, you might find that some consumers may NEVER see the desktop version of your website! Interesting thought! Wouldn’t it make sense to design website for mobiles & tablets before the desktop version?

Not convinced? Well, it’s predicted that by 2016, there will be 10 billion mobile web devices worldwide, exceeding the population of 7.3 billion!

So how do you do it? Like any well designed site, PLAN!

• Clearly define the requirements and plan for only what is required.
• Avoid irrelevancies and extra items commonly found on desktop versions
• have a clear goal in mind

With that in mind, here are some top tips!

1. Structure Content First

Try to think of your site’s content without any interface, work out what is the content focus and it’s hierarchy. This should allow your content to go anywhere no matter what context it may be in.

2. Easy accessible search

Given the limited screen sizes of mobile devices it’s important to provide an easily accessible search function so users can find what they are looking quickly & easily.

3. Content before navigation

The content is what the user is there for, they need to be able to access the content immediately. It is frustrating for the user to scroll through menu after menu to access the content they need.

4. Build for speed

The best practice is to load in mobile optimized images by default, then conditionally load in larger images only when needed. Other items include reducing HTTP requests by conditionally loading content & using CSS to keep things lightweight, simple & easy to maintain.

5. Use mobile technology

To enhance the users experience, take advantage of mobile-centric features like touch events, telephone links & geolocation.

Starting mobile first design practices may be difficult at first, but the benefits will soon become clear. You will soon have websites that reach more people and enhance the user experience. The sooner you adapt a mobile first design mentality (designing to scale up not down), the sooner you can be prepared for whatever digital landscape lies ahead.

Interested in more information?

Some of the sources I used to put this together are....

• James at Web3 gave an excellent presentation about Mobile First Design at the Brainerd Web Design group in March 2013:

Brainerd Web Design April 2013: "An Introduction to Mobile First Development and Design" from James Banks

• http://www.abookapart.com/products/mobile-first
• http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
• https://www.html5rocks.com/en/mobile/responsivedesign/