Wilfred Nas - front end developer / @wnas / wnas.nl

1 / 83
What has
responsive
web design
done for us,
so far…
It creates big
pages
With loads of css
and javascript
All to solve self
inflicted
problems
Let’s just pick
one
Images
What kind of image to serve
Retina or non
retina
And how to
serve it
The <img> tag
doesn't cut it
In comes
<picture>
(again)
Devices
To what kind of device
Mobile
Tablet
Phablet
TV’s
Consoles
Fridges
Desktop
Desknot
Touch
Touch is mobile
Or is touch
desktop?
Or no touch
Size matters…
320
480
800
440
768
1024
1280
632
1920
2560
240
The web is text…
So why do we do
pixels?
Use font sizes
instead…
Media queries to
the rescue
Even for tables
Data tables,
that is
Or do we use
javascript for
those?
Or not?
Breakpoints?
We don’t need
breakpoints…
“It's what happens
between the
breakpoints that
matters the most”
–Wilfred Nas
Tweakpoints
Haypoint
But
But
The web IS
responsive
At least
Before we
developers and
designer killed it
(as a developer I would love to put the sole blame on
designers, but we have t...
Designers
Design schools
still don't teach
anything but
print design
Photoshop is
NOT a design
tool
it's for sketching
You should
design in the
browser
and most importantly
present in the
browser
Or better yet,
present on
different
browsers
And different
devices
And different
browsers on
those devices
Developers
Test and develop
on multiple
devices
And browsers of
course
But you already did that, right?
Don't just resize
your screen
Get those
screens filthy
Use tools like
ghost lab
Really test on
multiple devices
Use standards
Start with the
information
Never the
presentation
Mobile first lets
you focus
Never listen to marketeers,

ever
That gets us only more carousels
Only listen to

users
Speed is the
only thing that
matters
Thank you for
listening to my
rant
Wilfred Nas - front end developer / @wnas / wnas.nl
What has responsive web design done for us, so far.
What has responsive web design done for us, so far.
Upcoming SlideShare
Loading in …5
×

What has responsive web design done for us, so far.

558 views

Published on

Responsive web design is the next best thing since sliced bread, But what has it brought us so far. I will talk about the pittfals and some of the solutions we could be using.

Most importantly, use real devices and test, test and test more.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
558
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

What has responsive web design done for us, so far.

  1. 1. Wilfred Nas - front end developer / @wnas / wnas.nl 1 / 83
  2. 2. What has responsive web design done for us, so far…
  3. 3. It creates big pages
  4. 4. With loads of css and javascript
  5. 5. All to solve self inflicted problems
  6. 6. Let’s just pick one
  7. 7. Images What kind of image to serve
  8. 8. Retina or non retina
  9. 9. And how to serve it
  10. 10. The <img> tag doesn't cut it
  11. 11. In comes <picture>
  12. 12. (again)
  13. 13. Devices To what kind of device
  14. 14. Mobile
  15. 15. Tablet
  16. 16. Phablet
  17. 17. TV’s
  18. 18. Consoles
  19. 19. Fridges
  20. 20. Desktop
  21. 21. Desknot
  22. 22. Touch
  23. 23. Touch is mobile
  24. 24. Or is touch desktop?
  25. 25. Or no touch
  26. 26. Size matters…
  27. 27. 320
  28. 28. 480
  29. 29. 800
  30. 30. 440
  31. 31. 768
  32. 32. 1024
  33. 33. 1280
  34. 34. 632
  35. 35. 1920
  36. 36. 2560
  37. 37. 240
  38. 38. The web is text…
  39. 39. So why do we do pixels?
  40. 40. Use font sizes instead…
  41. 41. Media queries to the rescue
  42. 42. Even for tables
  43. 43. Data tables, that is
  44. 44. Or do we use javascript for those?
  45. 45. Or not?
  46. 46. Breakpoints?
  47. 47. We don’t need breakpoints…
  48. 48. “It's what happens between the breakpoints that matters the most” –Wilfred Nas
  49. 49. Tweakpoints
  50. 50. Haypoint
  51. 51. But
  52. 52. But
  53. 53. The web IS responsive
  54. 54. At least
  55. 55. 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)
  56. 56. Designers
  57. 57. Design schools still don't teach anything but print design
  58. 58. Photoshop is NOT a design tool it's for sketching
  59. 59. You should design in the browser
  60. 60. and most importantly
  61. 61. present in the browser
  62. 62. Or better yet, present on different browsers
  63. 63. And different devices
  64. 64. And different browsers on those devices
  65. 65. Developers
  66. 66. Test and develop on multiple devices
  67. 67. And browsers of course
  68. 68. But you already did that, right?
  69. 69. Don't just resize your screen
  70. 70. Get those screens filthy
  71. 71. Use tools like ghost lab
  72. 72. Really test on multiple devices
  73. 73. Use standards
  74. 74. Start with the information
  75. 75. Never the presentation
  76. 76. Mobile first lets you focus
  77. 77. Never listen to marketeers, ever That gets us only more carousels
  78. 78. Only listen to users
  79. 79. Speed is the only thing that matters
  80. 80. Thank you for listening to my rant
  81. 81. Wilfred Nas - front end developer / @wnas / wnas.nl

×