Web Design ResponsivoDicas para projetar um site Responsivo de qualidade

Hans Mösl Mídias Sociais

Contato

Web Designer /hansmosl

/hansmosl

/hansmosl

/hansmosl

/+HansPaulMöslJunior

/in/hansmosl

contato@hans.mosl.nom.br

hans.mosl.nom.br

(21) 98383-7929

Conceito Básico1

Tenha uma boa estrutura2

Cuidado com as imagens3

Bons exemplos4

Conceito Básico1

Web Design Responsivo é:

Atender bem diversos formatos de tela

priorizar conteúdo e bom uso da aplicação

gerar uma boa experiência de uso

Tenha uma boa estrutura2

Parthenon - Grécia: Construído no Séc V a.C.

Tenha uma boa estrutura2

Use uma grade flexível e prática

Começe pelo papel Planeje paracada formato

Use uma Grade Flexível e Prática

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

Começe pelo papel

Planeje para cada formato

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

Versão Desktop (1024x768)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

Versão Tablet (768x1024)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

Versão Celular (360x640)http://alistapart.com/d/responsive-web-design/ex/ex-site-mini.html

Cuidado com as imagens3

Configure imagens específicas para cada

formato

Responsive Images Community Grouphttps://responsiveimages.org/

RICG Pluginhttps://wordpress.org/plugins/ricg-responsive-images/

Reid Park Zoohttp://reidparkzoo.org/

Bons exemplos4

RICGhttps://responsiveimages.org/

Bons exemplos4

Media Querieshttp://mediaqueri.es/

Bons exemplos4

Bônus!hans.mosl.nom.br/wordcamp-2015-bonus

Obrigado!