13
Design Responsivo Adriano Trenahi Glauco Oliveira

Design Responsivo

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Design Responsivo

Design Responsivo

Adriano TrenahiGlauco Oliveira

Page 2: Design Responsivo
Page 3: Design Responsivo

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

Page 4: Design Responsivo

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.

Page 5: Design Responsivo

Microsoft Brasil (Site responsivo)

Page 6: Design Responsivo

Barack Obama (site responsivo)

Page 7: Design 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

Page 8: Design Responsivo

Romney x Obama

Page 9: Design Responsivo

Facebook (site mobile)

Page 10: Design Responsivo

Exemplos Nacionais

● http://www.r7.com/

● http://www.globo.com/

● http://exame.abril.com.br/

Page 11: Design Responsivo

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

Page 12: Design Responsivo

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;}

Page 13: Design Responsivo

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