Responsive Design
Responsive design refers to the idea that your website should display equally well in everything from widescreen monitors to mobile phones.
Responsive design is accomplished through CSS media queries.
Think of media queries as a way to “conditionally” apply CSS rules. They tell the browser that it should ignore or apply certain rules depending on the user's device.
Set–up:
Create a new project (folder) called "responsive–design", and an HTML file called "responsive.html"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- There's nothing here! -->
</body>
</html>
Do not forget to add the following line of code to the <head> element of your HTML file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then download these images. Unzip the images into the same folder (i.e. responsive–design). Your project (folder) should look like this:
CSS Media Queries:
A good way to make sure that our media queries are actually working is to start small by simply updating the background colour on the <body> element based on various widths.
Thus, we will be able to differentiate between "narrow", "medium", and "wide" layouts.
Create a CSS stylesheet called "styles.css" and add the following CSS rules:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body {
background-color: #f09a9d; /* Red */
}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #f5cf8e; /* Yellow */
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
body {
background-color: #b2d6ff; /* Blue */
}
}
Media queries always begin with the @media (at–rule) followed by some kind of “conditional statement”, and then some curly braces.
Inside those curly braces, you put a bunch of ordinary CSS rules. The browser only pays attention to those rules if the condition is met.
The only screen “media type” means that the contained styles should only be applied to devices with screens (opposed to printed documents).
The min-width and max-width parts are called “media features”, and they specify the device dimensions you are targeting.
There are a lot of other media queries conditions, including whether the device is in portrait or landscape mode, the resolution of its screen, and whether it has a mouse or not.
A Few Notes on Design:
In the real world, it is up to your web designer to supply you with these kinds of mockups:
Your job as a developer is to implement the individual layouts using media queries to "separate out" the various CSS rules that apply to each one.
As a developer, there are two concepts that you must understand:
- A fluid layout is one that shrinks and stretches and to fill the "width" of the screen.
-
A fixed–width layout is the opposite:
it has the same width regardless of the screen dimensions.
Choosing Breakpoints:
Most of those responsive design patterns have similar behaviour, using fluid layouts for mobile/tablet devices and fixed–width layouts for wider screens. There is a reason for this.
When web designers set out to create a mobile layout, they are not trying to make something that looks good on a particular device, such as an iPhone 6s, Galaxy S7, or iPad mini — they are designing a fluid layout that looks "good" anywhere between 300 pixels and 500 pixels (or whatever).
That is why they choose fluid layouts, because they let us target a range of screen widths instead of specific mobile devices.
In other words, the exact pixel values for the min-width and max-width parameters (known as the breakpoints for a responsive website) in a media query do not actually matter [!].
Our website does not care about the specific device the user is on. All it needs to know is that it should display a layout that looks pretty at 400 pixels wide (or whatever) [!].
Mobile–First Development:
It is always a good idea to start with the mobile layout and work your way up to the desktop version.
Now, we first need to fill in the <body> element of our "responsive.html" file with some empty boxes. Each box will have an image in it so we can tell them apart a little bit easier:
<div class="page">
<div class="section menu"></div>
<div class="section header">
<img src="images/header.svg">
</div>
<div class="section content">
<img src="images/content.svg">
</div>
<div class="section sign-up">
<img src="images/sign-up.svg">
</div>
<div class="section feature-1">
<img src="images/feature.svg">
</div>
<div class="section feature-2">
<img src="images/feature.svg">
</div>
<div class="section feature-3">
<img src="images/feature.svg">
</div>
</div>
Add the following "base" styles, which should apply to all layouts (mobile, tablet, and desktop). Make sure to add these CSS declarations below the universal selector rule that resets our margins and padding and above the @media rules we created earlier:
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995da;
height: 80px;
}
.header {
background-color: #b2d6ff;
}
.content {
background-color: #eaedf0;
height: 600px;
}
.sign-up {
background-color: #d6e9fe;
}
.feature-1 {
background-color: #f5cf8e;
}
.feature-2 {
background-color: #f09a9d;
}
.feature-3 {
background-color: #c8c6fa;
}
Notice that the flex-wrap property in the containing .page div will make it very easy to implement our tablet and desktop layouts.
Now, if you make the browser window narrow, you will see that this gives us our entire mobile layout. Pretty easy — no media queries required !
That is why it is called mobile–first — the mobile version does not require any special handling.
By keeping these base styles outside of the media queries, we are able to override and add on to them as we implement our specific layouts.
Tablet Layout:
The only difference between the mobile and tablet mockups is the form a 2×2 grid instead of a "single" column.
Flexbox makes this real easy. Simply adjust the "widths" of the flex items to be half the screen and the flex-wrap property will take care of the rest.
Thus, as we only want such behaviour to be applied to tablet–sized screens, add the following CSS declaration into its @media rule:
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
Now we have a website that looks beautiful in every device that is smaller than 960px. You should see a colourful grid:
Desktop Layout:
Now when it comes to our desktop layout, we do not want our web page to expand endlessly, so we are going to give it a fixed width and centre it with auto–margins.
Add the following CSS declarations into the @media rule related to "Desktop Styles"
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.page {
width: 960px;
margin: 0 auto;
}
.feature-1,
.feature-2,
.feature-3 {
width: 33.3%;
}
.header {
height: 400px;
}
}
This gives us the correct widths for everything. However, our desktop layout calls for some reordering:
the "Sign Up" and "Content" boxes should appear underneath all the "Feature" sections.
This is where flexbox really shines. With flexbox's order property, it is just a few lines of CSS.
Append these CSS rules to the desktop media query:
.sign-up {
height: 200px;
order: 1;
}
.content {
order: 2;
}
That's a responsive website for less than a hundred lines of CSS !
Now, you can use these exact same techniques to implement all sorts of other designs. Start with the "base styles" that apply to your entire site, then tweak them for "various device widths" by selectively applying CSS rules with @media.
Disabling Viewport Zooming:
We have got one final task for making a responsive web page.
Before responsive design was a thing, mobile devices only had a desktop layout to work with. To cope with this, they "zoomed out" to fit the entire desktop layout into the width of the screen, letting the user interact with it by zooming in when necessary.
This default behavior will prevent mobile devices from using our mobile layout. To disable it, add the following element to the <head> element of your HTML documents.
It is a critical element that should be on every single web page you create:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Summary:
That is actually all we need to know to create responsive websites.
If we boil it down, we are really concerned with only three things:
- The responsive design (the mockups for each layout).
- CSS rules for implementing each of those layouts.
- Media queries for conditionally applying those CSS rules.
We started with creating a mobile–first stylesheet that used media queries to build "tablet" and "desktop" layouts on top of a shared set of base styles.
Finally, we disabled the default viewport zoom behaviour of mobile browsers.