Mobile first web design, what do we mean? Well exactly that designing for mobile first and then everything else after.

As we know mobile browsing has surpassed desktop browsing so it’s increasingly more important to ensure that your mobile presentation is faultless.

Within the digital industry it has been recognised that designing your website for the smallest screen first, is the hardest option but will yield the best results. Answering any UX (user experience) issue for mobile generally gets the designer to prioritise the content and core assets/elements of the website. It allows us to create a hierarchy of primary, secondary and tertiary content.

If you were to take the conventional or traditional method of designing a website, then you would start with the desktop home page and scale it down accordingly. There is a tendency here to focus on the main elements of UX within this home page and when you reduce that down to mobiles the message is diluted as it seems to be more of an after thought. As opposed to prioritising mobile design and then letting the design organically evolve and scale up from this starting point.

Where to start

The better your website formats on mobile, the better it will format across other devices.  Whilst designing for mobile first certainly creates more design problems, it actually starts to make you think far more pragmatically when it comes to prioritising the content.

By making the designs content focused it naturally makes the website more user focused also. Content is at the heart of every website and its ultimately why users will be engaged to your website.

It’s not un-common to differentiate content for mobile users and desktop users. It helps to create user scenarios, which will help you to make these content driven design decisions.

Starting with mobile first presents the most obvious problem, screen size. Screen size is an issue, but it actually refines the design and makes the designer create natural break points within the content.

The process

It’s always best to start with the content. We like to create a content map so that we have an understanding of the content and all the required content elements that will sit within the new website.

Once you have collated all the content elements then it’s a good idea to then create a content hierarchy. This way then you know which elements should be most prominent within the design.

Create a mobile wireframe so that you can start to identify the natural break points within the website design. Once you have this correctly adjusted for mobile then start to scale it up to tablets, notebooks and bigger over sized screens.

One of the most common UX faults we see is buttons and links that are not easily accessible and actionable on a mobile device.  For mobile devices we need to ensure that buttons and targets that the user is to press with their fingers are easily accessible and big enough for the finger to touch.

To hover or not to hover? When it comes to mobile first its safe to say that

we cannot rely on the hover to make the design interactive. The biggest thing to remember here is that we currently do not have a way that we can action a
hover with the user on a mobile device.

Most users that interact with a mobile will be used to engaging with applications on their device. Designers should do their best replicate these design experiences. This will make users feel familiar, engaged and will encourage them to interact with your website.

Image size does matter. The mobile screen is fairly limited in size we have already established this. However large and poorly formatted images are going to create major issues with the UX.  Images need to display correctly on mobile this is a design must!

Testing testing testing, seems obvious right? Concepts must be tested on a real mobile device. There is no better feedback than experiencing how effective your design is first hand on a mobile device.

This post gives a pretty good overview of some core elements that need to be considered when designing for mobile devices. Its important to understand the content map and website architecture and the synergy between these two plans.

It can be hard to differentiate between primary, secondary and tertiary content. It should be noted that you feel like everything needs to be included for the mobile responsive version of the design. This is not the case, take confidence in your content hierarchy and work the remaining content into the design in the larger device sizes.

Grey Coffee offers bespoke web design, web development and digital consultancy to businesses in Nottingham and all over the UK.

We are happy to talk through any new projects or how we can support your business needs.

If you would like to get in touch with us, then email us or call us 0115 798 0699.