Web Design Responsivo

3.046 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Web Design Responsivo

  1. 1. WEB DESIGN RESPONSIVO Rodrigo Simoni CEO da Brandweb facebook/rodrigosimoni contato@brandweb.com.br www.brandweb.com.brsexta-feira, 28 de setembro de 12
  2. 2. O IMPACTO DOS DISPOSITIVOS MÓVEISsexta-feira, 28 de setembro de 12
  3. 3. 255 milhões de linhas móveis ativas no Brasil Fonte: Anatelsexta-feira, 28 de setembro de 12
  4. 4. 69% dos brasileiros têm celular Fonte: IBGEsexta-feira, 28 de setembro de 12
  5. 5. 46% navegam na internet através de celular Fonte: IBGEsexta-feira, 28 de setembro de 12
  6. 6. 77,7 milhões de pessoas na internet mobile Fonte: IBGEsexta-feira, 28 de setembro de 12
  7. 7. Tablets 275% Crescimento de tablets no Brasil em 2012 Fonte: IDC Brasilsexta-feira, 28 de setembro de 12
  8. 8. Estes Números estão crescendosexta-feira, 28 de setembro de 12
  9. 9. Estes Números estão crescendo Alguns motivos: Crescimento da classe C Xing Ling com internet Popularização da intenet Redes sociaissexta-feira, 28 de setembro de 12
  10. 10. O que é Web Design Responsivo?sexta-feira, 28 de setembro de 12
  11. 11. O que é Web Design Responsivo? É uma técnica de estruturação HTML e CSS, em que o site se adapta em qualquer tamanho de tela sem que precise fazer versões do site para cada dispositivo.sexta-feira, 28 de setembro de 12
  12. 12. Como surgiu?sexta-feira, 28 de setembro de 12
  13. 13. Como surgiu? Em 2010, Ethan Marcotte publicou um artigo no blog A List Apart apresentando pela primeira vez o conceito e as técnicas de Web Design Responsivo.sexta-feira, 28 de setembro de 12
  14. 14. Como surgiu? Leitura obrigatória:sexta-feira, 28 de setembro de 12
  15. 15. Os ingredientessexta-feira, 28 de setembro de 12
  16. 16. Os ingredientes Como fazer de fato um site responsivo? Em termos de front-end, os ingredientes são: 1. Grid flexível 2. Imagens e mídias flexíveis 3. Media queriessexta-feira, 28 de setembro de 12
  17. 17. 1. Grid flexívelsexta-feira, 28 de setembro de 12
  18. 18. 1. Grid flexível Grid é um conjunto de linhas bases que fornecem uma estrutura para o seu layout.sexta-feira, 28 de setembro de 12
  19. 19. 1. Grid flexível Grid é um conjunto de linhas bases que fornecem uma estrutura para o seu layout.sexta-feira, 28 de setembro de 12
  20. 20. 1. Grid flexível Site de exemplo:sexta-feira, 28 de setembro de 12
  21. 21. 1. Grid flexível Site de exemplo: • Faça seus layouts usando grids. • Pense em como seu layout se adaptará nos smartphones e tablets. • Exemplo de grids: http://960.gs/sexta-feira, 28 de setembro de 12
  22. 22. 1. Grid flexível Antes de tudo insira a meta tag viewport. Serve para desativar a escala original do navegador, definindo uma nova escala, orientando como o site deve ser exibido, além de controlar de zoom do dispositivo. <meta name="viewport" content="width=device-width; initial-scale=1.0">sexta-feira, 28 de setembro de 12
  23. 23. 1. Grid flexível Divs flexíveis #geral { ! width: 960px; ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 300px; ! float: left; ! margin: 10px; }sexta-feira, 28 de setembro de 12
  24. 24. 1. Grid flexível Divs flexíveis #geral { ! width: 960px; ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 300px; ! float: left; ! margin: 10px; }sexta-feira, 28 de setembro de 12
  25. 25. 1. Grid flexível Decore a fórmula mágica: objeto ÷ contexto = resultadosexta-feira, 28 de setembro de 12
  26. 26. 1. Grid flexível Fórmula mágica: objeto ÷ contexto = resultado 300px ÷ 960px = 0.3125 Coloque o ponto duas casas para a direita e acrescente o sinal de %.sexta-feira, 28 de setembro de 12
  27. 27. 1. Grid flexível Divs flexíveis #geral { ! width: 90%; /* 960px */ ! margin: 0 auto; ! background: #fff; } .chamadas article { ! width: 31.25%; /* 300px / 960px */ ! float: left; ! margin: 1%; }sexta-feira, 28 de setembro de 12
  28. 28. 1. Grid flexível Fontes flexíveis - trocar px por em Os valores de tamanho das fontes devem ser substituídos de px para em. O Valor padrão das fontes considerada pelas browsers é de 16px, exemplo: .chamadas h1 { ! font: 30px arial; ! color: #666; ! margin: 1%; } Fórmula: 30 ÷ 16 = 1.87500 No caso de fontes, não é necessário posicionar o ponto para direita.sexta-feira, 28 de setembro de 12
  29. 29. 1. Grid flexível Fontes flexíveis - trocar px por em .chamadas h1 { ! font: 1.87500em arial; /* 30px / 16px */ ! color: #666; ! margin: 1%; }sexta-feira, 28 de setembro de 12
  30. 30. 2. Imagens flexíveissexta-feira, 28 de setembro de 12
  31. 31. 2. Imagens flexíveis As imagens também precisam se adaptar conforme o tamanho da tela, para não “sair fora” do layout. Então faça 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. 32. 2. Imagens flexíveis Adapte isso para o IE... img, embed, object, video {      width: 100%; }sexta-feira, 28 de setembro de 12
  33. 33. 3. Media queriessexta-feira, 28 de setembro de 12
  34. 34. 3. Media Queries São novos seletores de CSS3 adicionados pela W3C. Eles servem como uma consulta de mídia 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. 35. 3. Media Queries Chamando as Media Querie externamente: <link rel="stylesheet" href="smartphones.css" media="screen and (max- width:320px)" /> <link rel="stylesheet" href="tablets.css" media="screen and (max-width: 320px)" /> Outros tipos de especificações para Media Queries estão no site da W3C..sexta-feira, 28 de setembro de 12
  36. 36. 3. Media Queries Media queries não são suportadas pelo IE8 e inferiores. Por isso, devemos usar uma biblioteca como o css3-mediaqueries-js que faz o trabalho sujo. Para chamá-la: <header> <!--[if lt IE 9]>     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/ css3-mediaqueries.js"></script> <![endif]--> </header>sexta-feira, 28 de setembro de 12
  37. 37. Alguns exemplos http://www.globo.com http://bostonglobe.com http://html.adobe.com/edge http://mediaqueri.es/sexta-feira, 28 de setembro de 12
  38. 38. Obrigado! Rodrigo Simoni facebook/rodrigosimoni contato@brandweb.com.br www.brandweb.com.brsexta-feira, 28 de setembro de 12

×