How to Make A Responsive WordPress Site
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.
What is responsive design?
Let’s cover how responsive design will apply to your WordPress site.
Responsive design is a way of organizing the content on your website so that it can dynamically respond to the size of the screen it appears on. This means the user experience is just as good on a smartphone as it would be on a laptop, desktop, or tablet.
To achieve this excellent experience across devices, designers create fluid content grids and code flexibility into images via the CSS of a site in order to rearrange the HTML in direct response to the size and resolution of a screen.
If you want a great example, open the WP Engine website in a new window (assuming you’re not already on a mobile device). Once you’re there, resize your browser window to make it smaller and smaller and watch how the website rearranges itself accordingly
As you shrink the window, the pictures and content blocks race around to fit into the window as it grows smaller and smaller according to fluid grids that the designer created. At its smallest, you’re left with what the site would look like on an iPhone. It’s beautiful, and easy to read. Enlarge the window again, and the site elements respond by racing back to their “desktop” configuration.
The site rearranges itself because there are CSS media queries that apply different rules to the page, depending on the size of the device (in this case, the browser window) that is viewing the site. The HTML remains the same, it’s simply rearranged by the CSS.
CSS rules can be applied to rearrange everything on the site, including serving various image sizes according to the device’s resolution. This is really cool when you want to do things like serve retina-enhanced images to iOS devices specifically.
Mobile apps vs. responsive sites
Choosing an App versus a responsive site comes down to site purpose.
Most websites are going to be just fine with responsive design that can adapt to devices. A mobile app comes into play when your users want very specific functionality on their mobile device that is different than the full site would provide.
Your bank likely offers a mobile app so you can quickly and securely check your balance from anywhere. Facebook and Twitter also adjust their functionality in their apps to fit the use of mobile.
A native app is something to consider only if your users need a specific set of functions from their phones which are distinct from what they need on your main website.
Performance considerations for responsive sites
A responsive design will affect the overall performance of your site. Loading lots of CSS and various sizes of images in order to respond to device sizes can be expensive from a backend processing perspective.
As part of evaluating a responsive design, it’s important to prioritize performance. Users might accept mobile site that’s a bit slower loading, but they won’t be forgiving if they try to bring up your site and they have to wait more than a few seconds.
From a technical perspective, delivering your site to a mobile device that’s using cellular data can slow your site speed by as much as half a second from the get-go.
Network latency and situational variations will only add to your load time as well. You can’t control cellular network variables, so it’s critical that you build your responsive site with performance as a feature from the start.
Make sure you’ve done the following to ensure your site is optimized for mobile.
- Optimize your images: Automatically detect the screen size of the device to create, cache, and deliver the right image size.
- Reduce your HTTP requests: Minimize the amount of CSS and JavaScript you need to use, and cache everything you can.
- Conditionally Load Assets: Large social media buttons, images, and the like are great for a larger device, but won’t affect the user experience for smaller ones. Plan your design to only load what is absolutely necessary.
- Lazy Loading: If you can get away with loading certain assets, JavaScript in particular, after the most important page elements, do it. By the time your users have consumed the initial content, those assets lower on the page will have loaded.
Does your WordPress site need to be responsive?
The default answer to this question is going to be “yes it does,” particularly with the wide availability of responsive WordPress themes. If your site is up for a redesign, or is in the process of being designed, it’s important to offer your users a quality experience on whatever device they happen to be on.
With that in mind, ask yourself and your team the following questions to evaluate whether your WordPress should be designed responsively.
- What’s the use case for your site? Will mobile consumption be important? Chances are, the answer to this is “yes, and increasingly so with each year.” In fact, mobile users already outpace desktop users by nearly 20%. There may be exceptions, but not many.
- Who are your users? The more technical they are, the more cutting-edge, the more likely they will expect a responsive site for every brand they associate with.
- Do you have the budget? This is a big one. A responsive site is a bit more expensive to build initially, but it’s cheaper to build a single responsive site than plan on building two separate versions of your site and manage the upkeep for both.
- Are you ready to learn a new type of design? Responsive design introduces a lot of new concepts and ways of understanding digital content. It will be important to work with a design team that can not only design something beautiful, but also educate you along the way.
Creating a 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.
Choosing the right WordPress theme
Before you start searching through the more than 10,000 WordPress themes that are available today, it’s a good idea to make a list of the features you want your site to have and use that list as a starting point.
If you’re not sure about the types of features to look for, there are a couple of baselines you can insist on to help you narrow things down: search-engine optimization (SEO) and fast page loading times (regardless of device) are two things any theme should have.
While there are plenty of WordPress themes that don’t have this functionality built-in, using a theme that has both of these features will make for a much better end-user experience on your site.
WP Engine’s suite of Premium WordPress Themes, for example, are all search-engine-optimized and mobile responsive, meaning they all load quickly on any device. These great-looking themes have been made for a wide variety of use cases, and businesses of all shapes and sizes are using them to fuel their online presence.
Access to these themes is also included with every WP Engine plan, which means WP Engine customers can use all of them at no extra charge.
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. Two of our favorites are JetPack and WPtouch.
1. JetPack
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 along with additional products for a moderate price.
2. WPtouch
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 $45 per site and are buildable based on the number of sites you have and the add-ons and extensions you choose to include.
Responsive images
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:
img {
max-width: 100%;
height: auto;
}
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.
1. UberMenu
One option you can try out is UberMenu. For $29, 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.
2. Max Mega Menu
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 licenses.
3. Responsive Menu
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 $49 (billed annually), or get unlimited licenses for $99/year.
Responsive tables
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:
table {
width: 100%;
border-collapse: collapse;
}
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.
1. TablePress
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.
2. WP Table Builder
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.
3. wpDataTables
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 $109 per year for the basic pricing tier. If you love the tool, a single payment of $969 will get you lifetime access for as many sites as you’d like.
Adding multilingual capabilities
As WordPress adoption has continued to rise around the world, it’s sparked a growing need for multilingual functionality, which allows sites to be translated into local languages based on a user’s location.
This type of functionality is huge for businesses with customers in multiple countries, and with WordPress, adding it to your site is not as challenging as you might think. In fact, it can be accomplished by installing a plugin such as Weglot, which allows you to make your website multilingual in minutes—without the need for code.
Weglot is also compatible with all WordPress themes and plugins, meaning it will work on any theme you end up using, and it won’t cause issues with your other plugins. When added to one of WP Engine’s Premium WordPress Themes, Weglot helps site owners build an SEO-friendly, mobile responsive site that can be accessed in any language.
Check out this guide to find out more, and visit WP Engine to learn about our different plans and the other features and functionality that come with our WordPress platform.
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, 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 high-quality 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 award-winning hosting platform for WordPress, and you won’t have to worry about losing visitors because of screen sizes!
