If you pay much attention to your website stats at all these days, you know that mobile is huge. For this website, just under half my traffic comes from desktop computers – the rest is all tablets and cell phones. It’s not something you should ignore, especially with Google now penalizing websites on mobile search if they aren’t mobile friendly.
You can start checking this out with a simple tool from Google to see whether or not they consider your website mobile friendly. This won’t show you how your website looks to visitors, but knowing whether or not Google considers your website to be mobile friendly is a good place to start.
But Don’t Most Smartphones Display Websites Just Fine Anyhow?
It’s true that most smartphones do a pretty good job of displaying websites. Screen sizes have increased through the years, and quality in general has gone up. But not everything works right on every mobile device if you haven’t planned for it.
Your font sizes may be too small, for example, for a smaller screen. You might have links set too close together to be easily used on a smaller screen. Your layout may come out really weird or just be too wide for the phone’s screen. When in doubt, it’s best to check things out so you know how your website works on different screens.
There are tools, such as Browserstack, Sauce Labs, and ScreenFly. Some are free and others require you to pay. It’s absolutely worth it to know what your website looks like, and even how it works on a wide variety of browsers, devices and screen sizes, even beyond the simple question of “is my website mobile friendly?”
It may sound like a lot of work to get your website ready. Messing around with the way your website works can be time consuming or expensive, depending on whether you do it yourself or hire somebody. Fortunately, there are a variety of options.
If you run your website using WordPress, getting mobile ready may be as simple as using a plugin. The plugin detects whether a visitor is on a mobile device or a computer, and shows the correct version of the site. Here are a few options:
This is what I used first when going for a more mobile friendly website. It’s very easy to use. The options are pretty basic – you can customize colors and other aspects of your website’s mobile appearance. There’s also an option for visitors to switch over to the regular version of your website, which can be useful. You can get more features if you buy the pro version.
Jetpack is a plugin that comes from the developers of WordPress, and it does a lot more than offer a mobile theme. It also gives you access on your self hosted WordPress blog to features offered on WordPress.com, such as stats, site management, subscriptions, comment forms, image carousels and more.
WordPress Mobile App makes your website look and feel more like an app when someone views it on a mobile device. You can customize the appearance, and all content is synced to your blog. There is also a premium version with more features.
Yet another plugin to quickly make your WordPress site mobile. Visitors can choose the mobile or regular version of your site and the theme is designed to be lightweight and fast.
A plugin isn’t your only option for managing your content for mobile users. You can make your website responsive; that is, it can change based on the size of the screen it is being viewed on. This is the solution I chose, as not all of this website is based on WordPress, and I wanted a consistent look and feel across the entire site, no matter the device.
Some people really don’t like responsive websites. I like them, especially for a site like this one, where the focus is on information rather than interactivity. If you need more interactivity on your website, it’s entirely possible that a specialized mobile version of your site, beyond what even the above mentioned WordPress plugins can do, would be a good idea. If you’re more about information, perhaps not so much.
What I’ve done on this site isn’t as complex as some responsive sites have, and I’m not 100% satisfied with some of my results. I’m mostly pleased with it, however. I did a lot of research on how to make a responsive website, and how to manage all the likely screen resolutions. It’s the navigation menus that mostly give me fits – it’s really difficult to make that display nicely across screen sizes.
But I learned how to tell my pages what content to display and what to hide on different screen sizes, how to change the layout based on screen size, and so forth. It took a lot of time, but I enjoyed figuring it out for myself. If you aren’t inclined toward doing your own HTML and CSS, don’t try this on your own – have a professional help. If you’re already managing your own designs, you can probably do this.
If you use WordPress, there are also quite a few themes out there that are responsive right out of the box. I like this idea better than the plugins I mentioned at the start because, once again, I like having more consistency across devices.
There are a ton of free responsive WordPress themes out there. Check out the sites linked or just do a search for them – they’re out there. WordPress even comes with Twenty Fourteen and Twenty Fifteen, both responsive layouts for your blog.
Free may not be your best choice, however. Many free themes are very limited in how you can customize them and in their support. Companies such as Themeisle offer a range of very impressive responsive themes for reasonable prices.