Layouts Responsivos

19,008 views
18,957 views

Published on

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.

Published in: Technology

Layouts Responsivos

  1. 1. O que éresponsiveweb design?
  2. 2. responsivearchitectureArquitetura Responsiva é um campo que une a parte prática e depesquisa da arquitetura. Arquiteturas responsivas são aquelas queanalisam as condições do meio ambiente através de sensores, permitindoque suas construções adaptem formas, curvas, cores e até personalidadedo ambiente de forma responsiva.
  3. 3. http://www.alistapart.com/articles/responsive-web-design/
  4. 4. responsivewebdesignProjetar para uma melhor visualização, incorporando tecnologiaspadronizadas em nossos projetos para torná-los não só flexíveis, masmais adaptáveis ao dispositivo que o recebe.
  5. 5. Cases
  6. 6. Live demo
  7. 7. como começar
  8. 8. Prototipagem
  9. 9. Paper protyping
  10. 10. Front-endFramework
  11. 11. como usá-losjuntos
  12. 12. http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
  13. 13. http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
  14. 14. http://www.alistapart.com/d/dive-into-responsive-prototyping-with-foundation/code/#
  15. 15. http://lorempixel.com/
  16. 16. http://placehold.it/
  17. 17. Rápido, interativo e flexível.
  18. 18. Separe suainterface emmódulos
  19. 19. GridTextoMenuTabela...
  20. 20. Grid
  21. 21. http://www.thismanslife.co.uk/projects/lab/responsivewireframes/
  22. 22. Texto
  23. 23. http://www.netmagazine.com/tutorials/handling-typography-responsive-design
  24. 24. Menu
  25. 25. http://css-tricks.com/responsive-menu-concepts/
  26. 26. Tabela
  27. 27. http://css-tricks.com/responsive-data-tables/
  28. 28. Truques
  29. 29. ImagemResponsiva
  30. 30. VídeoResponsivo
  31. 31. http://fitvidsjs.com/
  32. 32. http://fittextjs.com/
  33. 33. Como testar?
  34. 34. Showtime
  35. 35. http://html5-pro.com/sanfona
  36. 36. Obrigado :)@bernarddeluna e @zenorocha

×