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 meeting
Thursday, October 13, 2011
31. Responsive design has . . .
1. A flexible, grid-based layout
Thursday, October 13, 2011
32. Responsive design has . . .
1. A flexible, grid-based layout
2. Flexible width media: images, video
Thursday, October 13, 2011
33. Responsive design has . . .
1. A flexible, grid-based layout
2. Flexible width media: images, video
3. Media queries
Thursday, October 13, 2011
34. Step 1.
The flexible grid
target ÷ context = result
Thursday, October 13, 2011
35. Step 2.
Flexible images and media
img {
max-width: 100%;
}
github.com/scottjehl/Responsive-Images
and github.com/scottjehl/Respond
Thursday, October 13, 2011
36. Step 3.
Media queries
designing for breakpoints
Thursday, 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 px
Thursday, 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/prEl5e
Thursday, October 13, 2011
40. and some red bull . . .
(cc) Fristle — bit.ly/mUkfnf
Thursday, 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
51. 4
Brief books for people who make websites No.
Ethan Marcotte
RESPONSIVE
WEB DESIGN Jeremy Ketih
Thursday, 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
