O documento discute o design responsivo para websites, propondo uma abordagem flexível com grid, imagens e media queries que permitem a adaptação do layout a diferentes telas. O design responsivo garante que a web seja acessível em qualquer dispositivo.
2. Adriano Teixeira de Souza
Fasul: Professor nas disciplinas de Estrutura de
Dados, Paradigmas de Linguagens de
Programação, Sistemas Distribuídos
C.Vale: Analista de sistemas sênior e líder técnico
de desenvolvimento de sistemas em ambiente
web e desktop
17. A web deve ser acessível por qualquer
pessoa em qualquer lugar.
18. 1 em 5 usuários acessam a internet de
dispositivos móveis todo os dias
O tráfego de dados móveis quase triplicou
em 2010. Mantendo a tendências dos últimos
3 anos.
Acesso a internet por dispositivos móveis
deve ultrapassar a de desktops entre 3 a 5
anos.
Vídeo-games e televisões atuais estão vindo
com acesso a internet.
19. Design Web Responsivo
Trabalhar com um layout que se adapta as
diferentes telas onde será apresentado
A mesma página web poderia ser apresentada de
forma diferente em diversos dispositivos
20. “Uma grid flexível, com imagens flexíveis e
que incorpore media queries para criar um
layout adaptável e responsivo”
Ethan Marcotte (@beep)
http://www.alistapart.com/articles/responsive-web-design/
23. Grid Flexível
Imagens Flexíveis
Media Queries
24. Grid flexível
Definindo tamanho em proporção
▪ % em vez de px, cria o fluid layout
▪ imagens também podem utilizar esta técnica
CSS3 Media Queries
Estilo condicional
Permite a você definir apresentações para
específicos tamanhos de tela, dispositivos e mais
Jeffrey Zeldman: “It’s what some of us were going for
with ‘liquid’ web design back in the 1990s, only it
doesn’t suck.”
25. Utilize Eric Meyer CSS Reset
Divida o site em módulos, ou partes, de forma
que possam ser movidas e redimensionadas
conforme a necessidade
Utilize em’s e % para dimensionar tamanhos e
larguras
Elemento / contexto = resultado
Não arredonde casas decimais
26.
27.
28.
29.
30.
31. Esta regra diz para a imagem não exceder a
largura do container. Overflow: hidden
também funciona.
32. Use Javascript para carregar imagens no
tamanho apropriado
https://github.com/filamentgroup/responsive-
images
Problemas de redimensionamento
http://unstoppablerobotninja.com/entry/fluid-
images
33. min-width: referência as dimensões do
viewport (área que o web site aparece)
min-device-width referencia as dimensões
de tela do dispositivos (talvez a forma mais
segura para identificar dispositivos, iPad,
iPhone, etc.)
É possível selecionar baseado em dpi não
somente width
É possível selecionar baseado em
profundidade de cores
34.
35.
36. O que nós podemos testar
width • color
height • color-index
device-width • monochrome
device-height • resolution
orientation • scan
aspect-ratio • grid
device-aspect-ratio
http://www.w3.org/TR/css3-mediaqueries/
37. Antes de iniciar com smartfones, precisamos
adicionar isto na seção head do nosso HTML.
A propriedade Initial-scale configura o nível
de zoom para 1.0 ou 100%, então o browsers
viewport sabe que irá mostrar um website
igual a largura da tela do dispositivo e não no
seu layout padrão.
38. Consolidação
Web browsers são mais compatíveis com
padrões de mercado
Google Chrome: Webkit
Safari: Webkit
Firefox: Gecko
IE8 é muito bom em relação aos anteriores
39. Opera 9.5+
Firefox 3.5+
Safari 3
Chrome
Mobile Webkit
Opera Mobile
42. Faixa de dispositivos que o conteúdo será
visto
Como o layout será apresentado de forma
eficiente em diferentes plataformas
O tamanho padrão de imagens não deve
estar baseado no layout alvo padrão (você
pode ter algumas imagens diferentes para
dispositivos diferentes).
Tenha um plano para uma diversidade de
largura de telas
Notas del editor
Inicialmente o trabalho de web designers se focava apenas em adequar seus websites para monitores normaisA terrível briga entre mozilla (firefox) e internet explorer Apenas 2 ambientes para homologar o trabalhoTínhamos resoluções de 800 x 600, 1024 x 768
Posteriormente surgiram os notebooks com resoluções de 1280 x 800Tipo de tela um pouco diferente, mas nada muito difícil de se trabalhar
Na sequencia vieram os monitores widescreen com proporção de 16:9Neste momento surgiu uma situação onde as aplicações precisavam de uma certa adaptaçãoPois tivemos resoluções maiores, como: 1440 x 900 Isso deixava um espaço muito grande em branco
Para complicar mais ainda, surgiram os netbooksTínhamos 2 extremos, uma tela com resolução muito grande de um lado e um netbook com tela reduzida de outro
Então temos ai vários tipos de telaIsso já nos daria um certo trabalho homologar nosso websiteJá fugia daquela simples disputa entre Internet Explorer e Mozilla (Firefox)
Para completar ainda tem aquele nerd que quer não gosta do alt+tabQuer ver várias telas ao mesmo tempo
Em 2006 começou aparecer os primeiros smartfones Ainda eram aparelhos muito limitadosNão dava para se fazer muita coisa prática
Em 2007 começou a revolução na linha de smartfonesCom o lançamento do iPhone as coisas mudamTemos ai um aparecem com grande quantidade de recursoE uma tela de boa visibilidadeNada comparado ao que havia na época
Em 2008 vieram outros smartfones Nada que chegasse próximo ao iPhone mas já era uma evolução
Em 2009 surgiram novas versões de smartfones
Neste mesmo ano surgiu uma versão melhorada do Blackberry chamada de BlackBerry Curve 8900E teve ascenção o Android, que surgiu com muita força, apoiado na Gigante Google
Em 2010 a Apple lançou o iPad, que veio com muita força 3 milhões de venda em apenas 80 diasE não suportava flash, que ainda era uma forte ferramenta para web
Em 2010 também foi lançado o iPhone 4 Com resolução de 960 x 640, de fato uma ótima resolução Com 361 pixels por polegadasSob a afirmação de que 300 ppi a cerca de 30 centimetros do olho era o máximo que um humano poderia enxergar
Agora tempos um pouco mais de trabalho para homologar nossas aplicaçõesAlém da famosa disputa de Internet Explorer x Mozilla Firefox no desktopAgora temos que homologar uma aplicação acessível em smartfones