1. Responsive Design
Scott Noonan, Boston Interactive
@bstninteractive

2. who am i?
Scott Noonan
Boston Interactive CTO since 2001
30+ years software development
15 years in web/CMS space
@bstninteractive

3. what is responsive design?
Ethan Marcotte publishes an article in
“A List Apart” coining the term
responsive design (2010)
a flexible grid
the use of “media queries”
@bstninteractive

4. flexible grid
designing your site to grow or shrink with
the size of the viewport
@bstninteractive

5. flexible grid
@bstninteractive

6. media queries
determine the width of the viewport
use this information to relayout
redesign certain portions of page
@bstninteractive

7. media queries
@bstninteractive

8. what does this really mean?
we can now build a website that will
respond to the viewport of the device
on which it is being viewed
@bstninteractive

9. what is responsive design really about?
allowing users to easily access and digest
content regardless of device
creating a user experience that is complete
and satisfying for any user on any device
being ready for the future - ‘future friendly’
part of your overall content delivery strategy
being able to manage one code base and
one code repository
@bstninteractive

10. what is responsive design really about?
responsive design is
about your content and
your users’ experience
@bstninteractive

11. why should you care?
Unlike “winning an Olympic
gold medal, where the problem is well
defined,” building a successful company is
actually “more like a science, where you
need to follow the trail wherever it leads.”
-Paul Graham, venture capitalist
@bstninteractive

12. why should you care?
@bstninteractive

13. why should you care?
@bstninteractive

14. why should you care?
@bstninteractive

15. is responsive the right choice for me?
1. Understand your audience
2. Understand your content
@bstninteractive

16. is responsive the right choice for me?
2. Understand your content
rich content
@bstninteractive

17. is responsive the right choice for me?
2. Understand your content
rich content
complex
functionality
@bstninteractive

18. is responsive the right choice for me?
2. Understand your content
rich content
complex
functionality
non-adaptable
design
@bstninteractive

19. @bstninteractive

20. what have we learned?
responsive is...
not the only answer
not simply resizing your website
not a mobile strategy
@bstninteractive

21. what have we learned?
responsive is...
part of your overall content delivery
strategy
device agnostic
about the future-
be ‘future friendly’
@bstninteractive

22. what have we learned?
responsive is...
about content
about the user experience
@bstninteractive

23. @bstninteractive