2. 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
4. 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
5. 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
6. 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
8. <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
10. 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
12. 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
13. Não fazer nada
• Conteúdo próprio para Desktop é enviado para o
dispositivo móvel de forma inalterada
14. 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
15.
16. 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
17. Conteúdo adaptado
Vantagens Desvantagens
• 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
18. 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
19. Conteúdo específico
Vantagens Desvantagens
• 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
24. Problemas
Um site precisa funcionar em um número de aparelhos,
plataforma e navegadores que cresce a cada dia
25. 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.
26. 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
27. 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
28. 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
35. Mas será possível
ter somente um conjunto de páginas
para todas as mídias?
36. 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
37. Web Design Responsivo
Web
Design
Responsivo
Grid
Layout
Fluido
CSS
Media
Queries
Imagens e
mídias
flexíveis
Controle
do
Viewport
38. 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
41. 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
42. Viewport
• Os navegadores mobile tentam exibir páginas
web feitas para desktop
• Ajuste automático do zoom
43. 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="">
44. 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”
46. 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
47. 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
48. Viewport e o Zoom
• O viewport
• diminui quando se aumenta o zoom
• aumenta quando se diminui o zoom
• O viewport é medido em CSS pixels
49. Exemplos
• Imagem de 320x356px, iPhone, viewport padrão
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
50. 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
51. Aumentando o zoom
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
52. Diminuindo o zoom
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
53. 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">
54. Configuração ideal
• O zoom também não deve estar alterado
<meta name="viewport”
content="width=device-width,initial-scale=1">
58. 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
59. Exemplos em uma página HTML
!
!
<link rel="stylesheet” !
href="estilos.css” media="screen">!
!
<link rel="stylesheet”!
href="impressao.css” media="print">
60. Exemplos em um arquivo CSS
!
@media screen {!
/* Regras CSS para monitores */ }!
!
!
@media print {!
/* Regras CSS para impressao */ }!
61. 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
62. 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
71. 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?
72. 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
73. 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)
74. 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) { ... }
75. 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) { ... }
76. 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) { ... }
78. 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
79. 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
81. 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) { ... }
83. 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) { ... }
84. 1 arquivo
Vantagens Desvantagens
• Somente 1 requisição
HTTP
• Mais difícil de
esquecer de atualizar
• Arquivo fica muito
grande
• Manutenção fica mais
difícil
85. Vários arquivos
Vantagens Desvantagens
• O arquivo padrão é
menor
• Organização
melhorada
• Várias requisições
HTTP
• Possibilidade de
esquecer de atualizar
algo
86. 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)
87. 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;
}
}
88. 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;
}
}
89. 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;
}
}
90. 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
91. 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
92. Dica
• Utilize apenas o tamanho
@media (min-width: 320px) { }
• simples
• fácil
• executa em navegadores antigos
97. 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
99. 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) {
}