Design Responsivo

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

×