Responsive Web Design
Prof. Leandro C. Fernandes
Diversidade e pluralidade
Diversidade e pluralidade
Design responsivo, design adaptativo, design fixo, design líquido ou design fluído?
• Design de largura fixa: neste modelo a página tem tamanho fixo para tudo, independente de onde está sendo visto. Se o site tem tamanho de
1024x600px, este será o tamanho dela em qualquer circunstância.
• Quando utilizada está técnica, o desenvolvedor acaba se obrigando a criar um site para desktop e um totalmente novo para os smartphones.
• Talvez ainda seja o modelo mais comum por enquanto.
• Design fluído ou líquido: este tipo de design se preocupa em construir
tudo em porcentagens, nunca utilizando números fixos na sua construção.
Por exemplo se o tamanho do site for 80% da tela, na TV ele ocupara 80%, no desktop 80% e no celular, 80%.
• Na utilização desta técnica geralmente se tem uma versão para celular e uma para desktop da mesma forma, mas a vantagem é que dentro do desktop ele irá se
adaptar melhor a vários tamanhos de tela.
Design responsivo, design adaptativo, design fixo, design líquido ou design fluído?
• Design adaptativo e responsivo: o site é construído de modo que se
adapte o melhor possível a tela em que esta sendo carregado. Utiliza
principalmente as media queries para identificar e definir como o site
deve se comportar.
Obter informações ou se ajustar a situação?
User agent
• O user agent é a função dentro do site que identifica as questões técnicas
que envolvem o usuário que o está visitando.
• Comumente utilizado para diferenciar se o acesso está acontecendo através do celular ou do navegador.
•
Usualmente é feito apenas uma verificação de navegador e sistema
operacional, porém muitos dispositivos e navegadores acabam não entrando na lista e não são direcionados para o site correto.
Media queries
•
É uma propriedade do CSS que identifica em qual mídia aquele site está sendo carregado, lhe atribuindo um determinado estilo.
•
O design responsivo trabalha basicamente com esta função, modificando tamanhos, dimensões e formatos conforme o tamanho da tela do usuário.
• Seria impraticável criar uma media querie para cada resolução existente. Devemos usar poucas media queries e fazer o layout fluir entre os breakpoints.
• Se tudo for porcentual o design se adaptaria a todas as resoluções, mas ainda não seria um design capaz de aproveitar o potencial de cada dispositivo.
Conceitos importantes para
Design Responsivo (RWD)
Como ajustar as dimensões?
• Apesar de parecidos estes conceitos tem uma pequena diferença.
• Nesta animação é possível observar que: o responsivo vai responder ao
tamanho da tela imediatamente, enquanto o adaptativo vai se adaptar
conforme ela aumenta/diminui.
Qual diagramar primeiro?
• O conceito de mobile first tem ganho bastante atenção, sendo uma forma diferente de visualizar o processo de criação.
• Ao invés de fazer um site para computadores e depois adaptar ele para as telas menores,
no mobile first primeiro se cria a versão de celular e depois a adapta ao desktop.
Definindo um tamanho máximo?
• Uma questão comum é se o site terá um tamanho máximo.
• Podemos construí-lo de uma forma que sempre se adapte ao tamanho da tela; ou
que se adapte até determinado tamanho e depois se mantenha da mesma forma
(ou seja, deixará de ser responsivo após determinada largura).
Breakpoints
• Definir pontos de interrupção (breakpoints) no layout do site. Estes pontos definem se um objeto deve mudar suas propriedades caso atinjam um determinado valor como parâmetro.
• Esta técnica é explorada em sites responsivos para que se consiga modelar os objetos do
site dependendo do tamanho da tela que estiver sendo utilizada.
Estabelecendo medidas:
Unid. Estáticas vs Unid. Relativas
• Uma mudança muito importante é a utilização de unidades relativas, isto é, unidades que mudam de acordo com o tamanho da tela. Unidades relativas se adaptam ao
contexto em que estão e isso é a essência do design responsivo.
• Por exemplo: ao invés de definir que um objeto tem largura de 1000px, deve-se definir
que ocupe 100% da largura do elemento que o contém (contexto).
Elementos Fixos e Fluídos
• Objetos fixos tem tamanho pré-estabelecidos (usualmente definidos por unidade estáticas), enquanto os objetos fluídos tem tamanho
variável (dados por unidades relativas).
Imagens
• Nesta animação é perceptível a diferença de se usar imagens vetoriais. No design responsivo isso faz bastante diferença, pois são redimensionadas automaticamente independente é dado.
• É comum utilizar “fontes de ícones”, já que uma imagem pode perder qualidade
dependendo da densidade e tamanho da tela.
Tipografia nativa ou da web?
• As fontes de sistema são aquelas que já vem instaladas no sistema operacional. As fontes padrão de cada sistema variam bastante, por isso recomenda-se utilizar “Fontes seguras”
• As chamadas web fonts são carregadas diretamente no navegador e aplicadas dentro do
site. Existem diferentes formas de utilizá-las, mas em todas elas depende de aguardas o
download (automático) da fonte a ser utilizada.
Elementos aninhados
• Objetos aninhados são aqueles que estão dentro de um container,
como uma div por exemplo. Caso os objetos não estejam aninhados,
eles flutuam livremente dentro do seu layout.
Viewport, resolução,
densidade e retina display
Qual o tamanho de um pixel?
• Foi-se o tempo em que pixel significava apenas o menor ponto na tela.
• Bastava dizer que uma imagem tinha 200px e então ela ocuparia 200 pontos, ou seja, 25% de uma tela de tamanho padrão 800×600.
• O mundo mobile mudou completamente o jogo!
• Por volta de 2007 era muito comum smartphones resolução de 240×320 pixels (N95 por exemplo).
• A Apple lançou o primeiro iPhone explorando uma tela maior com 320×480 pixels e aproximadamente o dobro do tamanho.
• Hoje o conceito de pixel pode significar várias coisas.
Qual o tamanho de um pixel?
• A imagem ao lado corresponde a um determinado site, definido com 960px de largura, visto em um iPhone de 320px.
• Tanto o HTML quanto CSS foram codificado pensando em 960px (desktop) e não para um dispositivo 320px.
• A imagem do logotipo era dada por:
<img src=".." width="160" height="50">
• Obviamente o logo não está sendo renderizado a 160px, senão ocuparia metade da tela de 320px do iPhone.
• O navegador do iPhone se comporta como se tivesse 980px de largura embora o aparelho tenha 320px
apenas.
• Na hora de exibir os 980px (layout viewport) serão encaixados nos 320px reais, aplicando um zoom out.
<meta name="viewport" content="width=device-width,initial-scale=1">
Media types
• Os media types de CSS permitem que estilos diferentes sejam usados em diferentes situações.
• Sempre foram muito usados para distinguir a renderização na tela da impressão:
<link rel="stylesheet" href="estilos.css" media="screen">
<link rel="stylesheet" href="impressao.css" media="print">
• Todos os navegadores modernos suportam media print, que é útil para esconder o menu de navegação ou aumentar a fonte do texto, por exemplo.
• Alguns celulares antigos suportavam o tipo handheld para estilos
específicos para sites mobile, entretanto os smartphones modernos (como iPhone e Android) ignoram o media type handheld pois são capazes de
renderizar sites completos e não apenas as versões simples.
CSS3 e as novas Media queries
• As media queries permitem que foquemos no tamanho da tela onde o conteúdo será exibido.
• É possível criar um CSS que só se aplique a tamanhos de tela de, no máximo, 320px por exemplo (como um iPhone em modo retrato):
<link rel="stylesheet" href="iphone.css"
media="screen and (max-width: 320px)">
• Existem diversas opções de media queries com bastante suporte.
• Além da max-width, podemos usar min-width, width e device-width – e todas as variações delas com height.
• A diferença entre width e device-width é se estamos pensando em CSS pixels
ou no tamanho do viewport.
Parâmetros do Media Queries
• Width
•
Largura do viewport (janela do browser incluindo a barra de rolagem).
•
Valor: medidas de comprimento.
• Height
•
Altura do viewport (janela do browser incluindo a barra de rolagem).
•
Valor: medidas de comprimento.
• Device-width
•
Largura da mídia. Para impressão é o tamanho da folha e no caso de uma mídia digital é o tamanho da tela.
•
Valor: medidas de comprimento.
• Device-height
•
Altura da mídia.
•
Valor: medidas de comprimento.
• Aceita prefixo min/max
• Orientation
•
Orientação da mídia.
•
Valor: portrait (retrato) ou landscape (paisagem)
• Aspect-ratio
•
Razão entre os valores do width e height.
•
Apenas aplicável a mídias do tipo bitmap.
• Device-aspect-ratio
•
Proporção da tela do dispositivo.
CSS3 e as novas Media queries
/* regra aplicada em todas as situações */
body { background: blue; }
/* aplica somente a partir de 320px */
@media screen and (min-width: 320px) { body { font-size: 80%; }
}
/* aplica somente a partir de 480px no modo paisagem */
@media screen and (min-width: 480px) and (orientation: landscape) { nav { float: left; }
}
O pixel que não vale um pixel
• Duas medidas são importantes numa tela: o tamanho físico da tela, comumente dado em polegadas; e sua resolução em pixels.
• O pixel é a menor unidade de uma imagem digital. E toda imagem projetada numa tela é composta por milhares de pontos ou pixels.
• O dpi (dots per inch) é a quantidade de pixels que cabe em uma polegada.
• Dizer que uma tela tem 300dpi significa que, para cada polegada, temos 300 pontos formando a imagem.
• Isso permite resoluções muito maiores em telas que tem fisicamente o mesmo tamanho.
• Por exemplo considere dois iPad do mesmo tamanho:
• A resolução é de 2048×1536 para o modelo com tela retina
• A resolução é de 1024×768 para o modelo sem tela retina.
• O dpi do iPad com tela retina é o dobro da tela de seu antecessor.
O que é uma tela Retina?
• São telas de altíssima resolução contendo pixels tão pequenos
fisicamente que torna difícil para o olho identificá-los individualmente.
• Como o conteúdo ficaria muito pequeno na tela cada pixel de
conteúdo é renderizado com mais de um pixel físico.
•
A razão entre pixels lógicos e pixels físicos é chamada de device pixel ratio.
• O sufixo “@2X”
•
É uma boa prática de nomenclatura.
•
Por exemplo para uma imagem “foto.jpg”
a sua versão com o dobro da resolução
deve ser “foto@2x.jpg”.
Como lidar com diferentes pixels ratios?
• Quando surgiram as primeiras telas com pixel ratio diferente de 1, o
pessoal do WebKit criou uma media querie pra isso:
-webkit-device-pixel-ratio
• A especificação oficial revisou essa media query criando uma equivalente com nome mais simples: resolution.
•
Você pode escrever min-resolution e
max-resolution e medidas em dpi e dppx.
•
A medida
dppxé nova no CSS e significa o mesmo que o device pixel ratio. Então, poderíamos escrever
1.5dppxe seria equivalente a
144dpi.•
xhdpi (extra high dpi): pixel ratio 2
• ex. Galaxy S3, Galaxy Note 2, Nexus 4.
•
hdpi (high dpi): pixel ratio 1.5
• ex. Galaxy S2, Motorola Atrix, Nexus One.
•
tvdpi: pixel ratio 1.33
• usado só no tablet Nexus 7.
•
mdpi (medium dpi): pixel ratio 1
• telas normais, comuns em smartphones simples.
•
ldpi (low dpi): pixel ratio 0.75
• aparelhos low-end como o Galaxy 5.
•
dpi altíssimo (ainda sem nome): pixel ratio 3
• aparelhos Full HD com tela 1920x1080
• Ex: como o HTC Droid DNA e o Galaxy S4.
Servindo imagens de alta resolução
Atualmente encontramos no mercado:
•
0.75dppx (= 72dpi)
• Android low-end, tipo Galaxy 5.
•
1dppx (= 96dpi)
• Notebooks, desktops e vários celulares e tablets.
•
1.33dppx (= 127dpi)
• Nexus 7.
•
1.5dppx (= 144dpi)
• Vários Androids, como Atrix ou S2.
•
2dppx (= 192dpi)
• Telas retina da Apple, celulares e tablets mais modernos como S3.
•
3dppx (= 288dpi)
• Celulares modernos como Galaxy S4.
• Você até pode escrever uma media query resolution pra cada um, mas é inviável. Uma solução interessante é servir uma imagem em alta resolução para qualquer tela acima de 1dppx.
•
O WordPress que escolheu 120dpi (=
1.25dppx) como valor inicial pra servir imagens retina.
•
