O documento discute como projetar sites para a web levando em conta as diferenças entre a web e mídia impressa. Devemos aceitar que a web não tem as mesmas limitações de espaço de uma página impressa e projetar sites de forma flexível. Além disso, é importante entender o fluxo constante de mudanças na web.
2. “O controle que os designers têm da mídia impressa, e frequentemente
desejam na Web, é simplesmente em função das limitações da página
impressa. Nós devemos aceitar o fato de que a Web não tem os
mesmos limites, e projetar para esta flexibilidade.
Contudo, primeiro devemos aceitar o fluxo e refluxo das coisas.”
A Dao of Web Design por John Allsopp, 10 de abril de 2000
http://goo.gl/wf6I
26. Nós temos que supor qual é a resolução do usuário.
Smart Phone
240 x 320
4:3
Palm Treo
24’’ 21’’ 19’’ 17’’ 14’’ 320 x 320
1920 x 1200 1600 x 1200 1280 x 1024 1152 x 864 800 x 600 1:1
iPhone
5:3 4:3 5:4 4:3 4:3 320 x 480
3:2
Xperia X10
480 x 854
16:9
Desktops Smartphones
27. Em resoluções de 1024 x 768 (17”)
Sistema Operacional Navegador Área útil (px)
Mac OS X Safari 909 x 519
Mac OS X Firefox 909 x 507
Windows Vista (7) Internet Explorer 849 x 621
Windows Vista (7) Firefox 849 x 608
Windows XP Internet Explorer 998 x 615
Windows XP Firefox 998 x 622
Em todos os sistemas e navegadores 849 x 507
et
wi d g
Fonte: http://www.designerstoolbox.com/designresources/safearea/compare
28. Segundo o The Mobile Internet Report
produzido pelo MORGAN STANLEY RESEARCH em 2009,
o acesso a Web via dispositivos móveis
irá superar o de desktops em 5 anos.
29. Teste de usabilidade promovido pela Mozilla Labs
9.667 usuários em 5 dias
http://goo.gl/KMLK
49. Design Adaptável
CSS3
@media query
> @media (min-width: 800px)
Esta janela tem no mínimo 800px de largura?
> @media screen and (max-device-width: 240px)
Este dispositivo é uma tela e essa tela tem no máximo 240px de largura?
> @media handheld and (orientation: landscape)
Este é um dispositivo portátil e está no sentido horizontal?
50. Design Adaptável
Suporte em desktops
> Navegadores com suporte a @media queries
Safari 3+ Opera 7+
Chrome IE9
Firefox 3.5+
> E o Internet Explorer 6-8?
http://code.google.com/p/css3-mediaqueries-js
51. Design Adaptável
Suporte em smartphones
sim não
Opera Mobile iPhone Firefox IE Mobile
Opera Mini Android MicroB BlackBerry old
Dolfin NetFront
BlackBerry Obigo
Phantom
Bolt
Symbian *
S40 *
Presto WebKit Gecko
fonte: www.quirksmode.org/mobile
77. Design Adaptável
Arquitetura da Informação
> Selecionando os itens mais e menos importantes
> Alterando os nomes de links e botões
> Alterando o posicionamento das partes do site
82. Design Adaptável
Áreas de arraste
> Toque rápido
> Toque prolongado
> Toque prolongado com arraste
> Dois toques rápidos
83. Exemplo A Exemplo B
Resumo não é link < > Resumo é link
84. Design Adaptável
Palheta de cor
> Título e texto corrido
> Títulos de seções e textos de apoio que não são conteúdo do post
> Título da seção de posts em destaque
> Links e botões