Design Responsivo

Adriano Trenahi
Glauco Oliveira
Porque ser Responsivo?
● África do Sul e Brasil lideram acesso à internet por
dispositivos móveis
● 69% dos internautas de...
Design Responsivo x Site Mobile

Responsivo: É quando o site automaticamente se encaixa
no dispositivo do usuário (PC, cel...
Microsoft Brasil (Site responsivo)
Barack Obama (site responsivo)
Mitt romney (mobile site)

Experiência mais
próxima do Touch,
parecida com
aplicativos.
Simples, funcional
Destaca as prin...
Romney x Obama
Facebook (site mobile)
Exemplos Nacionais

● http://www.r7.com/
● http://www.globo.com/
● http://exame.abril.com.br/
Dicas de design e desenvolvimento
Desative o autoscalling :
<meta name="viewport" content="width=device-width, initial-sca...
Dicas de design e desenvolvimento
Use menos imagens e mais css3

.redButton {
color: #B91440;
font-size: 19px;
line-height...
Ferramentas de Desenvolvimento
http://foundation.zurb.com/
http://twitter.github.com/bootstrap/
http://zeptojs.com/
Referê...
Design Responsivo
Próximos SlideShares
Carregando em…5
×

Design Responsivo

780 visualizações

Publicada em

Saiba o que o que é e veja algumas ferramentas sobre design responsivo

Publicada em: Design
0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
780
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
30
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Design Responsivo

  1. 1. Design Responsivo Adriano Trenahi Glauco Oliveira
  2. 2. Porque ser Responsivo? ● África do Sul e Brasil lideram acesso à internet por dispositivos móveis ● 69% dos internautas de 13 países acessam a rede de dispositivos móveis. ● Acessos únicos via smartphone ao Facebook cresceram 24% no último ano fonte: Accenture
  3. 3. Design Responsivo x Site Mobile Responsivo: É quando o site automaticamente se encaixa no dispositivo do usuário (PC, celular, tablet, etc.) e exibe praticamente o mesmo conteudo Mobile: É uma versão adaptada de uma página da internet para dispositivos móveis, como: telefones celulares, smartphones, iPhones e iPads, que utiliza uma interface mais funcional e que gera uma experiência mais rica.
  4. 4. Microsoft Brasil (Site responsivo)
  5. 5. Barack Obama (site responsivo)
  6. 6. Mitt romney (mobile site) Experiência mais próxima do Touch, parecida com aplicativos. Simples, funcional Destaca as principais ações Evita o carregamento de informações desnecessárias
  7. 7. Romney x Obama
  8. 8. Facebook (site mobile)
  9. 9. Exemplos Nacionais ● http://www.r7.com/ ● http://www.globo.com/ ● http://exame.abril.com.br/
  10. 10. Dicas de design e desenvolvimento Desative o autoscalling : <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> Elementos clicáveis devem ser facilmente clicáveis com o dedo (+ - 44px) Não use efeito hover nem mouseover Crie ícones para seu mobile site <!-- 57 x 57 Android and iPhone 3 icon --> <link rel="apple-touch-icon" media="screen and (resolution: 163dpi)" href=" icon57x57.png" /> <!-- 114 x 114 iPhone 4 icon --> <link rel="apple-touch-icon" media="screen and (resolution: 326dpi)" href=" icon57.png" />
  11. 11. Dicas de design e desenvolvimento Use menos imagens e mais css3 .redButton { color: #B91440; font-size: 19px; line-height: 25px; padding: 10px 30px; border: 1px solid #FFFFFF; background: -webkit-gradient(linear, left top, left bottom, from(#F2F2F2), to (#FFFFFF)); -webkit-box-shadow: 0 0 2px #E4E3E3; -webkit-border-radius: 5px; } Use o doctype HTML5 OBS: Modernizr: É uma biblioteca que permite verificar do suporte da maioria das características do HMTL 5 e CSS 3.
  12. 12. Ferramentas de Desenvolvimento http://foundation.zurb.com/ http://twitter.github.com/bootstrap/ http://zeptojs.com/ Referências Sérgio Lopes (www.sergiolopes.org) mediaqueri.es

×