Use responsive design
If your site uses WordPress, you’re likely already using a responsive design that includes flexible layouts and images, and cascading stylesheet media queries to help give your users the best visual experience possible on their device.
Your website’s ability to detect and adapt its layout to the multitude of different devices and screens sizes isn’t even something that’s suggested in this day and age; it’s essential to keep visitors engaged and Google happily pointing them your way.
Include a viewport meta tag
Here’s an example of a viewport meta tag if you’ve never seen one before:
meta name=”viewport” content=”width=device-width, initial-scale=1″
A viewport meta tag is so important. It tells whichever browser a visitor is using how to render the content on the page according to the size of their device’s screen size and resolution. Leave it out and, at the very least, the user will have to scroll from side to side to view the content, among other possible usability issues.
Size matters in mobile browsing – and probably not like you’d think
A popular line of thought from inexperienced website developers is that everything on-site should be smaller to accommodate the mobile experience. Smaller text, smaller buttons, etc.
The minimum recommended font size for text is 14px. That’s a minimum, so don’t be afraid to go larger if it makes the text display better during testing. For optimum resolution on their new retina displays, Apple recommends button sizes be at least 44px by 44px. Consider the impact of button sizes on conversions – if they can’t click it, they can’t buy it!
High quality images are mandatory
Most new Android devices and all new iOS devices require at least double the resolution quality from images (compared to most desktops) to render them in the highest possible quality. Nearly all smartphones currently in use have at least HD quality displays; with many now using 2K (Quad HD) and 4K (Ultra HD).
If your images aren’t the best resolution they can be, mobile users with high-def screens are going to see nothing more than a pixilated mess when they arrive at your site.
To make matters worse (for websites lacking mobile friendly design elements), unlike a laptop or computer monitor; smartphones are typically only used for a year or two (max) before the user trades up for next year’s model. This high turnover rate means that you need to upgrade your low-res images and change the way you source and edit images on your websites immediately.
Use YouTube videos rather than hosting your own
Hosting your own videos on-site presents a number of problems for mobile visitors. If your video viewer has the slightest coding issues, visitors are going to experience problems. Not to mention, the increased load on your servers can lead to dreaded streaming issues – not what an on-the-go viewer wants to deal with.
Let YouTube take the server strain, while their embedded videos are already perfectly mobile adaptive. You get faster load times and happy mobile customers, YouTube gets the chance to make some extra advertising revenue from your videos. It’s a win-win for everybody.
Give them the mobile version first, but always allow for full site access
This is particularly important for return visitors who already enjoy your content. Include a “View Desktop Version” button, or something similar for those who want to get the full experience from your site.
Viewers may have to scroll a bit more, but if they know there are features like navigation or content that’s missing from the mobile-enhanced version, why make them suffer because they’re not on their desktop?
Test, test, test!
Testing should never end. Every time you get access to a different type of mobile device, you should be accessing your sites to make sure they’re displayed correctly. Ask your friends, ask your family – invite social media subscribers to offer feedback.
Never stop testing and tweaking. If your site isn’t loading correctly on a specific brand of phone or tablet and you’re losing customers because of it, consider how many more are out there with the exact same device…