Web 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

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
• 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
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
Vantagens Desvantagens
• 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
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
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
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

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

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

• 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

• 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

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?

• 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
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
• 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">

Aumentando o zoom

Diminuindo o zoom

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
content="width=device-width">

Configuração ideal
• O zoom também não deve estar alterado
content="width=device-width,initial-scale=1">

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: 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) { } !

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

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
• 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) { ... }

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

Utilize content breakpoints

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">

1 arquivo
• Somente 1 requisição
HTTP
• Mais difícil de
esquecer de atualizar
• Arquivo fica muito
grande
• Manutenção fica mais
difícil

Vários arquivos
• O arquivo padrão é
menor
• Organização
melhorada
• Várias requisições
HTTP
• Possibilidade de
esquecer de atualizar
algo

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;
}
}
body {
background: red;
color: #FFF;
}
}

Media queries sobrepostas
body {
background: red;
color: white;
}
}
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;
}
}
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

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

Cervejaria
3 colunas 1 coluna

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) {
}

Exercício
http://www.fa7.edu.br/webmobile/ex_layout.zip

Adaptar este conteúdo para uma
coluna

Web Design Responsivo

Mais conteúdo relacionado

Mais procurados

Semelhante a Web Design Responsivo

Mais de Eduardo Mendes

Web Design Responsivo