How to Make a Mobile Friendly Website
Some quick pointers to walk through when optimizing for a mobile friendly website.
Did you know that approximately half of your website visitors will be viewing your site on their mobile device? Having a mobile-friendly website is no longer optional! If your mobile visitors do not have a good experience, their first time, you will drive away a huge proportion of your traffic and not to mention hurt your SEO rankings in the process.
I’m sure you have heard it before, but we are saying it again: Your website needs to be mobile responsive- or aka mobile friendly!
Is My Website Already Mobile Friendly?
If your website was built or updated in the past couple of years, then you might not be as far off as you think. Before you start stressing and put a lot of effort into making your site mobile friendly, check your site to see just how far you need to go. One quick trick to use the free mobile friendly testing tool provided by Google. Not only is this very quick on getting you an answer on whether or not your site is mobile friendly, but it provides a snapshot of what your page looks on a smartphone screen and recommendations to help make the mobile experience better.
Other Website Mobile Friendly Steps to Consider
Make your Website Responsive
With implementing responsive design, you can make your site mobile friendly without taking away information your mobile visitors can access- they will still get the same content as the rest of your visitors. When you make your website responsive, the way a page is displayed and arranged changes based on the size of screen that is viewing it. An image that typically shows next to a block of text on a desktop may show up on top of the text when loaded on a smartphone.
Also, Responsive Design is loved by Google! It’s great for your SEO.
Make Information People Look for Easier to Find
When smartphone viewers open their search bar, they are typically looking for something specific-, whether the answer to a question, the address, or a customer service phone number. They want to find this type of information fast and as easily as possible.
Learn about your audience and what mobile visitors are most likely looking for when they head to your website and put that information somewhere obvious and easy to find on the mobile homepage. You can easily do this in your Google Analytics account. Add Mobile Traffic as a segment in the Behavior Section, allowing you to see how mobile visitors interact with your website.
Make Website Speed a Priority
If your website loads at the pace of the not-so-good old dial-up days, your audience will not wait around! Viewers want their information easy to find and fast loading times. There are a number of tactics to help improve your site speed these days. Here are a few:
• Use AMP (Accelerated Mobile Pages)– This is a framework that Google suggests for speeding up load times for web pages on mobile. If you utilize WordPress for your website, you can download the AMP plugin.
• Compress your images and CSS- Your high-resolution images and CSS are the major components for slow load times and take up a lot of space. You can speed things up here by compressing your image file sizes so they load faster without impacting the quality!
Keep Your Web Design Simple
Avoid clutter. Stick to a clean, minimalist design that makes it easy for people to find what they are looking for. And by having less files on each page that need to load, a simple design will contribute to those faster load times.
This tactic also applies to your menu as well. If you have a bigger website, it may make sense to offer a large menu on desktop screens. But on mobile, you want to cut it down to the most important options. You could also use the Mobile Traffic as a segment in the Behavior Section in Google Analytics here as well to see what the most popular pages amongst your mobile viewers to create a smaller menu. Some websites utilize the hamburger menu option on mobile to shrink their menu into a dropdown one so visitors can click to open if they need it.
Some other design elements that are important to consider for mobile viewers are to make sure button sizes are large enough and to use large fonts.
Large Buttons: It’s easy to click on a button of any size with a mouse, but when you are trying to click with your fingers on a small smartphone buttons can be an issue. And this is especially true when buttons are close together or in the bottom corners.
Large Font Sizes: Reading on a small screen is that much harder if the font is tiny. It is recommended to use a font size of at least 14 px on your webpages but testing how it looks it always recommended. Go bigger if you can! Another important thing to remember here is to stay with your standard fonts, as any font your visitor needs to download will slow down the load process, which is bad news on mobile.
Regularly Perform Mobile Testing
Regular testing for your mobile usability is one of the best things you can do to make sure your site offers a good mobile experience. Every so often, pull up your website on your phone or tablet and spend some time browsing to see what does not look right or difficult to do. It is the best way to catch small issues that create a worse experience for your visitors.
We hope this quick guide to a mobile friendly experience has helped you! Even if you get everything right today, the way mobile devices work, and look will continually change. Meaning if your site is mobile friendly today may not be tomorrow. Keep testing, keep tweaking, and continue to think about your mobile users as a priority!