Joanna chwastowska responsive layout - droid con

Responsive layoutJoanna Chwastowska, Google

● Why

● What

● How

Mobile specific webpage● maintenance cost

● detecting/redirecting by user agent

● sometimes worth it

● ‘view desktop version’

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-scale=1, minimum-scale=1">

Best practices for the new world

● all pages should render legibly on mobile

● write content once, view anywhere

● never show horizontal bar (almost never;)

Liquid layout

Liquid layout

● ability to reflow itself on narrow screen

● never use fixed width/height on containers

● body { max-width: 978px; }.boxout { min-height: 200px; }

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 { max-width: 100%; box-sizing: border-box; }

Preserve layout

● always check your content on narrow screen

● make content ‘behave’ by hiding the overflow

.container { overflow: hidden; }

Preserve layout

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 */ }

● 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

Linearize content

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

Navigation

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

Optional content

Optional content● useful? usable?● dataplans

@media screen and (max-width: 480px) { .optional { display: none; /* not visibility:hidden !*/ } }

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

спасибо:)