16. Viewport
● usually wider than the screen
● zoom-in for the user
<meta name="viewport"
content="width=device-width,
initial-scale=1,
minimum-scale=1">
17. Best practices for the new world
● all pages should render legibly on mobile
● write content once, view anywhere
● never show horizontal bar (almost never;)
23. Liquid layout
● ability to reflow itself on narrow screen
● never use fixed width/height on containers
● body { max-width: 978px; }
.boxout { min-height: 200px; }
29. ● always check your content on narrow screen
● make content ‘behave’ by hiding the overflow
.container { overflow: hidden; }
Preserve layout
30. Media queries
● different use cases for desktop, mobile, and
print
● browser support
● only styles that differ
@media screen and (max-width: 600px) {
/* rules for narrower viewports */
}
31. ● 978px – desktop and large tablets
maximum page width; allow full layout and
content
● 600px – tablets
Kindle Fire and other 7” tablets; adopt two-column
layout and drop non-critical content
● 480px – smartphones
one-column layout and mobile specific navigation
33. Linearize contents
● narrow columns very hard to read
● will not work on IE8 and below
@media screen and (max-width: 480px) {
div, li {
display: block;
float: none;
width: 100%;
}
}
38. References
● Selected visuals and tips&tricks thanks to Rupert
Breheny, Web Master @ Google
● Responsive web design
● Fluid images
● Box sizing CSS property
● Column layout module
● Liquid layout walkthrough
● Mobile First tech talk
● Jeremy Keith - One Web