O documento fornece dicas práticas para o desenvolvimento de sites para dispositivos móveis em 3 frases ou menos: 1) Apresenta estatísticas sobre o crescimento do uso da web móvel e dos dispositivos; 2) Fornece dicas sobre conteúdo, interação, layout e planejamento para sites móveis, enfatizando simplicidade e objetividade; 3) Discutem estratégias de testes em simuladores e navegadores para validar sites móveis.

1. web em dispositivos móveis • dicas práticas
@analauragomes 1

2. Bem vind@s!
analauragomes@gmail.com Publicações:
@analauragomes Editora Senac-SP:
XHTML/CSS Criação de Páginas Web,
emblema.art.br Dreamweaver CS5, Fireworks CS5
webdemais.com.br Editora Abril:
Coleção Clique a Clique, O curso de
• Docente, palestrante e informática da Abril
consultora nas área de Presença digital:
Web e Computação Gráfica meadiciona.com/ana_laura
• Colaboradora do W3C
Escritório Brasil
2

3. Agenda
• Compreender o meio • Dicas práticas
– Web – Conteúdo
– Web Mobile – Interação
– Layout
– Planejamento
– Desenvolvimento
– Testes
3

4. A Web somos nós

5. Cada um de nós
5

6. Usuários
• Perfil básico • Interação
• Expectativa • Experiência
• Objetivo • Informação
6

7. Web Mobile
• Perfil básico • Onde ele está?
• O que vai fazer? • A que horas?
• De que forma? • Qual aparelho?
7

8. Não é só tamanho...

9. Tipo
• celular
• tablets
• e-readers

10. Capacidade
• touch • OS
• caneta • linguagens
• memória • navegador
• bateria
10

11. Cenários de uso - físico
• luz • andando / parado
• tráfego • WiFi / 3G
• apertado

12. Cenários de uso - mental
• nervoso / calmo Estado de espírito
• atento / disperso 
• pressa / tranquilo Predisposição / Expectativa

13. Estatísticas - acessos
fixo
70 milhões
celular
22 milhões
Fevereiro, 2011 | http://bit.ly/hrUBbg
13

14. Estatísticas - aparelhos
Smartphones
Hoje: 5,8%
Ano:  165%
Celulares
Ano:  21% novembro, 2011 | http://bit.ly/uZpl2w
14

15. Estatísticas - navegadores web
15

16. Estatísticas - navegadores web
16

17. Estatísticas - navegadores web
17

18. Dicas – conteúdo
Atenção...
Estado de espírito...
Procura por fatos.
AGORA!
Seja 100% relevante
18

19. Dicas – conteúdo
Simplicidade
+
Objetividade
19

20. Dicas – conteúdo
O que é mais
importante
aparece no
topo da página
20

21. Dicas – conteúdo
Conteúdo Forma Interação
XHTML-MP CSS2 JavaScript
HTML5 CSS3 [DOM]
21

22. Dicas – conteúdo
22

23. Dicas – conteúdo
Evite o que não vai funcionar
• framesets • mapa de imagem
• tabelas • css e scripts inline
• tabelas aninhadas • plugins e extensões
23

24. Dicas – conteúdo
Estratégias de adaptação
não fazer nada
• contar com o zoom do aparelho
um conteúdo e vários estilos
• viewport
• media queries
Um site novo
24

25. Dicas – conteúdo
Estratégias de adaptação - viewport
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="Viewport" content="width=device-width" />
25

26. Dicas – conteúdo
Estratégias de adaptação – media queries
http://www.w3.org/TR/css3-mediaqueries
Folha de estilos interna
@media screen and (min-width:801px){
/* definições para telas com largura maior que 801px */
}
26

27. Dicas – conteúdo
Estratégias de adaptação – media queries
Folha de estilos externa
<link href="normal.css" rel="stylesheet" type="text/css"
media="screen and (min-width:801px)" />
<link href=“tablet.css" rel="stylesheet" type="text/css"
media="screen and (min-width:321px) and (max-width:800px)" />
<link href="celular.css" rel="stylesheet" type="text/css"
media="screen and (max-width:320px)" /> 27

28. Dicas – interação
• lembre-se dos
gestos
• não tem
mouse over
• projetar para
o tamanho do
dedo (40/80px)
28

29. Dicas – interação
• rolagem vertical
(conteúdo e menu)
• navegação fácil de
aprender
29

30. Dicas – interação
• links e acessos
inteligentes
• acesso ao site
normal
30

31. Dicas – interação
• evitar excesso de
entrada de dados
– entrada de senha
com visualização
– lembrar as opções do
usuário
• HTML5 local storage
• usar as informações
do aparelho
31

32. Dicas – interação
• facilitar a entrada
de dados (HTML5)
– input type=“url”
– input type=“email”
– input type=“number”
– input type=“tel”
32

33. Dicas – layout
• usar poucas fontes
na página (2 ou 3)
• usar o espaço em
branco para separar
os elementos
• não criar distrativos
e empecilhos para
acesso ao conteúdo 33

34. Dicas – layout
• usar poucas cores e
gráficos/imagens
• otimizar imagens
• não usar background
com fotos
• usar ícones como
background no CSS
34

35. Dicas – layout
• dê ao usuário
opções de layout
claro e escuro
• manter
consistência com
versão desktop
35

36. Dicas – planejamento
36

37. Dicas – planejamento
Sitemap: writemaps.com
37

38. Dicas – planejamento
Sitemap: xmind.net
38

39. Dicas – planejamento
Wireframe: Blog spark (bit.ly/fSE77l)
39

40. Dicas – planejamento
Wireframe: User Zen (bit.ly/eckXKE )
40

41. Dicas – desenvolvimento
• Bibliotecas
e scripts:
– Modernizr
modernizr.com
– JQuery Mobile
jquerymobile.com
– Boilerplate
html5boilerplate.com/mobile
41

42. Dicas – desenvolvimento
• Foco no
usuário
– experiência
de uso
– não focar no
aparelho mas
no recurso
42

43. Dicas – testes
43

44. Dicas – testes
Servidor de testes
• Online
• Na sua máquina:
– XAMPP: apachefriends.org/pt_br/xampp.html
– EasyPHP: easyphp.org
– ou qualquer outro servidor para poder testar
44

45. Dicas – testes
Simuladores
• Windows Phone -
create.msdn.com/en-US
45

46. Dicas – testes
Simuladores
• Android -
developer.android.com
– java SE develepment kit
– android SDK
• AVD manager
• SDK manager
46

47. Dicas – testes
Simuladores
• Opera mobile -
opera.com/developer/tools
47

48. Dicas – testes
Navegadores
IE: já está pronto
F12
Ferramentas > Alterar cadeia de
caracteres do agente do usuário
48

49. Dicas – testes
Navegadores
Safari: já está pronto
editar > preferencias > avançado >
mostrar menu Desenvolvedor na barra
de menus
desenvolvedor > agente do usuário
49

50. Dicas – testes
Navegadores
FF: instalar user agent switcher add-on
addons.mozilla.org/en-
US/firefox/addon/user-agent-switcher
ferramentas > default use agent >
escolher um ou adicionar
50

51. Dicas – testes
Adobe Device Central
Visualizar o conteúdo em uma grande
variedade de dispositivos.
– A aparência dos dispositivos
– Como o conteúdo é exibido nesses
dispositivos
Interagir, testar os níveis de
desempenho, os estados da rede, a
memória, os níveis de potência da
bateria e tipos de iluminação
51

52. Dicas – testes
User agent strings
www.useragentstring.com
• indica o nome da aplicação, versão, sistema
operacional e algumas características do
computador.
• ao acessar um site, o navegador envia esta string
para o servidor que, se necessário, responde a
cada requisição de acordo com o visitante.
52

53. Dicas – referências
Melhores práticas w3.org/TR/mobile-bp
Quirksmode quirksmode.org/mobile
Safari bit.ly/kXGKrH
Android bit.ly/ey83FF
Internet Explorer bit.ly/bWNCJ0
Mozilla (Fennec) mzl.la/sBYOz
Opera bit.ly/sUiAL
53

54. Obrigada e sucesso 
@analauragomes :: www.emblema.art.br
analauragomes@gmail.com :: www.webdemais.com.br
Fireworks: fireworksbr.groups.adobe.com
Dreamweaver: augdwbr.groups.adobe.com
54