The arrival of mobile devices has been one of the biggest changes on the net in recent years. Little has had a more lasting effect on how we create and run websites.
While keeping your website 99.9% secure and achieving loading times under 1 second are vital, making sure your website is mobile-friendly is becoming more and more important in our mobile-first society.
2014Â saw the tipping point when phones and tablets displaced desktop computers as the main Internet device. One year later Google announced that it now receives more searches on mobile than from desktop machines. Shortly after, the search engine rolled out their mobile-friendly update that started penalizing sites which don’t cater to a mobile audience.
As a consequence, by now mobile friendliness is no longer an option but a necessity.
In the beginning, the web design community responded to the new demands in several ways. We saw mobile sites on separate domains with automatic redirection. The WordPress community created specialized mobile WordPress plugins to create smartphone-friendly site versions. Others simply ignored what was going on and hoped people would get used to zooming and panning.
By now the de facto standard is responsive design, a way of building websites so that they automatically conform to dimensions of whatever device they appear on. It’s not only Google’s preferred method but also the most widely adapted solution in the WordPress community and the web in general. At the heart of it: CSS media queries.
Since responsive design and media queries are both a central and complex topic, we thought it a good idea to provide an extensive guide. In the following, you will learn exactly what responsive design is and how it works, the technology that makes it tick and how to use media queries correctly. After that, we will give some practical advice on how to implement responsive media queries for all devices and troubleshooting tips if your queries are not working.
Related: How to Make Your WordPress Website Mobile-Friendly For Free
We have a lot to go through, so let’s get started right away.
What is Responsive Design and How Does it Work?
The term “responsive design” itself was coined by Ethan Marcotte in 2010. As we have already established further up, it describes an approach to web design aimed at making websites conform to the device used to access them.
In more technical terms, it means that the size and position of site elements “respond” to the so-called viewport. That is the area a site is visible in and it is constrained by both the size of the device and the browser window used by the device. The goal of responsive design is to make accessing sites as comfortable as possible for visitors without the need for zooming, scrolling and resizing.
The best way to experience this is to go to a mobile responsive website on a desktop computer and slowly shrink the browser window with your mouse. This will make the gradual design changes obvious.
(Hint: You can try it right here on WP Buffs.)
How Does It Work?
Responsive design is based on a few main principles. The most important of them is the use of proportionate sizes instead absolute measures. That means website elements are not declared in static units such as pixels but instead percentages and other responsive measurements.
.content {
width: 780px;
}
The example above is how things used to be. Declaring sizes this way resulted in a rigid grid (grid being the main structure of a website including header, footer, content, sidebars etc.). As a consequence, no matter what size device you used to look at a website, it would always look the same and people on smaller screens had to pan and zoom to see all parts of it.
Today we have what is called a fluid grid. This one uses proportionate measurements and is thus able to conform to size of the viewport instead of the other way around. Here’s an example of how that looks in CSS:
.content {
max-width: 68%;
}
Aside from that, responsive design has to take into account different usage patterns of mobile users. That especially means the use of touch instead of a mouse of trackpad. This makes it necessary to consider hover effects and the shape, size and positioning of buttons and other clickable elements such as menu items to make them usable.
Advantages of Responsive Design
The main advantage of a responsive design approach is that you only need one site. An adaptable website eliminates the need to run and update separate sites for desktop and mobile users. Instead, one site fits all, saving you a lot of hassle and letting everyone use the same domain.
Plus, the technology behind it, which we talk about next, has been widely adapted. As consequence, responsive design works for almost anyone regardless of device and browser.
Challenges
One of the biggest challenges is the need to adjust to slower Internet connections. Mobile devices often don’t connect via wifi but use other connections and designers need to take that into account.
A special consideration here are images. Not only do they need to be made to adjust to screen size, they also often make up the bulk of the weight of a page. For that reason, website owners need to optimize them as much as possible (besides general speed concerns, of course).
Understood everything so far? Good, then let’s have a look at the technology behind responsive design.
The Technology That Makes Responsive Design Work
The central pillar of responsive design is CSS. In case you are not familiar with it, that’s the part that is responsible for the styling of a website. While HTML builds the skeleton and JavaScript adds functionality, everything that looks nice is usually CSS. Font types, sizes, colors — all of it.
CSS is so central because it determines object sizes (as we have already seen). That means it’s here that we use our proportionate measures. However, there’s something even more important for making websites look good on mobile: CSS media queries.
What Are CSS Media Queries?
Media queries have been around since 2009. They are operators that let designers and developers add conditions to their styling.
For example, you can tell a browser to apply a color to an element only at a certain screen resolution, orientation (landscape or portrait) or size.
In responsive design, CSS queries are especially used to define so-called break points. These are cutoff points for screen sizes at which the design changes.
A common example for this is telling the browser to move the sidebar below the main content once screen size dips below say 600px. We will talk about how to find the right break points and set the right responsive media queries for all devices further below.
Other Important Technology
Aside from media queries, there are other important CSS considerations. We already mentioned the importance of dealing with images in responsive design. Here, too, it’s important to make sure they adapt to the space they appear in. Most commonly that is achieved by setting their max-width to 100%.
img {
height: auto;
max-width: 100%;
}
For fast loading images, the WordPress developers have come up with an awesome solution. Since version 4.4, they have implemented that browsers are automatically served the smallest possible image size via the srcset HTML attribute. This saves bandwidth and, as a consequence, makes everything faster.
How to Use Media Queries (+CSS Examples)
Alright, now we are getting down to the nitty gritty. In the following, we will talk in detail about how to use CSS media queries and give a number of use cases to see what they can do.
Your Typical Media Query
Before getting into examples, what does a media query even look like? If you look into style.css of any top responsive WordPress theme, you will see something very much like this:
@media only screen and (max-width: 480px) {
/* your CSS here */
}
As you can see, each query starts with @media, which is where they get their name from. It can define conditional styles for different media types or devices. Followed by only and screen, it means that the following rules apply to computer screens, tablets etc. An alternative is speech in which case it would target screen readers.
Everything after and is the condition under which the CSS that follows is applied. Other options are not and only. These conditionals also allow you to string several conditions together.
As you can probably guess, in our case the query sets a condition for applying the following CSS only to screens and when the screen size moves below 480px. This is typical for a media query aimed at mobile phones.
Overall, the format above is pretty much the most common media query you will find in responsive design. It’s also my preferred method.
However, in media query CSS min and max can also be used interchangeably. What do I mean by that? Some people prefer to define ranges between screen sizes with min-width and max-width. However, so far I haven’t had the need to do so.
There are a number of other operators you can input you can learn all about them here. However, this is enough for our purposes.
Where to Place Media Queries?
If you have seen media queries in theme files before, you might have noticed that they are always at the end of the file. That’s because browsers read stylesheets from top to bottom. Anything that is at the bottom overwrites any rules at the top (unless you explicitly declare for that not to happen with !important).
So, if your standard font size is 18px (as defined at the beginning of style.css), you can change the font size for smaller screens by adding a media query below.
@media only screen and (max-width: 480px) {
body {
font-size: 20px;
}
}
It’s also possible to declare different stylesheets for different screen sizes so the media queries aren’t all in the same file. However, that’s not something we will go into here.
So far so clear? Ok, to really hammer home how to use media queries, let’s look at some additional use cases.
Moving the Sidebar Below the Content Area
We already mentioned this further above. Moving the sidebar below the main content section is a common maneuver in responsive web design.
That’s because there is less real estate in mobile devices. Especially on phones in portrait mode it makes absolutely no sense to try and cram more stuff besides the main content. For that reason, you often find something similar to this media query CSS example in modern stylesheets:
@media only screen and (max-width: 600px) {
.sidebar {
float: none;
width: 100%;
}
}
Hide Content on Smaller Devices
On really small devices, instead of moving content around, it can also make sense to hide it completely. That’s especially true if it doesn’t add value to mobile users or if loading it on slower connection would take a lot of time. In that case, you can disable it like so:
@media only screen and (max-width: 480px) {
.large-image {
display: none;
}
}
Change the Navigation for Mobile Devices
Of course, probably the most common CSS media query example is changing the menu style.
Mobile devices often have completely different requirements when it comes to menus. The typical horizontal menu used on desktop screens doesn’t work on a phone because it makes buttons too small to tap on with a finger. For that reason, many themes contain markup to change to a responsive menu (complete with burger icon) below a certain size.
Again, if you want to see it in action, just shrink this very window.
Change Button Design With Pseudo Elements
Pseudo elements are relatively new in the web design world. They can apply specific styles to different portions of an HTML element. Here’s how you can use them to apply different layouts to a login button depending on screen size:
.username:after {
content:"Insert your user name";
}
@media screen and (max-width: 1024px) {
.username:before {
content:"User name";
}
}
@media screen and (man-width: 480px) {
.username:before {
content:"";
}
}
(Thanks to Tomislav Krnic for that example!)
Do you understand now how to use media queries and why they are crucial to responsive design? Cool, however when exactly should you apply them? At what point do you set your break points? Let’s talk about that next.
Finding the Right Responsive Media Queries for All Devices
As mentioned earlier, there are many different devices out there. They all have different sizes, resolutions and orientations. So, at what point should you change the design? To answer those questions, let’s first look at some statistics.
The Most Common Screen Sizes on the Net
In order to figure out the right responsive media queries for all devices, let’s take a look at some statistics. According to Statcounter, the following are the most popular screen sizes on the Internet (July 2017).
In numbers:
- 360×640 — 20.88%
- 1366×768 — 11.82%
- 1920×1080 — 6.6%
- 375×667 — 4.75%
- 720×1280 — 4.23%
- 768×1024 — 2.93%
From here, we can easily conclude that it’s best to go for three sizes: desktop, tablet and phone. Thus, you would have one break point at 768px and one at 320px
Yet, wait! Mobile devices also work in landscape orientation. That results in two more break points at 1280px and 640px, doesn’t it?
But wait further, isn’t the largest group the undefined other sizes? How do you optimize for those?
A Better Approach to Determining Break Points
As you can see quickly, trying to set responsive media queries for all devices gets confusing fast. Especially if you are in the habit of defining media query CSS min and max. I’m not saying that there isn’t merit in looking at the statistics. It’s actually a very good idea to get a rough idea for your break points.
However, in the end, a better idea is to make your break points according to your design. Instead of defining break points for specific gadgets, it’s more prudent to look at where they are necessary. That way, you don’t have to optimize for hundreds of existing phones and tablets but can make the design speak for itself.
How does that work? I’m glad you asked.
Always start with mobile first. So, as a first step take your design and shrink your screen to the smallest possible size. If you don’t have any media queries in place, it will probably look horrible.
For the following examples, I turned off some media queries on wpbuffs.com in my browser. As you can see, it’s not looking ideal!
So, this is your first task to fix. Your goal is now to make it look acceptable. (PS Use the Chrome and Firefox Developer Tools to create different viewport sizes.)
Once you have done so, slowly expand the screen and watch the layout behavior. At some point, will not look good anymore and you will find yourself wanting to change it. Maybe not the entire layout but an element or two.
That’s a break point. Input the change into your stylesheet. Boom. Now proceed in the same way until you reach full screen. I know it’s a little tedious, but, trust me, it makes for a much better end result.
By the way, to optimize for screens larger than the one you are using currently, you can also use the Developer Tools above to simulate it inside your browser. You are welcome.
Alright, this should be enough information to get you started working with media queries. Let’s finish off with some troubleshooting.
Media Queries Not Working? Common Problems and How to Fix Them
For the last part, we will go over a few common problems when working with media queries and how to solve them.
Your Media Queries Are Generally Not Working
If your media queries are taking effect, the first thing to check is if they are in the right place. As mentioned, media queries need to be at the end of the stylesheet in order to overwrite earlier declarations. When they are not in the right order (queries for smaller screens above those for larger screens), this can be a source of error.
If everything is in order but your styles are still not overwritten, make sure you use the same CSS selectors in your media query that you are trying to override. In case the earlier ones are more specific, they can keep overwriting the new selector.
Another option is that you have CSS declared inline (meaning directly inside an HTML document as opposed to the stylesheet). In that case, see if you can remove the inline CSS or force an overwrite with !important.
Finally, if an earlier declaration has !important already attached to it, that can also be the reason your overwrites don’t work.
Media Queries Not Working on Desktop
When your queries don’t work on a desktop computer with a reduced browser window but on mobile devices, you might have set a device specific media query.
Note that max-device-width and max-width are not the same. For the first media query screen size, not viewport size is the decisive factor. So, if that is defined as 480px, the design will not change in a desktop browser (since the desktop device has a larger screen, even if its viewport is 480px) but on an iPhone it will.
Using max-width will fix this. In fact, I find using max-width is sufficient for most cases.
Queries Not Working on Mobile
In the reverse case, if your queries are working in a browser but not on mobile, you might have forgotten to set the viewport and default zoom.
For that, you need to add the following line to your header:
<meta name="viewport" content="width=device-width, initial-scale=1" />
This tells the browser to render pages according to the width of the device. Adding it often does the trick for making mobile break points work.
Wrapping Up
The ascent of mobile phones and tablets has overhauled the entire online landscape. These days, no website can do without optimizing for mobile devices and responsive design has established itself as the go-to solution for doing so.
In the article above, we have talked in detail about responsive design, how it works and it’s advantages and challenges. We have also taken a look at the technology that runs the show in the background, specifically how to use media queries.
In addition, we have gone over some use cases, learned how to find the right responsive media queries for all devices and looked into troubleshooting common issues.
By now, you are well prepared to deal with media queries on your own WordPress website. In short, your site and you are ready to make it in the modern online world. It’s a good feeling, isn’t it?
What’s your experience with responsive design and media queries? Anything to add to the above? Please let us know on Twitter!
