Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Layouts Responsivos

19,650 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

×