WordPress Sites: Mobile Plugins vs. Responsive Design

The way people view and interact on the web has changed significantly in recent years; we’re not just sitting at our desks surfing the web on our computers anymore – we have truly gone mobile. Making web content available to anyone, on any device, is the name of the game and doing so is an all-around win. When websites meet accessibility standards, they widen our potential audience and engagement. Additionally, mobile-friendly sites are rewarded by search services. Google, for instance, gives preferential treatment to mobile-optimized sites, listing them over other sites that are not. Ensuring content is accessible by users on desktop computers, mobile devices like smartphones and tablets, for the vision-impaired using screen readers, and now even car dashboards and whatever else is next – AR glasses and wristwatches – is essential. Being mobile-friendly is paramount because the more accessible and usable our websites are, the more people we are enabling to consume our content – which in turn means the potential for more traffic, more social shares, more email and/or blog subscribers…more students enrolling! By making our WordPress sites mobile-friendly we are taking the first step towards greater accessibility.

The End of Pinching, Zooming and Poking at a Website on Your Phone: Mobile Usability Options for WordPress

There are two main methods of going mobile with WordPress; the first and currently the most common is by installing a mobile plug-in such as Jetpack or WPtouch which enables your site to display a separate mobile-friendly theme when viewed from a mobile device. The other option  is to use a responsive theme that responds to the size of the viewport and adjusts accordingly.

I started with the latter, opting to install the default Twenty Seventeen theme and various other responsive themes to see how they would behave on my iPhone and iPad. Right from the first page load, I liked viewing and using the theme Twenty Seventeen more on my phone than in a desktop browser – the desktop versions almost seemed too large. The Twenty Seventeen theme was snappy and responded well to touch inputs. The layout of the menus and content looked natural and well thought out. As soon as the site popped up, it looked and felt very familiar, and I knew I was in the right place.

Next, I installed the Jetpack plug-in, activated it and headed back to the site on my phone. Jetpack actually does a nice job of creating a navigation menu, formatting the text and content, but it looks and feels like a different website because much of the styling, colors, fonts and typefaces are replaced with generic settings. Jetpack (and WPtouch) offer experiences that are much better than being relegated to swiping all over the page to see the content you are trying find but something seems to be missing. While these plug-ins absolutely deliver on what they promise and both of them do generate a functional mobile experience, I think it’s the fact that the WordPress site has been translated into more of an app-like style interface instead of the look-and-feel of the original site itself which creates a sense of disconnection.

Comparison

Plug-ins for Mobile Themes

  • Plug-ins are really quick and easy to implement
  • Plug-ins are low/no cost

Responsive Themes

  • More cohesive user experience
  • Pretty much guaranteed to work across all mobile devices

The Verdict

So which is better? A mobile plug-in that adds a second theme to your site which is only seen by mobile devices, or a single responsive theme that responds to the size of the viewport and adjusts layout accordingly?

I think the plug-in route is a great fix for an immediate need because it’s so fast, low/no cost, and so easy to install that you can be mobile friendly in a few minutes. That said, because mobile themes rely on the device being detected, when new devices come out they may not work with your website. With a responsive theme you don’t have that worry because again, by design, it responds to the size of the viewport and adjusts website layout accordingly. Since websites eventually need updating anyway, I definitely am in the camp of finding (or developing) and implementing a responsive theme.

In the end, it’s all about building a better experience for our users – regardless of the device they use – and any steps we take to becoming mobile friendly is step in the right direction.

Additional Resources

Google On Being Mobile Friendly

To test and see if your website is mobile friendly, Google has created the Mobile-Friendly Test Tool. If you run your website through the test and it doesn’t pass, using the plug-ins or a responsive WordPress we’ve talked about here will do the trick. Also you can check this article on Google’s Webmaster Central blog that goes over all the criteria for being mobile-friendly.

The Difference between Web Site Usability and Accessibility

A great article on UsabilityGeek by Justin Mifsud about the distinction between usability and accessibility.