Web Design Responsivo

  • View
    1.982

  • Download
    2

Embed Size (px)

DESCRIPTION

Palestra sobre Web Design Responsivo apresentada no 1º Wordtalks DRC.

Text of Web Design Responsivo

  • 1. WEB DESIGN RESPONSIVORodrigo Simoni CEO da Brandwebfacebook/rodrigosimonicontato@brandweb.com.brwww.brandweb.com.brsexta-feira, 28 de setembro de 12

2. O IMPACTO DOSDISPOSITIVOS MVEISsexta-feira, 28 de setembro de 12 3. 255 milhesde linhas mveis ativas no Brasil Fonte: Anatelsexta-feira, 28 de setembro de 12 4. 69%dos brasileiros tm celularFonte: IBGEsexta-feira, 28 de setembro de 12 5. 46%navegam na internet atravs de celular Fonte: IBGEsexta-feira, 28 de setembro de 12 6. 77,7 milhes de pessoas na internet mobile Fonte: IBGEsexta-feira, 28 de setembro de 12 7. Tablets275%Crescimento de tablets no Brasil em 2012 Fonte: IDC Brasilsexta-feira, 28 de setembro de 12 8. Estes Nmeros esto crescendosexta-feira, 28 de setembro de 12 9. Estes Nmeros esto crescendo Alguns motivos:Crescimento da classe C Xing Ling com internetPopularizao da intenet Redes sociaissexta-feira, 28 de setembro de 12 10. O que Web DesignResponsivo?sexta-feira, 28 de setembro de 12 11. O que Web Design Responsivo? uma tcnica de estruturao HTML e CSS, em que osite se adapta em qualquer tamanho de tela sem que precise fazer verses do site para cada dispositivo.sexta-feira, 28 de setembro de 12 12. Como surgiu?sexta-feira, 28 de setembro de 12 13. Como surgiu?Em 2010, Ethan Marcotte publicou um artigo no blog A ListApart apresentando pela primeira vez o conceito e astcnicas de Web Design Responsivo.sexta-feira, 28 de setembro de 12 14. Como surgiu?Leitura obrigatria:sexta-feira, 28 de setembro de 12 15. Os ingredientessexta-feira, 28 de setembro de 12 16. Os ingredientesComo fazer de fato um site responsivo?Em termos de front-end, os ingredientes so: 1. Grid exvel2. Imagens e mdias exveis3. Media queriessexta-feira, 28 de setembro de 12 17. 1. Grid exvelsexta-feira, 28 de setembro de 12 18. 1. Grid exvelGrid um conjunto de linhas bases que fornecem uma estrutura para o seu layout.sexta-feira, 28 de setembro de 12 19. 1. Grid exvelGrid um conjunto de linhas bases que fornecem uma estrutura para o seu layout.sexta-feira, 28 de setembro de 12 20. 1. Grid exvel Site de exemplo:sexta-feira, 28 de setembro de 12 21. 1. Grid exvel Site de exemplo: Faa seus layouts usando grids. Pense em como seu layout seadaptar nos smartphones etablets. Exemplo de grids: http://960.gs/sexta-feira, 28 de setembro de 12 22. 1. Grid exvel Antes de tudo insira a meta tag viewport.Serve para desativar a escala original do navegador, denindo uma nova escala, orientando como o site deve ser exibido, alm de controlar de zoom do dispositivo.sexta-feira, 28 de setembro de 12 23. 1. Grid exvel Divs exveis #geral { ! width: 960px; ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 300px; ! oat: left; ! margin: 10px; }sexta-feira, 28 de setembro de 12 24. 1. Grid exvel Divs exveis #geral { ! width: 960px; ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 300px; ! oat: left; ! margin: 10px; }sexta-feira, 28 de setembro de 12 25. 1. Grid exvelDecore a frmula mgica:objeto contexto = resultadosexta-feira, 28 de setembro de 12 26. 1. Grid exvelFrmula mgica: objeto contexto = resultado300px 960px = 0.3125Coloque o ponto duas casas para a direita e acrescente o sinal de %.sexta-feira, 28 de setembro de 12 27. 1. Grid exvelDivs exveis#geral {! width: 90%; /* 960px */! margin: 0 auto;! background: #fff;}.chamadas article {! width: 31.25%; /* 300px / 960px */! oat: left;! margin: 1%;}sexta-feira, 28 de setembro de 12 28. 1. Grid exvelFontes exveis - trocar px por em Os valores de tamanho das fontes devem ser substitudos de px para em.O Valor padro das fontes considerada pelas browsers de 16px, exemplo: .chamadas h1 { ! font: 30px arial; ! color: #666; ! margin: 1%; } Frmula: 30 16 = 1.87500 No caso de fontes, no necessrio posicionar o ponto para direita.sexta-feira, 28 de setembro de 12 29. 1. Grid exvelFontes exveis - trocar px por em.chamadas h1 {! font: 1.87500em arial; /* 30px / 16px */! color: #666;! margin: 1%;}sexta-feira, 28 de setembro de 12 30. 2. Imagens exveissexta-feira, 28 de setembro de 12 31. 2. Imagens exveis As imagens tambm precisam se adaptar conforme o tamanho da tela, para no sair fora do layout. Ento faa o seguinte:img {max-width: 100%;}A mesma regra serve para outros elementos do html:img, embed, object, video {max-width: 100%;}sexta-feira, 28 de setembro de 12 32. 2. Imagens exveis Adapte isso para o IE... img, embed, object, video { width: 100%; }sexta-feira, 28 de setembro de 12 33. 3. Media queriessexta-feira, 28 de setembro de 12 34. 3. Media Queries So novos seletores de CSS3 adicionados pela W3C. Eles servem como uma consultade mdia que o navegador faz quando o seu site for acessado.Media queries interna no CSS:@media screen and (max-width: 1024px) { /* Layout para desktops */Estilos aqui...}@media screen and (max-width: 380px) { /* Layout para Smartphones */Estilos aqui...}@media screen and (max-width: 780px) { /* Layout para Tablets */Estilos aqui...}sexta-feira, 28 de setembro de 12 35. 3. Media QueriesChamando as Media Querie externamente:Outros tipos de especicaes para Media Queries esto no site da W3C..sexta-feira, 28 de setembro de 12 36. 3. Media Queries Media queries no so suportadas pelo IE8 e inferiores. Por isso, devemos usar umabiblioteca como o css3-mediaqueries-js que faz o trabalho sujo.Para cham-la: sexta-feira, 28 de setembro de 12 37. Alguns exemploshttp://www.globo.com http://bostonglobe.comhttp://html.adobe.com/edgehttp://mediaqueri.es/sexta-feira, 28 de setembro de 12 38. Obrigado! Rodrigo Simoni facebook/rodrigosimoni contato@brandweb.com.br www.brandweb.com.brsexta-feira, 28 de setembro de 12