Responsive Web Design

• 1. Responsive Web Design Manoel dos Santos [email protected]@manoeldossantos

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