Are your blog posts designed for mobile? They should be!

378 followers

Updated 4 years ago

Every article should be designed with mobile in mind.

If you look at your Google resulkts through Serach Console or Analytic, you'll likely find that 80-90% of your views are on mobile devices.

So it makes sense that you should always keep mobile friendly design in minde.

But do you? I mean, really, do you?

I was looking at a few of my older posts the other day and realized that I really hadn't always been thinking about the mobile view.

I've also noticed, when I leave site feedback for my friends here at Wealthy Affiliate, that many others are doing the exact same thing I did.

If you're writing on a desktop view, you may not be designing for mobile.

The problem I had, was that I was sitting at my desk, looking at a nice big monitor while I create my posts.

So naturally, I made it look good for the view I had. Which often meant:

Wrapping text around small images
Using column style alignments for either images or information
Writing longer blocks of text
Creating "newsletter" style layouts

All these things look great on any standard monitor. But they almost never look great on the small screen of a mobile device.

Always remember to view your content from the mobile perspective.

The headers I'm using in this post are a great example of what not to do for mobile. Rather than a big, long sentence, I should use something short and punchy.

If you're reading this on a mobile device, I'm sure you can see why. These headers will text-wrap numerous times on a small screen, making them harder to read.

Something like, "Check the mobile view," would be better.

Mobile optimization check point 1: Use short headers

Break up large text blocks.

There, that one is better. It will proablby stil wrap on a mobile screen, but not nearly as much. And that brings me to my next point.

Break up large blocks of text.Every paragraph should be maybe 2 or 3 sentences. That may seem short, but on mobile it looks just right.

Now, some sentences are longer than others, so the exact number can vary, but 2-3 is a good place to start.

You may have noticed that I'm writing very short paragraphs in this post, and if you're reading on a monitor, it may even seem a little choppy. But whitespace is very important for readability. And if you write in big block of text, much of your message may be lost. Now, read this post twice, on mobile and on a desktop and compare this paragraph to the ones above. Which is easier to read?

After I have all my conent into my post in Wordpress, I switch to mobile view (I use Divi builder which let's you toggle easily) and scroll through looking for big chunky paragraphs. Then I find a good place to add a line break and make it smaller.

Mobile optimization check point 2: Break up large text blocks

Use single column only.

Never use more than one column in a post. If you feel you must, always check how it looks on mobile before you hit publish. It may not line up quite how you expect.

Do not use multi-column newsletter or magazine style layouts unless you've throughoughly vetted them for mobile responsiveness.

If you've simply created multiple columns through block builders in Wordpress, there's a pretty good chance things won't line up the way you intended when it converts to the mobile view. At least, that's been my experience.

Mobile optimization check point 3: Single column for all content

In-line images only.

This follows directly from the single column rule—never left- or right-align images with text wrapped arounf it like this:

After viewing on mobile, I found that it did not stack the way I would want it to. Instead the bullets stuck to the image and my list did not look right.

Here's the mobile view:

So now I always stack text-over-image, in a single column, with all images center aligned.

TBH, I don't always think it looks great on the desktop view....but then I hop over to Google Analytics and see my 95% mobile viewership rates and move on with my life. It doesn't need to look good on a desktop becuase no one is even looking at it.

Here's another example of bad image layout. I tried to force together a gallery view of a few different angles for a How To instruction.

It looked just terrible. Now that I have Divi (and with the updated Wordpress block builder, you could probably do the same. I have updates it to look nice and clean.

On mobile, it's simply a list of 4 images.

So - always use in-line image alignmern - essentially, you just want an image block bewteen two text blocks. If you're using a black builder, this is actually the fastest,easiest method.

Mobile optimization check point 4: All images should be posted in-line and never text wrapped

Always preview on mobile.

Before you hit publish on a post, always preview on mobile. I'm not sure if standard Wordpress comes with a toggle between desktop and mobile. But I do know that Divi does.

On Divi, I can toggle between desktop, tablet and mobile very easily. And I check all views before I hit publish.

As I mentioned bfore, I look for long text blocks and brek them up. I also check how the images look and how they break up the text. I've often reorganized to smooth out the readers flow and space images out evenly.

And that is my process for mobile optimization - here's a checklist.