Curso de Web Design Responsivo oferecido pelo Instituto Faber-Ludens.

1. WEB DESIGN RESPONSIVO

2. INTRODUÇÃO

3. FERRAMENTAS
NECESSÁRIAS

4. FERRAMENTAS NECESSÁRIAS
• EDITOR DE TEXTO:
• Brackets;
• Coda;
• Dreamweaver;
• Notepad++;
• Sublime Text.
• BROWSER:
• Chrome;
• Firefox;
• Opera;
• Safari;
• Internet Explorer 9+; etc…

6. POR QUÊ?

7. NO PASSADO
• Tínhamos conexão lenta;
• Não existia acesso Wi-Fi;
• Sites para dispositivos móveis eram
versões simples dos sites originais;
• Era preciso manter múltiplas versões
de um site.
http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg

8. http://icant.co.uk/talks/h5/pictures/posscon/clinton-obama-smartphones.jpg

9. http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight-Understanding-the-Mobile-Shift-Nov-2012.pdf

10. http://www.proxxima.com.br/home/mobile/2013/06/05/Brasileiros-acessando-internet-por-dispositivos-moveis-ultrapassou-via-

11. WEB DESIGN
RESPONSIVO

12. LAYOUT
FIXO

13. http://www.savewalterwhite.com
www.savewalterwhite.com

14. LAYOUT
FLUÍDO

15. http://d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html

16. LAYOUT
RESPONSIVO

17. http://www.simonmarxen.dk/portfolio/?p=165
“In the Bubble” - Simon Marxen
Arquitetura responsiva

18. –Ethan Marcotte (2010)
“Responsive Web Design:
um único site que se adapta a qualquer
dispositivo, independente do tamanho da
tela e orientação.”
http://alistapart.com/d/responsive-web-design/

19. 1. Layout flexível, baseado em grid
!
2. Imagens e mídias flexíveis
!
3. Media queries (CSS3)

20. UM WEBSITE,
MÚLTIPLOS LAYOUTS

21. http://alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html

22. VANTAGENS
• Layout customizado
• Adaptação de conteúdo

23. VANTAGENS
• Imagens flexíveis
http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg

24. VANTAGENS
http://media02.hongkiat.com/serving-responsive-images/responsive-img.jpg
• Velocidade de carregamento

25. VANTAGENS
• Otimização para ferramentas
de busca
• Centralização de conteúdo
• Apenas um código-fonte
para dar manutenção

26. http://thumbnails.visually.netdna-cdn.com/responsive--native-in-the-ux-lifecycle_502919a230df9.png

27. LAYOUT
ADAPTATIVO

28. –Aaron Gustafson (2011)
“Web Design Adaptativo é um outro termo
para progressive enhancement: leva em
conta vários níveis de HTML, CSS,
JavaScript e tecnologia assistiva”
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/

29. MOBILE FIRST

30. O QUE É
MOBILE FIRST?

31. MELHOR EXPERIÊNCIA DO USUÁRIO!
MOBILE FIRST
Foco no conteúdo
Priorizar o necessário
Usar somente o que for preciso
+
+
=

32. Não esconder conteúdo...
?
MOBILE FIRST

33. MOBILE FIRST
• Pense relativo, não estático ou absoluto;
• Aprimoramentos CSS/JavaScript;
• Evite carregar dados desnecessários;
• Transições CSS (JavaScript são acelerados por hardware);
• Sprites CSS/SVG;
• SIMPLIFIQUE!

35. UNIDADES
RELATIVAS

36. http://s2.manifo.com/usr/5/536D6/60/manager/pixel/nyan_cat___minecraft_pixel_art_by_soulsylver-d3hy8gz.png
Pixel hater...

37. TIPOGRAFIA E A RELAÇÃO
px / em

38. px em
12 .75
16 1
24 1.5
32 2
font-size: 100%;

39. QUAL É O SEGREDO?
http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg

40. alvo ÷ contexto = resultado
QUAL É O SEGREDO?
http://www.fantom-xp.com/wallpapers/33/Secret_service_agent.jpg

41. EXERCÍCIO 1 - INÍCIO

42. TRABALHANDO COM
MEDIA QUERIES

43. VIEWPORT

44. VIEWPORT
• width (pixel-width/device-width);
• height (pixel-height/device-height);
• initial-scale;
• minimum-scale;
• maximum-scale;
• user-scalable (yes/no).
!
<meta name="viewport" content="width=device-width, initial-scale=1” />

45. X
VIEWPORT

46. MEDIA QUERIES

47. <link rel=”stylesheet” href=”styles.css” media=”all” />
!
<link rel=”stylesheet” href=”main.css” media=”screen” />
!
<link rel=”stylesheet” href=”print.css” media=”print” />
MEDIA QUERIES

48. <link rel=”stylesheet” href=”styles.css” media=”all” />
!
<link rel=”stylesheet” href=”main.css” media=”screen” />
!
<link rel=”stylesheet” href=”print.css” media=”print” />
@media screen and (min-width: 320px) and (max-width: 480px) {
…
}
@media screen and (max-width: 1080px) {
…
}
MEDIA QUERIES

50. http://nmsdvid.com/snippets/

51. EXERCÍCIO 1 - FIM

52. http://caniuse.com/#feat=css-mediaqueries

53. https://github.com/scottjehl/Respond

54. https://code.google.com/p/css3-mediaqueries-js/

55. BREAKPOINTS

56. http://www.eacsoft.com/eacmag/wp-content/uploads/2013/06/resposive-design.jpg
BREAKPOINTS

57. CONTENT STACKING

58. OUTROS ELEMENTOS
RELATIVOS

59. A RELAÇÃO
px / %

60. http://www.wallsheer.com/wp-content/uploads/2013/09/Funny-Couple-Secret-Children-Wallpaper.jpg
alvo ÷ contexto = resultado
x 100

61. EXERCÍCIO 2 - INÍCIO

62. EXERCÍCIO 2 - FIM

63. MARGIN E PADDING
FLEXÍVEIS

64. MARGIN E PADDING
–Ethan Marcotte (2010)

65. MARGIN E PADDING
• 1. Ao definir a propriedade margin de um elemento, o contexto é
a largura do elemento que o contém;
• 2. Ao definir a propriedade padding de um elemento, o contexto
é a largura do próprio elemento.
http://css-tricks.com/box-sizing/
padding
conteúdo
margin
border

66. BOX-SIZING
• É possível controlar o tamanho com
width, a borda com border e as margens
externas e internas com margin e
padding. Box model é como todas essas
propriedades se relacionam pra
determinar o tamanho final do elemento.
.elemento {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
http://css-tricks.com/box-sizing/

67. IMAGENS
FLEXÍVEIS

68. img, embed, object, svg, video {
height: auto;
max-width: 100%;
}
IMAGENS FLEXÍVEIS

69. EXERCÍCIO 3 - INÍCIO

70. EXERCÍCIO 3 - FIM

71. PROPORÇÃO
(RATIO)

72. http://mattzavadil.com/wp-content/uploads/2015/01/revealingmlmsecrets.jpg
altura ÷ largura = ratio
x 100

73. EXERCÍCIO 4 - INÍCIO

74. EXERCÍCIO 4 - FIM

75. http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

76. https://github.com/scottjehl/picturefill

77. http://responsiveimages.org/

78. http://imageoptim.com/

79. http://www.w3.org/Graphics/SVG/

80. FRAMEWORKS E
FERRAMENTAS

81. FRAMEWORKS

82. http://getbootstrap.com/

83. http://flatstrap.org/

84. http://gumbyframework.com/

85. http://foundation.zurb.com/

86. http://www.initializr.com/

87. http://responsiveboilerplate.com/pt/index.html

88. FERRAMENTAS

89. http://hoverstud.io/calculator/

90. http://pxtoem.com/

91. http://matthewkosloski.me/labs/pixem/

92. http://mattkersley.com/responsive/

93. http://lab.maltewassermann.com/viewport-resizer/

94. http://www.opera.com/developer/mobile-emulator

95. http://caniuse.com/#feat=css-mediaqueries

96. http://placehold.it/

97. http://cssminifier.com/

98. http://lesscss.org/

99. http://koala-app.com/

100. Inspecione o iPhone através do Safari...

101. http://modernizr.com/

102. https://developers.google.com/web/fundamentals/documentation/multi-device-layouts/index

103. http://www.google.com/design

104. TOUCH
EVENTS

105. • touchstart
Quanto o dedo toca a superfície
!
• touchmove
Quanto o dedo desliza na superfície
!
• touchend
Quando o toque é finalizado
TOUCH EVENTS

106. document.addEventListener(‘touchstart’, function(e) {
...
})
document.addEventListener(‘touchmove’, function(e) {
...
})
document.addEventListener(‘touchend’, function(e) {
...
})
TOUCH EVENTS

107. http://eightmedia.github.io/hammer.js/

108. PROTOTIPAÇÃO

110. http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets/

113. REFERÊNCIAS

114. EPSTEIN, Zach. Apple’s global tablet market share falls to all-time low. BGR, 2013.
Disponível em: <http://bgr.com/2013/07/25/ipad-market-share-q2-2013-apple-tablets/>.
Acesso em: 05 set. 2013.
!
MARCOTTE, Ethan. Responsive Web Design. A List Apart, 2010. Disponível em: <http://
alistapart.com/article/responsive-web-design>. Acesso em: 09 set. 2013.
!
WALTERS, Tim. Understanding the “Mobile Shift”: Obsession with the Mobile Channel
Obscures the Shift to Ubiquitous Computing. Digital Clarity Group, 2012. Disponível em:
<http://digitalclaritygroup.com/wordpress/wp-content/uploads/2012/12/DCG-Insight-
Understanding-the-Mobile-Shift-Nov-2012.pdf>. Acesso em: 03 set. 2013.
REFERÊNCIAS

115. MUITO
OBRIGADO!