Click here to load reader

Responsive Web Design

  • View
    2.307

  • Download
    0

Embed Size (px)

DESCRIPTION

 

Text of Responsive Web Design

2. Quem? 3. Respons... O qu?

  • 1 HTML = Vrios dispositivos

4. Vrios Dispositivos 5. W3C diz:

  • A web deve ser acessvel por qualquer pessoa em qualquer lugar.

6. Vale o esforo?

  • 1 em 5 usurios acessam a internet de dispositivos mveis todo os dias
  • O trfego de dados mveis quase triplicou em 2010. Mantendo a tendncias dos ltimos 3 anos.
  • Acesso a internet por dispositivos mveis deve ultrapassar a de desktops entre 3 a 5 anos.
  • Vdeo-games e televises atuais esto vindo com acesso a internet.

7. Responsive Web Design

  • Umagrid flexvel , comimagens flexveise que incorporemedia queriespara criar um layout adaptvel e responsivo
  • Ethan Marcotte (@beep)
  • http://www.alistapart.com/articles/responsive-web-design/

8. 9. Responsive Web Design no

  • Mobile design

10. Legal! Como eu comeo?

  • Foco no contedo
  • Mobile First

11. Recapitulando

  • Grid Flexvel
  • Imagens Flexveis
  • Media Queries

12. Grid Flexvel

  • Divida o site em mdulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a necessidade
  • Utilize ems e % para dimensionar estas partes
  • Elemento / context = resultado

13. Imagens Flexveis

  • Use Javascript para carregar imagens no tamanho apropriado
    • https://github.com/filamentgroup/responsive-images
  • Problemas de redimensionamento
    • http://unstoppablerobotninja.com/entry/fluid-images

14. Media Queries

  • @media screen and (max-device-width:640px) {
  • .sidebar {
  • float:none;
  • }
  • }

15. Quem usa isso?

  • http://www.hicksdesign.co.uk/
  • http://www.stpaulsschool.org.uk/
  • http://yiibu.com/
  • http://huffduffer.com/
  • http://thinkvitamin.com/

16. Links

  • http://www.alistapart.com/articles/responsive-web-design/
  • http://code.google.com/p/css3-mediaqueries-js/
  • https://github.com/filamentgroup/responsive-images
  • http://unstoppablerobotninja.com/entry/fluid-images

Search related