Design Responsivo

  • View
    510

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Text of Design Responsivo

  • 1. Design ResponsivoAdriano Trenahi Glauco Oliveira

2. Porque ser Responsivo? frica do Sul e Brasil lideram acesso internet por dispositivos mveis 69% dos internautas de 13 pases acessam a rede de dispositivos mveis. Acessos nicos via smartphone ao Facebook cresceram 24% no ltimo anofonte: Accenture 3. Design Responsivo x Site MobileResponsivo: quando o site automaticamente se encaixa no dispositivo do usurio (PC, celular, tablet, etc.) e exibe praticamente o mesmo conteudo Mobile: uma verso adaptada de uma pgina da internet para dispositivos mveis, como: telefones celulares, smartphones, iPhones e iPads, que utiliza uma interface mais funcional e que gera uma experincia mais rica. 4. Microsoft Brasil (Site responsivo) 5. Barack Obama (site responsivo) 6. Mitt romney (mobile site)Experincia mais prxima do Touch, parecida com aplicativos. Simples, funcional Destaca as principais aes Evita o carregamento de informaes desnecessrias 7. Romney x Obama 8. Facebook (site mobile) 9. Exemplos Nacionais http://www.r7.com/ http://www.globo.com/ http://exame.abril.com.br/ 10. Dicas de design e desenvolvimento Desative o autoscalling : Elementos clicveis devem ser facilmente clicveis com o dedo (+ - 44px) No use efeito hover nem mouseover Crie cones para seu mobile site 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 caractersticas do HMTL 5 e CSS 3. 12. Ferramentas de Desenvolvimento http://foundation.zurb.com/ http://twitter.github.com/bootstrap/ http://zeptojs.com/ Referncias Srgio Lopes (www.sergiolopes.org) mediaqueri.es