DesenvolvimentoResponsivo

Design Responsivo x Adaptativo

Ponto inicial:

Crescimento da variedade de dispositivos e versões que suprem as variações de

tamanho e resoluções de tela disponíveis.

Objetivo de ambos:

Fornecer ao usuário a melhor experiência de navegação.

Ideia central:

Criação de um layout que se modifique de acordo com o dispositivo do usuário.

Características:

• Medidas relativas e grids fluidos;

• Layout se modifica automaticamente de acordo com o dispositivo, utilizando unidades

de medidas relativas como porcentagem e EM;

• Permite ocultar elementos desnecessários nos dispositivos menores;

• Imagens flexíveis.

Design Responsivo

Vantagens

• Usuário sempre terá um design otimizado, independente da plataforma;

• Reaproveitamento do layout facilita manutenção e diminui o tamanho dos arquivos.

Desvantagens

• Maior curva de aprendizagem para o desenvolvedor iniciante;

• Maior tempo de produção;

• Dificuldade de implantação em um produto existente (é necessário reescrever o

código HTML/CSS).

Design Responsivo

Design Adaptativo

Ideia central:

Emular o aspecto visual e a navegação do design responsivo, sem abandonar as

medidas fixas.

Características:

• Medidas fixas;

• Layout se adapta para três ou quatro larguras de tela, e não pixel a pixel;

• Esqueleto do layout é o mesmo, HTML/CSS são desenvolvidos tradicionalmente,

declarando na folha de estilo primeiramente os estilos para desktop e só depois são

descritas as adaptações de dispositivos móves utilizando Media Queries;

• Imagens estáticas.

Vantagens

• Tempo de produção menor;

• Pode realizar um “upgrade” em um layout já existente.

• Maior controle de mudanças de design.

Desvantagens

• Não está preparado para acomodar todos os dispositivos do mercado;

• CSS não é tão bem aproveitado;

• Provável “quebra” do layout (breakpoints) em alguns tipos de resoluções.

Design Adaptativo

Contexto:

O site adota funções diferentes dependendo do contexto e da relevância do conteúdo.

Quando e Onde

Adaptativo

Aprimorar um site que já existe em

um curto espaço de tempo

Responsivo

Garantir a melhor visualização em

uma gama maior de aparelhos

Quando e Onde

Contexto:

Site de Cinema

Entender o contexto é um trabalho que deve ser feito a quatro mãos, pelo

desenvolvedor e pelo designer;

Acesso em casa

Ler a resenha do filme,

trailer e detalhes

Acesso no carro

Informações sobre o horário

da sessão

EM: Medida tipográfica. Nas fontes de prensas de metal 1 EM correspondia a largura de

corpo quadrado da letra M maiúscula.

Características:

• Unidade de medida relativa, varia proporcionalmente de acordo com o contexto;

• Útil em CSS, define as margens e espaçamentos em um tamanho proporcional;

• Conforme o tamanho da letra aumenta o mesmo acontece com os elementos afiliados

ao texto;

• 1 EM equivale a 16 pixels, ou seja, a medida que o navegador considera como padrão

para textos.

O que é EM mesmo?

Ao definir este valor como padrão para todo o documento 1em passa a ser equivalente a

10px, o que torna bem mais fácil calcular os valores a partir de uma base decimal.

Definir EM

16 pixels = 100%,

10 pixels = 62.5%. (16 x 0.625 = 10)

10 pixels = 1em

É só pegar o seu valor em pixels, andar uma casa para a esquerda e colocar um ponto.

Um texto de 14px, por exemplo, seria equivalente a 1.4em.

Como lidar com o texto

Ex.: Fonte 16px, entrelinha 24px e 40px de margem.

Converter para medidas relativas:

Ao definir o font-size para 62.5% a medida do texto é o mais fácil: 1.6em.

Importante: Se o contexto muda, o objeto alvo também muda.

Como lidar com o texto

Para o font-size 1.6em o espaçamento entre as linhas deve ser calculado com base

neste número.

Como lidar com o textoComo lidar com o texto

Fórmula:

objeto ÷ contexto = resultado

2.4 ÷ 1.6 = 1.5em

Ex.: Fonte 16px, entrelinha 24px

Grid: Do fixo ao relativo

Grid: Do fixo ao relativo

Não arredonde o resultado, coloque o ponto duas casas para a direita e acrescente o

sinal de porcentagem. Ou seja: 31.25%.

Grid: Do fixo ao relativo

objeto ÷ contexto = resultado

sidebar ÷ wrap = resultado

Largura da sidebar

300 ÷ 960 = 0.3125

Grid: Do fixo ao relativo

Descobrir o tamanho relativo da div .principal:

Grid: Do fixo ao relativo

objeto ÷ contexto = resultado

principal ÷ wrap = resultado

Largura da principal

660 ÷ 960 = 0.6875

Andando duas casas pro lado chegamos em 68.75% - largura da div .principal.

Grid: Do fixo ao relativo

Como o parágrafo está na medida EM, o padding seguirá EM.

Margins e Paddings

Ex.: 40px de margem

objeto ÷ contexto = resultado

40 ÷ 16 = 2.5em

O que são Media Queries?

Explicação rápida:

Expressões de CSS utilizadas para mudar o layout em diferentes aparelhos sem mudar o

conteúdo.

Explicação longa:

No CSS2 existia uma função chamada Media Type, ela servia para reconhecer um

determinado tipo de dispositivo.

Media Queries

Ao todo eram 10 diferentes Media Types:

• all – todos os dispositivos

• aural – sintetizadores de voz

• braille – leitores de Braille

• embossed – impressoras de Braille

• handheld – dispositivos de mão. Por exemplo: celulares com telas pequenas.

• print – impressoras convencionais

• projection – apresentações de slides

• screen – monitores coloridas

• tty – teleimpressores e terminais

• tv – televisores

Na prática: Determinava estilos específicos para a impressão, por exemplo em papel.

Aplicação: Acrescentar um link para uma outra folha de estilos no cabeçalho do seu

documento:

Media Queries

Ou utilizar um CSS unificado com a função @media:

Funcionou por um tempo, porém não acompanhou a evolução dos dispositivos.

CSS3:

• Media Querie (Consulta de Mídia), expressão lógica que verifica o tipo do dispositivo e

a capacidade dele;

• Complexidade maior com as Media Queries;

• Media Querie pergunta para o navegador (resposta é sempre verdadeira ou falsa).

Vantagem:

Controle maior sobre o layout; as consultas verificam itens como a altura e a largura do

navegador, orientação, resolução, etc.

Media Queries

Os recursos de media:

• Semelhantes as propriedades de CSS;

• Cada uma tem um nome e aceita certos valores.

Width: Largura da janela do navegador incluindo a barra de rolagem.

Valor: medidas de comprimento.

Aceita prefixo min/max: Sim.

Device-width: Largura da mídia. No caso de uma mídia digital é o tamanho da tela.

No caso de impressão é o tamanho da folha.

Valor: medidas de comprimento.

Aceita prefixo min/max: Sim.

Parâmetros do Media Queries

Device-aspect-ratio: Proporção da tela do dispositivo.

Aceita prefixo min/max: Não.

Parâmetros do Media Queries

Operadores:

Not (não), And (e) e Only (apenas): Controle mais preciso.

Utilizar o sinal de virgula equivale a um “ou”.

Outros parâmetros:

• Height

• Orientation

• Aspect-ratio

• Color

• Color-index

• Monochrome

• Resolution

• Scan

• Grid (tipo de dispositivo, não tem relação

com o grid do design)

Parâmetros do Media Queries

• Para desenvolver um CSS para um dispositivo específico é necessário conhecer a

resolução de uma tela (altura e largura em pixels);

• Para uma gama maior de aparelhos é preciso generalizar para determinar quais são os

pontos do layout que deverá se transformar.

Larguras:

• 320 pixels - Smartphones no modo retrato.

• 480 pixels - Smartphones no modo paisagem.

• 600 pixels - Tablets pequenos. Ex: Amazon Kindle (600×800)

• 768 pixels - Tablets maiores em modo retrato. Ex: iPad (768×1024)

• 1024 pixels - Tablets maiores em modo paisagem, monitores antigos.

• 1200 pixels - Monitores wide.

Resolução de Tela

Ex.: iPhone em modo retrato possui 320px de largura. No CSS para o smartphone da

Apple basta utilizar o seguinte Media Querie:

Resolução de Tela

É como perguntar para o navegador: “Hey, o seu dispositivo é uma tela e a largura

máxima é 320 pixels?”. Se a resposta for sim o navegador aplica os estilos.

Para mais informações sobre Media Queries leia a documentação da W3C sobre o assunto.

Viewport

Função:

Informa para todos os dispositivos que a escala inicial do layout é equivalente ao

tamanho do dispositivo.

Utilização:

• Se não utilizado alguns aparelhos móveis vão redimensionar o layout por conta

própria e o design responsivo só vai funcionar no desktop;

• Declarar o Viewport para o site é fundamental para o funcionamento dos @media-

queries.

@media-querie = max-width: 400px = largura do Viewport

Viewport

O padrão:

• Navegadores: Padrão é sempre a largura da sua janela;

• Dispositivos móveis: Na maioria 980px é o padrão.

Isso pode ser alterado através da meta-tag Viewport ou do parâmetro de CSS

@viewport.

Ao declarar que a largura do Viewport será a largura do dispositivo (width=device-

width), estamos dizendo que a porção visível do site equivale ao tamanho do seu

aparelho.

Viewport

Determinar um valor exato: Substituir o “device-width” pelo tamanho desejado.

Declarar Viewport: Entre as tags <head> do código:

Unidades de medida Viewport

A unidade de medida:

• “vw” se refere a largura do Viewport;

• “vh” se refere a altura do Viewport.

O que são: Medidas relativas de Viewport para tipografia.

São unidades para fontes, indicando que elas ocuparão uma porcentagem do Viewport.

• 1vw = 1% da largura do Viewport

• 1vh = 1% da altura do Viewport.

Unidades de medida Viewport

Isso é interessante quando se está trabalhando com um texto que não é possível alterar

a quantidade de palavras por linha em seu conteúdo.

Parâmetro novo, e é suportado por:

• IE10+

• Firefox 19+

• Chrome 20+

• Safari 6+

• Dos navegadors mobile, Safari 6 ou superior.

@Viewport: parâmetro CSS proposto pela W3C para substituir a meta-tag “Viewport”.

Quem aceita: IE10+, Opera e versões mais atuais do Chrome.

@viewport

Ao colocar isso no começo do CSS, estamos dizendo exatamente a mesma coisa que

a meta-tag “<meta name=”Viewport” content=”width=device-width, initial-scale=1”>”.

A diferença é que agora, ao invés de chamar “initial-scale”, estamos dizendo apenas

“zoom”.

É possível também utilizar o @Viewport dentro dos @media-queries. Assim, você pode

conseguir uma padronização maior do seu CSS. É especialmente útil se você está

fazendo o design adaptivo, não o responsivo.

@viewport

Telas com a largura maior que 640px e menor que 1024px o Viewport será sempre de

700px. Pode ser útil caso seja necessária uma padronização bem grande de layout. Uso

interessante no design adaptivo ou em código de terceiros, para torná-lo responsivo.

Navegadores que trabalham bem com Media Queries:

• Firefox 3.5+

• Opera 9.5+

• Safari 3+

• Google Chrome 4+

• Internet Explorer 9+

70% de todos os navegadores no mercado aceitam Media Queries.

Porém...

OK. Mas isso funciona em TODOS os navegadores?

cred

itos

: Joh

n M

artz

Nem todos podem participar da brincadeira...

Existem algumas maneiras de fazer os outros 30% participarem da brincadeira:

• Modernizr: Biblioteca de JavaScript, detecta quais recursos de HTML5 e CSS3 o

navegador suporta, determina que uma folha de estilos seja carregada apenas se

aquele navegador aceitar Media Queries.

• Respond.js: Adiciona suporte a min/max-width para o IE6-8 e outros navegadores

antigos. Para utilizar o respond.js você precisa colocar o comentário condicional /*/

mediaquery*/ ao final de todas as media queries que você utilizar no seu CSS. Por

exemplo:

Para participar da brincadeira

• CSS3-mediaqueries-js: Outra solução baseada em javascript. O css3-mediaqueries-js é

mais pesado do que o respond, mas aceita mais funções e promete fazer IE 5+, Firefox

1+ e o Safari 2 aceitarem todas os features do Media Queries.

Para participar da brincadeira

• GoMo: Ferramenta do Google visualiza screenshots do seu site em um smartphone e

obtém um relatório personalizado com dicas para melhorar a Mobile User Experience.

• Screenfly: Preview do seu site em desktops de 10 a 24 polegadas, diversos modelos

de tablets, smartphones e até televisores. Recurso de girar a tela para ver seu site em

outra orientação.

• Complementos do navegador: Ferramenta como Web Developer Tools – para Google

Chrome ou Firefox - ou outro para redimensionar a janela automaticamente em

diferentes resoluções;

• Emulação no Chrome: Além do tamanho da tela, ele muda a renderização.

Na hora dos Testes

Na hora dos Testes

Importante:

Nenhuma destas ferramentas emuladoras são 100% precisas. Nada substitui o teste no

próprio dispositivo.

Obrigado!

Design Responsivo x Adaptativo

http://issuu.com/locaweb/docs/pdfslocaweb41/46?e=2652939/5991481

Documentação W3C Media Queries

http://www.w3.org/TR/2010/CR-css3-mediaqueries-20100727/#media1

John Martz - Ilustrador

http://johnmartz.com/

Modernizr

http://www.modernizr.com/

Respond.js

https://github.com/scottjehl/Respond

css3-mediaqueries-js

http://code.google.com/p/css3-mediaqueries-js/

Referências

GoMo

http://www.howtogomo.com/

Screenfly

http://quirktools.com/screenfly/

Calculadora px to em

http://pxtoem.com/

Artigos completos

http://blog.popupdesign.com.br/design-responsivo-i-o-que-e-e-por-que-usar/

http://blog.popupdesign.com.br/design-responsivo-grids-e-texto/

http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/

http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-Viewport/

http://tableless.com.br/design-responsivo-na-pratica-2-layout-ao-html/

Referências