Mobile First & Responsive Design

2,080 views
1,991 views

Published on

Palestra sobre Design Mobile ministrada no dia 23/10/2013 na Semana Acadêmica da Universidade Anhembi Morumbi em São Paulo, e no dia 24/10/2013 na Jornada Tecnológica da Fatec de Carapicuiba.

Published in: Design

Mobile First & Responsive Design

  1. 1. //UX.BLOG
 Mobile First &
 Responsive Design
  2. 2. //UX.BLOG Edu Agni / Designer e Consultor Trabalha há nove anos com projetos nas áreas de direção de arte, usabilidade, design de interfaces e front-end. Criador e editor do UX.BLOG e curador da área de Design da Campus Party Brasil. www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni
  3. 3. Inclusão Digital
  4. 4. Não.
  5. 5. Não. http://www.youtube.com/watch?v=ndkIP7ec3O8
  6. 6. Existem 5 vezes mais telefones celulares no mundo do que PCs. ! http://slidesha.re/QAHdFU
  7. 7. Há 6,8 bilhões de pessoas no planeta. 
 4 bilhões delas usam telefone celular. 3,5 bilhões delas usam uma escova de dentes. ! http://bit.ly/o03mRg
  8. 8. O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015. ! International Data Corporation (http://bit.ly/nLrEdy)
  9. 9. Cultura da Interface
  10. 10. Interface: zona entre o meio e a mensagem
  11. 11. Designing Natural Interfaces Darren David & Nathan Moody, 2008 Interface Gráfica do Usuário • • Interface de linha de comando • Gráfica Indireta Mouse / Ponteiro Interface Natural do Usuário • • • http://bit.ly/H2rZtl Textual Abstrata Teclado QWERTY • • • Física Direta Gestual
  12. 12. Designing Natural Interfaces Darren David & Nathan Moody, 2008 Interface Gráfica do Usuário Interface Natural do Usuário 1. Controle mediado; 1. Manipulação direta; 2. Maior precisão, menor imersão; 2. Menor precisão, maior imersão; 3. Aproveita a familiaridade e experiência computacional; 3. Aproveita as suposições do usuário e conclusões lógicas; 4. Associações emocionais com o trabalho; 4. Associações emocionais com o entretenimento; 5. Perfeito para produtividade e eficiência nas tarefas; 5. Perfeito para tarefas sociais e colaborativas; 6. A interface é visível e gráfica. 6. A interface é física e invisível. http://bit.ly/H2rZtl
  13. 13. Projetar para pessoas Compartilhar boas histórias de se jo us ab ili da de < < Tríade da Experiência Digital > < utilidade > > Estimular os sentidos
  14. 14. Essas metaformas, esses mapeamentos de bits virão para ocupar praticamente todas as facetas da sociedade contemporânea: trabalho, divertimento, amor, família, arte elevada, cultura popular, política.
 
 (Cultura da Interface, de Steven Johnson)
  15. 15. Essas metaformas, esses mapeamentos de bits virão para ocupar praticamente todas as facetas da sociedade contemporânea: trabalho, divertimento, amor, família, arte elevada, cultura popular, política.
 
 (Cultura da Interface, de Steven Johnson) http://youtu.be/6Cf7IL_eZ38
  16. 16. Mobile First
  17. 17. http://www.abookapart.com/products/mobile-first
  18. 18. O excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo na versão desktop.
  19. 19. Desenhe sua solução primeiro para mobile, depois para desktop.
  20. 20. O mobile não deixa espaço para nenhum conteúdo de relevância duvidosa. Você precisa saber o que realmente importa. Para fazer isso você precisa conhecer bem os seus usuários e o seu mercado.
  21. 21. Mobile First ! ★ A versão mobile te força a ter foco. Afinal, são apenas 320 pixels de largura para você brincar. ★ A atenção em áreas como Arquitetura de Informação, Usabilidade e Acessibilidade é aumentada. ★ Mobile expande suas capacidades técnicas: GPS, user orientation, multi-touch, acelerômetro etc.
  22. 22. Responsive Design
  23. 23. Criar sites com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela e dispositivos.
  24. 24. http://alistapart.com/article/responsive-web-design
  25. 25. O que inspirou o Responsive Web Design?
  26. 26. Arquitetura Responsiva Condições do espaço e ambientes podem mudar e se adaptar a condições pre-definidas ou desejáveis , por meio de sensores, alterando as características de forma, cores, espaços e todos os elementos que compõem o espaço arquitetônico de modo responsivo. (Wikipedia)
  27. 27. Arquitetura Responsiva Condições do espaço e ambientes podem mudar e se adaptar a condições pre-definidas ou desejáveis , por meio de sensores, alterando as características de forma, cores, espaços e todos os elementos que compõem o espaço arquitetônico de modo responsivo. (Wikipedia) http://www.youtube.com/watch?v=WwzCfKvFxRQ
  28. 28. Layout Responsivo ★ Grids Fluidos ★ Design Adaptatívo e Conteúdo Flexível ★ Otimização de desempenho
  29. 29. Criando uma Estrutura Fluida
  30. 30. Tamanho ÷ contexto = resultado
  31. 31. Estrutura Fluida: Fontes ★ O tamanho padrão da fonte na maioria em praticamente todos os sites é de 16px ★ As medidas devem ser convertidas de medidas absolutas (px) para medidas relativas (em) ★ Utilizamos para essa conversão a formula
 tamanho ÷ contexto = resultado
  32. 32. Estrutura Fluida: Fontes h1 { font-size: 24px; }! h1 span { font-size: 18px; }! ! ________________________________________________________________! ! ! h1 { font-size: 1.5em; }! /* 24 ÷ 16 = 1.5 */! ! h1 span { font-size: 0.75em; }! /* 18 ÷ 24 = 0.75 */!
  33. 33. Estrutura Fluida: Grid width: 900px 20px 180px 360px 540px 720px
  34. 34. Estrutura Fluida: Grid max-width: 900px; width: 90%; 2,222222% 20% 40% 60% 80%
  35. 35. Estrutura Fluida: Margin & Padding 800px 20px 40px 500px 40px 20px margin: 5% (40 ÷ 800 = 0,05) - padding: 4% (20 ÷ 500 = 0,04)
  36. 36. Estrutura Fluida: Imagens width: 45% max-width: 100%
  37. 37. Criando um Design Adaptável
  38. 38. Design Adaptável: Breakpoints
  39. 39. Arquitetura de Informação ★ Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site ★ Repensar a pertinência de apresentação dessas informações em diferentes contextos e dispositivos
  40. 40. Design Adaptável: Media Queries Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ ou aspect ratio: ★ @media screen and (max-width:480px)
 (resolução máxima no viewport de 480px) ★ @media all and (orientation:landscape)
 Orientação “paisagem” ★ @media screen and (device-aspect-ratio: 16/9)
 Monitores 16:9 (ex.: resolução de 1280 x 720px) ★ @media screen and (min-width: 400px) and (max-width: 700px)
 Tela com resolução mínima de 400px e máxima de 700px
  41. 41. Otimização de Desempenho
  42. 42. Renomeie ou remova elementos não-semânticos do seu HTML, e remova seletores ineficientes do CSS.
  43. 43. Reduza o número de requisições do site, principalmente de Javascript.
  44. 44. Otimize suas imagens com o uso de sprites, compressores, Base64 encode, ou substituindo-as por CSS3.
  45. 45. http://browserdiet.com/pt/
  46. 46. https://developers.google.com/speed/pagespeed/insights?hl=pt-br
  47. 47. Design Responsivo não é apenas uma
 questão tecnológica de adaptação para diferentes dispositivos, mas sim uma adaptação para diferentes contextos.
  48. 48. //UX.BLOG Obrigado ;) Edu Agni / Designer e Consultor ! ! www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni

×