WEB DESIGN RESPONSIVO
Rodrigo SimoniCEO da Brandweb
facebook/[email protected]
www.brandweb.com.br
sexta-feira, 28 de setembro de 12
O IMPACTO DOS DISPOSITIVOS MÓVEIS
sexta-feira, 28 de setembro de 12
255 milhõesde linhas móveis ativas no Brasil
Fonte: Anatel
sexta-feira, 28 de setembro de 12
69%dos brasileiros têm celular
Fonte: IBGE
sexta-feira, 28 de setembro de 12
46%navegam na internet através de celular
Fonte: IBGE
sexta-feira, 28 de setembro de 12
77,7 milhõesde pessoas na internet mobile
Fonte: IBGE
sexta-feira, 28 de setembro de 12
Tablets
275%Crescimento de tablets no Brasil em 2012
Fonte: IDC Brasil
sexta-feira, 28 de setembro de 12
Estes Números estão crescendo
sexta-feira, 28 de setembro de 12
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
O que é Web Design Responsivo?
sexta-feira, 28 de setembro de 12
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
Como surgiu?
sexta-feira, 28 de setembro de 12
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
Como surgiu?
Leitura obrigatória:
sexta-feira, 28 de setembro de 12
Os ingredientes
sexta-feira, 28 de setembro de 12
Os ingredientes
Como fazer de fato um site responsivo?Em termos de front-end, os ingredientes são:
1. Grid flexível2. Imagens e mídias flexíveis
3. Media queries
sexta-feira, 28 de setembro de 12
1. Grid flexível
sexta-feira, 28 de setembro de 12
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
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
1. Grid flexívelSite de exemplo:
sexta-feira, 28 de setembro de 12
1. Grid flexívelSite 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
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
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
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
1. Grid flexível
Decore a fórmula mágica:
objeto ÷ contexto = resultado
sexta-feira, 28 de setembro de 12
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
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
1. Grid flexível
Fontes flexíveis - trocar px por em
.chamadas h1 {! font: 30px arial;! color: #666;! margin: 1%;}
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:
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
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
2. Imagens flexíveis
sexta-feira, 28 de setembro de 12
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
2. Imagens flexíveis
Adapte isso para o IE...
img, embed, object, video { width: 100%;}
sexta-feira, 28 de setembro de 12
3. Media queries
sexta-feira, 28 de setembro de 12
3. Media QueriesSã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
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
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
Alguns exemplos
http://www.globo.comhttp://bostonglobe.com
http://html.adobe.com/edgehttp://mediaqueri.es/
sexta-feira, 28 de setembro de 12
Recommended
