Responsive web design

250 views

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
250
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
2
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

×