Design Responsivo / Adaptativo

@analauragomes

Bem vind@s!
analauragomes@gmail.com @analauragomes emblema.art.br webdemais.com.br Docente, palestrante e consultora nas rea de Web e Computao Grfica Colaboradora do W3C Escritrio Brasil Publicaes:
Editora Senac-SP: XHTML/CSS Criao de Pginas Web, Dreamweaver CS5, Fireworks CS5 Editora Abril: Coleo Clique a Clique, O curso de informtica da Abril

Presena digital: meadiciona.com/ana_laura

2 - Design Responsivo / Adaptativo

96,66%

3,34%

Desktop (96,66%) x Mobile (3,34%) | dez 2010 dez 2011

3 - Design Responsivo / Adaptativo

96,66%

3,34%

Ibope/Nielsen - set/2011 78 milhes

2.605.200

Desktop (96,66%) x Mobile (3,34%) | dez 2010 dez 2011

http://bit.ly/y33267
4 - Design Responsivo / Adaptativo

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

1.014.000

78 milhes

Celular: 567.840 Tablet: 404.586 comScore | 22/11/2011

6 - Design Responsivo / Adaptativo

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

Smartphones Hoje: 5,8% Ano: 165% Celulares Ano: 21%

Link Estado | novembro, 2011
http://bit.ly/uZpl2w
8 - Design Responsivo / Adaptativo

1,2 dispositivos mveis/pessoa 246 milhes de unidades

32 milhes de usurios conectados por disp. mveis Estimativa CISCO para o Brasil em 2015
http://bit.ly/wYRpek
9 - Design Responsivo / Adaptativo

Empresa <> Usurio

Perfil bsico Expectativa Objetivo Interao Experincia Informao

10 - Design Responsivo / Adaptativo

>> Usurio & Mobilidade <<

De que forma? Onde ele est? A que horas? Qual aparelho?

11 - Design Responsivo / Adaptativo

No s tamanho...

12 - Design Responsivo / Adaptativo

Tipo
celular tablets e-readers

13 - Design Responsivo / Adaptativo

Recursos
touch caneta memria bateria SO linguagens navegador

14 - Design Responsivo / Adaptativo

Cenrios de uso - fsico

luz trfego apertado andando / parado WiFi / 3G

15 - Design Responsivo / Adaptativo

Cenrios de uso - mental

Estado de esprito

Predisposio / Expectativa

16 - Design Responsivo / Adaptativo

17 - Design Responsivo / Adaptativo

Estratgias de adaptao
no fazer nada

contar com o zoom do aparelho

um contedo e vrios estilos

viewport media queries

Um site especfico p/ tela

18 - Design Responsivo / Adaptativo

1 contedo

19 - Design Responsivo / Adaptativo

1 contedo

Benefcio para a empresa: Consistncia da mensagem Manuteno

20 - Design Responsivo / Adaptativo

Vrios estilos

www.eng.com.br/designresponsivo
21 - Design Responsivo / Adaptativo

Vrios estilos

Benefcio para a empresa: Consistncia do layout Otimizao do contedo

www.eng.com.br/designresponsivo
22 - Design Responsivo / Adaptativo

Como fazer de forma profissional

23 - Design Responsivo / Adaptativo

Como fazer de forma profissional

Contedo
XHTML-MP HTML5

Forma
CSS2 CSS3

Interao
JavaScript
[DOM]

24 - Design Responsivo / Adaptativo

Como fazer de forma profissional

http://www.adobe.com/br/products/dreamweaver.html
25 - Design Responsivo / Adaptativo

Dicas contedo

Seja 100% relevante

26 - Design Responsivo / Adaptativo

Dicas contedo
Procura por fatos. AGORA!
Ateno... Estado de esprito...

Seja 100% relevante

27 - Design Responsivo / Adaptativo

Dicas contedo

Simplicidade + Objetividade
28 - Design Responsivo / Adaptativo

Dicas contedo
O que mais importante aparece no topo da pgina

29 - Design Responsivo / Adaptativo

Dicas contedo
Evite o que no vai funcionar

framesets tabelas

mapa de imagem css e scripts inline

tabelas aninhadas plugins e extenses

30 - Design Responsivo / Adaptativo

Dicas interao
lembre-se dos gestos no tem mouse over projetar para o tamanho do dedo (40/80px)

31 - Design Responsivo / Adaptativo

Dicas interao
rolagem vertical (contedo e menu) navegao fcil de aprender

32 - Design Responsivo / Adaptativo

Dicas interao
links e acessos inteligentes acesso ao site normal

33 - Design Responsivo / Adaptativo

Dicas layout
usar poucas fontes na pgina (2 ou 3) usar o espao em branco para separar os elementos no criar distrativos e empecilhos para acesso ao contedo
34 - Design Responsivo / Adaptativo

Dicas layout
usar poucas cores e grficos/imagens otimizar imagens no usar background com fotos usar cones como background no CSS
35 - Design Responsivo / Adaptativo

Dicas layout
d ao usurio opes de layout claro e escuro manter consistncia com verso desktop

36 - Design Responsivo / Adaptativo

Planeje antes

37 - Design Responsivo / Adaptativo

Foco no usurio
Foco no usurio
experincia de uso no focar no aparelho mas no recurso

38 - Design Responsivo / Adaptativo

Faa testes com prottipos

39 - Design Responsivo / Adaptativo

Faa testes com simuladores

40 - Design Responsivo / Adaptativo

Faa testes com simuladores

41 - Design Responsivo / Adaptativo

Faa testes com navegadores

42 - Design Responsivo / Adaptativo

Design Responsivo/Adaptativo
1. Introduo ao Design Responsivo / Adaptativo 2. Grids
O design para a flexibilidade Layout estruturado com CSS

4. Media queries

3. Imagens no Design Responsivo / Adaptativo

Importncia dos Grids Grids Estrutura para grids com HTML5, e seus ganhos

5. Outras solues/frameworks para mobile devices

O que so Adobe Dreamweaver CS5 HTML5 pack / Dreamweaver CS5.5 Exemplos de como utilizar Compatibilidade entre navegadores

Elementos para contedo incorporado com HTML5 Imagens flexveis Imagens transparentes Ajustes para IE6 Propriedades para imagens com CSS3

Dicas sobre desenho para mobilidade jQueryMobile Fireworks CSS3 mobile pack Dreamweaver CS5.5 jQuery mobile framework

43 - Design Responsivo / Adaptativo

Design Responsivo/Adaptativo
Curso prtico, onde os exerccios envolvem:
Modelagem Criao de arquivos externos de CSS e CSS3 Tcnicas de migrao ao Design Responsivo/Adaptativo Aplicaes e particularizaes no Dreamweaver CS5.5

44 - Design Responsivo / Adaptativo

Obrigada e sucesso
@analauragomes :: analauragomes@gmail.com :: www.emblema.art.br www.webdemais.com.br

Fireworks: fireworksbr.groups.adobe.com Dreamweaver: augdwbr.groups.adobe.com

45 - Design Responsivo / Adaptativo