1. Why should I care about
Responsive Design?
Fabricio Teixeira
@fabriciot

2. If a given website is not ready for being
accessed on a mobile device, it needs some
serious bug fixing.

3. Who shall I blame?

4. QA
Developer
Deadlines
Budget
UXD
Producer
Client
Visual Designer
Fate

5. QA
Developer
Deadlines
Budget
UXD
Producer
Client
Visual Designer
Fate

6. QA
Developer
Deadlines
Budget
UXD
Producer
Client
Visual Designer
Fate
Users

7. Data traffic on mobile devices will be
multiplied by 26 between 2012 and 2015.

8. In 2015 there will be one mobile device
per person on Earth.

9. People are
buying more
smartphones.

10. Owning a
smartphone
changes what
people do.

11. Owning a
smartphone
changes what
people expect.

12. 28% of all Facebook users
access it on their
smartphones before even
leaving bed.

13. Teenagers are texting
in their sleep.

15. “Disruption will only accelerate. The
quantity and diversity of connected devices -
many of which we haven't imagined yet - will
explode, as will the quantity and diversity of the
people around the world who use them. Our
existing standards, workflows, and infrastructure
won't hold up. Today's onslaught of devices is
already pushing them to the breaking point.
They can't withstand what's ahead.”
http://futurefriend.ly/

16. “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 painfully
slow. We will struggle with (and eventually agree
upon) appropriate standards.”
http://futurefriend.ly/

18. If a given website is not ready for being
accessed on a mobile device, it needs some
serious bug fixing.

19. If a given website is not ready for being
accessed on a mobile device, it needs some
serious bug fixing.
How do I fix it?

20. Do I really need
to fix it?

21. “The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.”

22. • Responsive Web Design
• Device-Dedicated Delivery
• Mobile First

23. Responsive Web Design

24. Different devices, same website

25. Device-Dedicated Delivery

26. Hands Per Device
http://www.slideshare.net/HugoMNL/hands-per-device-hpd

27. Hands Per Device
Single task
+ quick response
http://www.slideshare.net/HugoMNL/hands-per-device-hpd

28. Hands Per Device
Content quality +
time
http://www.slideshare.net/HugoMNL/hands-per-device-hpd

29. IA and functionalities need to be thought
for each context
http://www.slideshare.net/HugoMNL/hands-per-device-hpd

30. Mobile First

31. “Loading...”

32. 22kb
“Loaded.”

33. 22kb
“Oops, the device is wider than 400px.”

34. 101kb
“In this case, I’ll load that box and that image too.”

35. 239kb
“Loaded.”

36. 239kb
“Oops, the device is wider than 700px.”

37. 754kb
“I’ll also load that chunk of text and that video.”

38. It’s not about simply “hiding” content
if the device is narrower than 400px.

39. 754kb
“Fully loaded.”

40. 754kb
“Now let me hide what they won’t see.”

41. 754kb
“Now let me hide what they won’t see.”

42. Progressive Enhancement
vs.
Graceful Degradation

43. Designing for the
Multi-Device Generation

45. The Sofa Effect.

46. http://www.slideshare.net/preciousforever/patterns-for-multiscreen-strategies

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. Coherence Sync Sharing Shifting Complem. Simult.

52. Coherence Sync Sharing Shifting Complem. Simult.

53. Coherence Sync Sharing Shifting Complem. Simult.

54. 10 steps to promoting that shift

55. 01
For the user, there’s no
“mobile version” and “desktop version”.
There is only “website”.

56. 02
You spend 14 hours in front
of a computer.
Your users don’t.

57. 03
You cannot charge extra ($$$)
to design a mobile-ready website.
Your sites must be mobile-ready.

58. 04
A website cannot go live without
being tested in different screen resolutions.

59. 05
A website cannot go live without
being tested in different monitors.

60. 06
If it has a social output,
it needs to be ready for mobile.

61. 07
UX has to be thought on mobile
since the very beginning.

62. 08
Mobile has to be part
of your templates.
Same thing for every department.

63. 09
Message changes
when context does.

64. 10
You cannot “postpone” the mobile version
or leave it to the next phase.
Next phases never happen.

65. Next Chapter:
You’re not designing for TV?

66. 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