Responsive design has become increasingly important in recent years. Today, being fully responsive is a feature that has become all but mandatory for WordPress plugins and themes.
Yet, unless you are a web designer, exactly what makes responsive design what it is might still be a bit of a Pandora’s box for you. You are certainly aware that it is important but that’s about it. How it works or how to implement it is still somewhat beyond you.
Or maybe your site is even still running a static theme and you want to update it without losing the look you have worked so hard for.
Both are very good reasons to educate yourself on responsive design for WordPress and in our two-part article series you will learn all there is to know about this important topic.
In this post, we will go over what Responsive Design is and how you can use it. Go to the second post to learn exactly how to make your post responsive.
Sound good? Then let’s get started.
What is Responsive Design and Why Should You Care?
Mobile Devices – It’s All Their Fault
As you have probably noticed, the use of phones and tablets has massively increased in recent years. For someone like me, who grew up with rotary phones, that’s still a little mind boggling.
However, this development not only had dramatic consequences for the way we communicate but also our online usage. With almost everyone owning a smartphone these days, we can basically access the Internet anywhere, anytime we want.
In the US alone, the time spent using digital media on smartphones increased 394 percent between 2010 and 2014. The growth for tablets during the same time was even a whooping 1,721 percent!
2014 was also the year in which total time spent online using mobile devices exceeded that of desktop machines.
One year later, in the beginning of 2015, Google announced that it now registers more searches on mobile than from desktop computers. Shortly after that the search giant rolled out its mobile friendliness update, effectively penalizing websites without mobile-optimized presences (a move also nicknamed Mobilegeddon).
Mobile-friendly web design had become all but mandatory.
Enter Responsive Design
Over time people came up with several ways of making their site compatible with mobile devices. Two popular methods were creating a mobile site version on a separate subdomain (typically m.yoursite.com) or using specialized WordPress plugins for creating mobile-friendly site versions.
However, responsive design quickly emerged as the go-to solution and is by now the most commonly used way of making sites compatible with phones and tablets. This is no wonder as it’s also Google’s recommended way of doing so.
But, what exactly is responsive design?
The term itself was coined by Ethan Marcotte in 2010. It describes an approach to web design that’s aimed at making content viewable on any device with a minimum of zooming, resizing and scrolling.
This is achieved by making the size and position of site elements adaptable so they can change according to the size of the viewport.
(For those who don’t know, the viewport describes the area in which a website is visible and is dependent on screen size and the size of the browser window.)
Advantages Of This Approach
The advantages of responsive design in contrast to other methods is that you only need to create and update a single site. Whether desktop computers, phones, tablets or phablets (which is a freaking ugly word if you ask me), anyone can use the same domain to access your content.
In addition to that, the technology making it work is widely adapted and therefore compatible with most people’s devices and browsers. Mashable wasn’t incorrect when they called 2013 the year of responsive design as this approach to web design has become the de facto standard.
Yet, how exactly does it work?
The Basics Of Responsive Design
Responsive Design Uses Proportionate Instead Of Absolute Sizes
The main principle of making websites adapt to the screen they are being displayed on is producing a fluid grid. The grid describes the main structure of a website, like header, footer, content, sidebar, and everything contained within.
If you don’t know what I am talking about, go to any responsive website (such as this one) and drag one side of your browser window toward the other. You will see that the design changes when the screen gets smaller. This is achieved by using proportionate measurements for the width and height of page elements instead of absolute ones.
To clarify what I mean, you need to know that in the past all websites were static as all measurements were declared in pixels or another absolute measure. No matter what screen size you look at these sites with, their design will always stay the same. If the screen gets smaller than the site, users have to pan and zoom to see the rest of it.
To do away with that, responsive design avoids absolute measurements and instead uses proportionate ones. That means element sizes are no longer declared in pixels or such but instead in percent and other responsive measurements.
This way, the elements can adjust to the screen they are being display on and it’s the most important thing to make responsive web design work.
Image Sizes Are Flexible
What is valid for the grid naturally also applies to images. They, too, need to adapt to the viewing environment and fit to the screen. As you will see in the second part, achieving this via CSS is actually quite simple. However, images come with other considerations, most importantly their size.
Visuals often make up the bulk of page weight and many mobile devices, especially phones, have to deal with slower download speeds. Responsive design is therefore not only about making images adapt to the screen size, it also needs to make sure pages stay usable on slower connections.
WordPress has recently introduced changes in this department. If you are running the latest version, the platform will take care of much of this automatically. However, it’s a topic that’s generally important to keep in mind for on-page SEO and as a step to speed up WordPress.
Other Considerations
Fluid grids and flexible images form the foundation of responsive design, however, there is more to it. Overall, the design approach is about responding to the needs of mobile users who interact with websites in a different way than users on desktop computers.
For example, almost all of these devices are operated by touch. That means, users can not hover over elements and have different needs when it comes to the shape, size and functionality of buttons, forms and, most importantly, menus.
We will see in the second article how website owners can respond to that. For now, let’s turn to the technology that makes responsive design work.
The Technology Behind Adaptive Design
Time to get down to the nitty gritty. While WordPress websites are usually a mix of HTML, CSS and the occasional JavaScript, the backbone of responsive design are CSS media queries.
Not familiar with the term? Don’t worry, you will learn all about it now.
What Are Media Queries?
First introduced in 2009, media queries are CSS operators that allow designers and developers to change CSS styles dependent on different conditions. These include the screen resolution, orientation (landscape or portrait mode) and, most importantly, viewport size of the device viewing the site. Essentially this means that you can change the design of your website depending on the size of the browser window it is being viewed in.
If you have ever taken a look into the style.css file of a modern WordPress theme, you might have already seen a media query:
@media only screen and (max-width: 500px) {
/* custom CSS goes here */
}
In case you couldn’t gather it yourself, the code above tells the browser to use the custom CSS for screens under a certain size (in this case 500 pixels).
This is called a break point. What exactly is a break point? I’m glad you asked.
Introducing Break Points
Media queries define cutoff points in viewport size at which the site design changes or “breaks”. For example, if the viewport width goes below 600px, the sidebar will move underneath main content (which is a very common maneuver).
By using break points like this, themes can cover a range of different screen sizes and implement changes according to how much space is available to their design. This way, they can make changes according to the design and independent of the device used to visit the site.
After all, new mobile devices are coming out every day, each with its own screen size, resolution and the ability to be used in both portrait and landscape mode. Altogether, this comes down to hundreds of different dimensions designers would have to take into account for device-specific design.
Since we can never create custom solution for every single one, defining independent cutoff points is a much better idea and media queries allow you to do so. Apart from that, they can also check for other conditions than screen size, however, this is enough for our purposes. If you want to learn more, check out this resource.
All Caught Up On Responsive Design?
Responsive design is a must-have feature for all modern WordPress themes. With mobile traffic being as important as it is, websites simply can not afford not to be optimized for phones and tablets.
While other ways exist to make websites mobile compatible, responsive design has become the de facto standard to do so, with heavyweights like Google backing it. As you have seen above, the principles that make it work are pretty simple.
It basically comes down to using proportionate instead of fixed sizes for page elements in order to create fluid grids and make images adaptable. The main advantage of this approach is that users don’t have to update separate mobile presences but instead can concentrate on a single website. Plus, the technology that makes it work is well supported and readily available.
Only leaves the question how to implement it all, doesn’t it? Don’t worry, you will learn all about that in the next article.
What are your thoughts on responsive design? Do you prefer another kind of solution? Let us know in the comments below.
No Comments