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