0
Designing        BostonGlobe.com:        Responsive web design                                                            ...
hello.Thursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
we started with a strategyThursday, October 13, 2011
we started with a strategy               and took a closer look at our readers.Thursday, October 13, 2011
some users were like red bull . . .                                                      (cc) Fristle — bit.ly/mUkfnfThurs...
and some users were like coffee . . .                                                  (cc) S. Diddy — bit.ly/prEl5eThursd...
we were now working for a new client.Thursday, October 13, 2011
readers.Thursday, October 13, 2011
they also like to browse…Thursday, October 13, 2011
they also like to browse…                                     to relax…Thursday, October 13, 2011
they also like to browse…                                     to relax…                              to stumble upon a sto...
we’d been here before.Thursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
first steps . . .                             the early prototypesThursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
we did some ‘usability testing’ . . .Thursday, October 13, 2011
we did some ‘usability testing’ . . .                             we learned some stuff . . .Thursday, October 13, 2011
we did some ‘usability testing’ . . .                               we learned some stuff . . .                           ...
responsive web design?Thursday, October 13, 2011
alistapart.com/articles/responsive-web-designThursday, October 13, 2011
design isn’t just about layout.Thursday, October 13, 2011
however, we cannot predict the future.Thursday, October 13, 2011
Responsive design has . . .Thursday, October 13, 2011
Responsive design has . . .          1. A flexible, grid-based layoutThursday, October 13, 2011
Responsive design has . . .          1. A flexible, grid-based layout          2. Flexible width media: images, videoThurs...
Responsive design has . . .          1. A flexible, grid-based layout          2. Flexible width media: images, video     ...
Step 1.                                  The flexible grid                             target ÷ context = resultThursday, ...
Step 2.                              Flexible images and media                             img {                          ...
Step 3.                                   Media queries                             designing for breakpointsThursday, Oct...
DEVIC E                WI DT H                             Small Screens (landscape)    480 px                            ...
responsive design means                             designing in the browser                                and less in a ...
so now we needed some coffee . . .                                                 (cc) S. Diddy — bit.ly/prEl5eThursday, ...
and some red bull . . .                                                       (cc) Fristle — bit.ly/mUkfnfThursday, Octobe...
we began to realize some of the visual              designs into lots of live prototypes.                next, the design ...
an interactive design reviewThursday, October 13, 2011
an interactive design reviewThursday, October 13, 2011
design review surfaces challenges.Thursday, October 13, 2011
refining the mastheadThursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
from design to code, and back againThursday, October 13, 2011
let’s looks at the live site.Thursday, October 13, 2011
this was fun, thanks.Thursday, October 13, 2011
4                             Brief books for people who make websites   No.                             Ethan Marcotte   ...
4                             Brief books for people who make websites   No.                             Ethan Marcotte   ...
Upcoming SlideShare
Loading in...5
×

Boston Globe: Responsive Web Design

13,562

Published on

Published in: Technology, Business

Transcript of "Boston Globe: Responsive Web Design"

  1. 1. Designing BostonGlobe.com: Responsive web design October 13, 2011 Innovation and Incubation: Trends in Tablets and Mobile Miranda Mulligan, Digital design director, The Boston Globe Harnessing Our Collective Power, The Media Consortium, 2011 meetingThursday, October 13, 2011
  2. 2. hello.Thursday, October 13, 2011
  3. 3. Thursday, October 13, 2011
  4. 4. Thursday, October 13, 2011
  5. 5. we started with a strategyThursday, October 13, 2011
  6. 6. we started with a strategy and took a closer look at our readers.Thursday, October 13, 2011
  7. 7. some users were like red bull . . . (cc) Fristle — bit.ly/mUkfnfThursday, October 13, 2011
  8. 8. and some users were like coffee . . . (cc) S. Diddy — bit.ly/prEl5eThursday, October 13, 2011
  9. 9. we were now working for a new client.Thursday, October 13, 2011
  10. 10. readers.Thursday, October 13, 2011
  11. 11. they also like to browse…Thursday, October 13, 2011
  12. 12. they also like to browse… to relax…Thursday, October 13, 2011
  13. 13. they also like to browse… to relax… to stumble upon a story.Thursday, October 13, 2011
  14. 14. we’d been here before.Thursday, October 13, 2011
  15. 15. Thursday, October 13, 2011
  16. 16. Thursday, October 13, 2011
  17. 17. first steps . . . the early prototypesThursday, October 13, 2011
  18. 18. Thursday, October 13, 2011
  19. 19. Thursday, October 13, 2011
  20. 20. Thursday, October 13, 2011
  21. 21. Thursday, October 13, 2011
  22. 22. Thursday, October 13, 2011
  23. 23. we did some ‘usability testing’ . . .Thursday, October 13, 2011
  24. 24. we did some ‘usability testing’ . . . we learned some stuff . . .Thursday, October 13, 2011
  25. 25. we did some ‘usability testing’ . . . we learned some stuff . . . we were ready to get going . . .Thursday, October 13, 2011
  26. 26. responsive web design?Thursday, October 13, 2011
  27. 27. alistapart.com/articles/responsive-web-designThursday, October 13, 2011
  28. 28. design isn’t just about layout.Thursday, October 13, 2011
  29. 29. however, we cannot predict the future.Thursday, October 13, 2011
  30. 30. Responsive design has . . .Thursday, October 13, 2011
  31. 31. Responsive design has . . . 1. A flexible, grid-based layoutThursday, October 13, 2011
  32. 32. Responsive design has . . . 1. A flexible, grid-based layout 2. Flexible width media: images, videoThursday, October 13, 2011
  33. 33. Responsive design has . . . 1. A flexible, grid-based layout 2. Flexible width media: images, video 3. Media queriesThursday, October 13, 2011
  34. 34. Step 1. The flexible grid target ÷ context = resultThursday, October 13, 2011
  35. 35. Step 2. Flexible images and media img { max-width: 100%; } github.com/scottjehl/Responsive-Images and github.com/scottjehl/RespondThursday, October 13, 2011
  36. 36. Step 3. Media queries designing for breakpointsThursday, October 13, 2011
  37. 37. DEVIC E WI DT H Small Screens (landscape) 480 px 7” tablets (portrait) 600 px 10” (portrait) 768 px 10” tablets (landscape) 1024 px Widescreen 1200 pxThursday, October 13, 2011
  38. 38. responsive design means designing in the browser and less in a ‘comp’.Thursday, October 13, 2011
  39. 39. so now we needed some coffee . . . (cc) S. Diddy — bit.ly/prEl5eThursday, October 13, 2011
  40. 40. and some red bull . . . (cc) Fristle — bit.ly/mUkfnfThursday, October 13, 2011
  41. 41. we began to realize some of the visual designs into lots of live prototypes. next, the design pod convenes.Thursday, October 13, 2011
  42. 42. an interactive design reviewThursday, October 13, 2011
  43. 43. an interactive design reviewThursday, October 13, 2011
  44. 44. design review surfaces challenges.Thursday, October 13, 2011
  45. 45. refining the mastheadThursday, October 13, 2011
  46. 46. Thursday, October 13, 2011
  47. 47. Thursday, October 13, 2011
  48. 48. from design to code, and back againThursday, October 13, 2011
  49. 49. let’s looks at the live site.Thursday, October 13, 2011
  50. 50. this was fun, thanks.Thursday, October 13, 2011
  51. 51. 4 Brief books for people who make websites No. Ethan Marcotte RESPONSIVE WEB DESIGN Jeremy KetihThursday, October 13, 2011
  52. 52. 4 Brief books for people who make websites No. Ethan Marcotte RESPONSIVE WEB DESIGN Jeremy Ketih abookapart.com (Fun read. I swear.)Thursday, October 13, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×