6 tips for creating perfect mobile-first website designs

At Authentic Style we put design at the forefront of all that we do.

In 2019 63% of Google visits were made by a mobile phone, so it should be of no surprise that we adopt a ‘mobile first’ attitude towards designs when we start to work on a website design project.

But what does mobile first mean? Here we cover six considerations that we make when designing mobile first and how these have a positive effect on the user experience.

authenticstyle-6 tips for creating perfect Mobile-first web designs

1. Think small first

Mobile first design is a strategy that argues when you create a website or app, you should start wireframing or designing the smallest screen first and work your way up to larger screens.

Essentially, it’s about delivering the right user experience to the right device.

If your site works well and looks good on a mobile device, it will translate better to all larger devices.

 

2. Putting content first

More importantly though, is that the mobile-first approach is also a content-first approach.

Mobile has the most limitations (be it screen size, bandwidth, data usage etc) so designing with these limitations in place from the get-go forces you to prioritise content over any unnecessary flourishes.

Sometimes mobile users require different content from desktop users. Usually the device-specific content can be adjusted by answering the question of what will the user appreciate more (perhaps a module that was previously scrollable in mobile needs to be swipeable with a finger gesture, for instance).

 

authenticstyle-6 tips for creating perfect Mobile-first web designs 1

3. Navigation should be easy

Consider that navigation should be clean, easy and intuitive for the mobile user.

Should you use a ‘hamburger’ style menu icon (3 lines stacked on top of each other) to symbolise how to open the navigation? Most users are familiar with this these days, but not all so consider your demographic and what would work best for them.

Our other piece of advice would be to keep dropdowns and submenus to a minimum. Whilst these can help declutter a desktop design, often mobile users require the quickest route possible to find the information they’re after.

 

4. Optimise your site speed for mobile users

Thinking mobile first, we’ll want to get our page load times down to an absolute minimum and also ensure the user isn’t using a huge amount of data bandwidth when accessing your site.

Consider reducing the number and size of images on a page. Maybe, replace images with larger, more expressive typography or shapes that capture the interest of visitors, making them more likely to not only see the web page in the first place, but stay there.

 

authenticstyle-6 tips for creating perfect Mobile-first web designs 2

5. Think about video

More than 60% of online video plays were seen on mobile devices in the third quarter of 2018. Video footage can play a huge part in enhancing a mobile user’s experience and engagement with the site. Consider video blogs or a simple video introduction to your company on your homepage.

On most mobile devices, video needs to be initiated by the user before it can play, so avoid things like autoplaying video backgrounds on the mobile version of your site. Instead, use optimised poster images and let all video be something that the user has to initiate themselves with a tap of the finger.

 

6. The same experience, no matter what the platform

We’ve talked about creating the ‘best experience’ for each respective platform, at the same time we also need to consider how the experiences should be similar to each other. The key with responsive design should always be to ensure that nothing is ‘taken away’ from the experience of using your site just because it is being viewed on a smaller screen.

Try and ensure that all functionality is present across all platforms. Although it is possible to hide design elements within browser breakpoints, we should always try and work on the basis that all content should be present across all screen sizes. The trick is to find the happy medium – the right layout and sizing for the right screen width.

 

This should cover the basics on how to approach a design with a mobile first attitude. Thinking small first has become increasingly critical to most web projects we undertake here at Authentic Style. It makes for a better user experience all round and helps ensure we focus primarily on content and not clutter.

Would you like to be notified each time we post new digital media?