28th August 2015
What a Web Designer Does (that you may not be able to)
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!
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.
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.
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.
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.
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.
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.
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.
‘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.
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.
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!
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.
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.
We should work together, you know.
Conversion-led with proven R.O.I. success
We're confident you will see instant results
Established since 2003. Servicing local businesses and global brands
Patient, friendly and supportive
Rest-assured, you'll be in safe hands with a personal team
Are you in need of more business?
We can double your conversion rates by optimising the user experienceGet a FREE UX audit on your website