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