Boston Globe: Responsive Web Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
12,457
On Slideshare
4,414
From Embeds
8,043
Number of Embeds
7

Actions

Shares
Downloads
71
Comments
0
Likes
7

Embeds 8,043

http://www.labnol.org 7,814
http://learningecomputerscience.blogspot.in 104
http://www.themediaconsortium.org 82
http://learningecomputerscience.blogspot.com 29
https://twitter.com 8
http://translate.googleusercontent.com 5
http://twitter.labnol.org 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. hello.Thursday, October 13, 2011
  • 3. Thursday, October 13, 2011
  • 4. Thursday, October 13, 2011
  • 5. we started with a strategyThursday, October 13, 2011
  • 6. we started with a strategy and took a closer look at our readers.Thursday, October 13, 2011
  • 7. some users were like red bull . . . (cc) Fristle — bit.ly/mUkfnfThursday, October 13, 2011
  • 8. and some users were like coffee . . . (cc) S. Diddy — bit.ly/prEl5eThursday, October 13, 2011
  • 9. we were now working for a new client.Thursday, October 13, 2011
  • 10. readers.Thursday, October 13, 2011
  • 11. they also like to browse…Thursday, October 13, 2011
  • 12. they also like to browse… to relax…Thursday, October 13, 2011
  • 13. they also like to browse… to relax… to stumble upon a story.Thursday, October 13, 2011
  • 14. we’d been here before.Thursday, October 13, 2011
  • 15. Thursday, October 13, 2011
  • 16. Thursday, October 13, 2011
  • 17. first steps . . . the early prototypesThursday, October 13, 2011
  • 18. Thursday, October 13, 2011
  • 19. Thursday, October 13, 2011
  • 20. Thursday, October 13, 2011
  • 21. Thursday, October 13, 2011
  • 22. Thursday, October 13, 2011
  • 23. we did some ‘usability testing’ . . .Thursday, October 13, 2011
  • 24. we did some ‘usability testing’ . . . we learned some stuff . . .Thursday, October 13, 2011
  • 25. we did some ‘usability testing’ . . . we learned some stuff . . . we were ready to get going . . .Thursday, October 13, 2011
  • 26. responsive web design?Thursday, October 13, 2011
  • 27. alistapart.com/articles/responsive-web-designThursday, October 13, 2011
  • 28. design isn’t just about layout.Thursday, October 13, 2011
  • 29. however, we cannot predict the future.Thursday, October 13, 2011
  • 30. Responsive design has . . .Thursday, October 13, 2011
  • 31. Responsive design has . . . 1. A flexible, grid-based layoutThursday, October 13, 2011
  • 32. Responsive design has . . . 1. A flexible, grid-based layout 2. Flexible width media: images, videoThursday, October 13, 2011
  • 33. Responsive design has . . . 1. A flexible, grid-based layout 2. Flexible width media: images, video 3. Media queriesThursday, October 13, 2011
  • 34. Step 1. The flexible grid target ÷ context = resultThursday, October 13, 2011
  • 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. Step 3. Media queries designing for breakpointsThursday, October 13, 2011
  • 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. responsive design means designing in the browser and less in a ‘comp’.Thursday, October 13, 2011
  • 39. so now we needed some coffee . . . (cc) S. Diddy — bit.ly/prEl5eThursday, October 13, 2011
  • 40. and some red bull . . . (cc) Fristle — bit.ly/mUkfnfThursday, October 13, 2011
  • 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. an interactive design reviewThursday, October 13, 2011
  • 43. an interactive design reviewThursday, October 13, 2011
  • 44. design review surfaces challenges.Thursday, October 13, 2011
  • 45. refining the mastheadThursday, October 13, 2011
  • 46. Thursday, October 13, 2011
  • 47. Thursday, October 13, 2011
  • 48. from design to code, and back againThursday, October 13, 2011
  • 49. let’s looks at the live site.Thursday, October 13, 2011
  • 50. this was fun, thanks.Thursday, October 13, 2011
  • 51. 4 Brief books for people who make websites No. Ethan Marcotte RESPONSIVE WEB DESIGN Jeremy KetihThursday, October 13, 2011
  • 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