What has responsive web design done for us, so far.
0 likes665 views
This document discusses responsive web design and some of the challenges that have arisen from it. It notes that responsive design has led to large pages with significant CSS and JavaScript to solve problems of serving different images sizes and formats to various device types. It critiques current design practices, noting that design schools still teach print rather than responsive design and that designs should be tested across real browsers and devices rather than just resizing screens. The document advocates for mobile-first design, prioritizing user needs over marketers, ensuring speed, and developing and testing on multiple real devices and browsers.
What has responsive web design done for us, so far.
- 1. Wilfred Nas - front end developer / @wnas / wnas.nl 1 / 83
- 2. What has responsive web design done for us, so far…
- 4. With loads of css and javascript
- 5. All to solve self inflicted problems
- 7. Images What kind of image to serve
- 9. And how to serve it
- 10. The <img> tag doesn't cut it
- 12. (again)
- 13. Devices To what kind of device
- 14. Mobile
- 15. Tablet
- 16. Phablet
- 17. TV’s
- 18. Consoles
- 19. Fridges
- 20. Desktop
- 21. Desknot
- 22. Touch
- 23. Touch is mobile
- 25. Or no touch
- 26. Size matters…
- 27. 320
- 28. 480
- 29. 800
- 30. 440
- 31. 768
- 32. 1024
- 33. 1280
- 34. 632
- 35. 1920
- 36. 2560
- 37. 240
- 38. The web is text…
- 39. So why do we do pixels?
- 42. Media queries to the rescue
- 43. Even for tables
- 45. Or do we use javascript for those?
- 46. Or not?
- 47. Breakpoints?
- 49. “It's what happens between the breakpoints that matters the most” –Wilfred Nas
- 50. Tweakpoints
- 51. Haypoint
- 52. But
- 53. But
- 55. At least
- 56. Before we developers and designer killed it (as a developer I would love to put the sole blame on designers, but we have to take some of the blame)
- 57. Designers
- 58. Design schools still don't teach anything but print design
- 59. Photoshop is NOT a design tool it's for sketching
- 60. You should design in the browser
- 63. Or better yet, present on different browsers
- 65. And different browsers on those devices
- 67. Developers
- 68. Test and develop on multiple devices
- 70. But you already did that, right?
- 71. Don't just resize your screen
- 73. Use tools like ghost lab
- 74. Really test on multiple devices
- 75. Use standards
- 78. Mobile first lets you focus
- 79. Never listen to marketeers, ever That gets us only more carousels
- 81. Speed is the only thing that matters
- 82. Thank you for listening to my rant
- 83. Wilfred Nas - front end developer / @wnas / wnas.nl