You might have heard Google’s doubling-down on mobile-friendly design for websites. Starting April 21st, mobile-friendly pages will be rewarded with better rankings and helpful labels while unfriendly pages get ranked lower. This algorithm change goes on a page-by-page basis. You should absolutely budget to make your homepage and other main page content mobile-friendly with the help of a web designer. But what about blog posts? Those are pages too. How can content creators ensure each post they write is mobile friendly?
Google’s technical definition of mobile-friendly is a closely guarded secret. They’re not telling anyone exactly how to do it. Instead, loose guidelines tell us to make great content that simply displays correctly across devices. Only their online mobile friendly test tells you for sure that your page displays to their standard. However, I think mobile-friendly blog posts start with mobile-friendly images. But before we get friendly, we’ve a little problem to clear up.
Stop Text Wrapping!
Image alignment is the biggest flaw in small business blog posts. We’re all familiar with the way printed brochures and books treat images. Most often, they’re less than a quarter the width of the page and “flow” with the text. You might know the term text-wrapping from Microsoft Word and desktop publishing software. Word trained us all to believe we can design pages. Word lies.
And so does WordPress. When you edit page and post text, it’s easy to add images with image alignment. Like text wrapping, you can center images and float them left and right to “flow” with text. Text wrapping is intended to improve readability by allowing images next to text without interrupting it. Nice idea. But poorly executed by most non-coders using WordPress.
The big mistake is trying to imitate sophisticated printed layouts. Not only is this difficult without a deeper understanding of the tools, it’s also unnecessary. Instead, follow the full-width rule to create blog posts that look great on all devices without the fuss.
How to Make Mobile-friendly Blog Post Images
With a few standard rules, we can simplify the process of making blog post images and ensure they look great whatever device your customer uses.
First, find the width of your website. Ask your web designer how many pixels across your body content area is. This is the maximum, or full width for any picture.
Choose full-width every time you crop and resize an image. Pick a standard height as well, no wider than the image.
Insert one image at the top of each post.
Stick to one image. If your post is no more than 800 words, you don’t need any more. One good image suffices unless your post has step-by-step instructions that need illustration. Even those images should be full-width.
Finally, always choose “None” in the Image Alignment menu. Since your image is already full width, you don’t have to worry about centering or text wrapping.
Write Around Mobile-friendly Blog Post Images
When you choose not to align the image, it’s placed between paragraphs, with no float or text wrapping. People will stop reading to take in the image. You must write to minimize the disruption. There’s two ways to handle this. You’ll need to finish the preceding paragraph by introducing the image and start the next with a follow-up. Or, position images between section breaks so the picture fills the natural gap before readers begin the next section.
I like the full-width rule because it requires you to be intentional with your image selection and placement. If you’re going to interrupt the reader’s flow, that picture better be good.
Adding a good image between sections lengthens the natural gap, boosting anticipation for the next paragraph. Adding it between paragraphs in the same section will laser-focus attention on the image. Readers may scroll or swipe back to revisit the image as the following paragraphs explain it or expand on the topic illustrated. Knowing this drives me to carefully select images and sparingly drop them in the midst of text.
When I follow the full-width rule to select, crop and size images, I’m a better content creator.
Write Blog Posts Like Blog Posts
Mobile devices changed how we design websites and they changed how we write short content for the web. Mobile-friendly means focusing on showing text content in its most readable form, especially when your content is primarily text.
Good blog posts are short and easy to skim for meaning independent of pictures or illustrations. Images are the icing on the cake, enriching your text with memorable visuals. But your text must function without them.
By writing your blog post so that images are a treat and not the meal, you write to be read on mobile devices. There must be an image to visually distinguish your post from others, but the text must not require additional visuals to be understood. I’m not saying you can’t have additional images, I’m saying don’t depend on them.
If you want to add more images, do it! People love pictures when they’re relevant to the text. But follow the full-width rule to make it easy on yourself and your readers.
