For many blogs, especially food blogs, mobile viewership rates average 75% or better. So, making sure your blog is mobile-friendly is critical.
If your website doesn’t work well on all sized screens, you won’t do well in search and will miss a massive opportunity to deliver a great experience to your reader.
This post is part of a series I’m writing looking at the 20 questions Google suggests for digital content creators to ask themselves when optimizing for SEO, and they all focus on delivering great content to your reader.
Here is the question Google posed about being mobile-friendly:
- Does content display well for mobile devices when viewed on them?
An overview of mobile-friendliness
Making your website mobile-friendly may seem obvious and intuitive. Nowadays it is more so, but that hasn’t always been the case. Since websites were first developed for viewing on a desktop, the transition to mobile-friendliness has been difficult, taking about 10 years for most everyone to jump on board.
When smartphones were first introduced and grew in popularity around 2008, it quickly became apparent that websites made for desktops were horrendous to use on mobile devices.
Different tactics were developed to make sites more mobile-friendly, including creating entirely different sites for mobile.
For the most part, the tactic that prevailed was responsive design, where you create one site that automatically “responds” to the screen size of the viewer.
This is done by using “breakpoints,” where the programmer tells the browser to display your blog differently once the size of the screen hits a certain width.
For instance, the code on your website may say that for all screen sizes under 720px, and the browser should make the size of the main text smaller and move your sidebar to the bottom.
How to know if your website is mobile-friendly
There are two aspects of your site working well on all size devices: the coding and the design and/or content.
You can check to make sure your site is coded to work well on mobile by using a tool like Google’s Mobile-Friendly Test.
That link checks the basics of coding and design, but doesn’t give the full picture. Making sure your grahpic design and content works well in mobile is also critical
Many people overlook this and think since Google’s test said their site is a-okay, that everything is good. But that is rarely the case.
Bloggers mainly write and edit on a laptop, and rarely look at their site on mobile. Any new features or design elements should always be tested on different sized screens. It’s also always good to just randomly check, cause technology.
If you want to know how to easily test your blog on different size screens, read my post on 3 Simple Ways to Review Your Blog in Mobile View.
How to make your blog content mobile-friendly
These six tips will help you create content that works well on any size screen and a create user- and mobile-friendly website.
Let it breathe
White space is your friend in all of design, but especially when creating for smaller screens. While it may seem like you want to cram more in because it’s a smaller space, allowing room for your content and design to breathe will make sure the reader doesn’t get overwhelmed.
Larger text
Generally, the standard for paragraph text on mobile-friendly sites is 16px. I often recommend slightly larger, up to 21px, but it depends on your site design and the actual typeface you use.
Also, be sure to check the weight (how bold it is) and the line-height (how much space is between lines of text) and make sure it all displays well.
If you want to learn more about typography for mobile, I suggest reading A Reference Guide For Typography In Mobile Web Design, from Smashing Magazine.
Button Size
Since you use a finger to tap on mobile, the size of the item you are tapping matters. Generally, the larger the better.
This applies both to buttons and links, and is one of the many reasons a larger text size is optimal.
Also, keep in mind that while you want your button to be large, don’t do this by increasing the amount of text. For example, don’t write, “Get more of the latest recipes from me by clicking here!” in a button when you can just have it say “Latest Recipes”.
Limit (or do away with) pop-ups
Have you ever tried to close a pop-up on your smartphone? Yeah, most of them are nearly impossible to close.
If you do use a pop-up, test it on several different sized screens (see 3 Simple Ways to Review Your Blog in Mobile View for how) and make sure it’s well optimized. Check that it’s easy to close and isn’t covering up anything that you want your user to still see.
Remember your sidebar will be at the bottom
Many websites, when showing on desktop, display a sidebar that often lists a description of the blog, an email opt-in, related posts and more.
Keep in mind that on mobile, where most of your views come from, your sidebar will be pushed to the bottom, so no one will see it until they scroll through your whole blog post.
So, you may want to look at some adjustments, for instance making sure your search bar is also accessible in your top menu bar and not just the sidebar.
Or, another example, make sure that the last widget in your sidebar and the first one in your footer aren’t both email sign-ups. If they are, when viewed on mobile, those two opt-ins will be stacked directly on top of each other.
Site speed
This should probably be first on the list, as site speed is basically the secret sauce to gaining and keeping readers.
Readers are less likely to wait for something to load on mobile and often have varying degrees of connectivity. Maybe at home, they are connected to awesome fast wi-fi, but on-the-go their connection is bad.
Make sure your blog loads quickly no matter how the reader is connecting, guaranteeing a great experience no matter when they view your site.
If you want to check your site speed, I recommend using the site speed tool from GTmetrix. This tool gives you a good overview, and if you deep-dive into their tips you can get a good idea of where issues are coming from.
