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.
- 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.
- 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).
- 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.
- 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.
- 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.
- 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.
