How to Optimize Your WordPress Website for Mobile
In late 2016 mobile website views surpassed desktop views for the first time ever. This major milestone should come as no surprise — it was merely the inevitable result of our culture’s growing smartphone addiction. Today’s internet user is no longer tethered to her desktop computer, and your website design shouldn’t be either. Otherwise, you’re missing out on a lot of views.
In fact, for the past two years Google has actually been penalizing websites that don’t include a mobile-optimized version. Supporting mobile browsers is no longer just a best practice but a vital component of getting your website discovered.
Fortunately, WordPress is ahead of the curve when it comes to making your site look great on desktop, mobile, tablet sizes, and everything in between. If having a mobile-optimized site sounds like Greek to you, never fear — it’s far easier than it sounds. Here are some tips for making your digital home accommodate all those web surfers with smaller screens.
Get Versatile by Going Responsive
You may have heard about both mobile sites and responsive sites, but what’s the difference? Well, the former means a version of your site that loads only on mobile screens. You can install a plugin like WPtouch to create a mobile version of your site without altering the desktop version at all.
The better option, however, is to make your entire site responsive. Responsive design focuses on creating an optimal viewing experience across a wide range of devices — without the user having to scroll, pan, or adjust his or her screen. Most responsive designs operate on a framework, such as Twitter’s Bootstrap, that displays scalable columns or grids which adjust based on the width of the browser. Other frameworks include Skeleton and Foundation. No matter what framework you choose, you will need to know HTML and CSS (if not look to Upwork or similar sites) to support your responsive efforts.
Fortunately, you don’t need to know how to code in order to get in on the responsive design trend. Even a basic search for “responsive” in the WordPress Theme Directory nets thousands of results. Because themes are subjected to a rigorous review process before they are accepted into the Theme Directory, it’s best to search there and avoid buggy code from other sources. Once you’ve installed a responsive theme, check that it looks great on all your devices. Most modern browsers have some form of code inspection. Chrome DevTools lets you simulate a wide range of device widths as well as Firefox’s Responsive Design Mode. If your site looks good, you’re all set.
In a Hurry? Activate Jetpack
Not ready to switch themes or just don’t have the time? Your best bet is to activate Jetpack, an official WordPress add-on plugin created by the people at Automattic.
Jetpack adds a lot of functionality to WordPress, including a mobile theme. Even if your website theme isn’t responsive, the Jetpack mobile theme will instantly overwrite it on smaller screen sizes so mobile users can browse with ease. Once you’ve installed the Jetpack plugin, navigate in your WordPress dashboard to Jetpack → Settings → Appearance tab, enable the mobile theme, and click “Save.”
With that one click, your mobile theme is active, and you can browse on your smartphone to check it. There are also further customizations you can make, like change the colors and create a custom menu just for mobile. Needless to say, this theme won’t look much like your desktop theme, but it will be fully optimized for mobile readers in a pinch.
Don’t Forget the App!
Optimizing your site for mobile isn’t just about taking your readers into consideration. You can also make your own life easier, by making it possible for you to easily update your site on the go. If you’d like to optimize your mobile blogging process, try installing the WordPress mobile app.
This free, official app comes in two flavors — iOS and Android — so you can use it no matter which operating system your mobile device is running. Inside the app, you can write posts, edit content, and manage comments even if you’re nowhere near your computer. The app even supports multiple sites if you have them: log in once to get each of your blogs at your fingertips.
Editing your site via mobile will also help you to better understand your mobile users. There’s a prominent “View Site” link on the app dashboard, and chances are you’ll want to check that from time to time while you’re making your mobile content edits. By becoming a mobile user yourself, you’ll get familiar with anything on your site that might be difficult or awkward for your readers to engage with.
Mobile readership is more than just a trend — it’s the future of websites. The better you can accommodate your users, whether they’re perched in front of a desktop or scrolling through their phone on a morning commute, the more success your website will see. — Lauren Orsini