Mobile First & Responsive Design
23 gostaram2,645 visualizações
O documento discute os princípios do Mobile First e do Design Responsivo. Ele explica que o Mobile First força o foco no conteúdo essencial e nas melhores práticas de UX, enquanto o Design Responsivo cria layouts e conteúdos flexíveis para diferentes telas. O autor argumenta que o Design Responsivo não é apenas uma questão técnica, mas de adaptação a diferentes contextos.
Mobile First & Responsive Design
- 1. //UX.BLOG Mobile First & Responsive Design
- 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
- 6. Não.
- 11. Existem 5 vezes mais telefones celulares no mundo do que PCs. ! http://slidesha.re/QAHdFU
- 14. 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
- 22. 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)
- 24. Interface: zona entre o meio e a mensagem
- 25. 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
- 26. 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
- 28. 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
- 29. 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)
- 30. 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
- 31. Mobile First
- 34. O excesso de informação em grande parte dos sites se dá porque é relativamente fácil adicionar conteúdo na versão desktop.
- 36. Desenhe sua solução primeiro para mobile, depois para desktop.
- 39. 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.
- 41. 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.
- 44. Criar sites com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela e dispositivos.
- 46. O que inspirou o Responsive Web Design?
- 47. 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)
- 48. 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
- 50. Layout Responsivo ★ Grids Fluidos ★ Design Adaptatívo e Conteúdo Flexível ★ Otimização de desempenho
- 52. Tamanho ÷ contexto = resultado
- 53. 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
- 54. 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 */!
- 55. Estrutura Fluida: Grid width: 900px 20px 180px 360px 540px 720px
- 56. Estrutura Fluida: Grid max-width: 900px; width: 90%; 2,222222% 20% 40% 60% 80%
- 57. Estrutura Fluida: Margin & Padding 800px 20px 40px 500px 40px 20px margin: 5% (40 ÷ 800 = 0,05) - padding: 4% (20 ÷ 500 = 0,04)
- 58. Estrutura Fluida: Imagens width: 45% max-width: 100%
- 61. 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
- 67. 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
- 69. Renomeie ou remova elementos não-semânticos do seu HTML, e remova seletores ineficientes do CSS.
- 70. Reduza o número de requisições do site, principalmente de Javascript.
- 71. Otimize suas imagens com o uso de sprites, compressores, Base64 encode, ou substituindo-as por CSS3.
- 75. Design Responsivo não é apenas uma questão tecnológica de adaptação para diferentes dispositivos, mas sim uma adaptação para diferentes contextos.
- 76. //UX.BLOG Obrigado ;) Edu Agni / Designer e Consultor ! ! www.uxdesign.blog.br www.twitter.com/eduagni www.linkedin.com/in/eduagni