Successfully reported this slideshow.
Responsive layout
Joanna Chwastowska, Google
● Why
● What
● How
Mobile specific webpage
● maintenance cost
● detecting/redirecting by user agent
● sometimes worth it
● ‘view desktop vers...
Viewport
● virtual "window"
● usually wider than the screen
● prevent “squeezing”
● users pan and zoom
Viewport
● usually wider than the screen
● zoom-in for the user
<meta name="viewport"
content="width=device-width,
initial...
Best practices for the new world
● all pages should render legibly on mobile
● write content once, view anywhere
● never s...
Liquid layout
Liquid layout
● ability to reflow itself on narrow screen
● never use fixed width/height on containers
● body { max-width:...
Columns
Columns
● use % for columns width
.column {
float: left;
margin-right: 2%;
width: 32%;
}
.column.last { margin-right: 0; }
Scrollbar
Scrollbar
● avoid horizontal scrollbar
● sometimes images / other elements may
clog up otherwise liquid layout
img, iframe...
Preserve layout
● always check your content on narrow screen
● make content ‘behave’ by hiding the overflow
.container { overflow: hidden;...
Media queries
● different use cases for desktop, mobile, and
print
● browser support
● only styles that differ
@media scre...
● 978px – desktop and large tablets
maximum page width; allow full layout and
content
● 600px – tablets
Kindle Fire and ot...
Linearize content
Linearize contents
● narrow columns very hard to read
● will not work on IE8 and below
@media screen and (max-width: 480px...
Navigation
Navigation
● increase hit area, minimum hit area 44px²
● no margins, increase padding, linearize
@media screen and (max-wi...
Optional content
Optional content
● useful? usable?
● dataplans
@media screen and (max-width: 480px) {
.optional {
display: none; /* not vi...
References
● Selected visuals and tips&tricks thanks to Rupert
Breheny, Web Master @ Google
● Responsive web design
● Flui...
спасибо:)
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Joanna chwastowska   responsive layout - droid con
Upcoming SlideShare
Loading in …5
×

Joanna chwastowska responsive layout - droid con

341 views

Published on

Published in: Software, Technology
  • Be the first to comment

  • Be the first to like this

Joanna chwastowska responsive layout - droid con

  1. 1. Responsive layout Joanna Chwastowska, Google
  2. 2. ● Why ● What ● How
  3. 3. Mobile specific webpage ● maintenance cost ● detecting/redirecting by user agent ● sometimes worth it ● ‘view desktop version’
  4. 4. Viewport ● virtual "window" ● usually wider than the screen ● prevent “squeezing” ● users pan and zoom
  5. 5. Viewport ● usually wider than the screen ● zoom-in for the user <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  6. 6. Best practices for the new world ● all pages should render legibly on mobile ● write content once, view anywhere ● never show horizontal bar (almost never;)
  7. 7. Liquid layout
  8. 8. Liquid layout ● ability to reflow itself on narrow screen ● never use fixed width/height on containers ● body { max-width: 978px; } .boxout { min-height: 200px; }
  9. 9. Columns
  10. 10. Columns ● use % for columns width .column { float: left; margin-right: 2%; width: 32%; } .column.last { margin-right: 0; }
  11. 11. Scrollbar
  12. 12. Scrollbar ● avoid horizontal scrollbar ● sometimes images / other elements may clog up otherwise liquid layout img, iframe { max-width: 100%; box-sizing: border-box; }
  13. 13. Preserve layout
  14. 14. ● always check your content on narrow screen ● make content ‘behave’ by hiding the overflow .container { overflow: hidden; } Preserve layout
  15. 15. 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 */ }
  16. 16. ● 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
  17. 17. Linearize content
  18. 18. 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%; } }
  19. 19. Navigation
  20. 20. 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; } }
  21. 21. Optional content
  22. 22. Optional content ● useful? usable? ● dataplans @media screen and (max-width: 480px) { .optional { display: none; /* not visibility:hidden !*/ } }
  23. 23. 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
  24. 24. спасибо:)

×