$30 off During Our Annual Pro Sale. View Details »

Responsive Enhancement

Swwweet
December 07, 2012

Responsive Enhancement

Presentation by @htmlboy at Barcelona Developers Conference 2012.

Swwweet

December 07, 2012
Tweet

More Decks by Swwweet

Other Decks in Technology

Transcript

  1. RESPONSIVE ENHANCEMENT

  2. I WORK AT SWWWEET.COM HI, I’M @HTMLBOY

  3. I WORK AT SWWWEET.COM HI, I’M @HTMLBOY

  4. I’m a web designer & front-end dev

  5. I’m a web designer & front-end dev DISSAPOINTED

  6. TOP 10 WEB DESIGN MYTHS

  7. the Future is high-speed connections everywhere MYTH #1

  8. flickr.com/photos/potjie/543400371

  9. MYTH #2 Mobile = Stress Desktop = Relax

  10. flickr.com/photos/shareski/5453209957

  11. MYTH #3 We can’t give the full content to mobile

    devices
  12. 3 or 4 Ferraris are sold every month on eBay's

    mobile apps.” “ globalmoxie.com/blog/mobile-commerce-belly-flop.shtml
  13. MYTH #4 Superhardware awesomeness!

  14. flickr.com/photos/alien-paranoia/4941130941

  15. MYTH #5 Auto-updated high-tech browsers by default

  16. flickr.com/photos/mattimattila/5703851562

  17. MYTH #6 Nobody browses without JS (and we have <noscript>)

  18. We don't have any non-JavaScript users” No, all your users

    are non-JS while they're downloading your JS Jake Archibald “
  19. MYTH #7 We control the content with JS and CSS

  20. None
  21. MYTH #8 We should only care about popular devices

  22. None
  23. MYTH #9 Everybody browses full-screen

  24. None
  25. MYTH #10 Big = mouse Small = touch

  26. None
  27. CHANGING THE WAY WE WORK

  28. Build always with a FALLBACK

  29. HTML FALLBACKS <canvas> <span>Fallback content</span> </canvas>

  30. .canvas{ border:10px solid grey; border-color: rgba(0,0,0,.5); } CSS FALLBACKS

  31. Detect SUPPORT for new & shiny properties

  32. modernizr.com MODERNIZR .no-cssgradients .button{ background: url(gradient.png); }

  33. bit.ly/css-supports @SUPPORTS @supports (display:flex) { section { display: flex; }

    }
  34. RESPONSIVE web design

  35. None
  36. None
  37. None
  38. FLEXIBLE GRIDS aside{ width: 38%; margin-left: 2%; float: right; }

  39. FLEXIBLE IMAGES .img-container img{ max-width:100%; }

  40. @media all and (max-width:400px){ .aside{ width:100%; margin-left:0; float:left; } }

    MEDIA QUERIES
  41. MOBILE FIRST

  42. One-column Small assets Clear hierarchy

  43. <!-- [if lte IE 8]> <link rel=”stylesheet” href=”ie8.css”> <![endif]--> IE8

    != MEDIA QUERIES
  44. or use respond.js github.com/scottjehl/Respond

  45. We are reaching the BREAKING POINT

  46. We can’t use the same CSS & JS everywhere

  47. RESPONSIVE ENHANCEMENT introducing...

  48. Instead of just using progressive enhancement to throw in some

    rounded corners[...], we can apply the same thinking to layout.” Jeremy Keith “
  49. START WITH THE CONTENT Text Images Links

  50. LEGACY LAYOUT Let’s call it the

  51. Consider the LAYOUT as an ENHANCEMENT

  52. HIDING STYLES @media all and (min-width:1px){ /*styles for browsers with

    media query support*/ }
  53. FIX THE DESIGN IF IT BREAKS Stop being obsessed with

    “popular devices”
  54. USE EM-BASED MEDIA QUERIES Be prepared to be zoomed. Play

    nice with smart TVs
  55. Consider JAVASCRIPT as an ENHANCEMENT

  56. NON-JS BY DEFAULT

  57. CONTENT FIRST So basically...

  58. ENHANCE IT WITH LAYOUT, JAVASCRIPT & DECORATION

  59. Build for THE FUTURE

  60. Build for THE FUTURE and for THE PAST

  61. THANKS! Javier Usobiaga @htmlboy