Responsive and Responsible

RESPONSIVE &RESPONSIBLE @vaibhavkanwal

TODAY’S AGENDA1. Intro & Beneﬁts2. Demo3. Process4. Tools5. Pizza Party :)

or screen resizeon an orientation change the script ﬁres again...

RWD FORMULANot a religion,just mathtarget / context = result

RWD FORMULA target / context = result300px / 1000px = 0.3 /* Ratio */

QUIZ TIMEHow to make a 280px sidebar in a 960px layout?

QUIZ TIMEHow to make a 280px sidebar in a 960px layout? Q : 280px / 960px = ??

QUIZ TIMEHow to make a 280px sidebar in a 960px layout? Q : 280px / 960px = ?? A : 0.291666667 ~ 30%

Sidebar {width:30%}

MEDIA QUERIES@media screen and (min-width: 600px) { /* DO WHATEVER YOU WANT HERE */}

an emerging process etc...sketches/IA basic visual “live” more “live” mockups responsive sketches responsive mockup mockup no ok? “live” responsive small visual mockups yes mockup to “reality check” to discuss speciﬁc performance and stylistic issues progressive enhancement

begin with a lightweight defaultA fully ﬂexible with defaultB styles for navigation, fonts, content andC no media query

a common approach One style sheet with media queries on the inside. styles.css @media {(min-width: 320px) } a single css file is network @media { efficient, but includes(min-width: 480px) unnecessary style data that } all devices end up downloading @media {(min-width: 640px) } @media {(min-width: 768px) }

a more robust option Multiple style sheets with media queries on the inside.MAJORBREAKPOINTSIN DOCUMENTHEAD basic.css mobile.css desktop.cssMINOR (typically) @media { @media {BREAKPOINTS no media (min-width: 480px) (min-width: 768px)WITHIN EACH queries } }STYLE SHEET @media { (min-width: 640px) }

PAIN POINT • good CSS and • strong CSS and • very basic CSS JavaScript JavaScript support and JavaScript • no touch screen • no touch screen but using proxy • advanced CSS • early WebKit browser such as and JavaScript • XHTML MP Opera Mini • touch events • modern WebKit when queried, these devices will all return a 320 pixel wide viewport value but each have vastly different browsers

STEP 1 STEP 2 Media queries detect Feature detection screen size and serve clariﬁes actual browsersize-appropriate styles capabilities and enables and behaviours further enhancements + appropriately enhanced look functionality layout sized and feel enhancements graphics someday we’ll (even) more (hopefully) be appropriate basic look basic able to detect graphics or and feel functionality other useful media formats stuff like (e.g. SVG) bandwidth

STEP 1 STEP 2 STEP 3Review your traffic Test your site on those Develop an action planlogs and determine devices and determine to address common issueswhat mobile devices where the experience such as these:are accessing your breaks downsite today • key content that is only accessible on hover • key controls that are too small to manipulate on touch screens • modal windows that become unusable on small screens • unnecessary http requests • unnecessarily heavy graphics and media repeat...

GUIDELINES#1 Don’t use PX USE EM ALWAYS

GUIDELINES#2 Use icon-fonts

GUIDELINES#3 Typography

TOOLSEverybody loves free stuff!

FRAMEWORKS http://twitter.github.com/bootstrap/ http://foundation.zurb.com

LIBRARIES http://ﬁtvidsjs.com/

LIBRARIEShttp://adaptive-images.com

LIBRARIEShttp://modernizr.com

INSPIRATIONhttp://mediaqueri.es

TADA!Vaibhav Kanwalhttp://vaibhavkanwal.com@vaibhavkanwal

http://www.iphone-entreprise.com	408
http://www.linkedin.com	25

Responsive and Responsible

by Vaibhav Kanwal on Aug 07, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 433

Statistics

Responsive and Responsible Presentation Transcript