1. Responsive layout
Joanna Chwastowska, Google

2. ● Why
● What
● How

9. Mobile specific webpage
● maintenance cost
● detecting/redirecting by user agent
● sometimes worth it
● ‘view desktop version’

14. Viewport
● virtual "window"
● usually wider than the screen
● prevent “squeezing”
● users pan and zoom

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;)

22. Liquid layout

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; }

24. Columns

25. Columns
● use % for columns width
.column {
float: left;
margin-right: 2%;
width: 32%;
}
.column.last { margin-right: 0; }

26. Scrollbar

27. Scrollbar
● avoid horizontal scrollbar
● sometimes images / other elements may
clog up otherwise liquid layout
img, iframe {
max-width: 100%;
box-sizing: border-box;
}

28. Preserve layout

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

32. Linearize content

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%;
}
}

34. Navigation

35. Navigation
● increase hit area, minimum hit area 44px²
● no margins, increase padding, linearize
@media screen and (max-width: 480px) {
#nav a {
display: block;
padding: 5px 10px;
}
}

36. Optional content

37. Optional content
● useful? usable?
● dataplans
@media screen and (max-width: 480px) {
.optional {
display: none; /* not visibility:hidden !*/
}
}

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

39. спасибо:)