While others scrambled madly to prepare their website for “Mobilegeddon,” you sat back smugly, resting in the knowledge that your WordPress theme is already fully responsive – no penalties in your future!
Well, your theme may look great on smaller screens…
…but what about everything else on your site?
Think about all the content on your site that’s apart from your theme: maybe you use some custom code to embed videos or opt-in forms, or use plugins that add sharing buttons and other features to your site.
Do they all look great and work well on mobile devices? Or could they be costing you traffic and conversions?
The amount of web traffic from mobile devices surpassed desktop over a year ago, and it’s still on the rise. Check your own analytics – you’ll probably be shocked at just how much of your traffic isn’t from desktop users.
That’s why it’s important not just to have a site that’s mobile-responsive, but downright mobile-friendly.
Unfortunately, truly mobile-friendly websites are rare. Are you making these common mobile mistakes?
6 common mistakes that make your site mobile-unfriendly
1. Not focusing enough on the content
“Users come to a site to find information that they need or to accomplish a task, not to contemplate the beauty of buttons, navigation, menus, and other design elements,” the usability experts of the Nielsen Norman Group point out.
When someone visits your site on their smartphone, what do they see first?
Is it the actual content they’re looking for, or is their screen filled with your logo, navigation bars, search boxes, signup forms, and other elements?
On a desktop, it’s easy for users to ignore these elements until they’re needed.
But on mobile devices, screen real estate is at a premium, and users are impatient to get at the information they’re looking for.
If it takes them a lot of scrolling around to reach it, they’re likely to give up and try another, more user-friendly, site instead.
2. Using intrusive sharing plugins
Does your site have social sharing buttons that float alongside your content, following along with readers as they scroll?
They may look great on your desktop monitor – but do you know how they look on mobile screens?
Not all floating share buttons are an issue, but there are plenty out there that just don’t play well with responsive designs.
If your content is right up against the side of the screen (as is often the case on mobile devices with their limited screen space), and your share buttons are floating along the side of your screen, guess what?
Your content becomes completely unreadable and useless as it’s covered by those persistent buttons.
If you use floating social share buttons, be sure to double-check that they aren’t covering up your content in any size screen.
If possible, consider disabling your floating buttons on mobile devices, or use a responsive plugin like Social Warfare which resizes share buttons on the fly and removes floating buttons entirely on small screens. Read more about this in our Social Warfare review.
One of the best solutions for this, is to use SumoMe’s Share app. It’s a cloud app that can be used with WordPress (or any HTML based website).
Just by using the free version of this app, you can choose to display a floating share bar on desktop computers along with a floating bar at the bottom specially for mobile devices.
This means you can get the best of both worlds, without having a share bar cover up half of the content.
And wherever you place your share buttons for mobile users, it’s smart to limit the buttons to just 2 or 3 of the most popular ones. Having a ton of tiny buttons makes them all the more difficult to use on a small screen.
3. Embedding objects with defined height and width
If you share videos from YouTube on your blog, you could be ruining the experience for your mobile visitors.
The code you’re given from YouTube to embed a video looks something like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/KhI_PG518Ow" frameborder="0" allowfullscreen></iframe>
Take a close look – see those “width” and “height” attributes?
That means your embedded video is going to stay that width and height, no matter what size screen it’s being viewed at – even if the screen is less than 560 pixels, which many smartphones are.
This could also happen with other embedded objects, like infographics. Make sure to closely check any embed codes for width and height attributes.
If you’d like to make your embedded objects responsive, consider using this code from Smashing Magazine.
4. Using static opt-in forms
If you use opt-in forms on your website, make sure they’re responsive along with your theme. If you copy and paste the code from elsewhere (such as your email list provider like AWeber or MailChimp), it might not be optimized for mobile. You can check the code for width and height attributes, just like in the embedded YouTube video example above.
Make sure your opt-in forms are user-friendly in all aspects:
- Is every single field absolutely necessary?
- Is the label above the field (don’t use placeholders)?
- Are they big enough for large fingers?
- Do you use the right keyboard for each field (e.g. numbers for zip codes and phone numbers)
Filling out forms is difficult on mobile devices, so be sure to make it as easy as possible for those users so they don’t give up in frustration.
5. Desktop-sized pop-ups
Do you use pop-ups on your website? We don’t blame you; a well-designed pop-up can be a great way to build your email list!
But you may be driving your audience crazy by including those pop-ups on your mobile site.
Often, pop-ups designed primarily for a desktop screen are much too big for mobile devices.
If they’re “responsive” and shrink in size when viewed on a mobile screen, they may be too tiny for readers to make out what they’re trying to say.
Or even worse, if they’re not responsive at all, they could be covering up your entire site, making it impossible for your visitors to see your actual content. Often the little “x” in the corner is off-screen so users can’t even get rid of the pop-up if they want to persist in trying to read your content.
If you can, disable pop-ups on mobile devices, or carefully test a responsive pop-up to be sure it works well on mobile.
(Many of the plugins listed in our Top List Building Plugins For WordPress are mobile-responsive!)
6. Slow loading times
You already know it’s important to have a fast website, but on mobile it’s even more important.
People actually perceive loading times as slower on mobile, but at the same time, they expect sites to load faster on mobile devices than on their desktop! If it takes even just a few seconds to load, your impatient visitors will click away and find a faster-loading site to help them.
Check out these easy ways to speed up WordPress, and consider using a caching plugin as well.
How to test your site for complete mobile-friendliness
Of course, it’s easy to navigate to your site with your own smartphone or tablet to test all its features, but you probably don’t own every possible size screen.
To test how your site looks and functions on a variety of devices, you can use a tool like:
- Google’s Mobile-Friendly Test: Google’s test will quickly analyze your site in just a few seconds and inform you of any issues. You can also use the Mobile Usability tool in Google’s Search Console (formerly Webmaster Tools).
- Screenfly lets you see what your site looks like on a ton of different screen sizes, including tablets, Kindles, smartphones, even TVs.
- MobileTest.me emulates what your website looks like on a variety of different smartphone and tablet brands. Instead of just displaying an image, it actually loads your site as it would be loaded on that device, and allows you to interact with it – perfect for testing pop-ups, forms, etc.
How mobile-friendly is your site?
Have you discovered any other mobile issues after testing your site with one of the tools above? Share your experience and advice for fixing it in the comments below!
The post How Mobile-Friendly Is Your WordPress Site? appeared first on WP Superstars.