Follow along with the slides at:
gdila.github.io/gdi-responsive
Download the zip of files for class
Unzip the file to your desktop.
And it's here to make things right.
Responsive Design is the practice of designing and developing websites that allow the user to enjoy its features no matter what device they're viewing it on.
Responsive Web Design was first coined by Ethan Marcotte in the May 2010 issue of A List Apart.
He also wrote this very nice book and owns the website Responsivewebdesign.com, which are both excellent resources.
You can enter the URL here: http://www.responsinator.com
(or pull it up on your mobile device for a more accurate view!)(these are just Android phone, tablets, phablets. There are lots more!
The magic is achieved with these 3 ingredients:
First we define a width for our grid's container.
We divide the content up into a set of columns, usually 12.
Then we design elements that can scale in size. Instead of assigning a specific pixel dimension, we use percentages.
Whenever the device width changes, the grids change in width to scale with the device.
Here are some examples:
max-width
srcset
- list multiple image filessizes
- give the browser multiple possible widths with media conditionspicture
- gives us more control over when different sources are usedsource
- used to define sources for a picture elementWe could have an entire workshop just on flexible images alone!
So, we won't be discussing all of those options tonight, but this article does a great job of detailing them.
max-width
For now, we'll be using max-width
.
img {
max-width: 100%;
}
max-width
Unlike text, which scales easily on smaller devices, images can be a bit tricky.
Unless we give them a max-width
, images will overflow their container elements if they're too big for them.
max-width
By assigning a max-width
to images, they'll only expand to the size of their parent.
If their parent has no width (which it probably does), it'll just expand to the width of the viewport.
CSS3 media queries let us assign breakpoints that correspond to the pixel width of your desktop monitor, tablet, e-reader, or phone display.
These breakpoints tell the content what to do when the display (or viewport) falls within these widths.
Let's go to our Exercise folder, find the _MediaQueryMagic
folder, and open awesomeness.html
in our browser.
Then let's go to our styles
folder and open styles.css
in Sublime Text.
We can see the breakpoints and styles assigned to this page in our media queries as we narrow our browser window.
Let's open working.html
in our browser.
What if we don't want to start all over and make a totally new responsive site? We just want to make the existing site responsive.
We can totally make the following adjustments and get this site looking lovely on a mobile device:
This will suit our needs because our site is small and manageable. But if you're starting a shiny new project, we'll explore some other options in a bit.
Once upon a time, in 2005, type was always set in px
.
But today we need to account for our billions of devices and a range of pixel densities. So, we use more flexible units for setting our type, like em
s or rem
s.
Here's a good explanation of em
s.
Here's a good explanation of rem
s.
Good to know: The browser default for fonts is 16px
, which is 1em
or 1rem
.
We're going to use ems
today.
The first thing we need to do is change the font sizes from px to ems.
There's a handy formula for this:
target ÷ context = result
So if we're converting 24px to ems,
and 16px is the default size (context), we calculate:
24 (target) ÷ 16 (context) = 1.5 (result)
24px
is 1.5 times greater than 16px
,
so our font-size is 1.5em
.
For times when you are not in the mood for math, we have pxtoem.com
Let's open styles.css in Sublime Text.
Find all of the font-sizes that have px and convert them to the correct em sizes.
Use the formula
target ÷ context = result
or use the pxtoem.com chart/calculator
We'll work through a few together…
So we can keep track of what we changed, let's comment out the original px
font-sizes when we add in our newly calculated em sizes.
Here's our first conversion as an example. Let's convert the h1
font-size:
h1 {
color: #ffffff;
font-size: 2.25em; /* font-size: 36px */
font-style: italic;
font-weight: 800;
margin-bottom: 20px;
padding: 10x 0 0;
text-align: center;
}
Let's convert the h2
font-size.
h2 {
font-size: 1.6em; /* font-size: 25px */
font-style: italic;
margin: 0 0 10px 0;
}
And the .summary p
font-size.
.summary p {
color: #d5ecf0;
font-size: 1em; /* font-size: 16px */
font-weight: normal;
padding: 10px 0;
}
And lastly let's convert the aside p
and the footer
font-sizes:
aside p {
color: yellowgreen;
font-size: .875em; /* font-size: 14px */
font-weight: bold;
padding: 10px 20px;
text-align: left;
}
footer {
clear: both;
color: #60b9ce;
display: block;
font-size: .875em; /* font-size: 14px */
height: 35px;
margin-top: -35px;
padding-top: 120px;
text-align: center;
width: 900px;
}
It wasn't horrible, at least our fonts are now flexible.
And now we have a reminder of why it's better to start off with em
s right from the start.
We still have fixed-width sizing on the structural containers (wrapper, nav, gallery, etc.).
By converting their pixel widths to percentages, we'll be another step closer.
The same formula we used to convert fonts from px
to ems
can be used to convert pixel widths to percentages.
target ÷ context = result
The wrapper around our content is 900px
wide, that's our target. Let's say the layout was designed to be 960px
wide, that's our context. To convert the wrapper to a percentage, we do the math.
900 ÷ 960 = .09375
Move the decimal over two spots for the percentage.
Our 900px
wrapper is now 93.75%
.
Since we have a lot of nested containers in our working site, and want to keep this moving, we're going to make some arbitrary conversions and not do all the math on each one.
We'll use some nice round numbers, which is just fine for our single-page site.
Go back to styles.css
and start identifying our fixed-width containers.
In order to keep track of what we changed, comment out the original pixel widths and replace them with percentages.
Let's do the first few together…
On #wrapper
we should also change the margin
from px
to a percentage.
#wrapper {
margin: 0 10%; /* margin: 0 auto */
width: 80%; /* width: 900px; */
}
header {
background: #004488;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-bottom: 3px solid lightblue;
height: auto;
margin: 0;
width: 100%; /* width: 900px; */
}
nav
and the nav li
widths.nav {
float: left;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
margin: 10px 0 50px;
text-align: left;
width: 70%; /* width: 700px */
}
nav li {
display: inline;
padding: 5px 20px 15px 0;
width: 100%; /* width: 900px; */
}
#social
and the .summary
widths.#social {
float: right;
margin: 20px 0 50px;
padding: 0;
text-align: right;
width: 30%; /* width: 200px */
}
.summary {
clear: both;
float: left;
padding: 5px 0 10px;
width: 100%; /* width: 900px */
}
#feature img
and the #gallery
widths.#feature img {
padding: 0;
width: 100%; /* width: 800px */
z-index: 0;
}
#gallery {
float: left;
margin: 0;
padding: 0;
width: 60%; /* width: 550px */
}
#thumbs li
, #thumbs li img
, and the aside
widths.#thumbs li {
float: left;
padding: 0 20px 20px 0;
width: 20%; /* width: 80px */
}
#thumbs li img {
width: 100%; /* width: 80px */
}
aside {
background: #004488;
float: right;
height: auto;
margin: 0;
padding: 0;
width: 40%; /* width:250px; */
}
#footer
width and add a max-width
to images.footer {
clear: both;
color: #60b9ce;
display: block;
font-size: .875em; /* font-size: 14px */
height: 35px;
margin-top: -35px;
padding-top: 120px;
text-align: center;
width: 100%; /* width: 900px */
}
img {
max-width: 100%;
}
Do things look better?
Let's take some time to get things right before we move on.
If you need to catch up, you can copy and paste the styles.css
from our finished-responsive-website folder:
If you've ever created a print stylesheet for a website (media="print"
) then you're already familiar with the idea of creating a specific stylesheet that comes into play under certain conditions.
@media print {
#header img {
display: none;
}
}
Media Queries are just an extra layer of instructions that work alongside your existing CSS. These instructions come into play when certain constraints are defined:
They look only slightly different than regular CSS, just note the extra set of curly brackets.
@media only screen and (max-width: 768px) { /* <-- This opening curly bracket is for the media query */
#gallery {
clear: both;
width: 100%;
}
#thumbs li img {
width: 100%;
}
aside {
clear: both;
margin: 0 auto;
width: 100%;
}
} /* <-- This bracket closes the media query */
We can make a few small changes to our sample website right now and see what happens.
Let's go back to our styles.css
file.
Since all of the CSS we've written so far looks best on mostly the desktop view, let's customize it a bit for a smaller screen, like a tablet.
At the very bottom of our styles.css
, type the following:
@media screen and (max-width: 1024px) {
#gallery {
clear: both;
width: 100%;
}
#thumbs li img {
width: 100%;
}
aside {
clear: both;
margin: 0 auto;
width: 100%;
}
}
styles.css
, type the following:@media screen and (max-width: 667px) {
#thumbs li {
clear: both;
width: 100%;
}
}
Now we have a very basic, responsive website. We could keep adding and adding to this, but we're going to move on to learning about process.
As our content readjusts at each breakpoint, the change can be abrupt. Though users might not notice it, it's a subtle way to soften the transitions.
Add the following to the bottom of your CSS, save, refresh your website, and resize the browser to see the difference:
aside, #thumbs li {
-webkit-transition: width 1s ease;
transition: width 1s ease;
}
Maybe it turns out you've got a site that's going to be a bit more complex, or you just want to start with a clean slate.
Here's where responsive frameworks can come in.
This is simply a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that's easily nested. The widths are percentages. They've done the math for us!
Here's a framework to try out:
You should already have the Essential package downloaded, but if not, you can download it here: foundation.zurb.com/develop/download.html
Let's go to the Foundation Essentials folder we downloaded and open index.html
in our browser.
Check out the following chunks of code and their corresponding CSS by doing a right-click & inspect:
Let's take a look at foundation.css
file the Foundation Essentials folder. Open that in Sublime Text, and let's see how they've done their media queries.
You'll notice their media queries are mixed in with the regular styles, so that they're grouped with other like items. In this case, we're dealing with columns.
Let's start modifying this page so we can get used to working within the rows and columns of the grid.
Open index.html
in Sublime Text.
Change some text to your own, maybe start with the h1
and h2
.
Find the spot in the code where there are 3 columns of text. Let's say we want to delete one of them and just have 2 columns.
Since these 3 columns are each given a class of large-4 medium-4
we have 3 x 4 = 12.
If we delete one of the divs and rename the other two large-6 medium-6
so that they still add up to 12, see what happens.
If we want to change some styling, we should create a new CSS file so any add-ons will be separate from the existing huge CSS file.
Open a new document in Sublime Text and save it in the CSS folder inside foundation-essentials
. Name it whatever you like. Don't forget to link the new CSS file to your HTML file.
Try adding some color to these classes, or any other ones that you like.
.row {
background: blue;
}
.large-12 p {
background: yellowgreen;
}
.large-4 p {
background: salmon;
}
Once you get comfortable with the way the columns are nested, you'll soon see how you can adapt your own designs into a page like this Foundation starter page.
There are other downloads that include much more, including a custom download option, so be sure to try those too.
Mobile First helps us to:
It makes us better designers and developers, and our users will be grateful for it.
It requires a shift in how we think about content.
Really, it's content first. Presenting only the most relevant content to begin with, so that none of it is treated as fluff that needs to be hidden from users.
Here's a high-level glance at the Responsive Design and Mobile first process.
Creates a blueprint for designers and devs.
Great for identifying the pain points before visual design starts.
Helps sort out the priority and proximity of content. At the very least, it's an exercise that helps clarify what matters the most.
Style Tiles. More refined than a mood board. Less detailed than a website mockup or comp.
The style tile below eventually became the website on the right.
After receiving design deliverables (style tiles, mobile/desktop mockups), development starts.
The starting point can be a responsive framework, or a responsive template in your CMS of choice.
Responsive is not a replacement for mobile apps, and is not always the go-to solution.
We should assume that people will try to view a website on whatever device they have with them. It's up to us to provide the appropriate solutions for each app, website, and use case.
Sometimes there's another strategy happening, intentional or otherwise. Here's what Target has going on.
An m-dot mobile site, native app, full website on mobile, Cartwheel:
We have a responsibility to do the right thing for our users. It's not an easy job, but you've all taken the first step in helping improve the web just by being here!
Go forth and tackle your next project with a fresh perspective!
We strive to make each class better than the last! You can help by giving us your honest feedback:
Thank you!