Web Design Responsivo

DESIGN RESPONSIVO

Projetar para uma web • De forma geral:

•  Todos os dispositivos devem ser capaz de acessar seu site

•  Não exclua usuários baseado no dispositivo ou navegador que ele usa

•  Separe conteúdo do comportamento e da apresentação •  Separe CSS e JS • Não adicione informações de comportamento e

apresentação junto com o código

HTML5 de relance

Tags semânticas

• <header> e <footer>

• Em comparação com a antiga tag <div> não há nenhuma diferença entre em termos de apresentação

• Mas no futuro os motores de pesquisa se beneficiarão conseguindo diferenciar o que seja o conteúdo real de outros elementos

Tags semânticas

• <article> e <section>

• Artigos representam um bloco completo de conteúdo

• Uma seção é um pedaço do todo

• Artigos (article) podem ser compostos de múliplas seções (section)

• Seções podem ter vários artigos

Tags semânticas

• <figure> e <figcaption> • <figure> é um conteiner para conteúdo (geralmente

imagens) e <figcaption> fornece uma legenda para aquele conteúdo

• <nav> •  indica que um determinado conteúdo é a navegação

da página

<header> <hgroup> <h1>Título</h1> <h2>Subtítulo</h2> </hgroup> </header>

<nav> <ul> Navegação </ul> </nav> <section> <article> <header> <h1>Título</h1> </header> <section> Conteúdo </section> </article>

<article> <header> <h1>Título</h1> </header> <section> Conteúdo </section> </article> </section>

<aside> Principais links </aside>

<figure> <img src="..."/> <figcaption>Cartao 1.1</figcaption> </figure>

<footer> Copyright © <time datetime="2013-08-01">

2013</time>. </footer>

<input>

• O elemento <input> agora tem uma série de novos valores para o atributo type, que permite que os navegadores façam coisas bacanas, dependendo do seu valor.

•  color • date • datetime • datetime-local •  email • month

•  number •  range •  search •  tel •  time •  url

Web Design Responsivo

Web Design Responsivo

• Capacidade de adaptar websites para que se adequem aos dispositivos móveis

• Desafios • grande gama de dispositivos móveis • diversidade de navegadores nos aparelhos

Estratégias de adaptação

Estratégias

Não fazer nada

O conteúdo para Desktop existente é o mesmo que é enviado para os dispositivos móveis sem nenhuma mudança ou otimização de layout

Multi dispositivo

O mesmo conteúdo é enviado para desktop e mobile, mas estilos e scripts apropriados para o tamanho físico de destino

Versão mobile específica

Dispositivos móveis e desktop recebem versões diferentes apropriadas ao seu tamanho específico

Não fazer nada

• Conteúdo próprio para Desktop é enviado para o dispositivo móvel de forma inalterada

Não fazer nada

•  Menos trabalho para desenvolver

•  Não há necessidade de manter cópias separadas de conteúdos ou estilos

•  Não otimiza a experiência do usuário

•  Conteúdos largos e complexos que podem empobrecer a performance

Vantagens Desvantagens

OK: Páginas leves que possuem conteúdo flexível e fluente, páginas que são organizadas de forma mais vertical

RUIM: Páginas com layouts complexos, que possuem itens de conteúdo grandes (imagens) ou que utilizam plugins como flash

Conteúdo adaptado

• Mesma página é enviada para os dispositivos desktop e mobile

• Entretanto, CSS e outros conteúdos podem se adaptar ao tamanho físico do dispositivo

desktop.css

mobile.css

Conteúdo adaptado

•  Usar o mesmo conteúdo reduz o trabalho de desenvolvimento

•  Boa experiência para tamanhos físicos múltiplos

•  Pode ser difícil converter o conteúdo para este modelo, dependendo da complexidade da página

•  Uso inapropriado de estilos pode fazer esta estratégia falhar

Vantagens Desvantagens

OK: Páginas com semântica bem definida por HTML e utiliza CSS e JS para definir aparência e comportamento

RUIM: Páginas complexas com animações, vídeos e grandes imagens incorporadas, cujo a diferença para mobile seria muito grande

Versão Mobile Específica

• Versão de conteúdo específica para mobile é enviada para os dispositivos móveis

• Envolve algum redirecionamento do lado do servidor

Conteúdo específico

•  Cada tamanho físico tem uma experiência melhor

•  Versões podem ser desenvolvidas de maneira independente

•  Aumenta o trabalho de desenvolvimento

•  A verificação do tipo de dispositivo no servidor pode falhar

Vantagens Desvantagens

OK: Páginas complexas e que possuem uma grande diferença de um tamanho físico para o outro; sites que possuem independência de desenvolvimento das versões

RUIM: Páginas simples que podem ter seu conteúdo adaptado facilmente

Web Design Responsivo

Fonte: http://www.instantshift.com/2012/09/06/why-do-you-need-responsive-web-design-infographic/

Ethan Marcotte

Problemas

Um site precisa funcionar em um número de aparelhos, plataforma e navegadores que cresce a cada dia

Web Design Responsivo

• Origem: A List Apart, Ethan Marcotte, 2010

Ao invés de adptar designs desconectados para cada um do número cada vez maior de dispositivos web, podemos

tratá-los como faces da mesma experiência.

Nós podemos projetar para uma experiência ideal de visualização, e embutir tecnologias padronizadas nos

nossos designs não somente para torná-los mais flexíveis, mas mais adaptados para a mídia que os renderiza.

Web Design Responsivo

• Conjunto de abordagens para adaptar o conteúdo à plataforma utilizada pelo usuário

• Páginas se adaptam a todo tipo de dispositivo • Como fazer: design flexível e adaptável

• navegador • dispositivo • contexto do usuário

Web Design Responsivo

• Conjunto de abordagens para adaptar o conteúdo à plataforma utilizada pelo usuário

• resoluções diferentes • orientações de tela diferentes • plataformas de interação diversas • otimização de performance

Desafios •  Diferentes navegadores estão disponíveis

•  Chrome, Opera, Safari

•  Capacidade para tecnologias de cada navegador varia muito •  Muitos dos antigos navegadores não suportam um JS ou CSS

corretamente

•  Dispositivos móveis são menores e mais lentos •  Redes móveis podem ter limites de acesso e transferência •  Complicações para conteúdos ricos

•  Interfaces móveis obrigam-nos a repensar nossos websites •  Se ele consegue renderizar uma versão desktop, não quer dizer que

seja a melhor opção

Não responsivo

http://interim.it/

http://www.bostonglobe.com/

Web Desing Responsivo

As  mesmas  páginas    para  todos  os  disposi0vos  

Mas será possível ter somente um conjunto de páginas para todas as mídias?

Web Design Responsivo

• Priorização do Conteúdo • Projetar para o conteúdo que realmente importa • Não apenas um design menor • Completa reestruturação de conteúdo • Conteúdo útil e com foco

Web Design Responsivo

Web Design

Responsivo

Grid Layout Fluido

CSS Media Queries

Imagens e mídias

flexíveis

Controle do

Viewport

Design Responsivo

•  Um conjunto de regras CSS diferente são aplicadas a partir da avaliação de certas características do navegador em uso

Media queries

•  Utilização de medidas proporcionais (%, em) invés tamanhos absolutos (px) para os elementos do layout

Grid Layout Fluido

•  Através de CSS fazer com que imagens mídias se adaptem para caber no layout de acordo com as restrições de tamanho

Imagens e recursos flexíveis

Web Desing Responsivo

As  mesmas  páginas    HTML  e  CSS  para  todos  os  disposi0vos  

Viewport e Zoom

Viewport

• Um pixel no mundo Desktop • Em um tela de computador normalmente 1px é 1px

• Uma imagem com largura de 200px irá ocupar 200px da tela física do monitor

• Se o tamanho for definido em % • o valor será calculado proporcional ao tamanho da janela

do navegador

Viewport

• Os navegadores mobile tentam exibir páginas web feitas para desktop • Ajuste automático do zoom

Viewport

• Viewport é o espaço disponível no navegador para uma página ser renderizada

• tamanho da janela do navegador, menos: • barra de ferramentas • barra de rolagem • navegação

<meta name="viewport" content="">

Viewport •  <meta name="viewport" content=""> •  Principais parâmetros para content

•  width/height: valor ou device-[width|height] •  name=“viewport” content=“width=device-width”

•  initial-scale: define o zoom inicial, 0 a 10 •  name=“viewport” content=“width=device-width, initial-scale=1”

•  user-scalable: yes | no •  name=“viewport” content=“width=device-width, initial-scale=1, user-

scalable=no”

•  minimum-scale, maximum-scale: 0.25 a 10 •  name=“viewport” content=“width=device-width, initial-scale=1, user-

scalable=no, maximum-scale=1.5”

Viewport e CSS

@viewport { width: 320px; height: device-height; zoom: 1; max-zoom: 2; min-zoom: 0.5;

}

Zoom e o Pixel

• O zoom é uma funcionalidade presente em navegadores modernos

• Consideres • uma imagem de 150px em uma página • aplica-se zoom de 200% • a imagem passa a ocupar 300px na tela

Zoom e o Pixel

• O Zoom altera a visualização, mas não modifica o código

• a imagem continua a ser descrita com 150px

• 150 CSS pixels + 200% zoom -> 300 pixels físicos

Viewport e o Zoom

• O viewport • diminui quando se aumenta o zoom • aumenta quando se diminui o zoom

• O viewport é medido em CSS pixels

Exemplos

•  Imagem de 320x356px, iPhone, viewport padrão

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Exemplos

• Viewport com a mesma largura da imagem

<meta name="viewport” content="width=320,initial-scale=1">

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Aumentando o zoom

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Diminuindo o zoom

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Configuração ideal

• A configuração ideal é aquela que considera a largura do próprio dispositivo como seu viewport

• Os dispositivos móveis têm larguras diversas de telas

<meta name="viewport” content="width=device-width">

Configuração ideal

• O zoom também não deve estar alterado <meta name="viewport” content="width=device-width,initial-scale=1">

Viewport

Sempre habilite o zoom

Media queries

CSS Media Types

• Permitem que se apliquem regras específicas à mídia que o renderiza

Media Type Description all Used for all media type devices aural Used for speech and sound synthesizers braille Used for braille tactile feedback devices embossed Used for paged braille printers handheld Used for small or handheld devices print Used for printers projection

Used for projected presentations, like slides screen Used for computer screens tty

Used for media using a fixed-pitch character grid, like teletypes and terminals

tv Used for television-type devices

Exemplos em uma página HTML

!!<link rel="stylesheet” ! href="estilos.css” media="screen"> !!<link rel="stylesheet” ! href="impressao.css” media="print">

Exemplos em um arquivo CSS

!@media screen { ! /* Regras CSS para monitores */ } !!!@media print { ! /* Regras CSS para impressao */ } !

CSS Media queries

• Fornecem um modo de aplicar folhas de estilos seletivamente baseado em algumas características da mídia onde o conteúdo será renderizado

• Tamanho da janela, tamanho da tela, resolução, etc

CSS Media queries •  Uma media querie consiste em um tipo de mídia e zero

ou mais expressões que verificam as condições particulares de recursos de mídia •  height •  width •  orientation •  device-width •  device-height

•  as medidas podem ser testadas px, cm, in, ems •  aceitam prefixos min- max-

•  Media queries -> design condicional

CSS Media Queries

CSS Media Queries: exemplos

<link rel="stylesheet" href="estilos.css” ! media="screen and (color)"> !!@media screen and (min-width: 481px){ } !

@media screen, print and (max-width: 480px){ } !

@media all and (orientation:landscape) { } !

@media screen and (monochrome) { } !

@media screen and (color) { } !

http://www.fa7.edu.br/webmobile/mq_inicial.zip

Exemplo

Exemplo Media Querie

Exemplo de Media Querie

Exemplo de Media Querie

Operadores em Media Queries •  Conjunção (and) @media (max-width: 600px) and (orientation: portrait) { } •  Disjunção (,) @media (min-width: 300px), (min-height: 300px) { } •  Negação (not) @media not print and (max-width: 600px) and(orientation: portrait) { }

Breakpoints

Breakpoints

• Apesar de existirem vários parâmetros para media queries, apenas alguns são usados de fato

• a grande maioria dos sites não requer todos os parâmetros

• maior parte: altura e largura do dispositivo

• em que momento escrever regras para uma resolução diferente?

Breakpoints

• Ponto em que o layout “quebra” • Delimitador das regras CSS para atenderem novas

especificações

• Aquele tamanho em que novos ajustes precisam ser realizados no layout para que ocorra a melhor experiência possível do layout

Abordagens sobre breakpoints •  No início dos estudos do Web Design Responsivo

• breakpoints de acordo com a resolução de dispositivos específicos

•  Para smartphones @media only screen and (min-device-width : 320px) and (max-device-width : 480px)

•  Para desktops @media only screen and (min-width : 1224px)

320 and Up @media print { } @media only screen and (min-width: 480px) { ... } @media only screen and (min-width: 600px) { ... } @media only screen and (min-width: 768px) { ... } @media only screen and (min-width: 992px) { ... } @media only screen and (min-width: 1382px) { ... }

Less Framework /* Tablet Layout */ @media only screen and (min-width: 768px) and (max-width: 991px) { ... } /* Mobile Layout */ @media only screen and (max-width: 767px) { ... } /* Layout largo de mobile */ @media only screen and (min-width: 480px) and (max-width: 767px) { ... } /* Retina display */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { ... }

Twitter Bootstrap /* Telefones em landscape e abaixo */ @media (max-width: 480px) { ... } /* Telefone em landscape a tablet em portrait */ @media (max-width: 767px) { ... } /* tablet em portrait a landscape e desktop */ @media (min-width: 768px) and (max-width: 979px) { ... } /* Desktop grande */ @media (min-width: 1200px) { ... }

Breakpoints

.coluna { float: left; width: 25%; }

@media (max-width: 600px) { .coluna { width: 50%; } } @media (max-width: 400px) { .coluna { float: none; width: 100%; } }

Breakpoints

• Como encontrar os breakpoints?

• Mais importante do que verificar todo tamanho de tela de dispositivo é verificar em que tamanho o layout realmente precisa ser ajustado

Breakpoints •  Abra sua página original no navegador

•  Redimensione a janela devagar até o design parecer ruim •  se mobile-first

•  abra pequeno e vá aumentando a janela •  senão

•  abra grande e vá diminuindo a janela

•  Quando achar um ponto em que o design quebra, copie o tamanho da janela •  crie uma media query com esse valor

•  Recarregue a página, veja se as mudanças melhoraram o design, e continue redimensionando pra achar o próximo breakpoint

Responsive Design View Mozilla

Evite device breakpoints

@media only screen and (min-width: 480px) { ... } @media only screen and (min-width: 600px) { ... } @media only screen and (min-width: 768px) { ... } @media only screen and (min-width: 992px) { ... } @media only screen and (min-width: 1382px) { ... }

Utilize content breakpoints

@media (min-width: 592px) { ... } @media (min-width: 656px) { ... } @media (min-width: 752px) { ... } @media (min-width: 1088px) { ... } @media (min-width: 1312px) { ... }

Media queries: Arquivos separados ou tudo junto? •  É possível criar media queries nas chamadas de folha

de estilo

<link rel="stylesheet" type="text/css" media="screen and (min-width:480px)” href="480.css">

<link rel="stylesheet" type="text/css”

media="screen and (min-width:768px)” href="768.css">

@media only screen and (min-width: 480px) { ... }

@media only screen and (min-width: 768px) { ... }

1 arquivo

• Somente 1 requisição HTTP

• Mais difícil de esquecer de atualizar

• Arquivo fica muito grande

• Manutenção fica mais difícil

Vantagens Desvantagens

Vários arquivos

• O arquivo padrão é menor

• Organização melhorada

• Várias requisições HTTP

• Possibilidade de esquecer de atualizar algo

Vantagens Desvantagens

Media queries sobrepostas ou empilhadas • Sobrepor ou empilhar?

• Não são termos técnicos para o Design Responsivo

• Regras podem ser agrupadas por media queries de forma exclusiva (empilhadas) ou sobreposta (sobrecarregada)

Media queries sobrepostas @media all and (min-width:500px) { body { background: blue; font-family: serif; } } @media all and (min-width:700px) { body { background: red; color: #FFF; } }

Media queries sobrepostas @media all and (min-width:700px) { body { background: red; color: white; } } @media all and (min-width:500px) { body { background: blue; font-family: serif; } }

Media queries empilhadas @media all and (min-width:500px) and (max-width:699px) { body { background: blue; font-family: serif; } } @media all and (min-width:700px) { body { background: red; color: white; font-family: serif; } }

Media types, media queries, navegadores e dispositivos • Os media types já estão presentes desde CSS2

•  Todos os navegadores modernos suportam os tipos screen e print

•  Smartphones •  celulares antigos aceitavam o tipo handheld, mas

smartphones modernos ignoram • Utilização de media queries para escrever regras

específicas • @media screen and (max-width: 480px) { } • muitos navegadores antigos não entendem as medias queries

Media types, media queries, navedarodes e dispositivos • Operador only

• @media only screen and (max-width: 480px) { }

•  igual à querie anterior

• Arranjo técnico para que navegadores antigos reconheçam a media querie como falsa e daí não seja avaliada

Dica

• Utilize apenas o tamanho

@media (min-width: 320px) { }

• simples •  fácil • executa em navegadores antigos

http://www.fa7.edu.br/webmobile/cerva.zip

Exemplo

Cervejaria

Cervejaria

1 coluna 3 colunas

Estrutura

• HTML

Princípio de Design

• “Identifique os aspectos de seu aplicativo que variam e separe-os do que permanece igual” • Pegue o que variar e “encapsule” para que isso não

afete o restante do código • Menos consequências indesejadas • Mais flexibilidade

Alteração

•  Identificar o que precisa ser alterado

Organizando o CSS •  Regras de estrutura comuns às versões Desktop e Mobile •  Regras de estrutura específicas para Mobile utilizando

media queries

@media screen and (max-width:480px) {

}

•  Regras de estrutura específicas para Desktop utilizando media queries

@media screen and (min-width:481px) {

}

Estrutura Comum

Desktop e Mobile

http://www.fa7.edu.br/webmobile/ex_layout.zip

Exercício

Adaptar este conteúdo para uma coluna