Desenvolvimento Responsivo

Desenvolvimento Responsivo

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.

Design Responsivo 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 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.

Design Adaptativo 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.

Quando e Onde Contexto: O site adota funções diferentes dependendo do contexto e da relevância do conteúdo. Responsivo Garantir a melhor visualização em uma gama maior de aparelhos Adaptativo Aprimorar um site que já existe em um curto espaço de tempo

Quando e Onde Contexto: Site de Cinema Acesso em casa Ler a resenha do filme, trailer e detalhes Acesso no carro Informações sobre o horário da sessão Entender o contexto é um trabalho que deve ser feito a quatro mãos, pelo desenvolvedor e pelo designer;

O que é EM mesmo? 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.

Definir EM 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. 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.

Como lidar com o texto 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. 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

Grid: Do fixo ao relativo objeto contexto = resultado sidebar wrap = resultado Largura da sidebar 300 960 = 0.3125 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

Grid: Do fixo ao relativo Descobrir o tamanho relativo da div.principal: 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

Margins e Paddings Como o parágrafo está na medida EM, o padding seguirá EM. objeto contexto = resultado 40 16 = 2.5em Ex.: 40px de margem

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

Media Queries 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: Ou utilizar um CSS unificado com a função @media:

Media Queries 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.

Parâmetros do 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 Resolution Scan Grid (tipo de dispositivo, não tem relação com o grid do design) Monochrome

Resolução de Tela 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: É 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 @mediaqueries. @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.

Viewport Declarar Viewport: Entre as tags <head> do código: Ao declarar que a largura do Viewport será a largura do dispositivo (width=devicewidth), estamos dizendo que a porção visível do site equivale ao tamanho do seu aparelho. Determinar um valor exato: Substituir o device-width pelo tamanho desejado.

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 Parâmetro novo, e é suportado por: IE10+ Firefox 19+ Safari 6+ Dos navegadors mobile, Safari 6 ou superior. Chrome 20+ 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.

@viewport @Viewport: parâmetro CSS proposto pela W3C para substituir a meta-tag Viewport. Quem aceita: IE10+, Opera e versões mais atuais do Chrome. 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.

@viewport É 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. 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.

OK. Mas isso funciona em TODOS os navegadores? 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...

creditos: John Martz Nem todos podem participar da brincadeira...

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

Na hora dos Testes 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 Importante: Nenhuma destas ferramentas emuladoras são 100% precisas. Nada substitui o teste no próprio dispositivo.

Obrigado!

Referências 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/