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 leading B2B 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.
Use Large Buttons
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.
Large and Easy to Read Text
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.
Simplified Menus
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.
Intuitive Search Features
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:
- Users should be able to see recent searches, so they use the same.
- Showing recent trends is a good idea to promote your product.
- As the user types, instant results should be visible on the screen. This saves the trouble of typing out long text. The user can then select the option they want from the suggestions shown on the screen. This makes the search option truly intuitive.
Easy to Contact
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.
- The simplest and best way is to have a ‘Contact Us’ option in the menu. This option should take users to a contact form or your email and phone details.
- Including a chat option at the bottom corner is a good idea. It allows visitors to instantly chat with you and get their queries resolved.
- Using Facebook chatbots is a good option. You can include a link on the website. Users can engage with the chatbot to get basic information. If they need anything else, your team members can step in and provide the information.
Simple Contact Forms
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 text should be large making it easy to read.
- Do not insist on collecting too much information, keep the form short and simple
- Have large buttons for submit and reset, so they are clearly visible.
- Let your questions be framed so they are easy to understand and easy to respond.
Strong Calls to Action
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?
- They can get an option to sign up for a mailing list by sharing their email and providing consent to receive emails.
- You can display a contact form to collect their information, so your sales team can follow up.
- On clicking the CTA, a product page can be loaded displaying the relevant product with a buy option.
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.
Avoid Pop-Ups
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.
Conclusion
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.
Or give us a call on 01844 888 777
or contact us.