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

Joomla para dispositivos móveis

  • Upload
    obiz

  • View
    4.420

  • Download
    2

Embed Size (px)

DESCRIPTION

O foco principal da palestra é mostrar como o layout do seu template pode se adaptar aos tamanhos diferentes de telas presentes nos principais dispositivos móveis disponíveis do mercado utilizando os princípios do design responsivo através de media-queries.Uma alternativa válida se você quer manter o padrão de visualização do seu site sem que para isto precise desenvolver um template totalmente diferente para smartphones, tablets e desktops.Tópicos: 1. Apresentação do cenário mobile atual. 2. Focando no objetivo do site. 3. Grids, ferramentas e tecnologias disponíveis. 4. Dispositivos móveis e seus navegadores. 5. HTML5 / CSS3 Já posso sair utilizando? 6. Media-queries, adaptando seu layout. 7. Modelos e exemplos de design responsivo. 8.Dicas e Links relacionados.

Citation preview

Page 1: Joomla para dispositivos móveis

Joomla para dispositivos móveis

Como adaptar seu site para tamanhos diferentes de telas

sexta-feira, 2 de setembro de 11

Page 2: Joomla para dispositivos móveis

Hygor Budny - [email protected]

Obiz - www.obiz.com.br - Integrador Open Source

Quem é esse cara?!

sexta-feira, 2 de setembro de 11

Page 3: Joomla para dispositivos móveis

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

Page 4: Joomla para dispositivos móveis

Como assim?!... Eu estou no JoomlaDay!

sexta-feira, 2 de setembro de 11

Page 5: Joomla para dispositivos móveis

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

Page 6: Joomla para dispositivos móveis

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

Page 7: Joomla para dispositivos móveis

Cenário Mobile Atual

sexta-feira, 2 de setembro de 11

Page 8: Joomla para dispositivos móveis

Cenário Mobile Atual

sexta-feira, 2 de setembro de 11

Page 9: Joomla para dispositivos móveis

Cenário Mobile Atual

AC / DC

sexta-feira, 2 de setembro de 11

Page 10: Joomla para dispositivos móveis

Cenário Mobile Atual

AC / DC

AI / DI

sexta-feira, 2 de setembro de 11

Page 11: Joomla para dispositivos móveis

Cenário Mobile Atual

AC / DC

AI / DI

sexta-feira, 2 de setembro de 11

Page 12: Joomla para dispositivos móveis

sexta-feira, 2 de setembro de 11

Page 13: Joomla para dispositivos móveis

sexta-feira, 2 de setembro de 11

Page 14: Joomla para dispositivos móveis

webkit

sexta-feira, 2 de setembro de 11

Page 15: Joomla para dispositivos móveis

sexta-feira, 2 de setembro de 11

Page 16: Joomla para dispositivos móveis

sexta-feira, 2 de setembro de 11

Page 17: Joomla para dispositivos móveis

sexta-feira, 2 de setembro de 11

Page 18: Joomla para dispositivos móveis

Então, o que fazer?!

sexta-feira, 2 de setembro de 11

Page 19: Joomla para dispositivos móveis

Foque no conteúdo... O que seu site tem para oferecer?!

sexta-feira, 2 de setembro de 11

Page 20: Joomla para dispositivos móveis

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

Page 21: Joomla para dispositivos móveis

Faça wireframes e separe o site em módulos

sexta-feira, 2 de setembro de 11

Page 22: Joomla para dispositivos móveis

“Responsive web-design”, é hype?!

sexta-feira, 2 de setembro de 11

Page 23: Joomla para dispositivos móveis

É mais uma ferramenta a nosso favor!

sexta-feira, 2 de setembro de 11

Page 24: Joomla para dispositivos móveis

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

Page 25: Joomla para dispositivos móveis

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

Page 26: Joomla para dispositivos móveis

Algumas ferramentas

sexta-feira, 2 de setembro de 11

Page 27: Joomla para dispositivos móveis

O que os outros estão fazendo?!

http://colly.com/

Mr. Simmon Collison

sexta-feira, 2 de setembro de 11

Page 28: Joomla para dispositivos móveis

O que os outros estão fazendo?!

http://thinkvitamin.com/

Think Vitamin Blog

sexta-feira, 2 de setembro de 11

Page 29: Joomla para dispositivos móveis

O que os outros estão fazendo?!

http://www.mediaqueri.es/

sexta-feira, 2 de setembro de 11

Page 30: Joomla para dispositivos móveis

And One More Think

sexta-feira, 2 de setembro de 11

Page 31: Joomla para dispositivos móveis

“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

Page 32: Joomla para dispositivos móveis

Obrigado!

sexta-feira, 2 de setembro de 11

Page 33: Joomla para dispositivos móveis

[email protected]

blog.obiz.com.br

slideshare.net / obiz

www.eventials.com / jdbr11

Obrigado

sexta-feira, 2 de setembro de 11