Responsive Web Design

Globalcode – Open4education

Responsive Web DesignManoel dos Santos

manoeldossantos@gmail.com @manoeldossantos

Globalcode – Open4education

Quem?

Globalcode – Open4education

Respons... O quê?

1 HTML = Vários dispositivos

Globalcode – Open4education

Vários Dispositivos

Globalcode – Open4education

W3C diz:

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

Globalcode – Open4education

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.

Globalcode – Open4education

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/

Globalcode – Open4education

Globalcode – Open4education

Responsive Web Design não é

Mobile design

Globalcode – Open4education

Legal! Como eu começo?

Foco no conteúdo

Mobile First

Globalcode – Open4education

Recapitulando

Grid Flexível

Imagens Flexíveis

Media Queries

Globalcode – Open4education

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

Globalcode – Open4education

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

Globalcode – Open4education

Media Queries

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

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

.sidebar {

float:none;

}

}

Globalcode – Open4education

Quem usa isso?

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

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

http://yiibu.com/

http://huffduffer.com/

http://thinkvitamin.com/

Globalcode – Open4education

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