Responsive Enhancement

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