Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Design responsivo

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.

  • Soyez le premier à commenter

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

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • jehmorena

    Feb. 12, 2015
  • shaianesantos71

    Apr. 2, 2015
  • rodrigoleusin

    Sep. 2, 2015

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.

Vues

Nombre de vues

962

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

27

Actions

Téléchargements

50

Partages

0

Commentaires

0

Mentions J'aime

3

×