responsive awareness
@ onehundred _ be        web ninja with these days                      that’s me
• in general• design• development                who?
responsive awareness              in general
definition
“responsive is the way the web should be”                                there, i said it                             quot...
• one interface fits all• all web capable devices• optimized user experience at all times                                w...
• one interface fits all (website, app...)• all web capable devices• optimized user experience at all times               ...
• let’s take a look at a live example                          http://playground.thesedays.com/responsive                 ...
• depending on the screen width an appropriate version gets served                                              awesome
• discrimination sucks• no standard in display sizes• smartphone sales will surpass worldwide pc sales by the end of 2011•...
• will we need a 5 times bigger budget?• will we need 5 times more time?• do all websites need to be responsive from now o...
responsive awareness                design
• let’s make a couple of things clear• make a distinction between design and layout• 960 px is so nineties.               ...
• how are we going to achieve this?• through a combination of ‘breakpoints’ and scaling                          what do w...
• the ‘breakpoints’ are actually called mediaqueries• we’ll need at least 4 layouts• think of max as: everything below• th...
max 479 px   (smartphones portrait)               numbers don’t lie
max 767 px     (smartphones landscape)             numbers don’t lie
max 1023 px     (tablets portrait)              numbers don’t lie
min 1024 px              numbers don’t lie
• max 479 px (smartphones portrait)• max 767 px (smartphones landscape)• max 1023 px (tablets portrait)• min 1024 px (tabl...
“sorry to say, 4 isn’t enough”                       seriously?
DESIGN• sorry to say 4 isn’t enough• max 479 px (smartphones portrait)• min 480 px and max 767 px (smartphones landscape)•...
DESIGN• max 479 px (smartphones portrait)• min 480 px and max 767 px (smartphones landscape)• min 768 px and max 1023 px (...
• it’s not as bad as it seems• there might not be a need to make 7 different designs• remember the breakpoints, and the sc...
“suggested workflow”                       cycle
1. sketch            cycle
2. information architecture                              cycle
3. visual mockups                    cycle
4. start design                  cycle
5. prototype layout5.1 see how it behaves on screens and devices5.2 if it’s not what’s expected, revise mockups, repeat la...
6. implement design                      cycle
1. sketches2. information architecture3. visual mockups4. start design5. prototype layout  1. see how it behaves on screen...
“that’s not how we do things”                     oh really?
“that’s not how we do things”            embrace change
• design functional• images suck• don’t punish slow connections with unnecessary media• think mobile• think touch• differe...
• information architecture is so important• do not change layout during development• small changes might have a big impact...
responsive awareness          development
• it’s all about speed• graceful degradation or progressive enhancement• don’t spoil old browsers, otherwise people will n...
“a broken escalator is just stairs”                            mitch hedberg        graceful degradation
• start from a framework, or build your own• configure your server• be smart with resources• please make sexy urls        ...
• html5• css3• javascript               technologies
• semantics• appcache• use field types (url, phone, email...)• don’t stop there                            html5
• use mediaqueries• split stylesheets• take advantage of less or sass• remember all vendor prefixes• try out flexbox syste...
• build a custom modernizr• do feature detection• load resources conditionally• use polyfills• check code                 ...
• make downloads parallel• use CDN’s with optional fallback to local version• minify your code• if you use images make spr...
• smartphone screen resolutions exceed those of computers• amount of resources and file size• internet connection type & s...
• better compatibility• support for DPI• lots of happy web users                            future
•   http://flickr.com/photos/dynamosquito/4132923995/•   http://screenshotworld.blogspot.com/2007/06/pulp-fiction-1994.htm...
•   mediaqueri.es•   less css•   less compiler mac•   less compiler windows•   sass css•   css prefixer•   responsive imag...
“questions?”               let’s talk
“discussion and questions”                     let’s talk
“thank you”       much obliged
responsive awareness
Upcoming SlideShare
Loading in …5
×

responsive awareness

2,777 views
2,708 views

Published on

Published in: Technology, Design
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
2,777
On SlideShare
0
From Embeds
0
Number of Embeds
2,041
Actions
Shares
0
Downloads
30
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

responsive awareness

  1. 1. responsive awareness
  2. 2. @ onehundred _ be web ninja with these days that’s me
  3. 3. • in general• design• development who?
  4. 4. responsive awareness in general
  5. 5. definition
  6. 6. “responsive is the way the web should be” there, i said it quotable
  7. 7. • one interface fits all• all web capable devices• optimized user experience at all times wait, what?
  8. 8. • one interface fits all (website, app...)• all web capable devices• optimized user experience at all times wait, what?
  9. 9. • let’s take a look at a live example http://playground.thesedays.com/responsive in action
  10. 10. • depending on the screen width an appropriate version gets served awesome
  11. 11. • discrimination sucks• no standard in display sizes• smartphone sales will surpass worldwide pc sales by the end of 2011• easier & faster maintenance• much lower cost• user agent detection is unreliable and evolves too fast why
  12. 12. • will we need a 5 times bigger budget?• will we need 5 times more time?• do all websites need to be responsive from now on? in general wrap up
  13. 13. responsive awareness design
  14. 14. • let’s make a couple of things clear• make a distinction between design and layout• 960 px is so nineties. get this
  15. 15. • how are we going to achieve this?• through a combination of ‘breakpoints’ and scaling what do we do?
  16. 16. • the ‘breakpoints’ are actually called mediaqueries• we’ll need at least 4 layouts• think of max as: everything below• think of min as: everything above• think of max and min as: everything between practical
  17. 17. max 479 px (smartphones portrait) numbers don’t lie
  18. 18. max 767 px (smartphones landscape) numbers don’t lie
  19. 19. max 1023 px (tablets portrait) numbers don’t lie
  20. 20. min 1024 px numbers don’t lie
  21. 21. • max 479 px (smartphones portrait)• max 767 px (smartphones landscape)• max 1023 px (tablets portrait)• min 1024 px (tablets landscape en other devices) those numbers again
  22. 22. “sorry to say, 4 isn’t enough” seriously?
  23. 23. DESIGN• sorry to say 4 isn’t enough• max 479 px (smartphones portrait)• min 480 px and max 767 px (smartphones landscape)• min 768 px and max 1023 px (tablets portrait)• min 1024 px and max 1280 px(tablets landscape en other devices)• min 1281 px and max 1439 px• min 1440 px and max 1919 px• min 1920 px
  24. 24. DESIGN• max 479 px (smartphones portrait)• min 480 px and max 767 px (smartphones landscape)• min 768 px and max 1023 px (tablets portrait)• min 1024 px and max 1280 px (tablets landscape en other devices)• min 1281 px and max 1439 px (laptops, dekstops)• min 1440 px and max 1919 px (pc’s, tv’s)• min 1920 px (HD screens) that’s more like it
  25. 25. • it’s not as bad as it seems• there might not be a need to make 7 different designs• remember the breakpoints, and the scaling• same layout, scale up or down without redesigning not so bad
  26. 26. “suggested workflow” cycle
  27. 27. 1. sketch cycle
  28. 28. 2. information architecture cycle
  29. 29. 3. visual mockups cycle
  30. 30. 4. start design cycle
  31. 31. 5. prototype layout5.1 see how it behaves on screens and devices5.2 if it’s not what’s expected, revise mockups, repeat layout cycle
  32. 32. 6. implement design cycle
  33. 33. 1. sketches2. information architecture3. visual mockups4. start design5. prototype layout 1. see how it behaves on screens and devices 2. if it’s not what’s expected, revise mockups, repeat layout6. implement design cycle
  34. 34. “that’s not how we do things” oh really?
  35. 35. “that’s not how we do things” embrace change
  36. 36. • design functional• images suck• don’t punish slow connections with unnecessary media• think mobile• think touch• different behavior• design contextual stuff together using illustrator or fireworks design tips
  37. 37. • information architecture is so important• do not change layout during development• small changes might have a big impact on development• get familiar with smartphones and tablets just saying
  38. 38. responsive awareness development
  39. 39. • it’s all about speed• graceful degradation or progressive enhancement• don’t spoil old browsers, otherwise people will never upgrade keep in mind
  40. 40. “a broken escalator is just stairs” mitch hedberg graceful degradation
  41. 41. • start from a framework, or build your own• configure your server• be smart with resources• please make sexy urls in general
  42. 42. • html5• css3• javascript technologies
  43. 43. • semantics• appcache• use field types (url, phone, email...)• don’t stop there html5
  44. 44. • use mediaqueries• split stylesheets• take advantage of less or sass• remember all vendor prefixes• try out flexbox system• if layout changes use multicolumn• use gradients, borders & shadows instead of images• make your images responsive and adaptive css3
  45. 45. • build a custom modernizr• do feature detection• load resources conditionally• use polyfills• check code javascript
  46. 46. • make downloads parallel• use CDN’s with optional fallback to local version• minify your code• if you use images make sprites• photoshop save for web isn’t enough, use further optimization• javascript in the bottom• combine javascript speed tips
  47. 47. • smartphone screen resolutions exceed those of computers• amount of resources and file size• internet connection type & speed• screen height isn’t taken into account responsive problems
  48. 48. • better compatibility• support for DPI• lots of happy web users future
  49. 49. • http://flickr.com/photos/dynamosquito/4132923995/• http://screenshotworld.blogspot.com/2007/06/pulp-fiction-1994.html• http://www.morganstanley.com/institutional/techresearch/internet_ad_trends102009.html• http://www.morganstanley.com/institutional/techresearch/pdfs/MS_Economy_Internet_Trends_102009_FINAL.pdf• http://www.pcworld.com/article/171380/more_smartphones_than_desktop_pcs_by_2011.html• http://venturebeat.com/2009/08/27/admob-finds-android-app-users-more-scarce-but-just-as-obsessed-as-iphone-app-users/• http://www.slideshare.net/yiibu/pragmatic-responsive-design• http://www.slideshare.net/livefront/responsive-design-7877412• http://www.slideshare.net/nzakas/progressive-enhancement-20-conference-agnostic• http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/ sources
  50. 50. • mediaqueri.es• less css• less compiler mac• less compiler windows• sass css• css prefixer• responsive images• adaptive images• polyfills• imageoptim useful links
  51. 51. “questions?” let’s talk
  52. 52. “discussion and questions” let’s talk
  53. 53. “thank you” much obliged

×