Mobile-first design is sketching, prototyping and designing for mobile-first and then scaling up to the larger screens from there. To design for mobile-first, designers must prioritise the most important elements of the website. The benefits of designing for mobile-first include better ranking, conversions and better user experience on mobile. This can be crucial for your business. To help you design your site for mobile we have come up with 6 design principles that you might not have considered. We will also look at some great examples of mobile website design!

1. Consider how the device is used

When designing for mobile, it is really important to consider how the device is used. Most people hold their phone in one hand and will use their thumbs to reach the screen. Some areas of the screen are more accessible than others as you can see by looking at the image below. With knowledge of how phones are held, we can put important content and call to actions in the most accessible areas. 

Look at gestures

As well as looking at where users can reach visually, it is also important to consider the gestures that are used on mobile screens. For example, you could tap, double-tap, press, drag, pinch and swipe on a mobile screen. It’s important to keep these kinds of gestures in the natural zone (see image below) to maximise the quality of user experience.

By considering where you are going to place your content, this will help you identify which parts of the website are of most importance. If you are going for a mobile-first approach to your design it will be much easier to design the desktop version of your website as you will have already prioritised the order of your content.

Image: smashingmagazine.com

2. Remove unnecessarily large features such as the navigation bar 

Why you should drop the navigation bar

Navigation should be quick and simple on mobile websites. Space is very limited and critical on mobile devices, so content on the homepage should be prioritised. Large features such as a navigation bar can clutter the homepage and take up lots of unnecessary space. By dropping the navigation bar and other such features, you are maximising the potential of your website. 

How to design your navigation bar

When designing the navigation for your mobile website, it is important to consider how many links your website has, whether you need mixed menus and whether the navigation matches the overall feel of the website. The most important and commonly visited pages should be listed first and should be the most accessible. 

Of course, a navigation bar is still necessary for a desktop site, as it can be very helpful for users to find what they are looking for. 

Hamburger menu

To replace the navigation bar, you could use a ‘hamburger’ menu. This allows users to still easily navigate the site but means they are not presented with too much content at once on such a small screen. It is called a hamburger menu, as it looks just like a hamburger, and in the same way, is designed to save space! There are many reasons to use a hamburger menu for your mobile site, as it’s easily recognisable, it can make your website look clean and your user is not overwhelmed by too many choices. In turn, this will help improve the user experience. A hamburger menu will also help you to properly categorise all of your pages and keep your website organised. 

Image: Red Stapler, YouTube

Studies have shown that ‘people are 10x more likely to make purchases when presented with less choice.’ This study backs up the idea that the simpler your mobile website, the better the user experience will be, meaning your users are more likely to reach the end goal, be that purchasing a product or service or getting in contact with you. 

If you have a relatively small website content-wise, then you could create a single-page layout for your mobile site, but this would only work in a few instances. 

When designing the navigation for your mobile site, it is important to consider how many links your website has, whether you need to mix menus and whether the navigation matches the overall style and feel of the website. 

How can this benefit your website if you are going for a mobile-first approach? 

By designing the navigation for the mobile site first (using the mobile-first design approach), this can be hugely beneficial as you will have had to narrow down and identify the most important parts of the menu and figured out how to keep the navigation simple, so when setting up your desktop site, the navigation set up will be a lot easier. 

3. Make sure that you have a fast load speed by optimising file sizes

Mobile sites should have great performance, and one of the best ways to reduce the bounce rate and increase traffic is to increase the speed of your website. There are many ways to increase the speed of your website, and one of these is to optimise and minimise file sizes. You can read about 10 other easy ways to speed up your website here

4. Improve the contact page by linking your phone number

‘Click to call’ mechanism 

User experience is always important when designing websites, but it is crucial when designing for mobile. Every step should be as simple as possible to keep the user engaged. One way to do this is to link the phone numbers and addresses on your website so that when you can click on the number it will go straight to the user’s phone dial. This will save the user time flicking between the website and their phone app, or copying and pasting the wrong number, all of which could deter them from contacting you. 

Often, the goal of a website is to get the user to contact your company and potentially make an inquiry. With this being such a popular goal, it would be hugely beneficial to make sure that the user experience for the contact page is the best it can be. 

Location

Whilst probably less important than the ‘click to call’ mechanism, another thing you can do to improve your contact page is to add a maps link to your business address, so users can automatically find out where you are located. 

Whilst these tips seem like small things, they can completely change the success of your website as they will increase the quality of user experience. 

5. Get rid of pop-ups 

Pop-ups can be annoying, let’s face it. Whilst they might be very beneficial for your desktop site, you might want to reconsider using intrusive pop-ups on your mobile site. In 2017, Google announced a soft penalty for ‘intrusive interstitials’

Having annoying popups that distract the user from their goal can greatly decrease the quality of user experience. To try and prevent people from doing this, Google has introduced penalties. If you use too many intrusive pop-ups, this could greatly affect your search rankings! 

6. Use collapsible sections 

When your content is ‘squashed’ into a smaller mobile browser, the page will inevitably have to be longer, and the user will have to scroll further to find the information they are looking for. If this is the case for your website on a mobile browser, or you think it will be, you might want to consider using collapsible sections. Another term for these collapsible sections is accordions. These sections will only show the header of sections and have an option to expand. Therefore users can more easily find the section they are looking for without having to sift through lots of unnecessary information. 

Examples of some excellent mobile-first designs 

Evernote

 

  • Clear and simple design
  • Bold colours to catch the attention of users
  • A clear call to action
  • Not too much content crowding the homepage 
  • Hamburger menu clearly visible in top right corner of the screen 
  • Eye- catching carousel with engaging illustrations

Google maps

  • A clear search bar at top of the page
  • The main part of the page (the map) is placed in the centre of the page (the natural zone), and the map can be moved by a few easy gestures
  • A clear call to action for ‘directions’ button and phone number for the location

Typeform

  • A clear and simple theme, professional looking
  • A clear call to action for both ‘try it for free’ and ‘sign up’ buttons, helping to achieve their goal
  • A clear hamburger menu visible, with an easy, simple range of choices. 

Airbnb

  • Clear image and text representing the business
  • Clear call to action for finding a place to stay, the main goal of the website 
  • Simple to use, user friendly 
  • Engaging cards with the option to save 

Apple

  • Very good content layout
  • Simple and easy to use
  • Modern and keeping to a theme 
  • Clear hamburger menu and shopping cart icons at top of page 

Etsy

  • Clear search bar, clear hamburger menu, clear shopping basket icon
  • Clear image and text representing the company
  • The menu has accordion style drop-down boxes to narrow the pages down into categories as there is a lot of content, making the site easier to navigate

Conclusion

Many people make the mistake of neglecting their mobile website, forgetting that in this day and age it is often more important than your desktop site! The best way to stop yourself from neglecting to consider important design principles for mobile browsers is to take a mobile-first approach to your design. Hopefully, just these few simple tips and examples will help you kickstart the design for your mobile website, and will help increase conversion rates for your business. Whilst these design principles may seem insignificant at first, each little thing that you do to increase the quality of the user’s experience on your website will help your business grow, and therefore these little things can become very important for success.