Design Responsivo / Adaptativo                       @analauragomes
Bem vind@s!analauragomes@gmail.com                     Publicações:@analauragomes                               Editora Se...
96,66%                  3,34%         Desktop (96,66%) x Mobile (3,34%) | dez 2010 à dez 20113 - Design Responsivo / Adapt...
96,66%                              Ibope/Nielsen - set/2011                  3,34%                              78 milhõe...
comScore | 22/11/2011                                     http://bit.ly/wTMG1S5 - Design Responsivo / Adaptativo
78 milhões1.014.000                                      Celular: 567.840                                      Tablet: 404...
http://bit.ly/wpHhNj7 - Design Responsivo / Adaptativo
Smartphones                     Hoje: 5,8%                   Ano:  165%                        Celulares                 ...
1,2 dispositivos móveis/pessoa                  246 milhões de unidades            32 milhões de usuários conectados por d...
Empresa <> Usuário                                      Perfil básico                                      Expectativa    ...
>> Usuário & Mobilidade <<• De que forma?                       • A que horas?• Onde ele está?                      • Qual...
Não é só tamanho...12 - Design Responsivo / Adaptativo
Tipo• celular• tablets• e-readers13 - Design Responsivo / Adaptativo
Recursos•    touch•    caneta•    memória•    bateria•    SO•    linguagens•    navegador14 - Design Responsivo / Adaptativo
Cenários de uso - físico•    luz•    tráfego•    apertado•    andando / parado•    WiFi / 3G15 - Design Responsivo / Adapt...
Cenários de uso - mental       Estado de espírito                                    Predisposição /            Expectati...
17 - Design Responsivo / Adaptativo
Estratégias de adaptação                            não fazer nada                            • contar com o zoom do apare...
1 conteúdo19 - Design Responsivo / Adaptativo
1 conteúdo                    Benefício para a empresa:                  • Consistência da mensagem •                     ...
Vários estilos                                                  www.eng.com.br/designresponsivo21 - Design Responsivo / Ad...
Vários estilos                      Benefício para a empresa:                      • Consistência do layout •             ...
Como fazer de forma profissional23 - Design Responsivo / Adaptativo
Como fazer de forma profissionalConteúdo                              Forma   Interação    XHTML-MP                       ...
Como fazer de forma profissional                                      http://www.adobe.com/br/products/dreamweaver.html25 ...
Dicas – conteúdo       Seja 100% relevante26 - Design Responsivo / Adaptativo
Dicas – conteúdo                                                   Atenção...                                             ...
Dicas – conteúdo                          Simplicidade                               +                          Objetivida...
Dicas – conteúdoO que é mais importanteaparece no topo da página29 - Design Responsivo / Adaptativo
Dicas – conteúdoEvite o que não vai funcionar• framesets                            • mapa de imagem• tabelas             ...
Dicas – interação• lembre-se dos gestos• não tem mouse over• projetar para o tamanho  do dedo (40/80px)31 - Design Respons...
Dicas – interação• rolagem vertical  (conteúdo e menu)• navegação fácil de  aprender32 - Design Responsivo / Adaptativo
Dicas – interação• links e acessos  inteligentes• acesso ao site normal33 - Design Responsivo / Adaptativo
Dicas – layout• usar poucas fontes na  página (2 ou 3)• usar o espaço em  branco para separar os  elementos• não criar dis...
Dicas – layout• usar poucas cores e  gráficos/imagens• otimizar imagens• não usar background com  fotos• usar ícones como ...
Dicas – layout• dê ao usuário opções  de layout claro e  escuro• manter consistência  com versão desktop36 - Design Respon...
Planeje antes37 - Design Responsivo / Adaptativo
Foco no usuário• Foco no usuário      – experiência de uso      – não focar no aparelho mas no recurso38 - Design Responsi...
Faça testes com protótipos39 - Design Responsivo / Adaptativo
Faça testes com simuladores40 - Design Responsivo / Adaptativo
Faça testes com simuladores41 - Design Responsivo / Adaptativo
Faça testes com navegadores42 - Design Responsivo / Adaptativo
Design Responsivo/Adaptativo1. Introdução ao Design                    4. Media queries   Responsivo / Adaptativo         ...
Design Responsivo/AdaptativoCurso prático, onde os exercícios envolvem:      – Modelagem      – Criação de arquivos extern...
Obrigada e sucesso @analauragomes          ::                          www.emblema.art.branalauragomes@gmail.com ::      ...
Upcoming SlideShare
Loading in...5
×

Design responsivo

7,001

Published on

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

Published in: Technology
1 Comment
14 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,001
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Design responsivo

  1. 1. Design Responsivo / Adaptativo @analauragomes
  2. 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 CS5webdemais.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 Brasil2 - Design Responsivo / Adaptativo
  3. 3. 96,66% 3,34% Desktop (96,66%) x Mobile (3,34%) | dez 2010 à dez 20113 - Design Responsivo / Adaptativo
  4. 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/y332674 - Design Responsivo / Adaptativo
  5. 5. comScore | 22/11/2011 http://bit.ly/wTMG1S5 - Design Responsivo / Adaptativo
  6. 6. 78 milhões1.014.000 Celular: 567.840 Tablet: 404.586 comScore | 22/11/2011 6 - Design Responsivo / Adaptativo
  7. 7. http://bit.ly/wpHhNj7 - Design Responsivo / Adaptativo
  8. 8. Smartphones Hoje: 5,8% Ano:  165% Celulares Ano:  21% Link Estadão | novembro, 2011 http://bit.ly/uZpl2w8 - Design Responsivo / Adaptativo
  9. 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/wYRpek9 - Design Responsivo / Adaptativo
  10. 10. Empresa <> Usuário Perfil básico Expectativa Objetivo Interação Experiência Informação10 - Design Responsivo / Adaptativo
  11. 11. >> Usuário & Mobilidade <<• De que forma? • A que horas?• Onde ele está? • Qual aparelho?11 - Design Responsivo / Adaptativo
  12. 12. Não é só tamanho...12 - Design Responsivo / Adaptativo
  13. 13. Tipo• celular• tablets• e-readers13 - Design Responsivo / Adaptativo
  14. 14. Recursos• touch• caneta• memória• bateria• SO• linguagens• navegador14 - Design Responsivo / Adaptativo
  15. 15. Cenários de uso - físico• luz• tráfego• apertado• andando / parado• WiFi / 3G15 - Design Responsivo / Adaptativo
  16. 16. Cenários de uso - mental Estado de espírito  Predisposição / Expectativa16 - Design Responsivo / Adaptativo
  17. 17. 17 - Design Responsivo / Adaptativo
  18. 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. 19. 1 conteúdo19 - Design Responsivo / Adaptativo
  20. 20. 1 conteúdo Benefício para a empresa: • Consistência da mensagem • • Manutenção •20 - Design Responsivo / Adaptativo
  21. 21. Vários estilos www.eng.com.br/designresponsivo21 - Design Responsivo / Adaptativo
  22. 22. Vários estilos Benefício para a empresa: • Consistência do layout • • Otimização do conteúdo • www.eng.com.br/designresponsivo22 - Design Responsivo / Adaptativo
  23. 23. Como fazer de forma profissional23 - Design Responsivo / Adaptativo
  24. 24. Como fazer de forma profissionalConteúdo Forma Interação XHTML-MP CSS2 JavaScript HTML5 CSS3 [DOM]24 - Design Responsivo / Adaptativo
  25. 25. Como fazer de forma profissional http://www.adobe.com/br/products/dreamweaver.html25 - Design Responsivo / Adaptativo
  26. 26. Dicas – conteúdo Seja 100% relevante26 - Design Responsivo / Adaptativo
  27. 27. Dicas – conteúdo Atenção... Estado de espírito... Procura por fatos. AGORA! Seja 100% relevante27 - Design Responsivo / Adaptativo
  28. 28. Dicas – conteúdo Simplicidade + Objetividade28 - Design Responsivo / Adaptativo
  29. 29. Dicas – conteúdoO que é mais importanteaparece no topo da página29 - Design Responsivo / Adaptativo
  30. 30. Dicas – conteúdoEvite o que não vai funcionar• framesets • mapa de imagem• tabelas • css e scripts inline• tabelas aninhadas • plugins e extensões30 - Design Responsivo / Adaptativo
  31. 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. 32. Dicas – interação• rolagem vertical (conteúdo e menu)• navegação fácil de aprender32 - Design Responsivo / Adaptativo
  33. 33. Dicas – interação• links e acessos inteligentes• acesso ao site normal33 - Design Responsivo / Adaptativo
  34. 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údo34 - Design Responsivo / Adaptativo
  35. 35. Dicas – layout• usar poucas cores e gráficos/imagens• otimizar imagens• não usar background com fotos• usar ícones como background no CSS35 - Design Responsivo / Adaptativo
  36. 36. Dicas – layout• dê ao usuário opções de layout claro e escuro• manter consistência com versão desktop36 - Design Responsivo / Adaptativo
  37. 37. Planeje antes37 - Design Responsivo / Adaptativo
  38. 38. Foco no usuário• Foco no usuário – experiência de uso – não focar no aparelho mas no recurso38 - Design Responsivo / Adaptativo
  39. 39. Faça testes com protótipos39 - Design Responsivo / Adaptativo
  40. 40. Faça testes com simuladores40 - Design Responsivo / Adaptativo
  41. 41. Faça testes com simuladores41 - Design Responsivo / Adaptativo
  42. 42. Faça testes com navegadores42 - Design Responsivo / Adaptativo
  43. 43. Design Responsivo/Adaptativo1. 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 utilizar2. 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 jQueryMobile3. 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 CSS343 - Design Responsivo / Adaptativo
  44. 44. Design Responsivo/AdaptativoCurso 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.544 - Design Responsivo / Adaptativo
  45. 45. Obrigada e sucesso @analauragomes :: www.emblema.art.branalauragomes@gmail.com :: www.webdemais.com.br Fireworks: fireworksbr.groups.adobe.com Dreamweaver: augdwbr.groups.adobe.com45 - Design Responsivo / Adaptativo

×