2. What is responsive web design?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
A flexible grid (with flexible images) that incorporates
media queries to create a responsive, adaptive layout.
- Ethan Marcotte
3. How do we view the internet?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
Desktop or laptop computer
Tablet
Smartphone
Television
Gaming console
4. Why is responsive design important?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
Pinching and stretching is annoying
Page size and load time
Mobile bandwidth is expensive
Hundreds of device resolutions
5. How do you create a responsive website?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
Design for the smallest resolution first
It is easier to add content than remove it
Flexible grid
Flexible media
Media queries
6. What is a flexible grid?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
A website which resizes and repositions content
target ÷ context = result
h2 { font-size: 24px; }
24 ÷ 16 = 1.5
h2 { font-size: 1.5em; }
7. What is flexible media?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
Give the media some constraints
img, video { max-width: 100%; }
8. What is a media query?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
@media screen and (min-width: 1025px;) {
body { letter-spacing: 0.2em; }
}
Basing element size and position on resolution
9. What should you do?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
Your website is for your customers
Only one version of your website
Numbers don’t lie
Do you want to be left behind?
