Layouts Responsivos

Não basta acrescentar media-queries em seu projeto web para torná-lo responsivo. Neste painel o campuseiro poderá repensar o Design, tendo como foco a interação do usuário em diferentes cenários e devices, além do impacto no Front-end dessas adaptações.

3. O que é
responsive
web design?

6. responsive
architecture
Arquitetura Responsiva é um campo que une a parte prática e de
pesquisa da arquitetura. Arquiteturas responsivas são aquelas que
analisam as condições do meio ambiente através de sensores, permitindo
que suas construções adaptem formas, curvas, cores e até personalidade
do ambiente de forma responsiva.

8. http://www.alistapart.com/ar
ticles/responsive-web-
design/

9. responsive
webdesign
Projetar para uma melhor visualização, incorporando tecnologias
padronizadas em nossos projetos para torná-los não só flexíveis, mas
mais adaptáveis ao dispositivo que o recebe.

10. Cases

14. Live demo

17. como começar

18. Prototi
pagem

19. Paper protyping

21. Front-end
Framework

22. como usá-los
juntos

23. http://www.alistapart.com/ar
ticles/dive-into-responsive-
prototyping-with-foundation/

24. http://www.alistapart.com/ar
ticles/dive-into-responsive-
prototyping-with-foundation/

25. http://www.alistapart.com/d/
dive-into-responsive-
prototyping-with-
foundation/code/#

26. http://lorempixel.com/

27. http://placehold.it/

28. Rápido, interativo e flexível.

30. Separe sua
interface em
módulos

31. Grid
Texto
Menu
Tabela
...

32. Grid

33. http://www.thismanslife.co.uk/p
rojects/lab/responsivewirefram
es/

34. Texto

35. http://www.netmagazine.com/tu
torials/handling-typography-
responsive-design

36. Menu

37. http://css-
tricks.com/responsive-menu-
concepts/

38. Tabela

39. http://css-
tricks.com/responsive-data-
tables/

41. Truques

42. Imagem
Responsiva

45. Vídeo
Responsivo

47. http://fitvidsjs.com/

48. http://fittextjs.com/

49. Como testar?

51. Showtime

52. http://html5-pro.com/sanfona

53. Obrigado :)
@bernarddeluna e @zenorocha