Responsive Enhancement

Transcript

1. 1.

   RESPONSIVE ENHANCEMENT

2. 2.

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

3. 3.

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

4. 4.

   I’m a web designer & front-end dev

5. 5.

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

6. 6.

   TOP 10 WEB DESIGN MYTHS

7. 7.

   the Future is high-speed connections everywhere MYTH #1

8. 8.

   flickr.com/photos/potjie/543400371

9. 9.

   MYTH #2 Mobile = Stress Desktop = Relax

10. 10.

    flickr.com/photos/shareski/5453209957

11. 11.

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

    devices
12. 12.

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

    mobile apps.” “ globalmoxie.com/blog/mobile-commerce-belly-flop.shtml
13. 13.

    MYTH #4 Superhardware awesomeness!

14. 14.

    flickr.com/photos/alien-paranoia/4941130941

15. 15.

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

16. 16.

    flickr.com/photos/mattimattila/5703851562

17. 17.

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

18. 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. 19.

    MYTH #7 We control the content with JS and CSS

20. 20.

    None
21. 21.

    MYTH #8 We should only care about popular devices

22. 22.

    None
23. 23.

    MYTH #9 Everybody browses full-screen

24. 24.

    None
25. 25.

    MYTH #10 Big = mouse Small = touch

26. 26.

    None
27. 27.

    CHANGING THE WAY WE WORK

28. 28.

    Build always with a FALLBACK

29. 29.

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

30. 30.

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

31. 31.

    Detect SUPPORT for new & shiny properties

32. 32.

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

33. 33.

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

    }
34. 34.

    RESPONSIVE web design

35. 35.

    None
36. 36.

    None
37. 37.

    None
38. 38.

    FLEXIBLE GRIDS aside{ width: 38%; margin-left: 2%; float: right; }

39. 39.

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

40. 40.

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

    MEDIA QUERIES
41. 41.

    MOBILE FIRST

42. 42.

    One-column Small assets Clear hierarchy

43. 43.

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

    != MEDIA QUERIES
44. 44.

    or use respond.js github.com/scottjehl/Respond

45. 45.

    We are reaching the BREAKING POINT

46. 46.

    We can’t use the same CSS & JS everywhere

47. 47.

    RESPONSIVE ENHANCEMENT introducing...

48. 48.

    Instead of just using progressive enhancement to throw in some

    rounded corners[...], we can apply the same thinking to layout.” Jeremy Keith “
49. 49.

    START WITH THE CONTENT Text Images Links

50. 50.

    LEGACY LAYOUT Let’s call it the

51. 51.

    Consider the LAYOUT as an ENHANCEMENT

52. 52.

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

    media query support*/ }
53. 53.

    FIX THE DESIGN IF IT BREAKS Stop being obsessed with

    “popular devices”
54. 54.

    USE EM-BASED MEDIA QUERIES Be prepared to be zoomed. Play

    nice with smart TVs
55. 55.

    Consider JAVASCRIPT as an ENHANCEMENT

56. 56.

    NON-JS BY DEFAULT

57. 57.

    CONTENT FIRST So basically...

58. 58.

    ENHANCE IT WITH LAYOUT, JAVASCRIPT & DECORATION

59. 59.

    Build for THE FUTURE

60. 60.

    Build for THE FUTURE and for THE PAST

61. 61.

    THANKS! Javier Usobiaga @htmlboy