What Is Mobile First Web Design?

Wednesday, September 28th, 2016

Mobile First Web DesignWebsite designers typically approach the design process focused on how it’ll look on a desktop computer, then they optimise the website for mobile devices.  Driven largely by the rising popularity of mobile devices, mobile compatibility is no longer an optional extra or secondary goal, it is now moving to the forefront of the design process.

Mobile first web design shifts the focus from the more traditional desktop-centred design approach to initially creating your website specifically for the mobile experience.  Not surprisingly, this shift effectively reverses the traditional approach. Beginning the design process for smaller screens, with the intention to progress to the desktop environment, makes sense when more users are accessing website content on their mobile devices than anywhere else.

What Does This Mean For Website Design?

Placing the focus on designing for the small screen requires a modified approach to design and development.  User input strategies need to be examined, in a conventional desktop environment the user has access to a keyboard and mouse, these things are not usually associated with mobile devices, making traditional navigation, input and calls-to-action sometimes more difficult.  Necessary content, simple navigation, layout and the user’s purpose and intent also become important elements to consider.  Emphasis needs to be placed on improving user experience, making it as effortless as possible while still delivering the essentials. 

What Are The Benefits Of A Mobile First Approach?

As the market for mobile devices continues to expand the mobile first design approach has the potential to future proof your website, making redesigns and upgrades more straight forward across multiple platforms. Some of the more immediate benefits are:

  • The needs of mobile users are more closely met
  • The specifications and capabilities of the mobile platform are maximised
  • Designers can focus on essential content, structure and navigation features
  • Improved navigation elements enhance overall user experience
  • The perception of credibility and online presence are increased
  • A simpler more functional user-driven response to design

Examples Of Good Mobile Website Design Elements

Etsy An online market place for vintage or handmade items.  Etsy recognises most visitors to their website are searching for something in particular and offers two easy to use navigation options on the front page, a search bar and categorised menu.

Evernote  An app that enables users to store and access notes, images, and web articles across devices.  The mobile website is clean and simple, with large call-to-action buttons ideal for touch activation.

The World Wildlife Fund.  WWF is the world’s leading conservation organisation.  WWF’s online presence features engaging imagery and text on some the animals and environments they work to protect, the content is relevant and easy to read.

Booking.com.  A worldwide online accommodation booking service.  The Booking.com website knows that visitors are there looking for accommodation, it does not distract the user from their purpose with unnecessary information.  The search form provides helpful suggestions for search terms minimising typing required and is the only item visible above the fold.

Express A US based online clothing store.  Multiple images can be tricky on small screens, importantly as seller of clothing, Express uses big, clear images but instead of loading new pages to display multiple images, slowing down the user experience, Express allows the user to swipe sideways to view more pictures.

Embracing mobile first design methods is just part of a much wider trend towards a more user-centric approach to our interaction with technology.  

Free Expert Online Marketing Tips

Sign up to Avatar's monthly newsletter...

Mark started working in the Internet industry in 1994. He went on to startup New Zealand Tourism Online, Avatar and other companies. Mark enjoys meeting with clients and strategising online marketing solutions.

Avatar Blog Homepage

Get A Quote

We'll get back to you quickly and can also offer a free marketing review call.