Creating a Responsive WordPress Site Your Mobile Users Will Love
Creating a Responsive WordPress Site Your Mobile Users Will Love
As more and more people get online using a variety of mobile devices and screen sizes, it’s essential that your WordPress site is responsive and device-agnostic. Heck, you may even be reading this article on your phone right now. (How does our site look? Okay? Good.)
In this post I’ll cover everything you need to know to give your site a responsive layout, but also ensure it gives your visitors the best possible experience on everything from 27-inch UHD desktop displays to 4-inch iPhone 5s screens.
Specifically, I’ll look at:
- Responsive theming, either by downloading a responsive theme or by making your own theme responsive.
- Making it easy for people to consume your site’s content on all devices.
- Responsive navigation and the ways you can make it easier for users to move around your site on different devices.
- Responsive forms, making sure they’re easy to fill out on all devices.
- Responsive images: making sure your images are no larger than they need to be for different screen sizes.
In some cases I’ll give you some code or ideas you can use in your theme to make your site responsive, while in others I’ll look at plugins or themes that will help you make your site work better across a range of devices.
But first let’s get started with an understanding of what responsive web design (RWD) is.
So What is Responsive Design?
At its most fundamental, responsive design is about giving your site a responsive layout: one that adjusts according to the screen width. This uses CSS and includes two elements:
- Using flexible widths for elements on the page: so instead of giving your site a width of 1200px, for example, you give it a width of 96%. This gives a bit of breathing room and ensures that your site will take up 96% of the width of the window whatever its size.
- Adding media queries to your stylesheet to change the CSS for certain screen widths. For example, if your site has a sidebar on the right, you could use a media query to move it below the main content on smaller screens, as otherwise it would be too narrow.
Responsive Web Design was first described by Ethan Marcotte for A List Apart back in 2010.
In his article, Marcotte detailed an emergent discipline called “responsive architecture,’ which he said had begun asking how physical spaces could respond to the presence of people passing through them.
Responsive Web Design was first described in detail by Ethan Marcotte in 2010, and since then it’s gone from being an added extra for sites to a fundamental shift in the way we design layouts.
In the years since then it’s developed to encompass consideration of responsive images, interactions and navigation as well as user experience (UX) across devices. There has also been a lot of work done around the area of what’s improved on smaller devices using CSS (e.g. layouts) and what can be done using server side languages like PHP (e.g. responsive images). I’ll give you some tips on both of these in this post.
The most fundamental element of any responsive site is in its layout, which in WordPress is delivered via the theme. So let’s take a look at responsive theme development.
Responsive Theming and WordPress
A responsive theme is one which will (at the very least) incorporate the two aspects of RWD I’ve described above: fluid widths and media queries. This is different from a mobile theme which may not include fluid widths but just uses media queries to completely change the layout at certain screen widths (or breakpoints).
The disadvantage of a mobile theme is that it only changes the layout at very specific screen widths.
With the variety of devices constantly growing, any fixed-width layout will always break on some devices, which is why I strongly recommend using responsive themes rather than mobile themes (or plugins for mobile layout, which were once all the rage). This will also ensure your website is more likely to work on future devices.
Mobile themes or plugins sometimes have another feature that’s very frustrating and harmful for UX: they only apply to specific pages or content types on your site.
It’s becoming less common now, but there are sites whose mobile version blocks mobile visitors from viewing and interacting with a lot of content on the site. Given that over half of web browsing is done via mobile now, you certainly don’t want this to happen on your site!
You’ll find that the vast majority of the best and newest themes in the WordPress theme repository are responsive, but there are differences between them and it pays to know what to look for.
Finding a Good Responsive Theme
Some themes will incorporate a small number of breakpoints of their media queries based on the most common screen widths, but this can cause problems if someone views your site on a device which hasn’t been accommodated (or may not even have existed when the theme was written).
When you’re choosing a theme for your site, test it out at lots of different screen widths.
Open your site in a desktop browser with the theme activated and resize the browser window manually. See what happens as the window gets narrower.
Does your site resize constantly to fit in the window or are there elements you can’t see?
Maybe scroll bars appear that you have to use to see everything, which isn’t very user-friendly on a desktop computer and might break the layout on a mobile device.
Now try opening your site with the theme enabled on a mobile device. If you can, use a variety of screen sizes, including tablets and phones. Ask your friends if you can borrow their phone to test your site out (when I first made my site responsive, I used to grab people’s phones all the time so I could test it out). Check that the layout works on a range of devices and that nothing has disappeared from view.
Here are my criteria for a good responsive theme:
- The width of the site resizes constantly as the screen width resizes, using flexible, percentage-based widths.
- At breakpoints where the layout changes, nothing disappears or ends up hidden behind another element.
- Breakpoints are set at the point where the design doesn’t fit in the width of the screen, rather than being based on an arbitrary set of screen widths that have nothing to do with the design but are based on the width of an iPhone or iPad. (Referred to as design-based media queries).
- The responsive layout applies to all content types in the site, not just Pages, Posts or Archives.
- When viewed on a device with a small screen, the styling makes it easy for users to tap on links and navigate around the site, using buttons the size of a finger and responsive navigation menus. (You can add responsive menus using a plugin, which I’ll come to later on).
- It’s easy to read the content on all device types: the text isn’t tiny or huge on small screens.
- Widget areas are included in media queries so that their layout makes them easier to read and interact with on small screens. For example a theme with four widget areas may have them all side by side on a large screen, change to two by two on a medium screen and then have them one above the other on a small screen.
These are the basics. You’ll also find responsive themes with other options such as the ability to define breakpoints yourself, set up responsive images and more.
If you’ll be editing and administering your site on a mobile device too, check whether any options screens included with the theme are responsive too (although that will become less of an issue as themes make more use of the theme customizer).
Mobile First Themes
A mobile first theme takes the idea of responsiveness a step further. Instead off starting with a desktop layout and using media queries to alter it on smaller screens, it works the other way around. It starts with a narrow, small-screen layout and then uses media queries to adjust things as the screen gets larger.
Designing mobile first can lead to less code bloat, as it takes less CSS to code a small screen layout (everything is at 100% width by default, for example).
Adding in extra layout styling, such as floats and percentage widths for sidebars and widget areas, is only done once rather then being done first for the desktop layout and then manually override in media queries for smaller screens.
Mobile first design can also help make the design process more focused. Instead of thinking about all that screen real estate available to fill, the mobile first designer will only include what’s absolutely needed in the layout, so that users can find things easily on a small screen. Then as the screen gets larger the focus isn’t on adding more content but on adapting the layout so it looks just as good on desktop as on mobile.
In practical terms, you can identify a mobile first theme because its media queries will include
min-width instead of
max-width. So instead of adding styling at the maximum width of a smaller screen that the default, the theme adds styling for a larger screen that’s bigger than the default, which is zero. (I’ll explain the code in media queries later in this post).
The trend in website design in the last year or two has been on designing around content and interactions rather than on designing sites that are unnecessarily beautiful or fancy, and mobile first design lets the content shine.
Our Upfront theme platform is responsive and mobile first.
Upfront allows for a fully responsive site design. Forget media queries and special CSS rules, with Upfront everything is simple drag and drop, including setup of a fully responsive site for tablet and mobile experiences.
The default WordPress theme (currently Twenty Sixteen) is mobile first as are the themes supplied for some of the most popular WordPress theme frameworks, although most of them are more traditionally responsive. Our own Upfront theme and the starter themes that come with it are mobile first, too.
Building Your Own Responsive Theme
Of course you don’t have to download a responsive or mobile first theme: you could always create or adapt your own. There are two ways to do this:
- Take an existing theme and make it responsive, which will generally involve adding media queries for smaller screens.
- When coding your own theme, make it responsive, which should ideally include media queries for larger screens and so be mobile first.
Let’s take a quick look at each of these.
Making an Existing Theme Responsive
If your site’s running an existing WordPress theme that you’re perfectly happy with but that isn’t responsive, you can add responsiveness to it. The chances are the theme’s layout will be designed for large screens, so you’ll be writing media queries that target progressively smaller screens.
There are plenty of resources available to help you, including this tutorial using the old default twenty ten theme as an example, and a number of relevant chapters in my book, Mobile WordPress Development.
If you’re working with a third party theme that you’ll be updating in the future, don’t edit the theme itself: create a child theme and add your responsive styling to the child theme’s stylesheet.
You’ll need to do two things to make your theme responsive:
1. Edit the width styling for elements in your site so that they use percentage widths instead of pixels.
So if your site is 1200px wide, your content area is 900px wide and your sidebar is 300px wide, you’ll need to change those to 100%, 75% and 25% respectively. It isn’t actually as simple as this as you’ll need to factor in padding and margins, but you need to change everything for width layout to percentages instead of pixels.
The percentage width of an element is relative to the containing element and not to the whole screen, so if you have two elements inside another one that isn’t full width, you’ll size them at 50% each regardless of the width of the containing element. Once you get used to this it actually makes life much easier!
2. Add media queries to adjust the layout for smaller screens.
If your layout gets too busy at 600px wide, for example, you could use a media query at that width to change the styling for the content and sidebar, giving both 100% width and getting rid of any floats. You can then take this further for smaller screens, changing the layout again at 350px wide for example.
These widths don’t have to relate to any specific device but should be based on how your layout works at different screen widths, which you can test by resizing your browser window.
The code below sets a 96% width for the site in large screens, with a maximum width set for very large screens. It places the content and sidebar next to each other using percentage widths, with widget areas in the footer arranged side by side (there are four).
It then includes a media query for smaller screens which puts the sidebar below the content and places the footer widget areas in a 2×2 grid. The final media query for smaller screens puts the footer widget areas one above the other at 100% width.
You do all of this in the stylesheet, either by editing the existing stylesheet or by adding new styles in the child theme’s stylesheet. The way that parent and child themes work mean that any styles in the child theme targeting a specific element will override those in the parent theme.
Creating a New Responsive, Mobile First Theme
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
If you’re developing a new theme you should always incorporate responsiveness and ideally use the mobile first approach too.
This will involve three steps:
- Designing your site using the mobile first approach, identifying design elements for smaller screens first and then adding other, nonessential elements for larger screens if necessary.
- Styling your site for small screens with a 100% layout for all major elements such as the header, content, sidebar, footer and widget areas.
- Adding media queries targeting larger screen widths, progressively working your way up at breakpoints defined by the design. In this case you won’t be adding a breakpoint when the design breaks and becomes too squashed, but instead where there’s too much space and a change of layout would improve the design or UX.
The code below achieves the same layout as the earlier code snippet, but using a mobile first approach. As I don’t have to define widths at 100% for small screens, I’m able to achieve the same result with 41 lines of code (including line spacing) instead of 49.
Creating a mobile first theme can involve a lot less work than adapting an existing theme. There’s less code to write and maintain and it’ll also make your site a little bit faster.
So you may decide to create a new theme instead of adapting an existing one, perhaps taking some of the non-layout styling from your old theme.
For more detailed instructions on creating a mobile first theme, follow this tutorial.
But creating a responsive site isn’t just about making your theme responsive or using one that already is. For your site to be as effective as possible across a range of devices, you need to take into account various UX considerations. Let’s start by looking at content.
Content That Works Across Devices
A site that works well across screen sizes and devices won’t just have a layout that works well on those devices: it will also make it easy for users to consume content no matter how they’re accessing the site.
There are various aspects to ensuring your content is mobile-friendly, including:
- Not hiding content from users on mobile devices.
- Ensuring content is easy to read on all screen sizes.
- Making it easy for people to find new and related content on all device types.
- Avoiding technologies for delivering content that don’t work on all devices.
Let’s start with the most important: not hiding content.
Don’t Hide Content From Mobile Users
There was a time when the default position for WordPress site owners who wanted their site to work on mobile would be to install a plugin that simply put all of their posts into a mobile template and displayed that to visitors on mobile instead of showing them the full site. This had some major drawbacks, including the fact that mobile visitors never got to see your site’s lovely design and also that a lot of the content simply disappeared on mobile.
There was also a trend for large sites to have a separate mobile version which would display certain content types in a completely different layout or template. This included WordPress sites that would use a different theme on smaller screens or when a mobile browser was detected. It was common for only certain areas of the site to use this template: sometimes other areas of the site would use the desktop layout on mobile and sometimes (and even worse) those other sections of the site would be completely unavailable to mobile users.
This is clearly not the best way to keep your users happy. Someone browsing your site on a small screen is no less likely to want to consume a given page than someone on desktop.
It’s no longer the case that mobile users are using the web for specific ‘on-the-move’ tasks, as many of us sit on our sofas in the evening and read our favorite blogs on a phone or tablet – hands up if you’re reading this on mobile!
So you absolutely mustn’t limit the content your mobile visitors can view. This includes not just pages or areas of your site but page elements too like widgets, navigation, buttons and forms.
Test the theme you’re using and make sure nothing is hidden from mobile users!
Ensure Legibility Across Devices
Occasionally you open a site on a mobile device only to find that the text is either tiny or huge. Maybe the font size has been set for desktop and the settings just don’t work on your device, or the designer has adjusted fonts for mobile and they’ve turned out huge. If you’re working mobile first, you might find that fonts are too big or small on desktop computers.
Or you find that the fonts displayed on different devices are inconsistent, take ages to load or just don’t read very well.
Both of these problems will make it harder for users to consume the content on your site and mean that they’ll leave before reading anything or not come back.
In most cases, mobile devices will display your fonts at an appropriate size in a responsive layout without you having to make any changes. But occasionally you may find that some devices aren’;t consistent. It’s also worth remembering that the font sizes will look different in a resized desktop browser than they will on an actual device.
So test your site on some devices of different sizes and if you find that fonts are too big or too small, add some styling in the appropriate media query.
There are a few potential problems when it comes to the fonts you’re using:
- Fonts might be stored on one kind of device but not another, so your site looks different across devices.
- Your fonts are difficult to read on a smaller screen.
- Loading custom fonts is slowing the site down or means that other fonts are displaying while they load and causing elements to resize or move once the correct fonts load.
I would always recommend using simple, legible fonts that have been designed for viewing on a screen (such as Georgia and Verdana) for body text and navigation links.
By all means use more adventurous fonts for headings but make sure they’re easy to read and that they don’t cause their containing element to radically change size on different devices or as they load.
Bear in mind that mobile devices will have different fonts stored on the device, and make sure you’re specifying fallback fonts that are generic to a range of devices.
If you’re loading fonts that aren’t stored on the device, it’s a good idea to use Google Fonts as that gives you access to plenty of great free fonts. Some themes even have Google fonts built-in. But makes sure your fonts are legible on different screen sizes.
It’s tempting to push the boat out with fonts but always remember that text is there to be read: if people can’t read yours, your site won’t be communicating as effectively as it could.
It’s important that your users can easily navigate around your site whatever device they’re on. But if your navigation (whether that be a navigation menu or navigation elsewhere using links or buttons) if too large or cumbersome for small screens, it will prevent people from accessing your site and create a very bad impression.
Here are some tips for helping visitors find their way around no matter what device they’re using.
If your main navigation menu is large, make it responsive. Either hide it on small screens, replacing it with an expanding Menu link, or replace it with a dropdown box using the device’s native features.
You can make your menu responsive using CSS, or alternatively use a theme that includes a responsive menu. If your theme doesn’t include this and you don’t want to code it yourself, there are some plugins that will do this for you, including the Responsive Menu (shown here) or WP Responsive Menu plugins that both give you a nice slide-out menu, or the Responsive Select Menu plugin that creates a select menu using the device’s own functionality.
A responsive menu will keep your navigation menu from taking up the whole screen or obscuring content, and will ensure users can click on navigation links using a finger or thumb.
As well as using the main navigation , you’ll also want to make it easy for your users to navigate around your site while they’re consuming content.
Add navigation at the end of your content so users don’t have to scroll all the way up to the top of the screen to navigate: this takes longer on a small screen.
- Use footer widgets to display your main menu or a menu of the most visited pages in your site.
- Use a plugin to display related posts at the end of each post in your site: we’ve reviewed some of the most popular ones such as Yet Another Related Posts Plugin (YARPP) and the Jetpack Related Posts module.
- If you’re using a social sharing plugin, add links for sharing at the top and bottom of your posts. Avoid social sharing plugins that display links offscreen or obscure the content on smaller screens. Our Floating Social plugin is responsive and we’ve reviewed some alternatives too.
- If you’re displaying related posts using featured images rather than just text (you should: it increases the number of clicks), make sure the images resize correctly on all screen widths. You might need to override styling provided by the plugin in your own theme’s stylesheet.
- Display a list of the categories a post is in after its content so people can quickly find other posts in the same topic. Many themes will automatically do this for you (including the default theme).
Completing forms on a small screen can be a real pain. Typing in text with your fingers and thumbs and scrolling down through the form options can put many people off and mean your form doesn’t get completed.
You’ll find that if you adopt best practice for forms on small screens, then your forms will be easier for users to interact with on larger screens too: it’s one of the many times when designing for mobile enhances your desktop design (yay!).
Here are some tips:
- Limit the number of fields on your form to those you absolutely need. Do you really need to collect your subscribers’ postal addresses if you’re not sending them anything in the post?
- Ensure form fields are coded correctly so that the browser recognises them as text, number, email fields or whatever and displays the appropriate keypad on mobile devices. Form plugins that get this right include the premium Gravity Forms and the free Contact Form 7.
- Let users autofill data such as their name, email address and phone number by coding the “name” attribute on input fields. Again, a quality form plugin (including the two already mentioned) will do this for you.
- Consider the ergonomics of your form. Are your fields big enough for someone to accurately tap the correct one with their finger or thumb on touch devices? Is the Submit button nice and big? You might need to add some extra styling in your media queries to make your form easier to use on small screens.
The area of responsive images is one that has got a lot of attention from people working on the responsive web over the last few years, and it’s aimed at ensuring that your site doesn’t load images any larger than it needs to on a given screen.
At its most basic, making an image responsive consists of just using a line of CSS to make sure it doesn’t stray outside its containing element:
But all this does is make the image resize in the browser window. It does nothing to shrink the image file itself, so you’ll find that a 1500px wide image that you’re sending to desktop screens is also being sent to mobile phones and being displayed at 320px wide. The image file will still be the same size which as you can imagine is a big waste of data.
- The Mobble plugin lets you add conditional tags to your plugins or themes detecting the device being used and only outputting code in certain conditions. You can use this with featured images, for example, to send different image files to different devices.
- The RICG Responsive Images plugin automatically adds responsive image functionality to your site and sends the most appropriate version of any image file to the bowers based on screen width.
It’s been suggested that responsive images will make eventually their way into WordPress core, but in the meantime the RICG plugin will make images “properly” responsive on most sites.
You can’t afford not to make your WordPress site responsive. Over 50% of website visits are now on mobile devices, and this is only going to grow.
Hopefully this post has given you plenty of inspiration and guidance to help you make your own site work as well as it possibly can across all devices. If you haven’t already, make sure you’re running a responsive (preferably mobile first) theme, that your content is easy to read and navigate across devices, your forms are optimised for small screens and your site isn’t being slowed down by unnecessarily large images.
If you do all of this, you’ll boost your Google rankings, the number of visitors to your site, and ultimately the frequency of return visits and social shares.
Is your WordPress site responsive? What challenges have you stumbled across while working to make your site responsive?Let us know what you think in the comments below.