Palestra sobre Design Responsivo - como criar sites que se adaptam aos inúmeros tamanhos de telas _ desktop, tablet, celular

1. Design Responsivo / Adaptativo
@analauragomes

2. Bem vind@s!
analauragomes@gmail.com Publicações:
@analauragomes Editora Senac-SP:
XHTML/CSS Criação de Páginas Web,
emblema.art.br Dreamweaver CS5, Fireworks CS5
webdemais.com.br Editora Abril:
Coleção Clique a Clique, O curso de
• Docente, palestrante e informática da Abril
consultora nas área de Presença digital:
Web e Computação Gráfica meadiciona.com/ana_laura
• Colaboradora do W3C
Escritório Brasil
2 - Design Responsivo / Adaptativo

3. 96,66%
3,34%
Desktop (96,66%) x Mobile (3,34%) | dez 2010 à dez 2011
3 - Design Responsivo / Adaptativo

4. 96,66%
Ibope/Nielsen - set/2011
3,34%
78 milhões
2.605.200
Desktop (96,66%) x Mobile (3,34%) | dez 2010 à dez 2011
http://bit.ly/y33267
4 - Design Responsivo / Adaptativo

5. comScore | 22/11/2011
http://bit.ly/wTMG1S
5 - Design Responsivo / Adaptativo

6. 78 milhões
1.014.000
Celular: 567.840
Tablet: 404.586
comScore | 22/11/2011
6 - Design Responsivo / Adaptativo

7. http://bit.ly/wpHhNj
7 - Design Responsivo / Adaptativo

8. Smartphones
Hoje: 5,8%
Ano:  165%
Celulares
Ano:  21%
Link Estadão | novembro, 2011
http://bit.ly/uZpl2w
8 - Design Responsivo / Adaptativo

9. 1,2 dispositivos móveis/pessoa
246 milhões de unidades
32 milhões de usuários conectados por disp. móveis
Estimativa CISCO para o Brasil em 2015
http://bit.ly/wYRpek
9 - Design Responsivo / Adaptativo

10. Empresa <> Usuário
Perfil básico
Expectativa
Objetivo
Interação
Experiência
Informação
10 - Design Responsivo / Adaptativo

11. >> Usuário & Mobilidade <<
• De que forma? • A que horas?
• Onde ele está? • Qual aparelho?
11 - Design Responsivo / Adaptativo

12. Não é só tamanho...
12 - Design Responsivo / Adaptativo

13. Tipo
• celular
• tablets
• e-readers
13 - Design Responsivo / Adaptativo

14. Recursos
• touch
• caneta
• memória
• bateria
• SO
• linguagens
• navegador
14 - Design Responsivo / Adaptativo

15. Cenários de uso - físico
• luz
• tráfego
• apertado
• andando / parado
• WiFi / 3G
15 - Design Responsivo / Adaptativo

16. Cenários de uso - mental
Estado de espírito

Predisposição /
Expectativa
16 - Design Responsivo / Adaptativo

17. 17 - Design Responsivo / Adaptativo

18. Estratégias de adaptação
não fazer nada
• contar com o zoom do aparelho
um conteúdo e vários estilos
• viewport
• media queries
Um site específico p/ “tela”
18 - Design Responsivo / Adaptativo

19. 1 conteúdo
19 - Design Responsivo / Adaptativo

20. 1 conteúdo
Benefício para a empresa:
• Consistência da mensagem •
• Manutenção •
20 - Design Responsivo / Adaptativo

21. Vários estilos
www.eng.com.br/designresponsivo
21 - Design Responsivo / Adaptativo

22. Vários estilos
Benefício para a empresa:
• Consistência do layout •
• Otimização do conteúdo •
www.eng.com.br/designresponsivo
22 - Design Responsivo / Adaptativo

23. Como fazer de forma profissional
23 - Design Responsivo / Adaptativo

24. Como fazer de forma profissional
Conteúdo Forma Interação
XHTML-MP CSS2 JavaScript
HTML5 CSS3 [DOM]
24 - Design Responsivo / Adaptativo

25. Como fazer de forma profissional
http://www.adobe.com/br/products/dreamweaver.html
25 - Design Responsivo / Adaptativo

26. Dicas – conteúdo
Seja 100% relevante
26 - Design Responsivo / Adaptativo

27. Dicas – conteúdo
Atenção...
Estado de espírito...
Procura por fatos.
AGORA!
Seja 100% relevante
27 - Design Responsivo / Adaptativo

28. Dicas – conteúdo
Simplicidade
+
Objetividade
28 - Design Responsivo / Adaptativo

29. Dicas – conteúdo
O que é mais importante
aparece no topo da página
29 - Design Responsivo / Adaptativo

30. Dicas – conteúdo
Evite o que não vai funcionar
• framesets • mapa de imagem
• tabelas • css e scripts inline
• tabelas aninhadas • plugins e extensões
30 - Design Responsivo / Adaptativo

31. Dicas – interação
• lembre-se dos gestos
• não tem mouse over
• projetar para o tamanho
do dedo (40/80px)
31 - Design Responsivo / Adaptativo

32. Dicas – interação
• rolagem vertical
(conteúdo e menu)
• navegação fácil de
aprender
32 - Design Responsivo / Adaptativo

33. Dicas – interação
• links e acessos
inteligentes
• acesso ao site normal
33 - Design Responsivo / Adaptativo

34. Dicas – layout
• usar poucas fontes na
página (2 ou 3)
• usar o espaço em
branco para separar os
elementos
• não criar distrativos e
empecilhos para acesso
ao conteúdo
34 - Design Responsivo / Adaptativo

35. Dicas – layout
• usar poucas cores e
gráficos/imagens
• otimizar imagens
• não usar background com
fotos
• usar ícones como
background no CSS
35 - Design Responsivo / Adaptativo

36. Dicas – layout
• dê ao usuário opções
de layout claro e
escuro
• manter consistência
com versão desktop
36 - Design Responsivo / Adaptativo

37. Planeje antes
37 - Design Responsivo / Adaptativo

38. Foco no usuário
• Foco no usuário
– experiência de uso
– não focar no aparelho mas no recurso
38 - Design Responsivo / Adaptativo

39. Faça testes com protótipos
39 - Design Responsivo / Adaptativo

40. Faça testes com simuladores
40 - Design Responsivo / Adaptativo

41. Faça testes com simuladores
41 - Design Responsivo / Adaptativo

42. Faça testes com navegadores
42 - Design Responsivo / Adaptativo

43. Design Responsivo/Adaptativo
1. Introdução ao Design 4. Media queries
Responsivo / Adaptativo O que são
O design para a flexibilidade Adobe Dreamweaver CS5 HTML5 pack
Layout estruturado com CSS / Dreamweaver CS5.5
Exemplos de como utilizar
2. Grids Compatibilidade entre navegadores
Importância dos Grids
Grids 5. Outras soluções/frameworks
Estrutura para grids com HTML5, e para mobile devices
seus ganhos Dicas sobre desenho para mobilidade
jQueryMobile
3. Imagens no Design
Fireworks CSS3 mobile pack
Responsivo / Adaptativo Dreamweaver CS5.5 jQuery mobile
Elementos para conteúdo framework
incorporado com HTML5
Imagens flexíveis
Imagens transparentes
Ajustes para IE6
Propriedades para imagens com CSS3
43 - Design Responsivo / Adaptativo

44. Design Responsivo/Adaptativo
Curso prático, onde os exercícios envolvem:
– Modelagem
– Criação de arquivos externos de CSS e CSS3
– Técnicas de migração ao Design
Responsivo/Adaptativo
– Aplicações e particularizações no Dreamweaver
CS5.5
44 - Design Responsivo / Adaptativo

45. Obrigada e sucesso 
@analauragomes :: www.emblema.art.br
analauragomes@gmail.com :: www.webdemais.com.br
Fireworks: fireworksbr.groups.adobe.com
Dreamweaver: augdwbr.groups.adobe.com
45 - Design Responsivo / Adaptativo