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

Boston Globe: Responsive Web Design

on

  • 10,786 views

 

Statistics

Views

Total Views
10,786
Views on SlideShare
4,287
Embed Views
6,499

Actions

Likes
7
Downloads
71
Comments
0

7 Embeds 6,499

http://www.labnol.org 6271
http://learningecomputerscience.blogspot.in 104
http://www.themediaconsortium.org 81
http://learningecomputerscience.blogspot.com 29
https://twitter.com 8
http://translate.googleusercontent.com 5
http://twitter.labnol.org 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Boston Globe: Responsive Web Design Boston Globe: Responsive Web Design Presentation Transcript

  • 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
  • hello.Thursday, October 13, 2011
  • Thursday, October 13, 2011 View slide
  • Thursday, October 13, 2011 View slide
  • 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/mUkfnfThursday, October 13, 2011
  • and some users were like coffee . . . (cc) S. Diddy — bit.ly/prEl5eThursday, October 13, 2011
  • 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 story.Thursday, October 13, 2011
  • 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 . . . we were ready to get going . . .Thursday, October 13, 2011
  • 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, videoThursday, October 13, 2011
  • Responsive design has . . . 1. A flexible, grid-based layout 2. Flexible width media: images, video 3. Media queriesThursday, October 13, 2011
  • Step 1. The flexible grid target ÷ context = resultThursday, October 13, 2011
  • Step 2. Flexible images and media img { max-width: 100%; } github.com/scottjehl/Responsive-Images and github.com/scottjehl/RespondThursday, October 13, 2011
  • Step 3. Media queries designing for breakpointsThursday, October 13, 2011
  • 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
  • responsive design means designing in the browser and less in a ‘comp’.Thursday, October 13, 2011
  • so now we needed some coffee . . . (cc) S. Diddy — bit.ly/prEl5eThursday, October 13, 2011
  • and some red bull . . . (cc) Fristle — bit.ly/mUkfnfThursday, October 13, 2011
  • we began to realize some of the visual designs into lots of live prototypes. next, the design pod convenes.Thursday, October 13, 2011
  • 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 RESPONSIVE WEB DESIGN Jeremy KetihThursday, October 13, 2011
  • 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