Post on 07-Jul-2015
description
Joomla para dispositivos móveis
Como adaptar seu site para tamanhos diferentes de telas
sexta-feira, 2 de setembro de 11
Hygor Budny - hygor@obiz.com.br
Obiz - www.obiz.com.br - Integrador Open Source
Quem é esse cara?!
sexta-feira, 2 de setembro de 11
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
Como assim?!... Eu estou no JoomlaDay!
sexta-feira, 2 de setembro de 11
Cenário Mobile Atual
33%
67%
Fixa Móvelestudo realizado pela Associação Brasileira de Telcomunicações (Telebrasil)
No Brasil, a internet móvel já representa dois terços das conexões no país, algo que gira em torno dos 27.9 milhões de acessos
sexta-feira, 2 de setembro de 11
Cenário Mobile Atual
A previsão é do presidente da GSMA, Franco Bernabe.
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.
sexta-feira, 2 de setembro de 11
Cenário Mobile Atual
sexta-feira, 2 de setembro de 11
Cenário Mobile Atual
sexta-feira, 2 de setembro de 11
Cenário Mobile Atual
AC / DC
sexta-feira, 2 de setembro de 11
Cenário Mobile Atual
AC / DC
AI / DI
sexta-feira, 2 de setembro de 11
Cenário Mobile Atual
AC / DC
AI / DI
sexta-feira, 2 de setembro de 11
sexta-feira, 2 de setembro de 11
sexta-feira, 2 de setembro de 11
webkit
sexta-feira, 2 de setembro de 11
sexta-feira, 2 de setembro de 11
sexta-feira, 2 de setembro de 11
sexta-feira, 2 de setembro de 11
Então, o que fazer?!
sexta-feira, 2 de setembro de 11
Foque no conteúdo... O que seu site tem para oferecer?!
sexta-feira, 2 de setembro de 11
Entenda o seu público-alvo e escolha a melhor opção para ele.
O que seu site tem para oferecer?
sexta-feira, 2 de setembro de 11
Faça wireframes e separe o site em módulos
sexta-feira, 2 de setembro de 11
“Responsive web-design”, é hype?!
sexta-feira, 2 de setembro de 11
É mais uma ferramenta a nosso favor!
sexta-feira, 2 de setembro de 11
Utilizando Media Queries
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Coloque o zoom no lugar
fonte: https://developer.mozilla.org/en/mobile/viewport_meta_tag
sexta-feira, 2 de setembro de 11
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
Algumas ferramentas
sexta-feira, 2 de setembro de 11
O que os outros estão fazendo?!
http://colly.com/
Mr. Simmon Collison
sexta-feira, 2 de setembro de 11
O que os outros estão fazendo?!
http://thinkvitamin.com/
Think Vitamin Blog
sexta-feira, 2 de setembro de 11
O que os outros estão fazendo?!
http://www.mediaqueri.es/
sexta-feira, 2 de setembro de 11
And One More Think
sexta-feira, 2 de setembro de 11
“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
Obrigado!
sexta-feira, 2 de setembro de 11
hygor@obiz.com.br
blog.obiz.com.br
slideshare.net / obiz
www.eventials.com / jdbr11
Obrigado
sexta-feira, 2 de setembro de 11