Embed Size (px)
DESCRIPTION
On October 9th, Scott B. Reynolds presented "Speed up your next responsive web design project" to Harvard's ABCD-WWW group. Description: Rapid growth of smart phones and tablets is causing web professionals to change the way they design and build websites. Many are using Responsive Web Design to offer an optimal viewing experience across a wide range of devices. Responsive Web Design often adds time and complexity to a project, so any tool that helps improve the workflow has value. Bio: Scott B Reynolds is going to show off some products that make a responsive project easier to manage. Scott is an Adobe Community Professional, an Adobe Certified Expert, and the manager of the Hartford Adobe User Group. He is also the founder of Thrise, a digital media/marketing company located in West Hartford Connecticut.
Citation preview
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
