This post is all about WordPress on mobiles and leveraging the ever-growing mobile market.
I catch myself more and more reading blogs on my iPhone, especially with the monstrously big iPhone 6+. I can definitely see myself reading online only in a few years, if not months.
Yet, when optimizing websites at SimplyWP, me and my team still find countless sites who don’t adapt to mobile devices, which makes them hard to use.
The goal of this post is to give you take-action advice that you can implement right away, because WordPress on mobiles will boost your business.
All the tips for WordPress on mobiles you’re about to read are implemented on a daily routine by me and my team, and proven to bring good results for the site owners.
There are already a few good posts about this topic, which I’ve taken as foundation - to create a massive resource on this topic. You’ll find links to the sources when appropriate.
I’m writing this extensive post, because we need to adapt our businesses to the behavior of our target audience. And statistics show that humans spend more time on their mobile devices and consume more than 50% of all digital contents on mobile devices!
However, mobile-only users grew nine times faster during the same time period while desktop users decreased by 45%. A year ago, 63% of digital users accessed the internet using both mobile devices and desktop computers, but today, that number has grown to 70%. Cross-platform consumption is the norm today. - Susan Gunelius
Experts like Greg Hickman preach mobile marketing for years in his Mobile Mixed podcast and if you haven’t optimized your WordPress site for mobile devices yet, it’s about time.
You’ll see exactly what it means to optimize WordPress for mobile devices and how you can follow along easily, one step at a time.
Personal note:
I’m going to reveal traffic statistics that I didn’t share for a few months. The reason is that I have neglected my blog drastically (as I’ve written about in the past), which caused the traffic to drop. I’m down from ~350 unique visitors a day to averaging around 40 unique visitors a day. It’s tough for me to share this, but I’ve always been very open with everything I do. And after all, I’m focusing on my blog now, so hopefully the traffic will go up in the future 🙂
Unfortunately there are many misconceptions on making a website work on mobile devices.
You might think that having a responsive theme that looks good on smartphones and tablets will do the trick, but there’s actually way more room for improvement.
Rocking WordPress on mobiles not just means having a responsive theme - though that’s mandatory!
Rocking WordPress on mobiles means aligning your content strategy with the screen sizes of mobile devices and presenting your most important contents right on top of mobile devices.
Having a website that’s great for mobile devices means that your site is loading fast, as mobile users often use 3G for their connection. LTE connections aren’t an issue, because that’s sometimes even faster than your regular WLAN at home.
And there are some more interesting aspects of mobile WordPress sites that we’re going to cover in this post.
Let’s start with the most common problems that WordPress sites can cause on mobile devices:
But what can we do about these problems?
Do you know how many of your visitors are actually opening your site on their mobile devices?
If not, you should head over to your Google Analytics account, and open the „Audience“ section. Then go to „Mobile“ and click on „Overview“, to see the general statistics of your site’s mobile usage.
As you can see, 82.73% of my traffic is coming from desktop devices, which includes notebooks and desktop PCs. This doesn’t give me headaches, because I know that my site is well formatted for the screen sizes and resolutions of desktop devices.
However, almost every 5th visitor is coming from a mobile device! This means that if I don’t pay attention to the functionality of my website on mobile devices, I’m going to piss off every 5th visitor of my blog. And that’s definitely something I want to avoid!
Another interesting statistic on mobile traffic is the user flow. This describes the behavior of your visitors, meaning what pages or blog posts they open and when they leave your site.
Here is a quick 3-step tutorial on how to analyze the user flow of your mobile traffic.
First, you open the „Users Flow“ area in the menu „Audience“. Then you click on „Add Segment“ and browse through the list until you find „Mobile and Tablet Traffic“. You tick the checkbox for that segment and hit „Apply“. Then Google Analytics will redirect you back to the Users Flow report, in which you can now switch to the new segment - showing you only the data of traffic coming from mobiles and tablets.
Here are the respective screenshots for the tutorial.
Analyzing my mobile traffic shows me, that most of my visitors leave my page after reading the first post. They don’t click on another post, but go on to another site.
That’s nothing I’m happy with and I will share some tactics on reducing this behavior later in the post.
For now I want you to replicate these two reports, so that you know exactly how many visitors are using mobile devices to consume your content, and how they behave on your site.
To really rock WordPress on mobiles and tablets, you need to know how your website looks on those devices. In case you have the money, you can easily buy several tablets and smartphones, but most of us normal people don’t.
Luckily there’s no need to own a variety of mobile devices in order to test your site on them. You can just set up a testing environment on your PC or Mac.
I won’t go into the details of setting up a testing environment, because the guys at WPMU DEV have created a rock solid tutorial that will explain several options on setting up a system to test your mobile site.
However, installing a testing environment can take some time. I personally have it set up because I develop apps for mobile devices, but in case you want to skip this step, here are my thoughts:
You need to know how your website looks on mobile devices. If you own a smartphone and/or tablet, feel free to go ahead without setting up the testing environment. If you can borrow a device, go ahead to.
However, if you have NO device to test your site, please follow the instructions given by the team of WPMU DEV. Resizing your browser to a narrow width isn’t the same as testing your site on a simulated mobile device!
Now that we’ve covered the testing aspect, let’s move on to the basics of your content strategy.
Friends, a zombie apocalypse is upon us: an onslaught of new mobile devices, platforms, and screen sizes, hordes of them descending every day. We’re outmatched. There aren’t enough designers and developers to battle every platform. There aren’t enough editors and writers to populate every screen size. Defeating the zombies will require flexibility and stamina—in our content. - Karen McGrane
Karen nailed it. There are so many mobile devices in our world, that we no longer can’t ignore them. We need to adjust our content to fit the new technology. How will you present your content when devices like Google Glass really hits the market? I doubt the traditional blog layouts will work on Glass…
So, what are the differences for a content strategy on mobile devices compared to desktop devices?
Headlines
The headlines are obviously one of the most important parts on your site. They decide whether your visitor reads a post or leaves your site. Hell, Copyblogger has an eBook on headlines ONLY.
But there’s a catch.
On desktop devices, headlines have lots of space. The page is wide and gives even the longest headline enough space to live and look good.
But on mobile devices, that space is limited!
Compare these screenshots of the latest guest post on my site. The left one shows the post on my MacBook, the right one is from my iPhone 6+ (Apple haters, I love you).
You will see that the headline is nicely placed on the desktop, whereas on mobile it might be too long. It breaks up into two lines and the spaces on the left and right aren’t big enough to make it look nice.
This example demonstrates the problem you might get with headlines. While they look good on big screen, mobiles devices might not provide enough space for them.
When you test your WordPress on mobiles, search for a new theme or hire a web designer to create a custom design, make sure you address the placement of headlines on mobile devices!
In a custom theme, your designer can easily add a custom field where you can enter the headline that just shows on mobile devices.
In fact, there’s a plugin letting you do this without hiring a designer. It’s called WP Mobile Detect, but is has a massive drawback. It hasn’t been updated for 2 years and the support forum seems to be inactive, which makes me not want to install it on my site. I tested it and it worked on a local test installation of WordPress. On mobiles that test installation only showed contents I wanted to show on mobiles, while the content for desktops was hidden.
I’ll leave it up to you if to decide whether you want to install it on your site or not. If you decide to install WP Mobile Detect to optimize your WordPress on mobiles, here’s an amazing tutorial on using it.
When you open the home page of this blog and the home page of SimplyWP on a desktop, you’ll see that both make heavy use of images.
On my blog you can see a picture of me, the places I’ve been featured on and the featured images for the blog posts. On SimplyWP you’ll see background images, a picture of me, lots of icons and the graphic in the testimonial.
Opening both sites on a mobile devices looks like this:
You’ll notice that on both sides, the text is clearly the focus of the mobile page.
The goal is, that a visitor opening the site on a mobile device for the first time needs to understand what the site is about in less than 7 seconds.
That’s why images simply don’t work as good on mobile devices as they work on desktops, at least for these two pages. When you display an image on a mobile page (above the fold), make sure it helps your visitors understand what the site is all about!
You can also see that on my personal blog, there’s a red block barely above the fold. The intention is to get the visitor interested to scroll down and see what the red block is about.
On SimplyWP however there’s a small issue above the fold, that I need to address. Did you see it already?
The plugin for the live chat is covering a bit of the text. And that text is quite important, as it tells the visitor more details about the service SimplyWP is providing. An option would be to reduce the space above the headline „No More WordPress Problems“ and thus move the whole text block up.
Videos are becoming an essential part in most online marketing strategies. I’m utilizing JK TV to build a relationship with my audience and with experts in the field - and of course I show the videos on my website.
The challenge is to make them look good on mobile devices!
When you embed a Youtube video with the standard embed code, they’re not responsive, meaning their size doesn’t adjust depending on the screen size of the device.
Youtube generates a so-called iFrame, which basically frames the video and defines the width and height. However, width and height are static in Youtube embeds - they don’t adjust to smaller screen sizes.
Maybe your theme handles this issue well, but some themes simply can’t deal with embedded content properly.
To make embedded contents like Youtube or Vimeo videos look great on your mobile WordPress site, here’s a plugin that does the trick: Advanced Responsive Video Embedder.
This list is just the tip of the iceberg. Optimizing your WordPress on mobiles is a task that really goes down to the nitty-gritty.
It can be quite some work to have all blog posts and pages look good on mobiles, so definitely pay attention to the next tip.
A practice that we at SimplyWP often do, is to optimize only high traffic pages. Often only a few pages get 70% - 80% of the overall traffic of the website. These pages need to look as good as possible on mobiles, so me and my team focus on optimizing those.
This is an application of the 80–20 rule. A few actions bring 80% of the results, which in these case are the few high-traffic pages getting most of the overall traffic.
In order to find those pages, you can have a look in your Google Analytics. Go to „Behavior“ -> „Overview“ and take a look at the tab „Page“. You’ll see the pages and posts on your site, sorted by the amount of traffic you get.
As you can see, my home page is getting around 28% of the overall traffic. The rest is quite evenly divided between other pages, which is NOT the rule.
When I was blogging at MyGreatOnlineBusiness - which became this blog - I had a blog post about Internet business ideas (see it here) that ranked at #1 in Google for the keyword „Internet business ideas“ and drove around 150 unique visitors every day to the page.
It’s your choice how many pages you optimize, or if you optimize the content strategy and layout for all pages.
If you can’t estimate the efforts it’ll take to optimize your WordPress for mobile devices, I recommend hiring a developer. Or checking out my flatrate WordPress customization service at SimplyWP - which will provide one month of service for the fraction of the cost of hiring a developer.
I’m pretty sure that you’ve already heard about mobile themes. These themes adjust their design depending on the screen size of devices, which is mandatory nowadays. Talking about optimizing WordPress on mobiles, every website should have a responsive theme!
There are countless collections of responsive themes out there, so I’m not going to create my own. Instead here are links to some of the most extensive collections of responsive WordPress themes.
Please bookmark those pages for later if you think about searching for a new responsive WordPress theme and stay with me.
This gives you a few hundred themes to choose from 😉
P.S. I use The Ken from Artbees on this page.
However, before you dive into those lists and check out all the themes, let me give you a brief overview on how to analyze a responsive theme and whether it really benefits WordPress on mobiles - or whether it’s responsiveness is useless.
This obviously is the most important point when it comes to responsive themes for WordPress.
Open the theme on a mobile device. If you’re not sure how to do it, just open the theme on your PC or Mac and check out the URL. Then type the URL into the address bar of the browser on your smartphone. Professional developers like StudioPress even offer mobile versions of their themes in their demos.
Once you see the theme in the mobile layout, pay close attention to the following aspects:
These are just very few points on analyzing a responsive WordPress theme before buying it. Make sure to test the website in portrait and landscape mode.
If you really want to rock WordPress on mobiles, analyze your site according to these points right now - even if you’re not planning to get a new theme.
Of course, check the theme description and analyze the functions of the theme. Just reading through the description saved me hours of searching through themes.
Here are some topics I normally look out for:
Adaptive Images
Responsive themes should be able to load smaller versions of images when the site is opened on mobile devices. Smaller screens go perfectly with smaller images, and smaller images load faster.
Back To Top Functionality
Make it easy for your visitors to scroll back to the top. Good themes automatically display a button or an arrow in the bottom corner of the site when the user reads a post.
For example when you open this post on a mobile device and scroll down, you’ll notice that in the bottom right corner a new button appears. That button brings you directly back to the top.
Scrolling back to the top can be a pain on mobile devices, especially when you’re reading long posts as Pat Flynn or Brian Dean publish them. Save your visitors from that hassle.
Slideshows
Slideshows need to work properly on mobile devices.
Some of them offer scrolling via touch gestures, while others ignore touch gestures completely. Some resize properly, while others just cut off the images.
I’ve spent hours on optimizing slideshows that weren’t responsive or weren’t compatible to a responsive theme. You don’t want that experience, so make sure that slideshows work on mobiles - if you need slideshows.
Animations
While animations can look beautiful on desktops, they most often simply annoy visitors on mobile devices.
You’ll want a theme that lets you decide whether animations play on mobile devices or not.
Background Images & Videos
Do you (plan to) use big background images or full-screen video on your site? Then you need to make sure that they look good on mobile devices as well.
Most often, background videos don’t play on mobile devices. That means they need a great looking preview image, which is shown instead of the video.
Similar to the countless responsive WordPress themes available, we have as many plugins claiming to optimize WordPress on mobiles.
Some plugins act as theme switchers, displaying a different theme for visitors on a mobile device than for visitors on a desktop. Some hide content or show content based on the device your site is opened with.
They have one thing in common: they claim to be the best solution to rock WordPress on mobiles.
To be honest, I couldn’t disagree with it more. I personally hate plugins like WPtouch or iThemes mobile.
Why? Because they ruin your branding.
Yes, there are (premium) plugins that allow you to change the look-and-feel according to your brand. Yet it will never be a seamless experience for your visitor.
Imagine you open a site on a mobile device for the first time and liked the contents. You started reading an article on your smartphone and bookmark it for finishing it later. When open it later on your desktop in the evening, you notice that the site somehow looks different. You can’t tell what has changed, but fonts, layout and overall design doesn’t seem to fit what you’ve seen on the mobile device.
That’s not a feeling I want my visitors to experience!
One might argue that websites need to change their design to look good on mobiles - and therefore it’s ok to have a small break between mobile and desktop design.
Yes, layouts, font sizes, images sizes and all the other stuff needs to adapt to mobile screen sizes. If you haven’t noticed, we’ve covered that.
BUT I think it’s the WordPress theme that should handle the adaptation to mobiles. It’s the theme that should reposition the elements on the site, load smaller versions of images, hide animations and make WordPress easy to use on mobiles.
It’s NOT the job of a plugin to adapt your WordPress site to mobile devices. If you do use a one-click solution to create a mobile layout, you’re showing your mobile visitors that you just ignore them. You’re not willing to put in the work to create a seamless user experience for visitors on mobile devices - you just want „a mobile theme“.
Decide for yourself if that’s a proper attitude for your brand.
We all know these floating social bars, don’t we?
I use the Flare plugin on my site, and I love it. That’s why I recently interviewed the Jason Amunwa, Product Director at Digital Telepathy and responsible for the development of Flare.
Most other sites me and my team at SimplyWP work on have floating social bars as well.
However, there’s an issue with them. Most don’t work properly on mobile screens.
Let me share an example.
Before I used Flare on my website, I had Digg Digg. It worked nicely on desktops, despite never looking as good as Flare.
But when someone opened a blog post on a mobile device, Digg Digg would hide a part of the contents. That really annoyed most of my visitors, including myself.
The Pro version of Flare however is totally different. Take a look at this screenshot:
As you can see, Flare is placed in the bottom left corner of the screen. It doesn’t hide any content the visitor is reading, because the focus area of website visitors isn’t exactly at the bottom.
When a reader wants to share the post, he just taps on the icon in the bottom left corner and sees this beautiful screen.
It’s easy as pie to share the post from this screen, whereas it was a hassle to share the post with Digg Digg (have you tried tapping on the little icons already?).
All I can say about Flare is: great job Filament!
Filament understood what it meant to make social sharing easy. Their plugin integrates seamlessly with all website designs and really helps you to rock WordPress on mobiles.
So, when it comes to getting social shares from mobile devices, keep these points in mind:
The last point I’d like to mention is the monetary importance of rocking WordPress on mobiles.
I think we all know that smartphones, tablets and wearables are becoming essential parts in our daily lives. I personally can’t imagine living without my iPhone. Call me addicted, but I love being able to quickly find any information I need, stay in touch with friends all over the world, reading an eBook, managing my clients from on-the-go or simply relaxing and playing a game (I currently LOVE Asphalt 8!).
Private life and business are merging into the same field: digital devices. There’s no separation between job and private life anymore when you get your job mails on your private smartphone (heard of Bring Your Own Device?).
It’s simple: when you’re making your living as online entrepreneur, you simply can’t afford to miss the mobile market.
Google has created a simple tool, that will help you estimate the importance of mobile business based on the data you have collected so far.
I hope this guide gave you new insights on optimizing your WordPress on mobiles and will help you generate new business on the mobile markets!
Since this guide is pretty extensive, I’d love to hear your feedback! Do you want more guides like this in the future? Or do you prefer shorter guides focused on a single topic? Please let me know in the comments below!
Best,
Jan
