RESPONSIVE WEB DESIGN
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
What is responsive web design?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirec...
How do we view the internet?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecre...
Why is responsive design important?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wild...
How do you create a responsive website?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/...
What is a flexible grid?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
...
What is flexible media?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
G...
What is a media query?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
@m...
What should you do?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
Your ...
QUESTIONS?
Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
THANK YOU
Upcoming SlideShare
Loading in...5
×

Responsive web design

165

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
165
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. RESPONSIVE WEB DESIGN Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate
  2. 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. 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. 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. 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. 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. 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. 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. 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?
  10. 10. QUESTIONS? Todd Galloway - wildfirecreative.ca - facebook.com/wildfirecreative - twitter.com/wildfirecreate THANK YOU
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×