If you aren’t considering how your website looks on mobile, you are doing it wrong. That is a bold statement, but designing only for desktop computers is a thing of the past. Mobile traffic accounted for 48.71% of all web traffic in the first quarter of 2019. This means half of your website visitors are browsing on their mobile devices.
If users land on your page and can’t see your call to action button, can’t read the fonts on your page, or can’t understand the navigation, they will click away.
This will lower your conversion rate, raise your bounce rate, and irritate search engines. Google wants their users to land on your page and stay there, an indication that their users like your site. If they see their users visit your page and immediately bounce, they’re likely to rank your page lower in their results.
So now you understand that making your website mobile-ready is absolutely essential. How do you do it?
7 Tips for a Mobile-Ready Website
There are many elements to consider when making your site mobile ready. Here are seven valuable tips to get you started on a more user-friendly website that will convert.
1. Make Your Fonts Easy To Read On Mobile
A smaller screen means a larger font. As a general rule, start at a 14px font. You will need to test your page on a mobile device to see what looks best with your font and your design.
For simplicity’s sake, unless you are sure of what you are doing, it’s best practice to stick with standard fonts.
2. Optimize Your Images
Images grab your audience’s attention. They are visualizing appealing, connect with the user, and bring their focus in to your web page. At the same time, if they’re poorly optimized, they can slow up your webpage and make it load strangely, especially on mobile devices.
Your images need to be optimized for size so they load quickly. They also need to be saved in the correct format. Your icons and logos likely have transparent backgrounds, so PNG files will look best. Your photographs are likely best suited for JPG format.
3. Are Your Share Buttons In The Way?
Share buttons are an excellent way to encourage your site visitors to share your content with their friends and bring even more traffic to your website. However, floating share buttons that block your content is a common mobile design issue. You will need to either scale these buttons so they are unobtrusive or disable them on screens smaller than 768x.
4. Your Navigation Needs to Encourage Your Visitors to Stay on Site
The desktop version of your website should have visible, easy-to-find links to all of your important pages.
It is common on mobile sites for there to be a hamburger icon all of your links are hidden behind.
Not every user will realize they need to click on this icon to find the links.
This doesn’t mean the hamburger icon is a bad idea. Too many links in your navigation will make your page crowded and difficult to click on a mobile device. It means that you should consider what you want where. It is possible to put your most important links out in the open on your mobile site and then place the rest in your hamburger icon. This means that less-savvy users will still be able to easily find your most important pages and you don’t risk losing those users because they aren’t sure how to find things on your site.
5. Your Buttons Need to Be Easy to Click
Smaller screens make it more difficult for users to click on your buttons. It’s your job as the designer to make this easier for them. You can do things like add padding on your button; this will make the clickable area larger. Making the button slightly taller can also help.
6. Consider Designing Your Site Mobile First
Most people design on their desktops and then check how it works on mobile. But if you want to focus on your mobile design, you can do this in the reverse. Design for mobile and then check how it looks on desktop. This means you will think about your mobile design elements first and will change how you think about your design.
7.Test, Test, Test
This is the most important tip on this list. Test your mobile design regularly. Click through multiple pages and see how intuitive it feels. When in doubt, ask someone else to test it for you and provide feedback.