image 3 devices showing sopra steria homepage screenshots

Why do we design “mobile first”?

What does mobile first mean?

Mobile first design refers to the philosophy that the solution should be designed for smaller screen sizes before creating design solutions for larger screen sizes. This is based on the underlying idea that is it much easier to scale a design up than it is to try and squeeze elements into a smaller area.

This concept came from the development and design approach of responsive web design. This uses “break points” at specified widths in the document to display a different design or layout in response to the width of the browser in which the document is being viewed. This allows for the same codebase to display different layouts in response to the width of the document.

Why mobile first design?

When the responsive design approach first began, many designers were so used to creating designs to be used on desktop or laptop devices that they instinctively started with that type of layout when creating a new design.

This caused a lot of issues and complications, as the information being displayed in a large screen format didn’t display well when being forced into a much smaller screen space. Important information was lost, hidden down a long scrolling screen, or removed altogether as designers decided that users only needed limited information on smaller screens or mobile devices.

The approach of designing for the mobile first, or from the smallest screen size up, means that the designer has to think consciously about the importance of content in the information architecture. As the screen size increases the areas of content can expand and be realigned into layouts that make more use of the screen’s real estate.

Focusing on the information architecture from the beginning means that the most important and noteworthy information is presented where it is easily discoverable. Information of less importance is displayed in areas of slightly less importance, and so on.

This approach lets the presentation of the content in relation to its importance guide the layout of the system.

But the system doesn’t need to work on mobile?

“Mobile first” is simply a name. It was coined when the philosophy was first developed to clearly articulate the need to design websites for mobile devices such as phones and tablets before designing layouts for larger screened devices such as laptops and desktop. Even in such a short period of time the name has become antiquated, but is still in use, even when “smallest screen first” makes more sense.

Even though a system is not to be built to work on mobile devices, the philosophy of designing for the smallest screen that it could be displayed on first, before scaling up to larger screen layouts remains. Thinking about the information architecture in detail before beginning any design will always provide better results.

What are your thoughts on website design? Leave a reply below or contact me by email.

Published by

Damian Gribben

Senior UX Consultant in Edinburgh

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s