There are more than 3.8 billion people worldwide who use their mobile phones to browse websites. This makes it essential to implement mobile web design. The website of your business should look as good on the mobile device as on a laptop.
We tell you all you want to know about mobile web design practice, so you can implement it effectively. We are Intuitiv, a leadingB2B website design agency with plenty of experience creating mobile-friendly websites.
Based on our experience, we have created a guide that outlines the principles of mobile web design. Follow these principles to create a great mobile friendly website.
The website that would look normal on a laptop can look different on a mobile phone. The buttons on a mobile may appear too small. Site visitors may not be able to read the text on the mobile.
This is why you need to use large buttons. This makes the button clear, so a user can click without having to zoom into it. Another important thing to ensure is providing sufficient space between buttons. When buttons are too close to each other, a user may press the wrong one. This can be a frustrating experience that can put off a visitor.
Provide sufficient space between buttons to make each button clearly visible. This would be very useful when you include a call to action (CTA). The CTA would appear prominent prompting a user to press it.
Look at Shopify’s website. The buttons are large with white text on a green background ensuring perfect visibility. Sufficient use of whitespace makes the buttons stand out.
The text on a webpage should be large, so it is easy to use. The selection of font and font size should be such that a user can see the text without having to zoom in. If users need to zoom in to read, it makes the browsing experience less effective.
When you use sufficiently large sized text, visitors can see your content clearly when they scan through the page. This makes it easy to get your message across. While designing the page, you need to ensure the text fits all sizes of screen.
It is not just text size that is important but even the text colour and the background. There is no use having large text if you use light colours or a light background that make the text difficult to read. The text must stand out against the background.
You must understand there is a huge difference between menus on laptops and on mobiles. Large and extensive menus on laptops/desktops won’t fit on a mobile screen. A menu that is too long takes up too much space and makes browsing difficult.
Having too many drop down options can make things difficult for users. We suggest you provide an optimal mobile experience by using simple menus. A simple menu would have an overview of the pages. When users want more, they can use filters or browse through categories or search for whatever they are looking for.
Today, most mobile sites use the hamburger menu. A hamburger menu has two lines at the top-right. Pressing on it displays the full menu on the screen. The user can then select the option they want. This keeps things simple while allowing for easy navigation.
A search feature is crucial for a mobile website. The search feature needs to be prominently showcased on the screen. The search feature and the menu go hand in hand. As explained above, a simple menu shows all the options available. If a user wants something specific, they can use the search feature to look for what they want.
Placing the search bar at the top ensures it is easily seen. You can even include filters or categories in the search bar, so the search becomes intuitive. The users can find exactly what they are looking for without having to waste time.
Here are some tips to create an intuitive search feature on your website:
When users visit your website, you must make it easy for them to get in touch with you. There could be users who visit the website with the express purpose of contacting you. Do not make it difficult for them to get in touch with them. This can be frustrating, and you can end up losing a customer.
We would like to emphasise that 84% of consumers feel customer service is a key factor while deciding to make a purchase. Providing your contact details assures the customer that they can find you easily and get in touch with you in case of any problems.
You can use different options for the customer to contact you.
A user visiting your website through a mobile device has a shorter attention span. They are probably doing something else along with browsing the website. They would not be inclined to fill out a long and detailed form to contact you.
When you add a contact form, keep it simple. Do not make the user type too much information. Typing on a device can be difficult considering the small keypad and the smaller screen.
An effective contact form would have the following features:
The CTA or call to action is an image, banner, or text that persuades your visitor to take the next step – to become a customer. It is vital that you make the customer click on the CTA. A CTA should be eye-catching making it hard to miss. The message on it should compel the customer to click on it (eg: 'Buy today to get a free gift' or 'Offer closes in the next 10 minutes').
Implementing CTAs on the website is challenging since the space on the mobile device is limited. You need to create a CTA that is visible and has attractive content. What would happen when a user clicks on a CTA?
Hulu has a great CTA on its website. It offers a complete bundle of channels with a discount. Their use of black text on a white background looks attractive.
Pop-up ads seem to be a good way to promote your product. We would like to strongly suggest avoiding them. The reason is that users dislike pop-ups ads and find them irritating. Further, search engines also don’t like them since they are a distraction.
A Google algorithm in 2017 penalises websites for certain types of pop-ups used. Using a pop-up ad may not get you good returns. In fact, you can be penalised by Google and also customers may stop visiting your website.
There are many customers who get so irritated on seeing a pop-up ad that they may quit the website. Don’t use a strategy that is counter-productive. Strictly avoid pop-up ads.
Through this guide, we outlined some mobile web design best practices. The principles of mobile web design we explained can be followed to create a responsive website that looks good on all websites. A good web design for mobiles is one that has simple menus, has text and buttons that are easy to read, and has effective CTAs.
If you want to implement these principles, you can get in touch with us. We are an Umbraco agency and can help you create the best mobile-friendly website. Do get in touch with us for more details.