apresentacao responsivo atualizada - construsite brasil · 2014-11-26 · criação de um layout...
Post on 16-Nov-2018
213 Views
Preview:
TRANSCRIPT
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
top related