design responsivo

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