Responsive Enhancement

Presentation by @htmlboy at Barcelona Developers Conference 2012.

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
21. MYTH #8 We should only care about popular devices
23. MYTH #9 Everybody browses full-screen
25. MYTH #10 Big = mouse Small = touch
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
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