Design responsivo

746 visualizações

Publicada em

Veja quais as melhores estratégias para um bom site responsivo. Dicas para melhorar a experiência dos usuários. Aplicando Mobile-first em seus projetos.

Publicada em: Internet
  • Seja o primeiro a comentar

Design responsivo

  1. 1. DESIGN RESPONSIVO
  2. 2. CARLOS EDUARDO - KADU Faz parte da equipe de Desenvolvedores da Vítrio. INTERESSES :  HTML, CSS, JS, jQuery e PHP;  Design Responsivo;  Otimização de sites;  Usabilidade e UX (User Experience). CONTATOS:  Kadunew@gmail.com  @kadunew  www.kadunew.com/blog
  3. 3. 960px de largura? 800px? etc, etc. Alterar layout quando a resolução mais comum deixar de ser utilizada. Usuários mobile querem páginas simples e focadas em atividades chave. Passado...
  4. 4. Isso não é Web universal, acessível... Devemos entregar a mesma informação relevante para todo mundo! Não importa qual seja o dispositivo do usuário.
  5. 5. px
  6. 6. 960px 960px 300px 300px 300px 300px 300px 300px
  7. 7. DESIGN RESPONSIVO
  8. 8. Muita gente já falou disso antes. “... Faça páginas que são acessíveis, independentemente de navegador, plataforma ou tela que seu leitor escolha...” John Allsopp, 2000 em http://alistapart.com/article/dao
  9. 9. Devemos entregar a mesma informação relevante para Não Importa todo mundo! qual seja o dispositivo do usuário.
  10. 10. Design responsivo é oferecer um único site para todo mundo e adaptar a experiência do usuário de acordo com o dispositivo. 1024 + 768 480 479 -
  11. 11. O Google recomenda Design responsivo: https://developers.google.com/webmasters/s martphone-sites/details SEO
  12. 12. O canal é usar a estratégia Mobile-First
  13. 13. MELHORIA PROGRESSIVA
  14. 14. Estratégia para o sucesso do 01 02 03 04  Layout Simples  Imagens Pequenas  CSS e JS limitados  Performance  Layout Simples  Imagens maiores  Mais CSS e JS  Conteúdo adicional Layout c/ colunas  Imagens maiores e até mais pesadas  Layout widescreen  Imagens maiores e mais pesadas  Total recurso a CSS e JS projeto (Mobile-First)
  15. 15. Priorizar Conteúdo Código de Qualidade Design Simples e Funcional Maior Produtividade da equipe
  16. 16. Posso fazer o contrário? (Desktop-First)
  17. 17. Focar no conteúdo Mobile First Layout Fluído Media Queries Design responsivo é basicamente
  18. 18. DESIGN RESPONSIVO (NA PRÁTICA)
  19. 19. Converter um site que não é responsivo em responsivo
  20. 20. %
  21. 21. 100% 30% 30% 30%
  22. 22. 320px 320px
  23. 23. @media
  24. 24. Link1 | Link2 | Link3 | Link4 | Link5 01 02 03 04 01 02 03 Adaptar  Layout  Conteúdo Media Queries
  25. 25. Como funciona essa coisa? Simples...
  26. 26. Como funciona essa coisa?
  27. 27. Conteúdo do site... “chirrion”
  28. 28. Nunca use “display: none”
  29. 29. FACILITAR A VIDA DO USUÁRIO Digitar dados no celular é bem difícil. Que tal no lugar dos asteriscos mostrar a senha, logo você não precisa do campo “confirmar senha”. Um campo a menos.
  30. 30. <input type="text"> <input type="url"> <input type="email"> <input type="tel">
  31. 31. Responsivo X Versão .m
  32. 32. www.m.uol.com.br www.uol.com.br
  33. 33. Contatos! Obrigado Meu povo

×