boston globe: responsive web design
DESCRIPTION
TRANSCRIPT
October 13, 2011Innovation and Incubation: Trends in Tablets and Mobile
Miranda Mulligan, Digital design director, The Boston Globe
Harnessing Our Collective Power, The Media Consortium, 2011 meeting
Designing BostonGlobe.com:Responsive web design
Thursday, October 13, 2011
hello.
Thursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
we started with a strategy
Thursday, October 13, 2011
we started with a strategyand took a closer look at our readers.
Thursday, October 13, 2011
(cc) Fristle — bit.ly/mUkfnf
some users were like red bull . . .
Thursday, October 13, 2011
(cc) S. Diddy — bit.ly/prEl5e
and some users were like coffee . . .
Thursday, 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
to relax…they also like to browse…
Thursday, October 13, 2011
to relax…they also like to browse…
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 prototypes
Thursday, 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-design
Thursday, 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
1. A flexible, grid-based layout
Responsive design has . . .
Thursday, October 13, 2011
1. A flexible, grid-based layout
2. Flexible width media: images, video
Responsive design has . . .
Thursday, October 13, 2011
1. A flexible, grid-based layout
2. Flexible width media: images, video
3. Media queries
Responsive design has . . .
Thursday, October 13, 2011
Step 1.The flexible grid
target ÷ context = result
Thursday, October 13, 2011
Step 2.Flexible images and media
img {max-width: 100%;
}
github.com/scottjehl/Responsive-Images and github.com/scottjehl/Respond
Thursday, October 13, 2011
Step 3.Media queries
designing for breakpoints
Thursday, October 13, 2011
DEVICE WIDTH
Small Screens (landscape) 480 px
7” tablets (portrait) 600 px
10” (portrait) 768 px
10” tablets (landscape) 1024 px
Widescreen 1200 px
Thursday, October 13, 2011
responsive design meansdesigning in the browser
and less in a ‘comp’.
Thursday, October 13, 2011
(cc) S. Diddy — bit.ly/prEl5e
so now we needed some coffee . . .
Thursday, October 13, 2011
(cc) Fristle — bit.ly/mUkfnf
and some red bull . . .
Thursday, 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 review
Thursday, October 13, 2011
an interactive design review
Thursday, October 13, 2011
design review surfaces challenges.
Thursday, October 13, 2011
refining the masthead
Thursday, October 13, 2011
Thursday, October 13, 2011
Thursday, October 13, 2011
from design to code, and back again
Thursday, October 13, 2011
let’s looks at the live site.
Thursday, October 13, 2011
this was fun, thanks.
Thursday, October 13, 2011
Brief books for people who make websites No.
4
RESPONSIVEWEB DESIGN
Ethan Marcotte
!"#$%"#& '( Jeremy Ketih
Thursday, October 13, 2011
Brief books for people who make websites No.
4
RESPONSIVEWEB DESIGN
Ethan Marcotte
!"#$%"#& '( Jeremy Ketih
abookapart.com(Fun read. I swear.)
Thursday, October 13, 2011