Web Design Responsivo

WEB DESIGN RESPONSIVO

Rodrigo Simoni
CEO da Brandweb

facebook/rodrigosimoni
contato@brandweb.com.br
www.brandweb.com.br

sexta-feira, 28 de setembro de 12

O IMPACTO DOS
DISPOSITIVOS MÓVEIS


255 milhões de linhas móveis ativas no Brasil

Fonte: Anatel


69%
dos brasileiros têm celular

Fonte: IBGE


46%
navegam na internet através de celular

Fonte: IBGE


77,7 milhões de pessoas na internet mobile

Fonte: IBGE


Tablets

275%
Crescimento de tablets no Brasil em 2012

Fonte: IDC Brasil


Estes Números estão crescendo


Estes Números estão crescendo

Alguns motivos:
Crescimento da classe C
Xing Ling com internet
Popularização da intenet
Redes sociais

O que é Web Design
Responsivo?


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.


Como surgiu?


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.


Como surgiu?

Leitura obrigatória:


Os ingredientes


Os ingredientes

Como fazer de fato um site responsivo?
Em termos de front-end, os ingredientes são:

1. Grid ﬂexível
2. Imagens e mídias ﬂexíveis
3. Media queries


1. Grid ﬂexível


1. Grid ﬂexível

Grid é um conjunto de linhas bases que fornecem uma
estrutura para o seu layout.


1. Grid ﬂexível
Site de exemplo:


1. Grid ﬂexí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/


1. Grid ﬂexível

Antes de tudo insira a meta tag viewport.

Serve para desativar a escala original do navegador, deﬁnindo 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">


1. Grid flexível
Divs flexíveis

#geral {
! width: 960px;
! margin: 0 auto;
! background: #fff;
}

.chamadas article {
! width: 300px;
! float: left;
! margin: 10px;
}


1. Grid ﬂexível

Decore a fórmula mágica:

objeto ÷ contexto = resultado


1. Grid ﬂexí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 %.


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%;
}


1. Grid ﬂexível
Fontes ﬂexí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.


1. Grid ﬂexível
Fontes ﬂexíveis - trocar px por em

.chamadas h1 {
! font: 1.87500em arial; /* 30px / 16px */
! color: #666;
! margin: 1%;
}


2. Imagens ﬂexí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%;
}



Adapte isso para o IE...

img, embed, object, video {
width: 100%;
}


3. Media queries


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...
}


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 especiﬁcações para Media Queries estão no site da W3C..


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>



</header>

Alguns exemplos

http://www.globo.com
http://bostonglobe.com
http://html.adobe.com/edge
http://mediaqueri.es/


Obrigado!

Rodrigo Simoni

facebook/rodrigosimoni
contato@brandweb.com.br
www.brandweb.com.br


Web Design Responsivo

Mais conteúdo relacionado

Mais procurados

Semelhante a Web Design Responsivo

Web Design Responsivo