I suspect most of us write, edit and view our blog primarily on a desktop or laptop. That means we can forget our site’s mobile layout.
I’ve made a few changes to the design of the website recently. I periodically modify things from time to time as the mood strikes me. But I try never to forget to check out the mobile layout for signs of trouble.
Most of what I do here on my website involves either a desktop or laptop computer. In fact, I visit other people’s blogs, for the most part, on an actual computer. I don’t happen to find reading blogs on a smartphone to be as pleasant an experience. Yes, I realize I am probably in the minority there.
But when you primarily use one method over the other, you can easily lose sight of visiting your site the other way.
You can easily find plenty of places to buy WordPress themes for your site. My favorite one to browse through is ThemeForest.
Ideally, whenever you deploy a theme for your blog, you choose one that is mobile-friendly. This ensures that your blog visitors get a good experience no matter what device they use. However, even a “mobile-friendly” design can be slightly unfriendly to mobile users.
Here’s an example of what I mean:
On the desktop version of this site, I set a block of “featured” stories for the three most recent posts. The design displayed the most recent was displayed with a large photo. It then displayed the two next-most-recent in a pair of adjacent smaller frames. You may have seen it:
I thought it looked good for the top of the front page. On the desktop version, by the way, the image dims a bit under the headline. That makes the text easier to read, especially when there is a lot of white space in the image.
But here’s what it looked like on the mobile version of my site:
As you can see, this didn’t play near as well on mobile.
Yes, the design did keep the three large “featured” images at the top. But it stacked them vertically. I understand this design decision. If it had preserved the desktop layout, the two smaller windows to the right of the large image would have displayed too small for people to read easily.
But the images were cropped too severely. The top image cropped the top of the head off of Comedienne Sheryl Underwood. But the second and third images were cropped so tightly that you couldn’t even tell what the images showed.
There’s another problem with the mobile version that you can’t really see.
On the desktop version of this site’s front page, if you hover over on of those large featured images, the image dims severely so you can read the headline text.
On the mobile version, you can’t “hover.” Either you scroll up or down the page or click on an image to open that particular article. There’s no motion that darkens the image to make the text easier to read. That means if there’s an image with a lot of white or light gray, the headline becomes almost invisible.
So I realized that the mobile audience was immediately at a disadvantage with the top three stories on this blog. If the headline alone wasn’t enough to get them to click into the article, they probably weren’t going to click.
So I had to go back to the proverbial drawing board to find something that worked for both desktop and mobile.
I experimented a little
A couple of years ago, when getting information from Google Analytics didn’t feel like a trip to the dentist, stats showed more than 53% of my blog’s visitors arrived on a mobile device. So the majority of my readers were actually reading on their phones.
I therefore decided to take a “mobile-first” approach. The result is a desktop page that doesn’t have the big images:
Instead of the three most recent images, it only shows the two most recent ones. However, the images are clear, and the headlines don’t cover them.
The mobile version, on the other hand, doesn’t have the images cropped to within an inch of their lives.
The headlines appear right below the images instead of being on top of them. That way, there’s no risk of the headline being hard to read because it blends too much.
And since the images aren’t super-cropped, you can actually see what the pictures are supposed to show.
That change quickly solved the image problem on mobile devices. But it gave a somewhat less desirable presentation on desktop.
Again, I know the majority of my readers see this site on a phone or tablet.
But that doesn’t mean I want those who see this site on a traditional desktop or laptop computer — as I do every day — to see something less attractive in that format.
The change I made did give me consistency all the way down the home page of this mobile layout. But when one side looked good, the other side, I found, didn’t look as good as I wanted.
That’s the way many blog themes seem to work. Whatever you do for one, you end up doing for both.
So since I wasn’t truly happy with either Plan A or Plan B, I decided that I need to keep experimenting a little…just to see if I could find myself a workable Plan C.
I had to make a couple of other changes on the desktop layout to make the mobile layout happy.
So here’s my Plan C
Before Plan C, my desktop layout featured a “full-width” top section with the orange banner introducing the site. Below that, there was a section of the next-most-recent posts on the left with a sidebar on the right. The sidebar began below that orange strip.
So I had to make the entire page as a split layout with a sidebar. I then found a split-width option for featured posts that included one large post and two smaller ones. So here’s what the new desktop version looked like:
The sidebar is now on the right side of the screen at the top of the page at the very top. The featured posts are on the left side, but in a smaller horizontal space to accommodate the sidebar.
I tweaked it a bit on desktop for a while to get it the way I thought looked best.
But then, of course, I asked myself the $64,000 question: Would this play any better on the mobile layout? I have to admit being a little nervous about giving the preview a try.
But I was happy to find that the mobile version of the split-width layout fairly matched the desktop layout. It gave me the large, most recent post, with the two second-most recent posts below that.
None of the images ended up unreasonably cropped or covered with font so that you couldn’t tell what they showed.
Plan C preserves the intent of the desktop layout for the mobile layout. I hope that means that both the desktop and mobile audiences will see an improved layout that will make them want to click into a story no matter how they’re viewing the site.
I hope you like the adjustment — if you even notice the change.
Sometimes, the best changes a site can make don’t cause much of a stir. They simply work subtly to make the overall reader experience better.
That, honestly, is always the goal whenever I change a layout or even change a typeface: I want to make your reader experience better.
Even if you don’t notice the specific change that accomplished that little goal.
Still, it was because I took the time to explore my site on my phone — which I don’t do that often — that I noticed the layout issue that might make the site less attractive in the very place more of my readers visit!
