How to Make A WordPress Site Mobile Responsive
Responsive websites are now the industry standard, due to the large number of users browsing primarily on mobile devices. To illustrate how deep this impact goes, industry giants such as Google now reward mobile-friendly sites in search rankings, to help push more sites into catering to non-desktop devices.
In short, responsive websites use the same site code across all platforms, but offer optimization for each experience, regardless of the viewing medium. As a consequence, setting up a responsive site may mean rebuilding your entire design, or simply making a few tweaks to your existing one.
In this article, you’ll learn how WordPress sites can be made mobile-friendly using responsive design. We’ll also explain the importance of responsiveness for Search Engine Optimization (SEO). Let’s get cracking!
Is WordPress Mobile-Friendly?
WordPress is a Content Management System (CMS) that enables you to design the front end of your site to meet your exact requirements. This means it can easily be made mobile-friendly.
Responsive default themes have been available since 2011. Many third-party themes now offer responsive design out-of-the-box as well. Those that don’t are often outdated in many other areas.
Responsive WordPress Web Design
Existing static designs can often be converted into responsive themes. Here are a few of the elements to consider throughout the conversion process:
- Default browser zoom
- Fluid element widths and heights
- Image optimization
- Design-specific breakpoints
- Separate responsive menus for mobile devices
You should also test your updated design across multiple devices, and consider extra elements such as responsive tables in your testing. However, the easiest way to make WordPress responsive is to choose a pre-built responsive theme from the start.
Best Responsive WordPress Themes
Since responsive design is now an industry standard, many of the most popular WordPress themes are already mobile-friendly. Here are a few of the best responsive WordPress themes that are currently available.
Genesis is our own robust WordPress framework, which is built for mobile friendliness. We recommend taking a good look at the many child themes available, to find a suitable option for your site.
Genesis pricing begins at $59.95. However, you can gain access to the framework and over 35 Studio Press themes for free with any WP Engine hosting plan. The Genesis framework has over 60 child themes to choose from, so you’ll find options for nearly any niche and use case.
Divi is a responsive theme designed for those who prefer not to code. It’s possible to make Divi look unique, due to the plethora of options for customizing layouts. Its visual page builder also enables you to create completely-custom layouts that perform well on mobile devices. Divi is included with an Elegant Themes annual membership, starting at $89.
Twenty Nineteen is WordPress’ responsive default theme for 2019, designed to show off the capability of the new block editor. This theme is flexible enough to work for anything from a photo blog to a new business. It’s a robust, free option for those working on a budget.
Finally, Rowling is another beautiful free responsive theme, and one that’s well-suited to magazine layouts. It’s worth checking out, not least because of its way of showcasing how seemingly complex content can become user-friendly on mobile devices.
Mobile WordPress Plugins
Mobile phones open up a lot of potential for features such as push notifications and persistent loading over slow connections. However, while there are solutions to help turn your website into a mobile web app and take the mobile-friendly concept to the next level, many are still under development and testing phases.
This means that some of the functionality you’d expect might be lacking. However, there are a number of mobile WordPress plugins that can help you improve your site in various ways.
While there are many solutions available, the Jetpack plugin is a very popular option. You’ll find it in the Plugin Directory, but it also has options for creating a simple mobile theme on your site as well.
One of the best things about Jetpack is that it is well-maintained. This means there will be frequent updates to ensure its security and functionality. It’s also one of the most feature-filled tools you can find. The base plugin is free and comes with a lot of options. The downside is that there are so many features, the interface may seem confusing at first.
Additionally, If you want daily backups, custom themes, and SEO tools, you’ll need to invest in the premium version of Jetpack. Depending on your needs, you can get the premium plugin for personal use at $39 per year, with the top tier coming in at $299 annually.
Additionally, you can explore WPtouch, a popular plugin that can create a mobile website from your existing site. One of the main benefits of using this plugin is that you can customize the mobile version without disrupting or changing your original website.
The free version has a pretty robust functionality as well. If you’re looking for a different look and feel, however, you’ll have to purchase the pro version. Pro pricing plans begin at $79 per year, and range up to $359 per year for enterprise-level licensing.
While WordPress Mobile Pack has not been tested with the latest version of WordPress, it’s a popular plugin for creating a Progressive Web Application (PWA) out of your existing website. This means your site’s users will get an ‘app-like’ experience, without requiring you to put resources into programming a downloadable application for an app store.
With this plugin, you’ll be able to push banner messages to users, alerting them to the option of adding your website to their home screens. Your pages will then cache and load very quickly. The basic functionality is free for this plugin, but you’ll have to purchase the pro version to gain access to more themes, customization options, and the ability to sync certain content.
The pro version of the plugin has three tiers to choose from. The Freelancer package starts at $99 per year, and can be used on three domains. The price tiers top out with the VIP option, at $499 per year for ten domain licenses.
WordPress has offered featured responsive images by default since version 4.4. However, especially for sites using the older code, there’s a simple snippet you can add to your stylesheet to ensure that images never look too large on small devices:
While there are many ways to ensure optimal responsive image performance, this snippet ensures that all of your images are responsive as a baseline.
Finally, most images are suitable for inclusion on a responsive site, although scalability should be a factor. For example, if you include an image with a lot of text, it may not be easy to read on mobile devices. In this case, you may be better off choosing a different image, or providing a way for the text to be read independently of the image.
There are two primary schools of thought regarding the creation of responsive menus:
- Make one menu that works at all sizes.
- Create two menus: one for large screens and one for small screen experiences. Only one will display at a time, depending on the screen size being used.
The one-size-fits-all approach works best for smaller menus, as optimizing CSS for mobile readability requires only some simple tweaking. In that situation, the menu is always visible to the user regardless of the device’s size.
However, if a menu is too large to easily shrink down for mobile devices, you may need a second version dedicated to smaller screens. In this case, the large menu is only visible on large screens, and a mobile menu icon is present on smaller screens.
A typical example of this approach is the hamburger menu icon, which slides the full mobile menu into view when clicked on. You can also make use of WordPress’ diverse selection of plugins to assist with your responsive menu creation. Let’s look at three options.
One option you can try out is UberMenu. For $25, you’ll have access to future updates and six months of support. UberMenu can help you create fully-responsive, touch-friendly menus. Unfortunately, unless your theme is UberMenu-specific, you will likely have to make some manual changes in order to get your theme to work properly.
Another option is the Max Mega Menu plugin. This tool has a free option in the WordPress Plugin Directory, and works with your existing menus to convert them into ‘mega’ menus:
The free version also has many mobile menu features, such as native support for touch screens. To gain access to more fonts and mobile toggle options, you’ll need to check out one of the three pricing tiers. The premium version of the plugin starts at $29 per year, and ranges up to $99 per year for multiple site licences.
Another well-rated and popular plugin you can check out for making your menus mobile-friendly is the Responsive Menu plugin. This solution has over 150 different customization options, all within an easy-to-use interface.
You’ll have the flexibility to change nearly every aspect of your menus from your plugin settings page. If you’re looking for animations and more fonts, however, you’ll have to check out the Responsive Menu plugin upgrade.
The free version of the plugin may bring the features you need, since the list of options is quite extensive. If you upgrade, you can get a single site license for $29, or get unlimited licenses for $99. The plugin cost is a one-time fee, and you’ll receive free updates for life.
By default, tables take up as much space as their content (or more). This can lead to extra-wide tables ruining mobile layouts.
Unfortunately, tables full of content become difficult to read when scaled down to fit the width of a mobile page. Responsive design isn’t all about squishing data into a small screen. Instead, it’s about making everything user-friendly regardless of device.
For a quick-and-dirty solution, you can add basic responsiveness to your tables with this CSS snippet:
However, you don’t have to stop there. Unless you have small tables, we recommend optimizing each one based on the kind of content it presents. Depending on the data within your tables, there are a number of responsive options you can choose from for the best readability possible.
If you’re looking for a plugin solution for responsive tables, however, you’re in luck! There are several options, but we’re going to recommend three in particular.
First up, the TablePress plugin is a popular, well-maintained, and highly-rated option. You’ll be able to create and embed beautiful tables with shortcodes. In order to achieve truly responsive tables, however, you’ll need to install a TablePress extension. While these are also free, it’s recommended that you make a donation to the developer.
If you’re looking for a five star, drag-and-drop table builder option, WP Table Builder might be for you. A somewhat new but well-received plugin, its drag-and-drop interface makes it easy to create responsive tables for your website.
This is a completely free plugin as well. The only real downside to this option is that it only comes with five data options at this time. You are somewhat limited to text, images, buttons, lists, and star ratings.
The third plugin we recommend checking out is wpDataTables. With this tool, you can quickly create tables and charts from existing Excel, CSV, PHP, or other data. This means you can take large data sets and make them accessible on your website.
This plugin is also Gutenberg-ready, making it a snap to add tables to your site’s pages and posts once you’ve customized them in the plugin’s settings. You’ll be somewhat limited by the free version of this plugin, however.
For example, you won’t be able to make MSQL-query based tables or pull information from Google Spreadsheets unless you upgrade. The premium version starts at $59 per year for the basic pricing tier, and tops out at $249 per year for the developer package.
Mobile Responsiveness for SEO
Simply put, mobile-friendly websites are rewarded by Google in organic search results. Between 2015 and 2016, a number of updates were added to the ranking algorithm to favor responsive websites. It’s important to note that because speed plays a huge role in user-friendliness for mobile users, this also contributes to better search engine rankings.
Of course, fast-loading responsive websites rely on stellar hosting to succeed. When you choose a quality hosting company such as WP Engine (we offer PHP 7 as standard and a free Content Delivery Network on higher-tier plans), you’ll notice faster loading times and smoother operation all around.
Build Responsively With WP Engine
Working toward a responsive website should be a priority in our mobile-reliant world. There’s a lot to keep track of, but here at WP Engine we can help point you towards the best WordPress developer resources and highly-responsive themes for mobile users.
Additionally, we have a wide variety of plans and solutions for your website. We’ll help you build responsively on our digital experience platform, and you won’t have to worry about losing visitors because of screen sizes!