Your SlideShare is downloading. ×
Web Design Responsivo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web Design Responsivo

2,064
views

Published on

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

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

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,064
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
105
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. O IMPACTO DOS DISPOSITIVOS MÓVEISsexta-feira, 28 de setembro de 12
  • 3. 255 milhões de linhas móveis ativas no Brasil Fonte: Anatelsexta-feira, 28 de setembro de 12
  • 4. 69% dos brasileiros têm celular Fonte: IBGEsexta-feira, 28 de setembro de 12
  • 5. 46% navegam na internet através de celular Fonte: IBGEsexta-feira, 28 de setembro de 12
  • 6. 77,7 milhões de pessoas na internet mobile Fonte: IBGEsexta-feira, 28 de setembro de 12
  • 7. Tablets 275% Crescimento de tablets no Brasil em 2012 Fonte: IDC Brasilsexta-feira, 28 de setembro de 12
  • 8. Estes Números estão crescendosexta-feira, 28 de setembro de 12
  • 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. O que é Web Design Responsivo?sexta-feira, 28 de setembro de 12
  • 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. Como surgiu?sexta-feira, 28 de setembro de 12
  • 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. Como surgiu? Leitura obrigatória:sexta-feira, 28 de setembro de 12
  • 15. Os ingredientessexta-feira, 28 de setembro de 12
  • 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. 1. Grid flexívelsexta-feira, 28 de setembro de 12
  • 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. 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. 1. Grid flexível Site de exemplo:sexta-feira, 28 de setembro de 12
  • 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. 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. 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. 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. 1. Grid flexível Decore a fórmula mágica: objeto ÷ contexto = resultadosexta-feira, 28 de setembro de 12
  • 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. 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. 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. 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. 2. Imagens flexíveissexta-feira, 28 de setembro de 12
  • 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. 2. Imagens flexíveis 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 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. 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. 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. 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. Obrigado! Rodrigo Simoni facebook/rodrigosimoni contato@brandweb.com.br www.brandweb.com.brsexta-feira, 28 de setembro de 12