Web Design Responsivo

Dicas para projetar um site Responsivo de qualidade

Contato
contato@hans.mosl.nom.br
hans.mosl.nom.br
(21) 98383-7929

Hans Msl
Web Designer

Mdias Sociais
/hansmosl
/hansmosl
/hansmosl
/hansmosl
/+HansPaulMslJunior
/in/hansmosl

Conceito Bsico

Tenha uma boa estrutura

Cuidado com as imagens

Bons exemplos

Conceito Bsico
Web Design Responsivo :

Atender bem diversos

formatos de tela

priorizar contedo e
bom uso da aplicao

gerar uma boa

experincia de uso

Tenha uma boa estrutura

Parthenon - Grcia: Construdo no Sc V a.C.

Tenha uma boa estrutura

Use uma grade

flexvel e prtica

Comee pelo papel

Planeje para
cada formato

Use uma Grade Flexvel e Prtica

Comee pelo papel

http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/05/wireframe-sketch-07.jpg

Planeje para cada formato

http://boatboat001.com/upload/img/responsive_design.png

Verso Desktop (1024x768)

http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

Verso Tablet (768x1024)

http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

Verso Celular (360x640)

http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

Cuidado com as imagens

Configure imagens
especficas para cada
formato

Responsive Images Community Group

https://responsiveimages.org/

RICG Plugin

https://wordpress.org/plugins/ricg-responsive-images/

Bons exemplos

Reid Park Zoo

http://reidparkzoo.org/

Bons exemplos

RICG

https://responsiveimages.org/

Bons exemplos

Media Queries

http://mediaqueri.es/

Bnus!
hans.mosl.nom.br/wordcamp-2015-bonus


Obrigado!