By Ana Lynn Amelio
Mobile technology is on the rise, there is no doubt about it.
Everyday, we rely more and more on our smart phones and tablets to perform tasks we used to do from our laptops and desktop computers.
Even the way we access information has dramatically changed thanks to the world of smart phones and tablets.
Where we previously used TV and newspapers, nowadays we access information on the go, more often than not on our smart phones.
And let’s not forget shopping. Thanks to the mobile web, many consumers turn to their smart phones or tablets to shop online.
That’s why it’s imperative that your WordPress site is mobile friendly.
Especially when you consider the fact that last year in February Google announced they will be taking mobile friendliness into consideration when ranking sites.
If you are one of the many website owners who still aren’t sure which devices the majority of their visitors are using or how to check if your website is mobile friendly, you’re in luck.
This article will address your concerns and show you what you can do to ensure mobile friendliness of your WordPress website.
How to Check How Much of Your Traffic Is Coming From Mobile
When it comes to analyzing any type of data regarding your website, Google Analytics is your best friend.
It provides useful information not only on how many unique visitors you are getting, but it also analyzes what your visitors are doing, how they found you, and most importantly, which devices they are using to visit your site.
If you use Google Analytics, it’s easy to check how much of your traffic is coming from mobile.
Simply login to your Google Analytics account and select your web property or in other words, the website you are tracking.
From there, in the left-hand side menu, click on Mobile and then Overview:
You will be able to see how many of your visitors are coming from desktop, mobile, and tablet.
If you further click on Devices, you will be able to see exactly which devices your visitors are using to view your site.
After checking how much of your traffic is coming from mobile devices, your next step would be to check how your site displays on a mobile device and whether or not it’s mobile friendly.
There are three tools you can use to check this. The first one comes from Google and it’s as simple and straightforward as it can be.
In your browser, go to Google Mobile Friendly Test and enter your website’s URL. It will analyze your site and tell you if it’s mobile friendly or not.
In case your site is mobile friendly you will get the green light.
In case it’s not, it will show you the errors and guide you towards helpful resources to make your site mobile friendly.
Screenshot Not Mobile Friendly Result
The second tool is slightly more robust.
It’s called Screenfly and it lets you see how your site appears on various screen sizes, including smartphones, tablets, and even TVs.
While it won’t give you suggestions on what to do to improve the appearance of your site for mobile devices, it’s a useful tool to check if everything on your site displays the way it should.
The last tool on our list is MobileTest.me. MobileTest.me allows you to pick a mobile device and after entering your website’s URL you can see how it looks on that particular device.
The added bonus is that this website actually lets you interact with your website as if you are visiting it from that particular device.
It’s a great solution to put your common site elements like buttons, sign up forms, and sharing icons to the test.
How to Encourage User Interaction on Mobile Devices
Knowing if your website is mobile-responsive or not, is not enough.
Even if you passed the mobile friendly result with flying colors, that doesn’t mean that everything is displaying and working as intended.
There are a number of things you have to take into consideration to ensure your mobile visitors actually engage and interact with your site instead of flocking to your competitor.
Let’s take a look at some of the common website elements that have a huge impact on user interaction.
Social Sharing Buttons
Social sharing plugins are a dime a dozen but not all of them are made equal. Or in this case, optimized for usage on mobile devices.
There are many plugins which give you the option to display social sharing buttons above the content, below the content, and as a floating sidebar; all in the name of encouraging visitors to share your content.
But have you ever considered how those buttons display on mobile devices?
In most cases, the buttons either take up more screen real-estate than what’s available on a mobile device; or in the case of floating sidebar buttons, they end up covering your content.
So what can you do?
If you are using a sharing plugin with the floating bar option, check in the plugin settings if there is an option to disable it on mobile.
If there is, go ahead and do it. If there isn’t, then we suggest disabling that option entirely.
Another option is to use a plugin such as Social Warfare which resizes all sharing buttons according to the screen size, and more importantly allows you to disable the floating share buttons entirely on mobile devices.
If you are looking for a free solution, consider using SumoMe.
It’s a cloud based app whose primary goal is to increase the number of your email subscribers, but comes with a host of other useful tools.
One of those tools is a floating share bar which automatically displays on the bottom of your posts when visitors view your website on a mobile device.
Email Optin Forms
One of the best assets for your website is your email list.
It’s a great way to stay in touch with your readers and potential customers, as well as capture new leads, so you have to make sure your email optin forms are displaying properly on mobile devices.
Unfortunately, that is often not the case.
If you are like most website owners, you probably have email optins in several places on your site; and you probably use an email pop-up form too. More often than not, those beautiful pop-ups work perfectly on a desktop screen, but turn into a nightmare on a mobile device.
They either take up way too much screen real-estate where it’s impossible to close them or they are so small that the visitor cannot even read them, let alone fill out the required fields.
Depending on your plugin, you might want to disable them for mobile devices, or carefully test them to make sure they display properly.
If you are considering switching to a plugin that plays nicely across different screen sizes we have some recommendations below.
SumoMe, the plugin we mentioned before is one the plugins that actually displays nicely on mobile devices and it’s free.
Another option is Bloom – a premium plugin that is developed by Elegant Themes so if you decide to invest in Bloom, you will also get access to their entire suite of themes.
If pop-ups aren’t your thing, then Scroll Triggered Boxes are a nice free alternative. They display an email optin box that appears as someone scrolls down a post or page on your website.
Another great free plugin for displaying optin forms is Optin Forms. It offers 5 different opt-in form designs that you can add to your posts, page, and widgets via shortcodes.
For those of you who run a store on your website using WooCommerce, it’s crucial that your store displays and functions the way it should on mobile, as well as on desktop.
If you are using one of Woo’s themes, chances are your store is mobile-friendly.
The makers of WooCommerce and WooThemes have been building responsive themes since 2011 so their themes shouldn’t encounter any issues.
If you opted for one of the themes from a different marketplace or you had a custom site developed and you don’t want to redesign your whole site, then you have two options.
The first option is to contact your web designer and have them ensure your store works without any problems on mobile devices.
This includes ensuring your product images scale nicely depending on the screen size, the shop buttons don’t extend over the allowable screen size, and the input fields on the order form are configured to trigger the correct keyboard for the right field i.e. number keyboard for ZIP codes and phone numbers and the text keyboard for input fields such as name, address, and coupon codes.
As with any one-size-fit-all solution, the drawback of this approach is that your website will look different on mobile devices, which may hurt your branding in the long run.
Embedding Objects With a Set Width and Height
Occasionally, you might want to include a Youtube video or an infographic found elsewhere on your website.
While that’s a nice way to enhance and complement the content of your website, it could also hurt the experience for your mobile visitors.
The best way to ensure this doesn’t happen is to take a look at the following article from Smashing Magazine and follow their instructions on properly embedding external content to your website.
Slow Loading Times
Having a website that loads fast is crucial nowadays, and it’s even more important on mobile.
Google’s AMP Initiative
Last year, Google announced a new project under their belt. It’s called Accelerated Mobile Pages and it’s an open source initiative that aims to improve the world of mobile web:
“…We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously.
We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet or mobile device you’re using.” Source
In a nutshell, the project relies on AMP HTML – a new framework which allows websites to build light-weight web pages.
Their initiative is already accepted by Twitter, WordPress.com, Pinterest, Adobe Analytics, LinkedIn, and others who decided to collaborate with Google to make the mobile web better for everyone.
What Does This Mean for Website Owners Like You?
Google has made it easy for web publishers to get started in AMP with a tutorial that walks you through the creation of an AMP page.
And there is a good reason why you might want to consider jumping on board with AMP. Not only do the mobile friendly pages get ranked higher in search engines, they also get highlighted with a little green lighting bolt, inviting users to visit them.
If you are using WordPress and wondering if you have to abandon it in favor of ranking higher in the search engines, the answer is no. As it’s often the case with WordPress, there is a plugin for that.
With the AMP plugin active, all posts on your site will have dynamically generated AMP-compatible versions, meaning your visitors will not suffer from a slow and clunky mobile experience.
How to Optimize Your WordPress Site for Mobile Experience?
There are a few things you can do to optimize your WordPress site for mobile experience. The first and most obvious solution is to use a theme that is mobile responsive. While more and more theme developers are releasing themes that are responsive out of the box, there are a few suggestions you might want to consider.
Genesis is one of the highly recommended frameworks when it comes to WordPress themes. The beauty of Genesis is that it comes with child themes, which means you can customize the theme to your liking and you won’t lose those changes when the framework updates.
Their themes look great out of the box and most importantly, they are all responsive which means your site will look great on any device. A good number of them also come with support for WooCommerce which means your store will look great too.
And if all that isn’t enough it’s worth mentioning that Genesis comes with SEO optimized code which means you don’t have to worry about your theme ruining your SEO efforts.
If you are looking for a free option, then Responsive Theme is an excellent choice.
It has a fluid grid system that adapts your website to any device and features 9 Page Templates, 11 Widget Areas, 6 Template Layouts, 4 Menu Positions and more.
More importantly, it gives you the option to easily upload your logo and social networking options and is compatible with WooCommerce as well as SEO optimized.
If you aren’t keen on changing your current theme then there are a few plugins you can use to ensure a smooth experience for your mobile users.
WPTouch is a small and lightweight plugin that automatically transforms your WordPress website for mobile devices. The admin panel allows you to customize many aspects of its appearance, and deliver a fast, user-friendly and stylish version of your site to mobile visitors.
WP Mobile Detector
The WP Mobile Detector automatically detects if the visitor is using a standard mobile phone or a smartphone and loads a compatible WordPress mobile theme for each.
With features like advanced mobile analytics, image resizing, automatically formatted content, and detection of 5,000+ mobile phones, this plugin gives your mobile visitors the experience they desire.
Any Mobile Theme Switcher
This plugin detects mobile browser and displays the theme as the setting done from the admin area of your site. You can select a different mobile theme for each mobile browser.
Mobile traffic is huge nowadays, especially if you are a business focusing on serving your clients via your website. User experience is extremely important and it can mean a world of difference between your visitors staying on your website or abandoning your site and going to your competitors. The best way to make sure that doesn’t happen is to optimize your website for mobile traffic by following the tips and practices outlined in this article.
Top smartphone image used in accordance with this licence: https://creativecommons.org/licenses/by/2.0/legalcode