Upload
adriano-trenahi
View
511
Download
3
Embed Size (px)
DESCRIPTION
Saiba o que o que é e veja algumas ferramentas sobre design responsivo
Citation preview
Design Responsivo
Adriano TrenahiGlauco Oliveira
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
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.
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 principais ações
Evita o carregamento de informações desnecessárias
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-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" />
Dicas de design e desenvolvimento
Use menos imagens e mais css3
Use o doctype HTML5
OBS: Modernizr: É uma biblioteca que permite verificar do suporte da maioria das características do HMTL 5 e CSS 3.
Inclua um link para que os usuários possam ver o site normal
.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;}
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