Design responsivo

652 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
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
652
No SlideShare
0
A partir de incorporações
0
Número de incorporações
23
Ações
Compartilhamentos
0
Downloads
28
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • Há pessoa que nem usam desktop só celulares
  • ja que nao ha muito espaco para enrolacao.
  • Mostrar que no design da esquerda não é possível ler o conteúdo, as colunas continuam ocupando 30%, porém de uma tela fisicamente menor. A imagem da direita mostra a solução de readaptação do layout.

    Comentar sobre os labels de um formulário
  • Ajustar a prioridade do conteúdo
  • chirrion
  • tentar diminuir a quantidade de campos e valido. Por campo de checkbox, radio, select, em vez de campos de texto.
  • Comentar sobre deixar aparecer a senha
    Textarea expansível
    APIs para pegar a localização do usuários
  • 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

    ×