How to Make A WordPress Site Mobile Responsive
Mobile-friendly responsive sites are now the industry standard, due to the large number of users browsing on mobile devices. To illustrate how deep this impact goes, industry giants such as Google reward mobile sites in search rankings to help push more sites into catering for 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. You’ll learn about responsive themes, plugins, images, menus, and tables. Finally, we’ll 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 your exact requirements, meaning it can easily be made mobile-friendly. Responsive default themes have been available since 2011, and many third-party themes now offer responsive design as standard. 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:
- Default browser zoom
- Fluid element widths and heights
- Responsive image styles
- Design-specific breakpoints
- Separate responsive menus for mobile
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
As 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 currently available.
Genesis is a robust WordPress framework built for mobile friendliness. We recommend taking a good look at their many child themes to find a suitable option for your site. Genesis pricing begins at $59.95.
Divi is a responsive theme designed for those who prefer not to code. It’s possible to make Divi look unique due to its plethora of options for customizing your layouts. Their visual page builder enables you to create completely custom layouts that perform well on mobile. Divi is included with an Elegant Themes annual membership, starting at $89.
Twenty Seventeen is WordPress’ responsive default theme for 2017, designed with growing businesses in mind. You can add a short video as the header background, which will display correctly on different devices. It’s a robust, free option for those working on a budget.
Finally, Rowling is another beautiful free responsive theme, 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
There are also a number of mobile WordPress plugins to help you make your website more mobile-friendly.
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 whole mobile-friendly concept to the next level, many are still in the embryonic stages, meaning the functionality you’d expect could be lacking.
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 images never look too large on small devices:
While there are many ways to ensure optimal responsive image performance, this snippet ensures 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 modes of thought regarding the creation of responsive menus:
- Make one menu that works at all sizes.
- Create two menus: one for a large screen and one for small screen experiences. Only one displays at a time depending on the screen size.
The one-size-fits-all approach works best for smaller menus, as optimizing the CSS for mobile readability requires only simple tweaking. In this 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, you may need a second one dedicated to smaller screens. In this case, the large menu is only visible for 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 for navigation when clicked.
By default, tables take up as much space as their content. 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 the page. Responsive design isn’t all about squishing data into a small screen, 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 here. Unless you have small tables, we recommend optimizing each table 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 best readability.
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 (which offers PHP 7 as standard and a free Content Delivery Network on higher tier plans), you’ll notice faster load times and smoother operation all around.
Image credit: Kait Loggins.