21. “The control which designers know in the print
medium, and often desire in the web medium,
is simply a function of the limitation of the
printed page. We should embrace the fact that
the web doesn’t have the same constraints, and
design for this flexibility. But first, we must
“accept the ebb and flow of things.“
- John Allsopp
27. native app : issues
- extra build
- extra cost
- many platforms
- even more extra cost
- sharing content
- findability
- walled garden
- duplicate content management
- there are pro's too..
29. mobile website : issues
- redirects
- urls (m. vs www)
- sharing (desktop to mobile and viceversa)
- duplicate content
- often catering for certain brands / types / OS
- duplicate content - duplicate mgmt
- different devices
- expensive and unsatisfying
51. media queries
check for - condition
usually width (also pixel-ratio,orientation)
apply different styles
breakpoints
52. media queries
around since css 2.1 - media type
<link rel="stylesheet" type="text/css" href="core.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
media="print" />
53. media queries since CSS3
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="phone.css" />
if screen width < 480px, load phone.css
more media features: http://www.w3.org/TR/css3-mediaqueries/#media1
71. build your own grid
(target % context) * 100 = result
720 in 940
76,595744680851063829787234042553 %
1 col (55 in 1200) :
4,5833333333333333333333333333333 %
72. flexible modules
easy to "place" in the layout
order in DOM becomes even more important
left to right = top to bottom (mostly)
82. more resources
the whole argument on media
https://github.com/filamentgroup/Responsive-Images
http://adaptive-images.com/
http://unstoppablerobotninja.com/entry/fluid-images
83. snippet - media reporter
.site-title:before {
position: absolute;
top:0;
content: "768 and up";
background-color: hsla(150,60%,
40%,.7);
color: white; font-size: 16px;
padding: 5px 10px;
}
> handy to see which mq is active