1. Front-End
Web Development
Lesson 13
Responsive Basics

2. Agenda
●
●
●
●
●
●
Review and Build
Responsive Layouts
Media Queries
Media Query Lab
The Road Ahead
Media Query Practice & Personal Project

3. Review
Let’s bring HTML / CSS back into the equation.
Review wireframe.html

4. Review Assignment
Create boxes.html
● use HTML5 and CSS
● fixed width: 960px

5. Review Assignment
Create mobile_boxes.html
● use HTML5 and CSS
● fixed width: 480px

6. Fixed vs. Responsive Layouts
Fixed Layout
● used up until recently (and still used)
● relies on a container of fixed width
● typically 960px

7. Fixed vs. Responsive Layouts
Responsive Layout
● different styles for different screen widths
● uses a fluid layout
○ sized in percentages
●
used an elastic layout
○ sized in ems
How to Size Text in CSS

8. Fixed vs. Responsive Layouts
Tour Fixed Layouts
● Boston.com
● UPS.com
● Google.com
● Getaround.com

9. Fixed vs. Responsive Layouts
Tour Responsive Layouts
● General Assembly
● Dwolla
● Sweet Hat Club
● RelayRides

10. Fixed vs. Responsive Layouts
Introduce The Responsinator
Test several of your personal sites.

11. Media Queries
Code along.
Introduce media query code:
●
●
●
Start with template.html
Build responsive.html
Attach three style sheets

12. Media Queries
What breakpoints to use?
Popular Screen Resolutions
CSS Responsive Breakpoints & Media Queries
CSS Media Queries for iPads & iPhones

13. Media Queries
Lab
●
Make boxes.html responsive by attaching
two style sheets
○ iphone.css and desktop.css
●
Bonus: Create a third style sheet
○ ipad.css
●
Bonus: Refactor code using @media
directive (example)

14. The Road Ahead
Next class you will work on making Startup
Matchmaker responsive.
Demo

15. More Review & Personal Project
Sketch out what your personal project might
look like on a iPhone
Begin building iphone.css for your personal
project