O documento discute como adaptar sites para dispositivos móveis. Apresenta dados sobre o cenário móvel atual e as ferramentas de "responsive web design" como media queries para criar sites responsivos em diferentes tamanhos de tela. Recomenda focar no conteúdo do site e fornecer exemplos do que outros desenvolvedores estão fazendo.

1. Joomla para
dispositivos móveis
Como adaptar seu site para tamanhos diferentes de telas
sexta-feira, 2 de setembro de 11

2. Quem é esse cara?!
Hygor Budny - hygor@obiz.com.br
Obiz - www.obiz.com.br - Integrador Open Source
sexta-feira, 2 de setembro de 11

3. O que ele vai falar?
Onde nós estamos?
O que seu site tem a oferecer?
E afinal... #comofaz ?
“Responsive web-design”, é hype?!
O que o pessoal tem feito?!
“...And one more thing!”
sexta-feira, 2 de setembro de 11

4. Como assim?!... Eu estou no JoomlaDay!
sexta-feira, 2 de setembro de 11

5. Cenário Mobile Atual
No Brasil, a internet
móvel já representa dois 33%
terços das conexões no
país, algo que gira em
torno dos 27.9 milhões 67%
de acessos
estudo realizado pela Associação Brasileira de Telcomunicações (Telebrasil) Fixa Móvel
sexta-feira, 2 de setembro de 11

6. Cenário Mobile Atual
As conexões mundiais 3G vão atingir a marca
de 500 milhões até o final de julho e,
adicionando 19 milhões de novas conexões a
cada mês, esperam chegar a 1 bilhão até o final
de 2012.
A previsão é do presidente da GSMA, Franco Bernabe.
sexta-feira, 2 de setembro de 11

7. Cenário Mobile Atual
sexta-feira, 2 de setembro de 11

8. Cenário Mobile Atual
sexta-feira, 2 de setembro de 11

9. Cenário Mobile Atual
AC / DC
sexta-feira, 2 de setembro de 11

10. Cenário Mobile Atual
AI / DI
AC / DC
sexta-feira, 2 de setembro de 11

11. Cenário Mobile Atual
AI / DI
AC / DC
sexta-feira, 2 de setembro de 11

12. sexta-feira, 2 de setembro de 11

13. sexta-feira, 2 de setembro de 11

14. webkit
sexta-feira, 2 de setembro de 11

15. sexta-feira, 2 de setembro de 11

16. sexta-feira, 2 de setembro de 11

17. sexta-feira, 2 de setembro de 11

18. Então, o que fazer?!
sexta-feira, 2 de setembro de 11

19. Foque no conteúdo... O que seu site tem para oferecer?!
sexta-feira, 2 de setembro de 11

20. O que seu site tem para oferecer?
Entenda o seu público-alvo e
escolha a melhor opção para ele.
sexta-feira, 2 de setembro de 11

21. Faça wireframes e separe o site em módulos
sexta-feira, 2 de setembro de 11

22. “Responsive web-design”, é hype?!
sexta-feira, 2 de setembro de 11

23. É mais uma ferramenta a nosso favor!
sexta-feira, 2 de setembro de 11

24. Utilizando Media Queries
Coloque o zoom no lugar
<meta name="viewport" content="width=device-width, initial-
scale=1, maximum-scale=1">
fonte: https://developer.mozilla.org/en/mobile/viewport_meta_tag
sexta-feira, 2 de setembro de 11

25. Utilizando Media Queries
Separe os estilos pela
viewport do device
Max Width:
<link rel="stylesheet" media="(max-device-width: 320px)"
href="mobile.css" />
Min Width:
<link rel="stylesheet" media="(min-width: 1200px)"
href="largescreen.css" />
Multiple Media Queries:
<link rel="stylesheet" media="(min-width: 700px) and (max-width:
1000px)" href="normalscreen.css"
http://www.boostinspiration.com/web-design/responsive-web-design-quick-guide-creative-examples/
sexta-feira, 2 de setembro de 11

26. Algumas ferramentas
sexta-feira, 2 de setembro de 11

27. O que os outros estão fazendo?!
Mr. Simmon Collison
http://colly.com/
sexta-feira, 2 de setembro de 11

28. O que os outros estão fazendo?!
Think Vitamin Blog
http://thinkvitamin.com/
sexta-feira, 2 de setembro de 11

29. O que os outros estão fazendo?!
http://www.mediaqueri.es/
sexta-feira, 2 de setembro de 11

30. And One More Think
sexta-feira, 2 de setembro de 11

31. “Se você pensa que é muito pequeno para fazer
alguma diferença, esperimente tentar dormir com
uma mosca rondando sua cabeça”
-- Steve Jobs
sexta-feira, 2 de setembro de 11

32. Obrigado!
sexta-feira, 2 de setembro de 11

33. Obrigado
hygor@obiz.com.br
blog.obiz.com.br
slideshare.net / obiz
www.eventials.com / jdbr11
sexta-feira, 2 de setembro de 11