Web Design Responsivo

WEB DESIGN RESPONSIVO

Rodrigo SimoniCEO da Brandweb

facebook/rodrigosimonicontato@brandweb.com.br

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

Obrigado!

Rodrigo Simoni

facebook/rodrigosimonicontato@brandweb.com.brwww.brandweb.com.br

sexta-feira, 28 de setembro de 12