O documento discute o design responsivo para sites, definindo-o como se adaptando automaticamente ao dispositivo do usuário, ao contrário de sites mobile que são versões adaptadas especificamente. Ele fornece exemplos de sites responsivos versus sites mobile e dicas para desenvolvimento responsivo, como desativar auto-escalonamento e usar ícones apropriados.

1. Design Responsivo
Adriano Trenahi
Glauco Oliveira

3. 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

4. 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.

5. Microsoft Brasil (Site responsivo)

6. Barack Obama (site responsivo)

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

8. Romney x Obama

9. Facebook (site mobile)

10. Exemplos Nacionais
● http://www.r7.com/
● http://www.globo.com/
● http://exame.abril.com.br/

11. 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" />

12. 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.

13. 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