DESIGN RESPONSIVO
Projetar para uma web 
• De forma geral: 
• Todos os dispositivos devem ser capaz de acessar seu site 
• Não exclua usuári...
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 d...
Tags semânticas 
• <article> e <section> 
• Artigos representam um bloco completo de 
conteúdo 
• Uma seção é um pedaço do...
Tags semânticas 
• <figure> e <figcaption> 
• <figure> é um conteiner para conteúdo (geralmente 
imagens) e <figcaption> f...
<header> 
<hgroup> 
<h1>Título</h1> 
<h2>Subtítulo</h2> 
</hgroup> 
</header> 
<nav> 
<ul> 
Navegação 
</ul> 
</nav> 
<sec...
<input> 
• O elemento <input> agora tem uma série de novos 
valores para o atributo type, que permite que os 
navegadores ...
Web Design Responsivo
Web Design Responsivo 
• Capacidade de adaptar websites para que se 
adequem aos dispositivos móveis 
• Desafios 
• grande...
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...
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 separad...
Conteúdo adaptado 
• Mesma página é enviada para os dispositivos 
desktop e mobile 
• Entretanto, CSS e outros conteúdos p...
Conteúdo adaptado 
Vantagens Desvantagens 
• Usar o mesmo conteúdo 
reduz o trabalho de 
desenvolvimento 
• Boa experiênci...
Versão Mobile Específica 
• Versão de conteúdo específica para mobile é 
enviada para os dispositivos móveis 
• Envolve al...
Conteúdo específico 
Vantagens Desvantagens 
• Cada tamanho físico tem 
uma experiência melhor 
• Versões podem ser 
desen...
Web Design Responsivo
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...
Web Design Responsivo 
• Conjunto de abordagens para adaptar o 
conteúdo à plataforma utilizada pelo usuário 
• Páginas se...
Web Design Responsivo 
• Conjunto de abordagens para adaptar o 
conteúdo à plataforma utilizada pelo usuário 
• resoluções...
Desafios 
• Diferentes navegadores estão disponíveis 
• Chrome, Opera, Safari 
• Capacidade para tecnologias de cada naveg...
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...
Web Design Responsivo 
Web 
Design 
Responsivo 
Grid 
Layout 
Fluido 
CSS 
Media 
Queries 
Imagens e 
mídias 
flexíveis 
C...
Design Responsivo 
• Um conjunto de regras CSS diferente são 
aplicadas a partir da avaliação de certas 
características d...
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...
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...
Viewport 
• <meta name="viewport" content=""> 
• Principais parâmetros para content 
• width/height: valor ou device-[widt...
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 um...
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 
...
Viewport e o Zoom 
• O viewport 
• diminui quando se aumenta o zoom 
• aumenta quando se diminui o zoom 
• O viewport é me...
Exemplos 
• Imagem de 320x356px, iPhone, viewport padrão 
http://developer.apple.com/library/ios/#documentation/AppleAppli...
Exemplos 
• Viewport com a mesma largura da imagem 
<meta name="viewport” 
content="width=320,initial-scale=1"> 
http://de...
Aumentando o zoom 
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/Usin...
Diminuindo o zoom 
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/Usin...
Configuração ideal 
• A configuração ideal é aquela que considera a 
largura do próprio dispositivo como seu viewport 
• O...
Configuração ideal 
• O zoom também não deve estar alterado 
<meta name="viewport” 
content="width=device-width,initial-sc...
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 ...
Exemplos em uma página HTML 
! 
! 
<link rel="stylesheet” ! 
href="estilos.css” media="screen">! 
! 
<link rel="stylesheet...
Exemplos em um arquivo CSS 
! 
@media screen {! 
/* Regras CSS para monitores */ }! 
! 
! 
@media print {! 
/* Regras CSS ...
CSS Media queries 
• Fornecem um modo de aplicar folhas de estilos 
seletivamente baseado em algumas 
características da m...
CSS Media queries 
• Uma media querie consiste em um tipo de mídia e zero 
ou mais expressões que verificam as condições 
...
CSS Media Queries
CSS Media Queries: exemplos 
<link rel="stylesheet" href="estilos.css”! 
media="screen and (color)">! 
! 
@media screen an...
Exemplo 
http://www.fa7.edu.br/webmobile/mq_inicial.zip
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 (...
Breakpoints
Breakpoints 
• Apesar de existirem vários parâmetros para media 
queries, apenas alguns são usados de fato 
• a grande mai...
Breakpoints 
• Ponto em que o layout “quebra” 
• Delimitador das regras CSS para atenderem novas 
especificações 
• Aquele...
Abordagens sobre 
breakpoints 
• No início dos estudos do Web Design Responsivo 
• breakpoints de acordo com a resolução d...
320 and Up 
@media print { } 
@media only screen and (min-width: 480px) { ... } 
@media only screen and (min-width: 600px)...
Less Framework 
/* Tablet Layout */ 
@media only screen and (min-width: 768px) and (max-width: 991px) { ... } 
/* Mobile L...
Twitter Bootstrap 
/* Telefones em landscape e abaixo */ 
@media (max-width: 480px) { ... } 
/* Telefone em landscape a ta...
Breakpoints 
.coluna { float: left; width: 25%; } 
@media (max-width: 600px) { 
.coluna { width: 50%; } 
} 
@media (max-wi...
Breakpoints 
• Como encontrar os breakpoints? 
• Mais importante do que verificar todo tamanho de 
tela de dispositivo é v...
Breakpoints 
• Abra sua página original no navegador 
• Redimensione a janela devagar até o design parecer ruim 
• se mobi...
Responsive Design View Mozilla
Evite device breakpoints 
@media only screen and (min-width: 480px) { ... } 
@media only screen and (min-width: 600px) { ....
Utilize content breakpoints 
@media (min-width: 592px) { ... } 
@media (min-width: 656px) { ... } 
@media (min-width: 752p...
Media queries: Arquivos 
separados ou tudo junto? 
• É possível criar media queries nas chamadas de folha 
de estilo 
<lin...
1 arquivo 
Vantagens Desvantagens 
• Somente 1 requisição 
HTTP 
• Mais difícil de 
esquecer de atualizar 
• Arquivo fica ...
Vários arquivos 
Vantagens Desvantagens 
• O arquivo padrão é 
menor 
• Organização 
melhorada 
• Várias requisições 
HTTP...
Media queries 
sobrepostas ou empilhadas 
• Sobrepor ou empilhar? 
• Não são termos técnicos para o Design 
Responsivo 
• ...
Media queries sobrepostas 
@media all and (min-width:500px) { 
body { 
background: blue; 
font-family: serif; 
} 
} 
@medi...
Media queries sobrepostas 
@media all and (min-width:700px) { 
body { 
background: red; 
color: white; 
} 
} 
@media all a...
Media queries empilhadas 
@media all and (min-width:500px) and (max-width:699px) { 
body { 
background: blue; 
font-family...
Media types, media queries, 
navegadores e dispositivos 
• Os media types já estão presentes desde CSS2 
• Todos os navega...
Media types, media queries, 
navedarodes e dispositivos 
• Operador only 
• @media only screen and (max-width: 480px) { } ...
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
Cervejaria 
3 colunas 1 coluna
Estrutura 
• HTML
Princípio de Design 
• “Identifique os aspectos de seu aplicativo que 
variam e separe-os do que permanece igual” 
• Pegue...
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...
Estrutura Comum
Desktop e Mobile
Exercício 
http://www.fa7.edu.br/webmobile/ex_layout.zip
Adaptar este conteúdo para uma 
coluna
Web Design Responsivo
Web Design Responsivo
Web Design Responsivo
Web Design Responsivo
Web Design Responsivo
Próximos SlideShares
Carregando em…5
×

Web Design Responsivo

639 visualizações

Publicada em

Técnicas para criar páginas web que se adaptem ao campo de renderização

Publicada em: Tecnologia
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
639
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
40
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web Design Responsivo

  1. 1. DESIGN RESPONSIVO
  2. 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
  3. 3. HTML5 de relance
  4. 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. 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. 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
  7. 7. <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>
  8. 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
  9. 9. Web Design Responsivo
  10. 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
  11. 11. Estratégias de adaptação
  12. 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. 13. Não fazer nada • Conteúdo próprio para Desktop é enviado para o dispositivo móvel de forma inalterada
  14. 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. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. Web Design Responsivo
  20. 20. Ethan Marcotte
  21. 21. Problemas Um site precisa funcionar em um número de aparelhos, plataforma e navegadores que cresce a cada dia
  22. 22. 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.
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. Não responsivo
  27. 27. http://interim.it/
  28. 28. http://www.bostonglobe.com/
  29. 29. Web Desing Responsivo As mesmas páginas para todos os disposi0vos
  30. 30. Mas será possível ter somente um conjunto de páginas para todas as mídias?
  31. 31. 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
  32. 32. Web Design Responsivo Web Design Responsivo Grid Layout Fluido CSS Media Queries Imagens e mídias flexíveis Controle do Viewport
  33. 33. 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
  34. 34. Web Desing Responsivo As mesmas páginas HTML e CSS para todos os disposi0vos
  35. 35. Viewport e Zoom
  36. 36. 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
  37. 37. Viewport • Os navegadores mobile tentam exibir páginas web feitas para desktop • Ajuste automático do zoom
  38. 38. 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="">
  39. 39. 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”
  40. 40. Viewport e CSS @viewport { width: 320px; height: device-height; zoom: 1; max-zoom: 2; min-zoom: 0.5; }
  41. 41. 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
  42. 42. 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
  43. 43. Viewport e o Zoom • O viewport • diminui quando se aumenta o zoom • aumenta quando se diminui o zoom • O viewport é medido em CSS pixels
  44. 44. Exemplos • Imagem de 320x356px, iPhone, viewport padrão http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  45. 45. 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
  46. 46. Aumentando o zoom http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  47. 47. Diminuindo o zoom http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  48. 48. 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">
  49. 49. Configuração ideal • O zoom também não deve estar alterado <meta name="viewport” content="width=device-width,initial-scale=1">
  50. 50. Viewport
  51. 51. Sempre habilite o zoom
  52. 52. Media queries
  53. 53. 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
  54. 54. Exemplos em uma página HTML ! ! <link rel="stylesheet” ! href="estilos.css” media="screen">! ! <link rel="stylesheet”! href="impressao.css” media="print">
  55. 55. Exemplos em um arquivo CSS ! @media screen {! /* Regras CSS para monitores */ }! ! ! @media print {! /* Regras CSS para impressao */ }!
  56. 56. 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
  57. 57. 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
  58. 58. CSS Media Queries
  59. 59. 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) { } !
  60. 60. Exemplo http://www.fa7.edu.br/webmobile/mq_inicial.zip
  61. 61. Exemplo Media Querie
  62. 62. Exemplo de Media Querie
  63. 63. Exemplo de Media Querie
  64. 64. 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) { }
  65. 65. Breakpoints
  66. 66. 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?
  67. 67. 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
  68. 68. 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)
  69. 69. 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) { ... }
  70. 70. 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) { ... }
  71. 71. 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) { ... }
  72. 72. Breakpoints .coluna { float: left; width: 25%; } @media (max-width: 600px) { .coluna { width: 50%; } } @media (max-width: 400px) { .coluna { float: none; width: 100%; } }
  73. 73. 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
  74. 74. 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
  75. 75. Responsive Design View Mozilla
  76. 76. 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) { ... }
  77. 77. Utilize content breakpoints @media (min-width: 592px) { ... } @media (min-width: 656px) { ... } @media (min-width: 752px) { ... } @media (min-width: 1088px) { ... } @media (min-width: 1312px) { ... }
  78. 78. 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) { ... }
  79. 79. 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
  80. 80. Vários arquivos Vantagens Desvantagens • O arquivo padrão é menor • Organização melhorada • Várias requisições HTTP • Possibilidade de esquecer de atualizar algo
  81. 81. 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)
  82. 82. 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; } }
  83. 83. 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; } }
  84. 84. 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; } }
  85. 85. 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
  86. 86. 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
  87. 87. Dica • Utilize apenas o tamanho @media (min-width: 320px) { } • simples • fácil • executa em navegadores antigos
  88. 88. Exemplo http://www.fa7.edu.br/webmobile/cerva.zip
  89. 89. Cervejaria
  90. 90. Cervejaria 3 colunas 1 coluna
  91. 91. Estrutura • HTML
  92. 92. 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
  93. 93. Alteração • Identificar o que precisa ser alterado
  94. 94. 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) { }
  95. 95. Estrutura Comum
  96. 96. Desktop e Mobile
  97. 97. Exercício http://www.fa7.edu.br/webmobile/ex_layout.zip
  98. 98. Adaptar este conteúdo para uma coluna

×