How to Make your Website Mobile Friendly

by Lindsey Winsemius - Posted 4 years ago


It has been over 8 years since I first started talking about the importance of mobile friendly marketing. 

Then, having a mobile site meant a separate site designed for mobile devices. Now, mobile-friendly means fast loading, AMPs, responsive designs, small paragraphs, and a mobile-first mentality.


We live in a world that becomes more mobile each year. Augmented reality Legos, learning apps, and devices in the classroom. I was talking to my daughter's elementary school teacher, and many kids in the class had to be taught how to use a computer mouse to take standardized tests because they wanted to keep touching the screen and had never used a mouse before.

Younger generations are growing up with mobile being the primary, if not the only, way to access the Internet. 81% of adult Americans own a smartphone, and 96% of Americans ages 18 – 29 own a smartphone. Many of my friends do not have computers in their homes, but they have multiple kinds of devices such as e-readers, tablets, and smartphones that they and their children use to access the Internet.

Mobile-first isn’t just Google’s new indexing and ranking update; it is a way of life for many people. Odds are good that, if you’re like our company, over half of your traffic to your website is coming from a mobile device.

I used to say mobile is the future, so get on board. Now, if you’re not mobile, you’re way behind.

You can’t afford to not have a mobile-friendly site. What does that mean today?

What Mobile friendly sites Need:

Mobile-friendly sites Load Quickly.

Load speed is one of the first factor in ranking your website in search results. Google has been rolling out a mobile-first indexing update since last year. Mobile-first indexing means Google predominantly uses the mobile version of the content for indexing and ranking.

If your mobile site has features that cause it to load slowly, Google is going to penalize your site in search results.

How can you know if your site is loading quickly enough? 

There are several speed tests you can use to check your website’s load speed. I personally like to use Google PageSpeed. Chris Jackson, SEO guru and our CPO, prefers Pingdom’s page speed test

Either test will give you a good starting point for where your website stands when it comes to loading speed. The results will also tell you where you can improve your site.

Here are a few basic speed improvements to get you started:

  • Properly size and compress images.
  • Strip out fancy elements that are costing you load time
  • Use apps and plugins sparingly.
Find out how I improved our website score from 0 to 81 and learn some more details about how you can improve your website in this quick article.


Responsive Design

How to make your website mobile friendly with responsive design

You’ve probably heard of responsive design. You’ve also probably seen it action. Most websites are built to respond to the size of your screen. Elements are re-configured to best fit the screen you are using to view the page. For example, a sidebar would probably be pushed to the bottom of the page on a smartphone.

Google prefers responsive design over the other options available, so we use that framework for all our websites. It does make the initial design process more complicated, but it vastly improves the user experience.

Ask you website provider what framework they use to build websites.

Not sure where to start checking how mobile-friendly your website is? We offer a free website analysis - just contact us now to get yours scheduled.
 

Avoid unplayable content

Don’t include content on your website that isn’t compatible with mobile. One example of popular content that won’t show on mobile is Adobe Flash. Once a popular way to build interactive elements on a page will now make your site a mobile flop.

Recommended actions for video or animations:

  • Use HTML5 standards for animations to provide a good experience to all your users.
  • Use video-embedding that's playable on all devices.
  • Consider having the transcript of the video available. This makes your site accessible to people who use assistive browsing technologies or who have browsers that can't play a proprietary video format.


Don't use obtrusive pop ups


Don't use pop ups. Do use pop ups. Don't use pop ups on mobile...

It seems like web marketers can't make up their minds about whether or not pop ups help or hurt websites. What I can tell you is that while people report finding pop ups annoying, pop ups actually do increase conversion rates on websites. They work, and it is worth a try on your website. 

However (yes, there is always a "however"), be cautious about how the pop up or other "interstitial" displays on mobile. 

Have you ever gone a website that had a message or splash page pop up that you COULD NOT figure out how to click out of? Maybe it didn't display properly on your device, or the almost invisible "X" in the corner was off the page. Whatever the reason, that makes for a very poor user experience and will NOT increase your conversions. What it will increase is your bounce rate.

If you're using any kind of pop up or splash page, make sure it is easy to click away from or fill out without too much hassle for mobile users.

Use Google Search Console

How to Make your website mobile friendly with Google Search Console


Google Search Console is a free tool provided by Google to help website owners review reports on their website search status. The best part is that it emails you when you have a page that is considered “not mobile friendly”, tells you why, and then you can ask for a re-scan when you’ve fixed the issues.

You can claim your website on Google search console through your Google Account. If you already use Google Analytics, it is simple to get started with Google Search Console.

Use correct Font Size and Spacing

Ideal font size for mobile devices is size 16. Too small, and people will struggle to read it (and Google will flag you). Too big, and it will look terrible on mobile devices and people will not want to try and read it. 

Note: I've also found that Google will flag you for too small of font on mobile devices if an image you use has small text that becomes unreadable when the image shrinks on mobile devices. Check your images for proper font size, as well.

Clickable elements should be properly spaced so it is easy to click on the correct item. I can't tell you how many times I've tried to click away from an ad and ended up accidentally clicking ON the ad. That always annoys me enough that I click away from the original website (I'm talking to you, Weather.com). 

While I'm sure some sites do this intentionally to get more clicks on their ads, it is annoying, leads to a poor user experience, and will probably get your flagged by Google.


Regularly test your site.

Mobile browsers are constantly changing and updating, so it is important to regularly test your site from mobile devices. 

How does your website look on a mobile phone? Would you enjoy browsing your site? Are your call-to-actions standing out? Is everything functioning properly?

There is no better way to understand the user experience on your website than by testing it yourself. If possible, use multiple devices, including Android and Apple, because the browsers can be quite different. 


Conclusion


Mobile websites are now a necessity. Check that your website is looking great across all devices.

1. Check your load speed.
2. Use the right mobile framework, such as responsive design.
3. Follow the recommended actions for video or animations.
4. Don't use obtrusive pop ups.
5. Use Google Search Console to stay updated on your website's mobile performance.
6. Use correct font size and spacing.
7. Regularly test your site from multiple devices.