According to the KPCB mobile technology trends report by Mary Meeker, mobile digital media time in the US has accounted for more than half of all time spent on digital media by adult users since 2015.
This is unsurprising, given that 80% of internet users own a smartphone. If you’re launching a new website, the question isn’t, “Will my visitors access my site using mobile devices as well as desktop displays?” Instead, it’s, “What do I need to do to make my site accessible to mobile users?”
This question becomes even more important when you consider that, according to Google, “61% of users are unlikely to return to a mobile site they had trouble accessing – and 40% visit a competitor’s site instead.” At the same time, the CMS Report suggests that “57% of users say they won’t recommend a business with a poorly designed mobile site.”
To understand how you can best support these mobile users, we’ll break down what it takes to make a site mobile-accessible, as well as how you can achieve mobile usability on the WordPress platform.
Mobile Display Approaches
As the question of mobile usability came to prominence in the late 2000s, marketers had several options to choose from when creating mobile-accessible sites.
One option was to create an entirely separate site – typically, something that would be built using a tool like bMobilized or DudaMobile and hosted on a mobile-specific subdomain (as in, “http://m.yoursite.com”). Mobile sites often looked completely different than their desktop predecessors, as they were built to showcase the information – such as location, hours and specials – developers felt would most interest mobile audiences.
There are two downsides to this approach that have challenged its adoption in recent years. The first is the fact that, as our smartphone usage has expanded, users no longer want to see a pared-down version of a site’s content on a mobile device (at least, they don’t universally). They want to engage fully with your content, and they can’t do that if they’re constantly having to flip between your desktop and mobile site versions.
The larger consideration is the SEO impact of using a separate mobile sites. Standalone mobile sites need to be correctly mapped to desktop versions using rel=”canonical” and rel=”alternate” tags. Get this wrong, and you could see your search rankings fall as a result of indexing challenges and duplicate content issues.
Why Responsive Website Design?
A better approach – and the one currently recommended by Google – is responsive website design.
Smashing Magazine describes responsive website design as:
“The approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.”
Imagine that you’re browsing a website on your desktop computer. If the site is using responsive website design and you attempt to access it on your mobile device, you’ll see that the same content and design elements are still displayed. They’ve just been reconfigured to suit the size of your device’s screen, as detected by your website’s code.
According to Google, responsive website design offers a number of different benefits, including the pared-down list below:
- Makes it easier for users to share and link to your content with a single URL.
- Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
- Requires less engineering time to maintain multiple pages for the same content.
- Reduces the possibility of the common mistakes that affect mobile sites.
- Requires no redirection for users to have a device-optimized view, which reduces load time.
- Saves resources when Googlebot crawls your site.
If you look at this list, you’ll see benefits to both the user and to your site’s performance. Further, consider this list in light of Google’s mobile-friendliness algorithm update of 2015, which granted an advantage in organic search results placements to sites that provide a better mobile experience to their visitors.
Responsive Design in WordPress
Despite the complex-sounding code requirements that would enable a website to shift seamlessly between desktop and mobile displays, implementing a responsive design on your WordPress website is actually quite simple.
Again, you have several choices:
- You can transform a static WordPress design into a responsive design with a bit of coding
- You can use a plugin to achieve the same transformation
- You can choose a responsive design theme from the start
Let’s begin with the last option on the list above, as it’s the easiest option for launching a responsive website design on the WordPress platform.
Choosing a Responsive Theme
A “responsive theme” in WordPress-speak is one that’s been coded with the specific ability to shift responsively between desktop and mobile displays.
As you search for a theme for your new WordPress site, look for those that are labeled as being responsive:
Because responsive design has become so popular, you’ll find that most WordPress themes claim to be responsive. But don’t just take their word for it. Instead, read reviews of the theme, if they’re available. Did any past users mention issues regarding the theme’s ability to operate responsively? If so, you may wind up facing the same problems yourself once you’ve installed the theme.
And speaking of installation, once your new “responsive” theme is active, test it on as many devices you can (or check out a testing service like UserTesting) to ensure it’s operating the way you expected. If you’ve hand-coded images to customize your theme, for instance, you may find that the site’s responsive coding isn’t being applied correctly, leaving you with assets that break the boundaries of your responsive design.
Using a Responsive Plugin
Now, suppose your WordPress site is already up-and-running – and it isn’t responsive. As mentioned above, you can introduce responsive coding either with plugins or with manual recoding. Of these two options, using a plugin will be easier, though you’ll find that most of the responsive plugins available for WordPress act on individual site elements, not on sites themselves in general.
Take the Sinking Dropdowns WordPress plugin. Installing the plugin will adjust the display of your main navigation bar from a desktop dropdown…
To a nicely-stacked mobile menu:
Another option available to WordPress users with static sites (or with responsive sites whose slideshows don’t render well on mobile devices) is the Fluid Responsive Slideshow plugin. The plugin lives up to its name, giving users an easy way to add mobile-responsive slideshow images quickly and easily.
These are only two of the options available within the vast WordPress plugins directory. If you need a specific responsive feature, it’s worth a good search before pursuing more advanced coding options or a completely new site design.
Manually Transforming a Static WordPress Site
If you’re a developer, you can, of course, code your own WordPress theme with the responsive specifications you require. But if you aren’t an experienced coder and you have a static WordPress site you’d like to transform to being fully-responsive, you may still be able to do so using the tutorial published by Torque.
To summarize the process covered in greater detail on Torque’s site, re-coding your static WordPress site to become responsive involves several steps:
- Defining the default zoom
- Setting fluid element widths and heights
- Resizing images
- Implementing breakpoints
- Creating a mobile menu
- Adapting fonts
Whenever you’re making changes to your site’s code, remember to make a full backup of your current website before beginning that you can revert to in case you make any errors throughout the process. With changes these extensive, it’s not a bad idea to make multiple backups. Doing so prevents you from losing all of your progress if you encounter issues at any of the subsequent steps in the process described above.
When it comes to choosing from the mobile usability options described above, take several things into account. Think about your own technical level of skill, and what will be required of you to create a separate mobile website, introduce a new responsive WordPress theme or convert your current design to one that’s more mobile-friendly.
But think of your customers as well. Their satisfaction with your business – and their willingness to refer it to others – may come down to their on-site experience. Make sure it’s a positive one, whether it’s happening on a desktop computer or any type of mobile device.
Got a question about responsive WordPress design? Leave us a note below.