RESPONSIVE     &RESPONSIBLE   @vaibhavkanwal
TODAY’S AGENDA1. Intro & Benefits2. Demo3. Process4. Tools5. Pizza Party :)
or screen resizeon an orientation change    the script fires 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...
begin with a lightweight defaultA    fully flexible with defaultB   styles for navigation,    fonts, content andC    no med...
a common approach                         One style sheet with media                         queries on the inside.    sty...
a more robust option                                                   Multiple style sheets with                         ...
PAIN POINT                                                 • good CSS and        • strong CSS and                         ...
STEP 1                               STEP 2 Media queries detect                 Feature detection screen size and serve  ...
STEP 1                STEP 2                    STEP 3Review your traffic   Test your site on those   Develop an action pl...
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://fitvidsjs.com/
LIBRARIEShttp://adaptive-images.com
LIBRARIEShttp://modernizr.com
INSPIRATIONhttp://mediaqueri.es
TADA!Vaibhav Kanwalhttp://vaibhavkanwal.com@vaibhavkanwal
Responsive and Responsible
Responsive and Responsible
Upcoming SlideShare
Loading in …5
×

Responsive and Responsible

4,507 views
4,241 views

Published on

Slides from my talk on Responsive Design at BarCamp 8 Delhi at TLabs, New Delhi on 4th August 2012

I talk on how Startups can use Media Queries to create device agnostic experiences using a single version of their websites/web apps

References : Pragmatic Responsive by Stephanie Rieger in Nashville for Breaking Development 2011

Published in: Design, Technology, Education

Responsive and Responsible

  1. RESPONSIVE &RESPONSIBLE @vaibhavkanwal
  2. TODAY’S AGENDA1. Intro & Benefits2. Demo3. Process4. Tools5. Pizza Party :)
  3. or screen resizeon an orientation change the script fires again...
  4. RWD FORMULANot a religion,just mathtarget / context = result
  5. RWD FORMULA target / context = result300px / 1000px = 0.3 /* Ratio */
  6. QUIZ TIMEHow to make a 280px sidebar in a 960px layout?
  7. QUIZ TIMEHow to make a 280px sidebar in a 960px layout? Q : 280px / 960px = ??
  8. QUIZ TIMEHow to make a 280px sidebar in a 960px layout? Q : 280px / 960px = ?? A : 0.291666667 ~ 30%
  9. Sidebar {width:30%}
  10. MEDIA QUERIES@media screen and (min-width: 600px) { /* DO WHATEVER YOU WANT HERE */}
  11. 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 specific performance and stylistic issues progressive enhancement
  12. begin with a lightweight defaultA fully flexible with defaultB styles for navigation, fonts, content andC no media query
  13. 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) }
  14. 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) }
  15. 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
  16. STEP 1 STEP 2 Media queries detect Feature detection screen size and serve clarifies 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
  17. 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...
  18. GUIDELINES#1 Don’t use PX USE EM ALWAYS
  19. GUIDELINES#2 Use icon-fonts
  20. GUIDELINES#3 Typography
  21. TOOLSEverybody loves free stuff!
  22. FRAMEWORKS http://twitter.github.com/bootstrap/ http://foundation.zurb.com
  23. LIBRARIES http://fitvidsjs.com/
  24. LIBRARIEShttp://adaptive-images.com
  25. LIBRARIEShttp://modernizr.com
  26. INSPIRATIONhttp://mediaqueri.es
  27. TADA!Vaibhav Kanwalhttp://vaibhavkanwal.com@vaibhavkanwal

×