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.

1. Professor
Adriano Teixeira de Souza

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

4. 1280 x 800
Photo: Steve Rhodes

5. 16 : 9
Photo: Steve Rhodes

6. Netbook tela de 8.9”
Photo: Steve Rhodes

7. Várias telas

8. Mais é melhor 5120 x 1600

9. 2006 Smart Phones
Flickr: photographer

10. 9 de Janeiro de 2007
Flickr: photographer

11. 2008 Smart Phones
Flickr: photographer

12. 2009 Smart Phones
Flickr: photographer

13. Android, BlackBerry
Flickr: photographer

14. 2010 iPad – Vendas de 3 milhões de dispositivos em 80 dias
Flickr: photographer

15. iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”
Flickr: photographer

16. Muitas telas
Flickr: photographer

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/

22. Mobile 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

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

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

40. code.google.com/p/css3-mediaqueries-js/
 IE8 e anteriores
 Firefox 1 & 2
 Safari 2

41.  Android: Chrome: Webkit
 iOS: Safari: Webkit
 Blackberry: Webkit (últimas versões)

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