Este documento fornece informações sobre um profissional de design responsivo. Em três frases: O documento resume as qualificações e experiência de um designer especializado em design responsivo, incluindo formação acadêmica em design gráfico e interação. Ele atua como designer de interação, professor e diretor de uma escola de design. O foco é no desenvolvimento de sites e aplicativos com layout flexível adaptado a diferentes telas.

1. RESPONSIVE WEB
DESIGN

2. www.tersis.com.br

3. FORMAÇÃO
• DESIGN GRÁFICO
PUCPR
Graduação
• DESIGN DE INTERAÇÃO
FABER-LUDENS
Especialização

4. ATUAÇÃO
• Designer de interação e
especialista front-end
PH DESIGN SYSTEMS
• Professor
FACULDADES OPET
• Diretor-presidente
FABER-LUDENS

5. www.faberludens.com.br

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

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

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

9. http://www.nielsen.com/us/en/newswire/2013/whos-winning-the-u-s-smartphone-market-.html

10. http://www.onbile.com/info/wp-content/uploads/2012/05/screen1.png

11. http://www.wired.com/images_blogs/gadgetlab/2013/04/121120_galaxynoteII_074.jpeg
Telinha?

12. http://design215.com/toolbox/images/screen_resolutions.gif

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

14. LAYOUT
FIXO

15. http://www.savewalterwhite.com
www.savewalterwhite.com

16. LAYOUT
FLUÍDO

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

18. RESPONSIVE
WEB DESIGN

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

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

21. http://www.massimobonini.com

22. RESPONSIVE WEB:
VANTAGENS

23. Vantagens
• Layout customizado
• Adaptação de conteúdo

24. Vantagens
Imagens flexíveis
http://media.smashingmagazine.com/wp-content/uploads/2013/05/picnic_with_art_direction_mini.jpg

25. Vantagens
• Otimização para ferramentas de busca
• Centralização de conteúdo

26. Vantagens
Experiência do usuário (UX)
http://thumbnails.visually.netdna-cdn.com/responsive--native-in-the-ux-lifecycle_502919a230df9.png

27. Vantagens
Velocidade de carregamento
http://media02.hongkiat.com/serving-responsive-images/responsive-img.jpg

28. ATIVIDADES

29. http://www.freecsstemplates.org/preview/goodnatured/
www.freecsstemplates.org/preview/goodnatured/

30. http://bit.ly/LGZYtk

31. Antes de
começar...
http://drgina.files.wordpress.com/2009/04/girl-with-hand-out-stop1.jpg

34. Configurações da extensão Web Developer

35. RESET CSS

36. http://html5doctor.com/html-5-reset-

38. http://necolas.github.io/normalize.css/

39. http://finaid.utk.edu/images/Calculator.jpg
A calculadora!

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

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

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

43. CONVERTENDO
(px) para (em)

44. Convertendo (px) para (em)
#logo h1 {
Alvo (px) Contexto (100%)
Resultado (em)
font-size: 3.75em; /* 60px */
}
60px
÷ 16px
3.75em
#logo h1

45. Convertendo (px) para (em)
#logo p {
font-size: 1.375em; /* 22px */
}
22px
÷ 16px
1.375em
#logo p
Alvo (px) Contexto (100%)
Resultado (em)

46. Convertendo (px) para (em)
h1 {
font-size: 2em; /* 32px */
}
32px
÷ 16px
2em
h1
Alvo (px) Contexto (100%)
Resultado (em)

47. Convertendo (px) para (em)
h2 {
font-size: 2.75em; /* 44px */
}
44px
÷ 16px
2.75em
h2
Alvo (px) Contexto (100%)
Resultado (em)

48. Convertendo (px) para (em)
h3 {
font-size: 1.5625em; /* 25px */
}
25px
÷ 16px
1.5625em
h3
Alvo (px) Contexto (100%)
Resultado (em)

49. Convertendo (px) para (em)
#splash {
font-size: 3em; /* 48px */
}
48px
÷ 16px
3em
#splash
Alvo (px) Contexto (100%)
Resultado (em)

50. Convertendo (px) para (em)
#menu a {
font-size: 1.25em; /* 20px */
}
20px
÷ 16px
1.25em
#menu a
Alvo (px) Contexto (100%)
Resultado (em)

51. http://2.bp.blogspot.com/-_RvQvoCqn2Q/UB81SXPrKvI/AAAAAAAAT78/WYJJWLpb0h4/s1600/keep+calm.png

52. Convertendo (px) para (em)
.post .meta {
font-size: 1em; /* 16px */
}
16px
÷ 16px
1em
.post .meta
Alvo (px) Contexto (100%)
Resultado (em)

53. Convertendo (px) para (em)
.post .meta {
font-size: 1em; /* 16px */
}
16px
÷ 16px
1em
.post .meta
Alvo (px) Contexto (100%)
Resultado (em)

54. Convertendo (px) para (em)
#footer-content h2 {
font-size: 2.25em; /* 36px */
}
36px
÷ 16px
2.25em
#footer-content h2
Alvo (px) Contexto (100%)
Resultado (em)

55. http://simplefocus.com/flowtype/

56. PRONTO...

57. PRONTO...
#SQÑ

58. CONVERTENDO
(px) para (%)

59. alvo ÷ contexto = resultado
Convertendo (px) para (%)
http://www.wallsheer.com/wp-content/uploads/2013/09/Funny-Couple-Secret-Children-Wallpaper.jpg

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

61. Convertendo (px) para (%)
#logo {
width: 31.25%; /* 300px */
}
300px
÷ 960px
31.25%
#logo
Alvo (px) Contexto (px)
Resultado x 100 = (%)

62. Convertendo (px) para (%)
#menu {
width: 52.08%; /* 500px */
}
500px
÷ 960px
52.08%
#menu
Alvo (px) Contexto (px)
Resultado x 100 = (%)

63. Convertendo (px) para (%)
#content {
width: 62%; /* 620px */
}
620px
÷ 1000px
62%
#content
Alvo (px) Contexto (px)
Resultado x 100 = (%)

64. Convertendo (px) para (%)
#sidebar,
#column1,
#column2,
#column3 Alvo (px) Contexto (px)
#sidebar {
width: 32%; /* 320px */
}
320px
÷ 1000px
Resultado x 100 = (%)
32%

65. MARGIN E PADDING
FLEXÍVEIS

66. Margin e padding flexíveis
Marcotte (2010)

67. Margin e padding flexíveis
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.
padding
conteúdo
margin
border

68. CSS box-sizing
http://css-tricks.com/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;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

69. Margin e padding flexíveis
#logo p {
Contexto (px)
padding: 0 0 0 1.666666666667%; /* 5px / 300px */
}
5px ÷ 300px
1.666666666667%
#logo p
Alvo (px)
Resultado x 100 (%)

70. Margin e padding flexíveis
#content {
Contexto (px)
padding: 0 4% 0 0; /* 40px / 1000px */
}
40px ÷ 1000px
4%
#content
Alvo (px)
Resultado x 100 (%)
CUIDADO
com o float!
cuidado com o float

71. IMAGENS
FLUÍDAS

72. img,
embed,
object,
video {
}
max-width: 100%;
Imagens fluídas
http://www.cloudsoftwareprogram.org/rs/372/e9c4455d-a317-4f4c-9f70-108d736bae98/01f/filename/superior-user-experience.jpg

73. Imagens fluídas
O banner está com uma
altura fixa de 400px
podendo travar o tamanho
em telas menores.
!
A imagem tem 350px de
altura com a borda.
!
Portanto é possível usar um
padding-bottom de 50px.

74. img,
embed,
object,
video {
}
height: auto;
Imagens fluídas
http://www.cloudsoftwareprogram.org/rs/372/e9c4455d-a317-4f4c-9f70-108d736bae98/01f/filename/superior-user-experience.jpg

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

76. http://filamentgroup.com/examples/responsive-images/

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

78. https://github.com/scottjehl/Responsive-Images

79. http://responsiveimages.org/

80. http://imageoptim.com/

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

82. VIEWPORT

83. 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.0" />

85. MEDIA QUERIES

86. Media Queries
<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 (max-width: 1080px) {
!
}
@media screen and (min-width: 320px) and (max-width: 480px) {
!
}

87. Contexto (px)
1000px ÷ 1080px
92.59%
Media Queries
.container
Alvo (px)
Resultado x 100 (%)
@media screen and (max-width: 1080px) {
.container {
width: 92.59%;
}
}

88. Contexto (px)
960px ÷ 1080px
88.88%
Media Queries
#header
Alvo (px)
Resultado x 100 (%)
@media screen and (max-width: 1080px) {
#header {
width: 88.88%;
}
}

89. Media Queries
A div #wrapper está com a
propriedade min-width
definida com 1000px.
!
Basta alterar para 100% e o
conteúdo irá se adaptar à
largura da tela.
@media screen and (max-width: 1080px) {
#wrapper {
min-width: 100%;
}
}

91. http://nmsdvid.com/snippets/

92. BREAKPOINTS

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

94. Breakpoints
Content stacking

95. Breakpoints
@media screen and (max-width: 960px) {
#logo {
float: none;
margin: 0 auto;
text-align: center;
width: 100%;
}
!
#menu {
float: none;
text-align: center;
width: 100%;
}
!
#menu ul {
display: inline-block;
float: none;
padding: 20px 0 0;
text-align: center;
}
}

96. Breakpoints
@media screen and (max-width: 767px) {
#content,
#sidebar {
width: 100%;
}
}

97. Breakpoints
@media screen and (max-width: 500px) {
#header {
height: auto;
}
#menu a {
padding: 10px 0;
}
!
#menu li {
float: none;
}
!
#menu ul {
display: block;
padding: 20px 0;
}
}

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

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

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

101. FRAMEWORKS

102. http://getbootstrap.com/

103. http://flatstrap.org/

104. http://gumbyframework.com/

105. http://foundation.zurb.com/

106. http://www.initializr.com/

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

108. FERRAMENTAS

109. http://hoverstud.io/calculator/

110. http://pxtoem.com/

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

112. http://mattkersley.com/responsive/

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

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

115. http://caniuse.com/

116. http://placehold.it/

117. http://cssminifier.com/

118. http://lesscss.org/

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

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

121. http://modernizr.com/

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

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

124. TOUCH
EVENTS

125. Touch events
• touchstart
Quanto o dedo toca a superfície
!
• touchmove
Quanto o dedo desliza na superfície
!
• touchend
Quando o toque é finalizado

126. Touch events
document.addEventListener(‘touchstart’, function(e) {
...
})
document.addEventListener(‘touchmove’, function(e) {
...
})
document.addEventListener(‘touchend’, function(e) {
...
})

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

128. MOBILE
FIRST

129. Foco no conteúdo
+
Priorizar o necessário
+
Usar somente o que for preciso
=
Melhor experiência do usuário!
Mobile first

130. Não esconder conteúdo... ? Mobile first

131. 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;
!
• Simplifique...

132. PROTOTIPAÇÃO

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

137. REFERÊNCIAS

138. Referências
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.

139. MUITO
OBRIGADO!