A simple guide to responsive design.
Created by Adam Kaplan and modified by Andrew Borstein.
Read the first few sections to get an overview of responsive design and why we use it. The numbered sections will guide you through actually implementing this design strategy.
We want our websites to be useable on all devices by responding to the user's behavior, screen size and screen orientation. There are thousands of different devices and screen sizes that access the internet, so it's impossible to design layouts to target them all. Instead, we must take a more fluid approach to design.
The term "mobile first" means setting with mobile styles first and then layering on styles optimized for larger screens only as needed. In other words, your mobile styles become the default styles, and larger screens get styled with overriding CSS as necessary.
By assuming a flexible but simple layout by default, you can better guard against screens — with viewports wide and small — that aren't quite capable of the full layout. So when we're talking about layout, "mobile first" really means "progressive enhancement."
—Ethan Marcotte
Introduce layout-specific rules only when you need them. Use min-width to layer complexity on
your layout as the viewport widens. It's easier to have all the media queries nearby, rather than at the end
of the stylesheet or in a separate document.
Follow along with this tutorial by copying and pasting code into the specified files and locations,
indicated <like so> above the code snippets.
Every website should at least have a title and description. The title will display at the top of browser/tab window, and both will appear in search engine results.
index.html → <head>
This forces pixel-dense devices (e.g. smartphones and tablets or anything with a 'retina' display) to display your content properly.
index.html → <head>
Employing effective fonts and icons puts the 'fun' in fundamental! Include as many fonts as you like, and
make sure your icon <link> url is up-to-date.
index.html → <head>
Before we start adding new styles to our projects, we need a place to put them. Create a folder next to index.html called css. Inside /css add 4 new files with the following names and code:
Include some CSS best practices e.g. box-sizing and make sure all browsers render our CSS the same.
initialize.css
To make it easier to follow along, include all the custom styles used in this tutorial. Note: you will also need to add the class 'tutorial-style' to your index.html → <body> to use these styles.
grid-tutorial.css
Keep all your project-specific styles in a separate file. We'll add some styles here later in the tutorial.
custom.css
Put all the base grid styles in one file (i.e. all the code from step 5 on), so we can easily re-use the grid in other projects.
grid.css
It's important to understand the basics, like how elements are generated and behave in the browser, before diving into responsive web design. The CSS Box Model consists of four distinct parts.
The content of the box, where text and images appear.
Clears an area around the content.
A border that goes around the padding.
Clears an area around the border.
This will keep containers the same size when you add a border or padding — it pushes content
inwards instead of expanding the container outwards. I've
already added this snippet in initialize.css, but you should add it manually in case you don't
include that file in a project.
grid.css
What was once a bug is now a widely used CSS property. It basically means you can choose whether or not to include borders and padding in the width of your content.
box-sizing: content-boxMargin, borders and padding are drawn outside the specified width of your content.
box-sizing: border-boxBorders and padding are drawn inside the specified width of your content. (Only the margin is drawn outside.)
A container holds your entire site — or you can have multiple containers for each section — and
controls its maximum width. Change the max-width property at your leisure or use the
.container-fluid class to make your container expand with the size of the browser window.
grid.css
index.html → <body>
With mobile first, columns are block level (take up the full width available) by default. No
additional styles needed! We're also giving them padding inside and vertical margins on mobile, default styles
that we can easily override later.
grid.css
index.html → <body>
Columns are set to float: left so that on large screens we can:
a) stack content side-by-side and
b) enable a grid layout with different width columns.
grid.css
index.html → <body>
We wrap our columns inside rows to prevent other elements from stacking next to them, and clearing issues are fixed using the popular "clearfix hack". We also add negative margins to make sure nested rows take up the full-width of their containers, and vertical margins by default to establish a vertical rhythm.
grid.css
index.html → <body>
You can nest columns inside other columns, infinitely.
It's like a
div inception.
index.html → <body>
You can offset a column by (virutally) creating an empty one. We use the same percentages, but as
margin instead of width.
grid.css
index.html → <body>
Enable a grid without padding inside each column by adding a .no-padding class to a
.container element
grid.css
index.html → <body>
Enable a grid without vertical margins between each row/column by adding a .no-margin class
to a .container element
grid.css
index.html → <body>
Add as many @media query break points as you like, trying to keep in mind common device
screen widths. You can use min-width, max-width, or combine both to style very
specific layouts.
custom.css
Add the class .flow-opposite to columns where you want content to display first on mobile but
appear on the right on larger screens.
grid.css
index.html → <body>
By following these simple steps, you are on the path to responsive web design mastery. Keep practicing and help make the web a better, more usable place.
Lastly, after adding all these pieces to your project one-by-one, this is what you should end up with.
index.html
initialize.css
grid.css
grid-tutorial.css
custom.css