Responsive Design Decisions

Hello. I’m @mshwery

Make it work on all the things

The web is responsive by default. Layout is a hack.

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: “
”; clear: both; height: 0; } .clearfix { display: inline-block; } *html .clearfix { height: 1%; } .clearfix { display: block; }

Don’t despair. There is hope.

CSS3 Regions

CSS3 Regions * supported in WebKit Nightly using -webkit-flow-into: flow_name;
and -webkit-from-flow: flow_name;. * can enable in Chrome 19+ using a runtime flag (see about:flags)

CSS3 Columns

Flexbox display: flex FIXED FIXED

Flexbox display: flex

Content Folding AD AD AD AD http://css-tricks.com/content-folding/

Content Folding http://css-tricks.com/content-folding/ AD AD AD AD AD AD AD
AD

= 212px { width: 200px; padding: 0 5px; border: 1px;
} Border box box-sizing: border-box

? { width: 200px; padding: 0 5px; border: 1px; }
Border box box-sizing: border-box

Border box box-sizing: border-box (IE8+ and all major browsers) {
width: 188px; padding: 0 5px; border: 1px; } { box-sizing: border-box; width: 200px; padding: 0 5px; border: 1px; } Requires math No math

Collapsible Columns display: inline-block;

percents/ems/rems http://ux.saggezza.com/articles/root-element-sizing-in-css/

percents/ems/rems http://ux.saggezza.com/articles/root-element-sizing-in-css/ "root em" html { font-size: 62.5% } body
{ font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */

Media Queries @media only screen and (max-device-width: 480px) {} Breakpoints
by content/layout, not by device.

Media Queries @media only screen and (max-device-width: 480px) {} Breakpoints
by content/layout, not by device. max-width: 600px

Media Queries @media only screen and (max-width: 600px) {} http://mediaqueri.es/

One thumb, one eyeball What’s the method of input? Purpose
of interaction? - Luke Wroblewski

Finger vs Mouse what are people using to interact?

Tap Area

Tap Area http://go.microsoft.com/fwlink/?LinkID=183218 http://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/MobileHIG.pdf Microsoft says: 34x34px Apple says: 44x44px
8px+ between

Beyond the Viewport Can you use space outside the view?

Beyond the Viewport Can you use space outside the view?
http://disney.com

Label alignment Do your forms have to use horizontally-aligned labels?
http://www.lukew.com/ff/entry.asp?504 http://uxmovement.com/forms/another-case-for-using-top-aligned-form-labels/

Design for good content hierarchy. Forget about the fold.

If it’s not needed on the "mobile version" Is it
needed on larger displays?

Don’t just hide stuff. Strategically load stuff (or not).

Responsive images? Lots of conflicting W3C proposals. Detect max−device−width to
conditionally load media sizes. http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

Conditional Stylesheets? Nope. · conditional stylesheets mean 1 or 2
extra HTTP requests · they are blocking (page render waits until load completes) · deviates from the rest of your well-organized code · media-specific stylesheets have poor browser support http://css-tricks.com/resolution-specific-stylesheets/ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Conditional Stylesheets? Nope. Check out Paul Irish's solution (ships with
HTML5 boilerplate):     <html>  http://css-tricks.com/resolution-specific-stylesheets/ http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/

Don’t radically change without reason. Consistency is a Good Idea.

http://clearleft.com

http://clearleft.com consistent nav

http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://bradfrostweb.com/blog/web/responsive-nav-patterns/

Resources christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/ bradfrost.github.com/this-is-responsive/ bradfrostweb.com/blog/web/responsive-nav-patterns/ andmag.se/2012/10/responsive-images-lazy-load-and-multiserve-images/ jordanm.co.uk/lab/responsiveroulette adobe.com/devnet/html5/articles/css3-regions.html snook.ca/archives/html_and_css/font-size-with-rem ux.saggezza.com/articles/root-element-sizing-in-css/ css-tricks.com/content-folding/
css-tricks.com/resolution-specific-stylesheets/ paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ lukew.com/ff/entry.asp?504 uxmovement.com/forms/another-case-for-using-top-aligned-form-labels/

Thanks! @mshwery

Responsive Design Decisions

Responsive Design Decisions

More Decks by Matt Shwery

Other Decks in Design

Featured

Transcript