joanna chwastowska responsive layout - droid con
Post on 21-Oct-2014
149 views
DESCRIPTION
TRANSCRIPT
![Page 1: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/1.jpg)
Responsive layoutJoanna Chwastowska, Google
![Page 2: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/2.jpg)
● Why
● What
● How
![Page 3: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/3.jpg)
![Page 4: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/4.jpg)
![Page 5: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/5.jpg)
![Page 6: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/6.jpg)
![Page 7: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/7.jpg)
![Page 8: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/8.jpg)
![Page 9: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/9.jpg)
Mobile specific webpage● maintenance cost
● detecting/redirecting by user agent
● sometimes worth it
● ‘view desktop version’
![Page 10: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/10.jpg)
![Page 11: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/11.jpg)
![Page 12: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/12.jpg)
![Page 13: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/13.jpg)
![Page 14: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/14.jpg)
Viewport
● virtual "window"
● usually wider than the screen
● prevent “squeezing”
● users pan and zoom
![Page 15: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/15.jpg)
![Page 16: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/16.jpg)
Viewport● usually wider than the screen
● zoom-in for the user
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
![Page 17: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/17.jpg)
Best practices for the new world
● all pages should render legibly on mobile
● write content once, view anywhere
● never show horizontal bar (almost never;)
![Page 18: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/18.jpg)
![Page 19: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/19.jpg)
![Page 20: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/20.jpg)
![Page 21: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/21.jpg)
![Page 22: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/22.jpg)
Liquid layout
![Page 23: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/23.jpg)
Liquid layout
● ability to reflow itself on narrow screen
● never use fixed width/height on containers
● body { max-width: 978px; }.boxout { min-height: 200px; }
![Page 24: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/24.jpg)
Columns
![Page 25: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/25.jpg)
Columns
● use % for columns width.column { float: left; margin-right: 2%; width: 32%;}.column.last { margin-right: 0; }
![Page 26: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/26.jpg)
Scrollbar
![Page 27: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/27.jpg)
Scrollbar● avoid horizontal scrollbar
● sometimes images / other elements may clog up otherwise liquid layout
img, iframe { max-width: 100%; box-sizing: border-box; }
![Page 28: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/28.jpg)
Preserve layout
![Page 29: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/29.jpg)
● always check your content on narrow screen
● make content ‘behave’ by hiding the overflow
.container { overflow: hidden; }
Preserve layout
![Page 30: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/30.jpg)
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 */ }
![Page 31: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/31.jpg)
● 978px – desktop and large tabletsmaximum page width; allow full layout and content
● 600px – tabletsKindle Fire and other 7” tablets; adopt two-column layout and drop non-critical content
● 480px – smartphonesone-column layout and mobile specific navigation
![Page 32: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/32.jpg)
Linearize content
![Page 33: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/33.jpg)
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%; }}
![Page 34: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/34.jpg)
Navigation
![Page 35: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/35.jpg)
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; } }
![Page 36: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/36.jpg)
Optional content
![Page 37: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/37.jpg)
Optional content● useful? usable?● dataplans
@media screen and (max-width: 480px) { .optional { display: none; /* not visibility:hidden !*/ } }
![Page 38: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/38.jpg)
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
![Page 39: Joanna chwastowska responsive layout - droid con](https://reader034.vdocuments.site/reader034/viewer/2022051311/5445de8aafaf9fe72a8b469d/html5/thumbnails/39.jpg)
спасибо:)