Most modern websites are built to be responsive which enables the design to adapt smoothly to various sized devices. Popular themes for WordPress usually have this feature active by default.
You probably make edits the desktop version of your website, but you may be overlooking optimizing your responsive design.
While a design may look decent on mobile phones, there are certain things that help users navigate more easily which Google recognizes and rewards. They can also help increase your conversions and get you more customers. So, let’s get started!
1. Page Speed
Page load time is one of the most important areas of focus for an optimized mobile site. Your bounce rate is directly impacted by slow load times.
We’ve all been there when our cell phones have poor signal. Google rewards sites with fast mobile loading times with better search rankings.
One incredible way for sites to increase their speed is to join the latest trend by using Google AMP which stands for Accelerated Mobile Pages. This is a new custom web utility that removes unnecessary site elements and presents a streamlined and cached page to mobile visitors.
If Google AMP is not an option for you, consider adding your own caching and site optimization best practices. Minifying and compressing your JavaScript, HTML and CSS works wonders for increasing page speed.
If you can reduce the total number of HTTP requests, this helps a lot as well. Before the browser can render the content on your page it probably has to load many plugins, stylesheets and other scripts. Remove any resource that is not essential and may be slowing you down.
2. Spacing and Tap Targets
You’ve probably visited a website on your phone where the links were near impossible to click on. Responsive design should ideally increase the size of the tap targets of links and buttons and other elements so that they are easy to select on small devices.
If you have two buttons that are very close together, consider spacing them out with responsive CSS margins. Google can identify this issue for you using the PageSpeed insights tool under the “Mobile” tab.
A simple CSS media query as in the example below will allow you to space out elements and fix your theme for devices smaller than 600px wide.
Check out the Mozilla Developer Network for a more advanced explanation and usage of CSS3 Media Queries.
3. CTA (Call-to-Action)
Your Call-to-Action is an essential part of building a website that converts. When designing a CTA that is optimized for mobile, try to use a large button with lots of padding so it’s easy to click on.
Also, don’t forget to add your phone number to the top and bottom of your website. I’ll share more details on this in the next sections.
If you’re goal is to get visitors to fill out a form, make sure that it’s user friendly for mobile visitors by making the fields large and streamlining the overall number of fields. The more personal information you ask for, the less likely you are to get a conversion. Keep the information you’re requesting to the essentials.
4. Font and Colors
Usability on mobile devices is a concern, especially among those who don’t have the best eyesight. If you’re using 12 to 14 point font on your responsive sites it may not be ideal. I recommend 16px font size for mobile.
Test your website on your own devices and if you find you’re having to zoom into text to read it or click on links, it’s probably worth making some minor styling changes to improve your mobile readability.
Stay clear of black or dark backgrounds with white text if possible as this can cause more eye strain.
5. Phone Number
Your phone number should be a hyperlink so that mobile visitors can click to call instantly. It’s difficult to remember a number and then open the phone app or swap back and forth between apps. Using the “tel:” protocol is a much better option.
I mentioned this in the previous section, but it’s especially important to have your phone number stand out. Increase the font size, use bold, or even add it to a button with an icon.
6. Navigation
A lot of mobile optimized navigations are really bad for usability. Sometimes important links get hidden or the menu itself is hidden behind an icon.
Using drop down menus and native menus such as on our mobile site shown here is more intuitive for users. It’s also very easy to find as it’s clearly labeled and positioned front and center.
Once you get an understanding of what is best for the mobile web visitor and make changes to meet those needs you will be on your way to a better optimized responsive design. I hope these steps provided you with a good starting point.
View Comments
Share & Rate This Post
comments powered by Disqus
