Responsive design is the idea of making your website look great at any resolution—not just on desktop and mobile. With a responsive site, your desktop and mobile site are the same page, and scale with window size.
What Is Responsive Design?
Responsive design allows your site to resize to fit any screen. Rather than designing around a specific layout, or designing a separate mobile and desktop site, your site should scale to fit any device. In the real world, people will use your site in all kinds of different ways; there are small phones, big phones, tablets, tablets in landscape mode, netbooks, laptops, and 5K iMacs.
Take a look at the howtogeek.com homepage. On desktop, it has a header with a logo, main categories, social media buttons, and finally a hamburger menu with extended categories. The article boxes are laid out in a grid that scales with screen size but will only ever take up about 1000px (as scaling up too much would look weird). All in all, there’s a lot of room to work with, so the site looks the best here.
Shrink the screen down a bit to tablet size, and there’s not as much space. The text breaks differently, the images are scaled down or cropped, and the main categories disappear.
The article boxes maintain the layout but at the cost of having extra lines of text. The front-page article is more important though, and will maintain its aspect ratio and scale down without cropping.
And on really small devices, you can’t really afford to have all those buttons in the menu, and there’s not enough room to place the article boxes next to each other, so the menu is collapsed into a hamburger menu and the article boxes are laid out in a column. This column will always take up the full width of the device (minus 20px on each side for padding).
You can test this for yourself to see how your site scales. Open up Chrome’s developer tools by right-clicking anywhere and selecting “Inspect.” Press the mobile devices button in the top-right corner of the pane that pops up, and select “Responsive” as the device type:
You can grab the handles on the edge of your site to adjust the size, or you can enter in manual pixel values. You can also preview what it will look like on popular mobile resolutions (though you should still test on a real device).
How Does Responsive Design Work?
Before doing any responsive design, you’ve got to fix a bug with mobile pages and the viewport. Without this meta tag in your HTML’s header, your mobile page might be zoomed out and not display correctly. This might already be set, as it’s a fairly common piece of boilerplate, but if it isn’t, go ahead and add it:
<meta content=”width=device-width, initial-scale=1″ name=”viewport” />
The primary way of making sites responsive is with the magical display: flex property, otherwise known as flexbox. Flexbox works by adjusting the size of items within a container to scale with a changing window size. You start by creating a container and setting it to display: flex:
.container {
display: flex;
}
And then, set the flex parameter of all of the children:
.child {
flex: 1;
}
This will cause the children to expand and take up as much space as the container allows. For example, if you had two children, each would take up 50% of the space:
If you instead set the second child to flex: 2, it would take up twice as much space as the other (66% in total).
When the screen shrinks, the children will shrink with it. They’ll hit a point though where they can’t shrink smaller than the size of their content, but you can make them wrap around to another line (just like text) with flex-wrap on the container.
.container {
flex-wrap: wrap;
}
Now, you’ll never run into issue of having your site content off screen or so scrunched up that it’s illegible.
Another piece of CSS tech behind responsive design is media queries. Media queries are like CSS If statements that allow you to check a value before applying some CSS. You can use this to dynamically style components based off of the width of the browser. For example, if you had a top menubar that you wanted to hide on mobile and replace with a hamburger menu, you could hide it with an @media query:
.topmenu {
display: block
}
@media screen and (max-width: 600px) {
.topmenu {
display: none;
}
}
600px is just an arbitrary value used to define the limits of most mobile devices, but you can have many breakpoints that change the styling. You can use these in combination with flexbox to change the flex properties based on the device size; for example, one common use is making horizontal lists display vertically and center aligned, for easier readability on mobile.
There’s plenty more to responsive design than we can cover here, so if you’d like to learn more about the CSS behind it you can read this great guide to flexbox from CSS Tricks, or read the W3Schools documentation for media queries.
How Do I Make My Site Responsive?
If you don’t want to spend time remaking your site with flexbox in mind, there are plenty of responsive site templates you can use as a base, including many free ones. Many templates that you can use with managed hosting providers (GoDaddy, SquareSpace, Wix, etc.) will be responsive out of the box. Underscores is a great free starter template for WordPress.
If you do want to code it yourself, but don’t want to do it all by hand, there are many third-party libraries for working with flexbox. The most popular of these is Bootstrap, which adds easy-to-use classes for working with flexbox (along with many other useful UI elements). With Bootstrap, you specify containers with the row class and then specify column size with classes like col-md-6, and the CSS is handled for you. For example, the following code will arrange each div into a row of three on desktop, and add a media query breakpoint to turn it into a full-width column on mobile:
<div class=”row”>
<div class=”col-md-4 col-sm-12″> //content </div>
<div class=”col-md-4 col-sm-12″> //content </div>
<div class=”col-md-4 col-sm-12″> //content </div>
</div>
Sizes are measured out of 12, so col-md-4 will set the div to 33% width on medium size (“md”) and col-sm-12 will set it to 100% width on small devices (“sm”).
Bootstrap also has a ton of themes and templates for you to start with. It’s designed to get you off the ground very quickly and to get rid of the time spent messing with boilerplate HTML and CSS (hence the name).