Post on 06-May-2015
description
Scott B Reynolds | Thrise, LLC | Hartford Adobe
@scottbreynolds@thrise
Speed Up Your Next Responsive Web Design
Project
Thursday, October 10, 13
Responsive Web DesignThe Future of the Web?
Thursday, October 10, 13
Static Web Design
53%
Responsive Web Designvs.
Thursday, October 10, 13
Mobile Web Design
Thursday, October 10, 13
Mobile Web Designvs.
Responsive Web Design
Thursday, October 10, 13
Responsive Web DesignThe Future of the Web?
What the heck is...
Thursday, October 10, 13
Responsive Web Design
What the heck is...
by Ethan Marcotte
Thursday, October 10, 13
Thursday, October 10, 13
Responsive Web Design
WHY?
What the heck is...Why?
by Ethan Marcotte
Thursday, October 10, 13
Responsive Web Design?
What the heck is...Why?
Thursday, October 10, 13
Responsive Web Design960px
What the heck is...Why?
Thursday, October 10, 13
Responsive Web Design
320px Static WebsiteMy Static Website looks good on a modern desktop computer as long as the browser is maximized. If my static website is being rendered on a small device there may be problems.
Static Website
My Static Website looks good on a modern desktop computer as long as the browser is maximized. If my static website is being rendered on a small device there may be problems.
960px
What the heck is...Why?
Thursday, October 10, 13
Responsive Web Design
320px Static WebsiteMy Static Website looks good on a modern desktop computer as long as the browser is maximized. If my static website is being rendered on a small device there may be problems.
Static Website
My Static Website looks good on a modern desktop computer as long as the browser is maximized. If my static website is being rendered on a small device there may be problems.
960px
1920px
Static Website
My Static Website looks good on a modern desktop computer as long as the browser is maximized. If my static website is
What the heck is...Why?
Thursday, October 10, 13
Responsive Web Design
What the heck is...Why?
0
12.5
25
37.5
50
2009 2010 2011 2012 2013
1024 x 7681366 x 768
Screen Resolutions World Wide
Thursday, October 10, 13
0
500
1000
1500
2000
2007 2009 2011 2013E 2015E
Desktop Mobile
Global Desktop vs. Mobile Internet UsersIn
tern
et U
sers
(MM)
Thursday, October 10, 13
Responsive Web Design
320 1024 1920
What the heck is...Why?
Thursday, October 10, 13
Responsive Web Design
My Options?
What the heck is...
alternatives to...
Thursday, October 10, 13
Responsive Web Designthree core ingredients
What the heck is...
• A flexible, grid-based layout• Flexible images and media• Media queries (CSS3)
Thursday, October 10, 13
Responsive Web Design
A FIXED, grid-based layout
960px
Thursday, October 10, 13
Responsive Web Design
A FLEXIBLE, grid-based layout
100%
Thursday, October 10, 13
Responsive Web Design
Flexible images and media
Flexible layout + FIXED images
img im
Thursday, October 10, 13
Responsive Web Design
Flexible images and media
imgimg
Flexible layout + FLEXIBLE images
Thursday, October 10, 13
Responsive Web Design
Flexible images and media
img { max-width: 100%; }
Thursday, October 10, 13
Responsive Web Design
Media queries (CSS3)
@media screen and (min-width: 480px) {}
@media screen and (min-width: 780px) {}
@media screen and (min-width: 1024px) {}
Thursday, October 10, 13
“...responsive design is about serving one HTML document to countless browsers and devices, using flexible layouts and media queries to ensure that design is as portable and accessible as possible.”
- Ethan Marcotte
Responsive Web Design
Thursday, October 10, 13
Responsive Web Design
Now What?
Thursday, October 10, 13