Desenvolvimento Responsivo

Transcrição

1 Desenvolvimento Responsivo

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

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

4 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).

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

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

7 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

8 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;

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

10 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 = 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.

11 Como lidar com o texto Ex.: Fonte 16px, entrelinha 24px e 40px de margem.

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

13 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 = 1.5em Ex.: Fonte 16px, entrelinha 24px

14 Grid: Do fixo ao relativo

15 Grid: Do fixo ao relativo

16 Grid: Do fixo ao relativo objeto contexto = resultado sidebar wrap = resultado Largura da sidebar = Não arredonde o resultado, coloque o ponto duas casas para a direita e acrescente o sinal de porcentagem. Ou seja: 31.25%.

17 Grid: Do fixo ao relativo

18 Grid: Do fixo ao relativo Descobrir o tamanho relativo da div.principal: objeto contexto = resultado principal wrap = resultado Largura da principal = Andando duas casas pro lado chegamos em 68.75% - largura da div.principal.

19 Grid: Do fixo ao relativo

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

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

22 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

23 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

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

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

26 Parâmetros do Media Queries Device-aspect-ratio: Proporção da tela do dispositivo. Aceita prefixo min/max: Não.

27 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

28 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 ( ) 768 pixels - Tablets maiores em modo retrato. Ex: ipad ( ) 1024 pixels - Tablets maiores em modo paisagem, monitores antigos pixels - Monitores wide.

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

30 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 = max-width: 400px = largura do Viewport

31 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

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

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

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

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

36 @viewport É possível também utilizar dentro 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.

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

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

39 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:

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

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

42 Na hora dos Testes Importante: Nenhuma destas ferramentas emuladoras são 100% precisas. Nada substitui o teste no próprio dispositivo.

43 Obrigado!

44 Referências Design Responsivo x Adaptativo Documentação W3C Media Queries John Martz - Ilustrador Modernizr Respond.js css3-mediaqueries-js

45 Referências GoMo Screenfly Calculadora px to em Artigos completos