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

Boston Globe: Responsive Web Design

on

  • 10,565 views

 

Statistics

Views

Total Views
10,565
Views on SlideShare
4,185
Embed Views
6,380

Actions

Likes
7
Downloads
70
Comments
0

7 Embeds 6,380

http://www.labnol.org 6154
http://learningecomputerscience.blogspot.in 104
http://www.themediaconsortium.org 79
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
    • 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/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