Most WordPress themes today are responsive, which means you don’t need to use any plugins or have a separate mobile site version. However, most Responsive Themes are not “user-friendly” when it comes to usability & user experience.
I have a strong feeling that WP theme developers never actually try to browse mobile websites, looking for a specific information. All they do is make sure their theme looks pretty, without any regard to how easy it is to use.
Another aspect here is Conversion Optimization or CRO. Most websites out there usually try to sell something or get visitors to sign up for something. And this is where majority of popular responsive themes fail to convert users into customers. In fact, they do an enormous disservice to to bloggers, by preventing up to 90% of conversions, due to too many fancy-schmancy design elements.
Let’s take a deep dive, and look ant 3 top themes on WP.org free themes directory. We will exclude TwentySeventeen theme, as it comes standard with any WP installation. Let’s look at 3rd party themes.
So, as of Jun 15, 2018 – we have LawBlog, onetone & PKHosting.
Let’s begin with LawBlog:
I won’t activate any custom features – just look at default look, on a static homepage – here it is:
What do we see?
WASTED SCREEN REAL ESTATE
The text menu take up 2 rows, taking away the precious screen real estate.
The content is inside a double padded container, with 20% of screen width going to padding. That effectively turns a 5″ screen into a 4″ screen… think about it! All that very important screen space is wasted on meaningless margins and padding, that add ZERO value to the site owner, and make them loose potential clients!
OMG … you need a microscope to see what’s written there… this can be a good thing though. For instance, you have a 4000 words blog post, that ranks really great on google, because it’s great and all. And then user comes from toy our site, on his tiny iPhone 5 four inch screen – text is unreadable, but you have a GIGANTIC call to action (CTA), and they fall for it … very possible. However, if user does need some info, they cannot read your site!
How LawBlog theme can be improved for mobile
I always optimize my mobile themes for iPhone 5 screen, which is “320px” wide as far as CSS is concerned.
1) Get rid of side margins and make padding no more than 10PX. That leaves us 300px to work with, and still we have a small but visible margin, so your text doesn’t bump into screen edge.
Take a look:
Now we saved 55 pixels of the screen width. That is 1/6 of total width!
Now let’s work on text. By default, it’s 14px font-size, and 10px bottom margin for P element.
We change that to 16 or 17px size, and 20 px bottom margin.
So check this out – I put before and after screenshots, side by side. The difference here is margins and font size:
We now have the same amount of text on screen, and it is much more readable! The user will enjoy your website much more now, and will be more likely to convert.
The only thing left is to fix the menu & navigation, but that is beyond the scope of this post, because there is a million and one ways to make great menus.
Mobile optimization of OneTone Theme
Here is how OneTone looks out of the box:
Honestly, if you ask me – it is pretty good by default. I probably would not even touch text size here, never mind the already optimized margins/padding. Maybe make padding 10px instead of 15px defaults.
So the only thing that needs serious attention is menu. The MENU icon or “sandwich” element is for some reason located below Logo + Site Title element, which makes total menu height being 160px (out of 568px total height of an iPhone 5 screen) or close to 25%. Ideal menu + bottom margin is 75-80px total (60-65px menu/header height + 15px bottom margin).
So just fixing that, would make OneTone theme great for mobile conversions and usability, out of the box.
Now let’s take a look at PKHosting
If you ask me, it looks VERY MUCH THE SAME as LawBlog (just different header + H1 font). And that is because A) they are both based on Bootstrap (which I personally hate) and B) seem to be made by same theme sweat shop 🙂
Take a look:
Therefore if we apply same CSS fixes to side margins, font size and padding below <p> element, we get a much nicer looking layout, that is similar to LawBlog.
Here is before and after:
Looks a lot nicer if you ask me, and when I try this on my actual iPhone 5s, I can actually see a huge difference, from these very small changes.
At the same time, increasing font size by nearly 22% and doubling space between paragraphs, does not make paragraphs bigger – they are just much more mobile-user friendly. Notice the same amount of text in both screenshots!
Real life application of Mobile UI/UX optimization of WP Themes
So one aspect that we did not touch upon so far, is extra elements in posts/pages that should not be there, for many reasons.
One such element is POST META and default sharing buttons above content. WHY, WHY would you want publish date, author, category, tags and other garbage to be immediately below title???
If people care enough, they can scroll to the bottom, and look. These elements have no business being above the fold on ANY device. But on mobile, they can cause serious problems for bloggers.
For example, you run a blog, an monetize it with AdSense. Now it is against the TOS / Policy to have ads push content below the fold.
However, even if we fix margins and padding on our theme, we still have this enormous waste of screen space (86px to be exact, if we consider PKHosting them) taken by post meta, and then another ~120px of wasted space going to the header.
That is over 200px out of 568px total iPhone 5 screen height or over 33% of wasted space!!! And it makes your website outright violate AdSense policy, without any intent to do so!
Take a look:
Note how adding a top banner ad, pushes contend below fold. We used Google-approved 300×250 ad size, and for ad placement used AdSense Ninja plugin with standard 20px top/bottom margins.
Now if we get rid of the USELESS post meta (I just did display:none; in Inspect Element for now) we become totally AdSense compliant in regards to placement. However, I still don’t like this too much, because of huge header
Take another look:
We can now see the content below ad. However I still think there is much room for improvement. Let’s fix the header.
I will make spacing between header and content 1/2 the current size (15px vs 30px).
Next – make the navigation menu toggle “sandwich” float right, and site title float left, and we get we now have a much more user friendly header/nav menu, as well as full compliance with AdSense TOS, and a large chunk of content above the fold!
Our final product is nearly zero wasted space, happy users, who don’t need to scroll down to see what your blog is all about, and no risk of getting your AdSense account suspended over theme developer’s laziness and lack of UI/UX taste (the PKHosting theme is otherwise pretty ok, if you ask me.
What if you don’t use AdSense?
Many bloggers don’t use adsense – maybe for lack of understanding of core UI and conversion principals, or for whatever reason. Many think that adsense doesn’t make much money (which is arguable, but fair point for some).
Let’s say you have some other call to action (CTA). You can place that above the fold instead of an ad, or not have one at all.
Or maybe you want to have a picture there. Fine by me! You now have no wasted space, so you can have anything there, and still preserve great user experience!
We will be pushing a lot more WordPress related content in the near future, and if you want, we will make this customized theme available for you to download. You can implement it as a Child theme.
Let us know what you think in comments below!
Cheers to all of you, happy coding / blogging.