Why should I care about Responsive Design?

11,292 views

Published on

Published in: Design, Technology
3 Comments
39 Likes
Statistics
Notes
No Downloads
Views
Total views
11,292
On SlideShare
0
From Embeds
0
Number of Embeds
5,498
Actions
Shares
0
Downloads
0
Comments
3
Likes
39
Embeds 0
No embeds

No notes for slide

Why should I care about Responsive Design?

  1. Why should I care about Responsive Design? Fabricio Teixeira @fabriciot
  2. If a given website is not ready for beingaccessed on a mobile device, it needs some serious bug fixing.
  3. Who shall I blame?
  4. QA Developer Deadlines Budget UXD Producer ClientVisual Designer Fate
  5. QA Developer Deadlines Budget UXD Producer ClientVisual Designer Fate
  6. QA Developer Deadlines Budget UXD Producer ClientVisual Designer Fate Users
  7. Data traffic on mobile devices will bemultiplied by 26 between 2012 and 2015.
  8. In 2015 there will be one mobile device per person on Earth.
  9. People arebuying moresmartphones.
  10. Owning asmartphonechanges whatpeople do.
  11. Owning asmartphonechanges whatpeople expect.
  12. 28% of all Facebook users access it on their smartphones before even leaving bed.
  13. Teenagers are texting in their sleep.
  14. “Disruption will only accelerate. The quantity and diversity of connected devices - many of which we havent imagined yet - willexplode, as will the quantity and diversity of the people around the world who use them. Ourexisting standards, workflows, and infrastructure wont hold up. Todays onslaught of devices is already pushing them to the breaking point. They cant withstand whats ahead.” http://futurefriend.ly/
  15. “Proprietary solutions will dominate at first. Innovation necessarily precedes standardization. Technologists will scramble to these solutions before realizing (yet again) that a standardized platform is needed to maintain sanity. The standards process will be painfullyslow. We will struggle with (and eventually agree upon) appropriate standards.” http://futurefriend.ly/
  16. If a given website is not ready for beingaccessed on a mobile device, it needs some serious bug fixing.
  17. If a given website is not ready for beingaccessed on a mobile device, it needs some serious bug fixing. How do I fix it?
  18. Do I really need to fix it?
  19. “The power of the Web is in its universality.Access by everyone regardless of disability is an essential aspect.”
  20. • Responsive Web Design• Device-Dedicated Delivery • Mobile First
  21. Responsive Web Design
  22. Different devices, same website
  23. Device-Dedicated Delivery
  24. Hands Per Device http://www.slideshare.net/HugoMNL/hands-per-device-hpd
  25. Hands Per Device Single task + quick response http://www.slideshare.net/HugoMNL/hands-per-device-hpd
  26. Hands Per Device Content quality + time http://www.slideshare.net/HugoMNL/hands-per-device-hpd
  27. IA and functionalities need to be thought for each context http://www.slideshare.net/HugoMNL/hands-per-device-hpd
  28. Mobile First
  29. “Loading...”
  30. 22kb“Loaded.”
  31. 22kb“Oops, the device is wider than 400px.”
  32. 101kb“In this case, I’ll load that box and that image too.”
  33. 239kb“Loaded.”
  34. 239kb“Oops, the device is wider than 700px.”
  35. 754kb“I’ll also load that chunk of text and that video.”
  36. It’s not about simply “hiding” contentif the device is narrower than 400px.
  37. 754kb“Fully loaded.”
  38. 754kb“Now let me hide what they won’t see.”
  39. 754kb“Now let me hide what they won’t see.”
  40. Progressive Enhancement vs. Graceful Degradation
  41. Designing for theMulti-Device Generation
  42. The Sofa Effect.
  43. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies
  44. Coherence Sync Sharing Shifting Complem. Simult.
  45. Coherence Sync Sharing Shifting Complem. Simult.
  46. Coherence Sync Sharing Shifting Complem. Simult.
  47. Coherence Sync Sharing Shifting Complem. Simult.
  48. Coherence Sync Sharing Shifting Complem. Simult.
  49. Coherence Sync Sharing Shifting Complem. Simult.
  50. Coherence Sync Sharing Shifting Complem. Simult.
  51. 10 steps to promoting that shift
  52. 01 For the user, there’s no“mobile version” and “desktop version”. There is only “website”.
  53. 02You spend 14 hours in front of a computer. Your users don’t.
  54. 03 You cannot charge extra ($$$)to design a mobile-ready website.Your sites must be mobile-ready.
  55. 04 A website cannot go live withoutbeing tested in different screen resolutions.
  56. 05 A website cannot go live withoutbeing tested in different monitors.
  57. 06 If it has a social output,it needs to be ready for mobile.
  58. 07UX has to be thought on mobile since the very beginning.
  59. 08 Mobile has to be part of your templates.Same thing for every department.
  60. 09Message changeswhen context does.
  61. 10You cannot “postpone” the mobile version or leave it to the next phase. Next phases never happen.
  62. Next Chapter:You’re not designing for TV?
  63. Obrigado.“The reason for designing new media is simple - to subtly and quietly change the world.” (Hillman Curtis, 1961-2012) Fabricio Teixeira @fabriciot Special thanks to @diegotres

×