Design responsivo

  • View
    139

  • Download
    0

Embed Size (px)

DESCRIPTION

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.

Text of Design responsivo

  • 1. DESIGNRESPONSIVO

2. CARLOS EDUARDO - KADUFaz parte da equipe deDesenvolvedores da Vtrio.INTERESSES : HTML, CSS, JS, jQuery e PHP; Design Responsivo; Otimizao de sites; Usabilidade e UX (User Experience).CONTATOS: Kadunew@gmail.com @kadunew www.kadunew.com/blog 3. 960px de largura? 800px?etc, etc.Alterar layout quando aresoluo mais comumdeixar de ser utilizada.Usurios mobile querempginas simples e focadasem atividades chave.Passado... 4. Isso no Webuniversal, acessvel...Devemos entregar a mesmainformao relevante para todomundo!No importa qual seja o dispositivo dousurio. 5. px 6. 960px960px300px 300px 300px 300px 300px300px 7. DESIGNRESPONSIVO 8. Muita gente j faloudisso antes.... Faa pginas que so acessveis, independentemente denavegador, plataforma ou tela que seu leitor escolha...John Allsopp, 2000 em http://alistapart.com/article/dao 9. Devemos entregar amesma informaorelevante paraNoImporta todo mundo!qual seja odispositivo dousurio. 10. Design responsivo oferecer um nico site paratodo mundo e adaptar a experincia do usuriode acordo com o dispositivo.1024 + 768 480 479 - 11. O Google recomenda Designresponsivo:https://developers.google.com/webmasters/smartphone-sites/detailsSEO 12. O canal usar aestratgiaMobile-First 13. MELHORIA PROGRESSIVA 14. Estratgia para o sucesso do01 02 03 04 Layout Simples Imagens Pequenas CSS e JS limitados Performance Layout Simples Imagens maiores Mais CSS e JS Contedo adicionalLayout c/ colunas Imagens maiores eat mais pesadas Layoutwidescreen Imagens maiorese mais pesadas Total recurso aCSS e JSprojeto(Mobile-First) 15. PriorizarContedoCdigo deQualidadeDesignSimples eFuncionalMaiorProdutividadeda equipe 16. Posso fazer ocontrrio?(Desktop-First) 17. Focar nocontedoMobileFirstLayoutFludoMediaQueriesDesign responsivo basicamente 18. DESIGNRESPONSIVO(NA PRTICA) 19. Converter um site que no responsivo em responsivo 20. % 21. 100%30% 30% 30% 22. 320px 320px 23. @media 24. Link1 | Link2 | Link3 | Link4 | Link501 02 0304010203Adaptar Layout ContedoMedia Queries 25. Como funciona essa coisa?Simples... 26. Como funciona essa coisa? 27. Contedo do site... chirrion 28. Nunca usedisplay: none 29. FACILITAR A VIDA DO USURIODigitar dados nocelular bem difcil.Que tal no lugar dos asteriscos mostrar a senha, logovoc no precisa do campo confirmar senha. Umcampo a menos. 30. 31. Responsivo X Verso .m 32. www.m.uol.com.br www.uol.com.br 33. Contatos!ObrigadoMeu povo