O documento discute o conceito de design responsivo e como criar sites que se adaptam a diferentes dispositivos. Apresenta exemplos de abordagens não responsivas e explica porque devem ser evitadas, argumentando que o design responsivo oferece uma experiência contínua e igual em todos os dispositivos.

1. —Hello!8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

2. — 8ª Industry Sessions by EDIT
CompreenderUX&
ResponsiveDesign
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

3. @brnamorimQuestões
Comentários
Melhor Francesinha do Porto?
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

4. — Get to know us.
QueméaBürocratik?
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

5. An award winning brand identity
and digital design agency.
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

6. Büroreel

7. Adriano&
Alexandre&
Ana&
António&
Bruno&
Bruno&
Daniel+1

8. Empresa Portuguesa
com mais Awwwards
Fundada em 2005, conta
com vários prémios em
Branding (+125) & Web (+25).
2005
— Hello, we are Büro.
Com estúdios em Coimbra
e Porto
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

9. —5sitesoftheday
—1developeraward
—1siteoftheyearnominee
—6honorablementions
8ª IndustrySessions byEDIT 07/03/15
Agência Digital Portuguesa com mais Awwwards
Bruno Amorim
@brnamorim

10. THE NEXT
SUPERSTAR
CLIENT

11. — How we bring pixels to live.
Casesstudies
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

12. Fibersensing.com
Case Study

13. BeforeVS.After
Fibersensing.com
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

15. Ω Basic Shape & Color Ω Pattern Ω Pixel Grid
∫ ∫
8ª IndustrySessions byEDIT 07/03/15
Brand
language
combase
numcírculo
=fibraótica
Bruno Amorim
@brnamorim

16. Apresentação do
Website

17. Mercados

18. Página interior
Civil

19. Página interior
Aerospace

20. 8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

21. Exemplo de um
Case Study

22. 8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim
Página não
encontrada

23. Siaperitivos.com
Case Study

24. Apresentação do
Website

27. Personalização
do Saco

28. — Siaperitivos.com
Sacoem
vetorial
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

29. — Siaperitivos.com
Algum
Photoshop
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

30. — Siaperitivos.com
Fotografar
Batatas
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

31. — Siaperitivos.com
Etvoilà!
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

32. 3ddos
Produtos
— Siaperitivos.com
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

33. — Results
Site do dia no Awwwards
Melhor site comercial, Clube Criativos de Portugal
Bronze nos European Design Awards
Prata nos The Lovie Awards
Conquista do mercado Africano com um novo produto
Super Douradas Ketchup
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

34. Outdatedbrowser.com
Case Study

35. #1 Limpe a cache sff
#2 Instale uma nova versão do seu browser sff
*
8ª IndustrySessions byEDIT 07/03/15
—
Bruno Amorim
@brnamorim

36. Apresentação do
Website

37. Buzz...
— Outdatedbrowser.com
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

38. Buzz...
— Outdatedbrowser.com
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

39. Buzz...
— Outdatedbrowser.com
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

40. — Results
Na 1ª semana recebeu 100.000 visitas
Bancos, portais, entre eles SyFy, Unilever, decathlon.fr, etc…
Referenciado em vários blogs como case de estudo
Wordpress, Ruby, Magento & Drupal plugins
Site do dia e developer award no Awwwards
Nomeado para site do ano no Awwwards
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

41. — 8ª Industry Sessions by EDIT
CompreenderUX&
ResponsiveDesign
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

42. — Device usage
Mobilevs.Desktop
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

43. UTILIZADORES DE INTERNET
EM MOBILE
2009
2015
2009
2015
UTILIZADORES DE INTERNET
EM DESKTOP
1.9
800
milhões
biliões
1.4biliões
1.6 biliões
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

44. No final de 2012, o número de
telemóveis irá exceder o número de
pessoas na terra. Em 2016 irão existir
1,4 dispositivos móveis per cápita.*
* http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html
8ª IndustrySessions byEDIT 07/03/15 PHOTOCREDIT NASA
Bruno Amorim
@brnamorim

45. — Device usage
No início de 2014, o tempo despendido na
internet por cada utilizador em mobile já
ultrapassava o de desktop
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

46. * http://searchenginewatch.com/sew/opinion/2353616/mobile-now-exceeds-pc-the-biggest-shift-since-the-internet-began
*
Bruno Amorim
@brnamorim

47. — Device usage
Factos&
comportamentos
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

48. Em média, cada pessoa consulta o seu
telemóvel ou tablet 150 vezes por dia.*
*http://www.textually.org/textually/archives/2012/02/030229.htm
8ª IndustrySessions byEDIT 07/03/15 PHOTOCREDIT
Bruno Amorim
@brnamorim

49. Quandoacordamos
Acaminhodotrabalho
— Peak times
Devoltaacasa
Depoisdojantar
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim
PHOTOCREDIT

50. Quandoacordamos
Acaminhodotrabalho
— Peak times
Devoltaacasa
Depoisdojantar
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim
PHOTOCREDIT

51. Quandoacordamos
Acaminhodotrabalho
— Peak times
Devoltaacasa
Depoisdojantar
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim
PHOTOCREDIT

52. Quandoacordamos
Acaminhodotrabalho
— Peak times
Devoltaacasa
Depoisdojantar
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim
PHOTOCREDIT

53. A cada segundo, são feitas três compras
através de dispositivos móveis no eBay
*http://www.juniperresearch.com/reports/mobile_payments_for_digital_&_physical_goods
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim
VIDEOCREDIT

54. — Cenário atual de dispositivos
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

55. DESKTOP
PORTÁTEIS SMARTPHONES TABLETS
— Foco
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

56. Comoéqueotimizamos
onossoprojetopara
multi-dispositivos?
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

57. 07/03/15
opçõesmais
utilizadas
8ª IndustrySessions byEDIT
Bruno Amorim
@brnamorim

58. — Option 1
Sitecom
largurafixa
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

59. visit.uc.pt
— Option 1
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

60. nit.pt
— Option 1
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

61. — Option 2
Sitecomversão
Mobileseparada
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

62. abola.pt
— Option 2
VERSÃO DESKTOP8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

63. abola.pt
— Option 2
VERSÃO MOBILE8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

64. Nenhumaestá
correta.
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

65. Osutilizadoresestãoa
clicarnaversão
"desktop"dosite
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

66. Porquê?
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

67. Umaexperiência
contínuaeigualem
todososdispositivos
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

68. 8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

69. 8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

70. Principaisrazõespara
evitarsitesdelargura
fixaouversãomobile
separada
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

71. Utilizadoressentemdificuldadeem
encontraroqueprocuram
8ª IndustrySessions byEDIT 07/03/15
LimitaçõestécnicasnoCMS
Manterversõesdiferentes
— Avoid if you can
Bruno Amorim
@brnamorim

72. Utilizadoressentemdificuldadeem
encontraroqueprocuram
8ª IndustrySessions byEDIT 07/03/15
LimitaçõestécnicasnoCMS
Manterversõesdiferentes
— Avoid if you can
Bruno Amorim
@brnamorim

73. Utilizadoressentemdificuldadeem
encontraroqueprocuram
8ª IndustrySessions byEDIT 07/03/15
LimitaçõestécnicasnoCMS
Manterversõesdiferentes
— Avoid if you can
Bruno Amorim
@brnamorim

74. UX & Responsive Design 08/03/15
Um mau UX resulta em confusão,
frustração e até mesmo…
Bruno Amorim
@brnamorim
PHOTOCREDIT

75. UX & Responsive Design 08/03/15
…irritação.
Bruno Amorim
@brnamorim

76. UX & Responsive Design 08/03/15
People will forget what you did.
People will forget what you said.
But people will never forget how you
made them feel.
— Maya Angelou
Bruno Amorim
@brnamorim
PHOTOCREDIT WIKIPEDIA

77. Solução?
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

78. 8ª IndustrySessions byEDIT 07/03/15
Solução?
Bruno Amorim
@brnamorim

79. — Option 3, the right one.
Responsive Design
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

80. — Option 3, the right one.
Content is KING!
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

81. — Option 3, the right one.
Não se trata apenas
do presente, é o futuro.
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

82. Fiber
Sensing
— Option 3, the right one.
VERSÃO DESKTOP8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

83. Fiber
Sensing
— Option 3, the right one.
VERSÃO MOBILE8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

84. — Option 3, the right one.
Um único website.
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

85. — Option 3, the right one.
Future Friendly
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

86. — Responsive Design
1. Dar a todos o mesmo conteúdo
2. Exibí-lo da forma adequada seja qual
for o dispositivo
8ª IndustrySessions byEDIT 07/03/15
Bruno Amorim
@brnamorim

87. "There is no Mobile Web. There is only
the Web, which we view in different ways.
There is also no Desktop Web. Or Tablet
Web. "
8ª IndustrySessions byEDIT 07/03/15
@stephenhay
Bruno Amorim
@brnamorim

88. Obrigado!
@brnamorim
bruno@burocratik.com