20
Web Design Responsivo Dicas para projetar um site Responsivo de qualidade

Web Design Responsivo WordCamp-RJ 2015

Embed Size (px)

Citation preview

Page 1: Web Design Responsivo WordCamp-RJ 2015

Web Design ResponsivoDicas para projetar um site Responsivo de qualidade

Page 2: Web Design Responsivo WordCamp-RJ 2015

Hans Mösl Mídias Sociais

Contato

Web Designer /hansmosl

/hansmosl

/hansmosl

/hansmosl

/+HansPaulMöslJunior

/in/hansmosl

[email protected]

hans.mosl.nom.br

(21) 98383-7929

Page 3: Web Design Responsivo WordCamp-RJ 2015

Conceito Básico1

Tenha uma boa estrutura2

Cuidado com as imagens3

Bons exemplos4

Page 4: Web Design Responsivo WordCamp-RJ 2015

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

Page 5: Web Design Responsivo WordCamp-RJ 2015

Tenha uma boa estrutura2

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

Page 6: Web Design Responsivo WordCamp-RJ 2015

Tenha uma boa estrutura2

Use uma grade flexível e prática

Começe pelo papel Planeje paracada formato

Page 7: Web Design Responsivo WordCamp-RJ 2015

Use uma Grade Flexível e Prática

Page 8: Web Design Responsivo WordCamp-RJ 2015

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

Começe pelo papel

Page 9: Web Design Responsivo WordCamp-RJ 2015

Planeje para cada formato

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

Page 10: Web Design Responsivo WordCamp-RJ 2015

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

Page 11: Web Design Responsivo WordCamp-RJ 2015

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

Page 12: Web Design Responsivo WordCamp-RJ 2015

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

Page 13: Web Design Responsivo WordCamp-RJ 2015

Cuidado com as imagens3

Configure imagens específicas para cada

formato

Page 14: Web Design Responsivo WordCamp-RJ 2015

Responsive Images Community Grouphttps://responsiveimages.org/

Page 15: Web Design Responsivo WordCamp-RJ 2015

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

Page 16: Web Design Responsivo WordCamp-RJ 2015

Reid Park Zoohttp://reidparkzoo.org/

Bons exemplos4

Page 17: Web Design Responsivo WordCamp-RJ 2015

RICGhttps://responsiveimages.org/

Bons exemplos4

Page 18: Web Design Responsivo WordCamp-RJ 2015

Media Querieshttp://mediaqueri.es/

Bons exemplos4

Page 19: Web Design Responsivo WordCamp-RJ 2015

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

Page 20: Web Design Responsivo WordCamp-RJ 2015

Obrigado!