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.

1. Scott B Reynolds | Thrise, LLC | Hartford Adobe
@scottbreynolds
@thrise
Speed Up Your Next
Responsive Web Design
Project
Thursday, October 10, 13

2. Responsive Web Design
The Future of the Web?
Thursday, October 10, 13

3. Static Web Design
53%
Responsive Web Design
vs.
Thursday, October 10, 13

4. Mobile Web Design
Thursday, October 10, 13

5. Mobile Web Design
vs.
Responsive Web Design
Thursday, October 10, 13

6. Responsive Web Design
The Future of the Web?
What the heck is...
Thursday, October 10, 13

7. Responsive Web Design
What the heck is...
by Ethan Marcotte
Thursday, October 10, 13

8. Thursday, October 10, 13

9. Responsive Web Design
WHY?
What the heck is...
Why?
by Ethan Marcotte
Thursday, October 10, 13

10. Responsive Web Design
?
What the heck is...
Why?
Thursday, October 10, 13

11. Responsive Web Design
960px
What the heck is...
Why?
Thursday, October 10, 13

12. Responsive Web Design
320px
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.
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

13. Responsive Web Design
320px
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.
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

14. Responsive Web Design
What the heck is...
Why?
0
12.5
25
37.5
50
2009 2010 2011 2012 2013
1024 x 768
1366 x 768
Screen Resolutions World Wide
Thursday, October 10, 13

15. 0
500
1000
1500
2000
2007 2009 2011 2013E 2015E
Desktop Mobile
Global Desktop vs. Mobile Internet Users
InternetUsers(MM)
Thursday, October 10, 13

16. Responsive Web Design
320 1024
1920
What the heck is...
Why?
Thursday, October 10, 13

17. Responsive Web Design
My Options?
What the heck is...
alternatives to...
Thursday, October 10, 13

18. Responsive Web Design
three core ingredients
What the heck is...
• A flexible, grid-based layout
• Flexible images and media
• Media queries (CSS3)
Thursday, October 10, 13

19. Responsive Web Design
A FIXED, grid-based layout
960px
Thursday, October 10, 13

20. Responsive Web Design
A FLEXIBLE, grid-based layout
100%
Thursday, October 10, 13

21. Responsive Web Design
Flexible images and media
Flexible layout + FIXED images
img im
Thursday, October 10, 13

22. Responsive Web Design
Flexible images and media
img
img
Flexible layout + FLEXIBLE images
Thursday, October 10, 13

23. Responsive Web Design
Flexible images and media
img { max-width: 100%; }
Thursday, October 10, 13

24. 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

25. “...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

26. Responsive Web Design
Now What?
Thursday, October 10, 13