O documento fornece dicas para projetar um site responsivo de qualidade. Ele discute 1) o conceito básico de design responsivo, 2) a importância de ter uma boa estrutura com grade flexível, e 3) cuidados com imagens para diferentes formatos. Exemplos de sites responsivos bem-sucedidos são fornecidos.

1. Web Design Responsivo
Dicas para projetar um site Responsivo de qualidade
   

2. 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

3. Conceito Básico1
Tenha uma boa estrutura2
Cuidado com as imagens3
Bons exemplos4

4. 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
 
  

5. Tenha uma boa estrutura2
Parthenon - Grécia: Construído no Séc V a.C.

6. Tenha uma boa estrutura2
Use uma grade
flexível e prática
Começe pelo papel Planeje para
cada formato



7. Use uma Grade Flexível e Prática

8. http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/05/wireframe-sketch-07.jpg
Começe pelo papel

9. Planeje para cada formato
http://boatboat001.com/upload/img/responsive_design.png

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

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

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

13. Cuidado com as imagens3
Configure imagens
específicas para cada
formato


14. Responsive Images Community Group
https://responsiveimages.org/

15. RICG Plugin
https://wordpress.org/plugins/ricg-responsive-images/

16. Reid Park Zoo
http://reidparkzoo.org/
Bons exemplos4

17. RICG
https://responsiveimages.org/
Bons exemplos4

18. Media Queries
http://mediaqueri.es/
Bons exemplos4

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

20. Obrigado!
