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