Responsive Web Design

Globalcode – Open4education

Responsive Web DesignManoel dos Santos

[email protected] @manoeldossantos


Quem?


Respons... O quê?

1 HTML = Vários dispositivos


Vários Dispositivos


W3C diz:

A web deve ser acessível por qualquer pessoa em qualquer lugar.


Vale o esforço?

1 em 5 usuários acessam a internet de dispositivos móveis todo os dias

O tráfego de dados móveis quase triplicou em 2010. Mantendo a tendências dos últimos 3 anos.

Acesso a internet por dispositivos móveis deve ultrapassar a de desktops entre 3 a 5 anos.

Vídeo-games e televisões atuais estão vindo com acesso a internet.


Responsive Web Design é

“Uma grid flexível, com imagens flexíveis e que incorpore media queries para criar um layout

adaptável e responsivo”

Ethan Marcotte (@beep)http://www.alistapart.com/articles/responsive-web-design/



Responsive Web Design não é

Mobile design


Legal! Como eu começo?

Foco no conteúdo

Mobile First


Recapitulando

Grid Flexível

Imagens Flexíveis

Media Queries


Grid Flexível

Divida o site em módulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a necessidade

Utilize ems e % para dimensionar estas partes

Elemento / context = resultado


Imagens Flexíveis

Use Javascript para carregar imagens no tamanho apropriado

https://github.com/filamentgroup/responsive-images

Problemas de redimensionamentohttp://unstoppablerobotninja.com/entry/fluid-images


Media Queries

<link rel=“stylesheet” media=“screen and (max-device-width:640px)” />

@media screen and (max-device-width:640px) {

.sidebar {

float:none;

}

}


Quem usa isso?

http://www.hicksdesign.co.uk/

http://www.stpaulsschool.org.uk/

http://yiibu.com/

http://huffduffer.com/

http://thinkvitamin.com/


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

Business

Responsive Web Design