Mobile First

337 views

Published on

Aula lecionada sobre Mobile First para nível técnico no SENAC por Renato Bongiorno.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Mobile First

  1. 1. mobile first - repensando mobile Renato Bongiorno
  2. 2. mobile first repensando mobile Muitas vezes ao realizarmos um site e aplicarmos as media queries em CSS 3.0, "achamos" que adaptamos um site para mobile, quando na verdade, colocamos uma "mascara"... e o mobile na verdade é desktop...
  3. 3. mobile first repensando mobile Como saber se precisamos adotar outra estratégia mobile além do media queries?
  4. 4. mobile first repensando mobile http://developer.yahoo.com/yslow/
  5. 5. mobile first repensando mobile Dica - Entenda como melhorar a performance da sua página: http://developer.yahoo. com/performance/rules.html
  6. 6. mobile first repensando mobile Tenha um proxy e entenda o que acontece entre o seu site e o mobile:
  7. 7. mobile first repensando mobile Mobitest IO - http://mobitest.akamai. com
  8. 8. mobile first repensando mobile Mobitest IO - http://mobitest.akamai. com HAR File - A mina de ouro... HTTP Archive - Exibe o que acontece entre um servidor e um site
  9. 9. mobile first repensando mobile Mobitest IO - http://mobitest.akamai. com HAR File - A mina de ouro... HTTP Archive - Exibe o que acontece entre um servidor e um site
  10. 10. mobile first repensando mobile HAR File - A mina de ouro...
  11. 11. mobile first repensando mobile HAR File - O que analisar? Quais recursos são mais longos e demorados? De onde vem os Javascripts?
  12. 12. mobile first repensando mobile Melhora Progressiva - Construa páginas por camadas - dos recursos mínimos aos máximos recursos. Aprimore a experiência de navegação conforme a capacidade de processamento...
  13. 13. mobile first repensando mobile Mobile-First Responsive Web Design
  14. 14. mobile first repensando mobile Melhora progressiva
  15. 15. mobile first repensando mobile Strutured Content Priorize seu conteúdo, ele é quem sabe sobre você!
  16. 16. mobile first repensando mobile Mobile First Media Queries Muitos mobile browsers não entendem media querie, então... Inverta tudo... 1 - Regras Básicas 2 - Media Queries 3 - Desktop Layout
  17. 17. mobile first repensando mobile Imagens...como trabalhar? Se a imagem irá aparecer somente em uma resolução, adicione via background somente na resolução desejada... Evite o download multiplo em diversas plataformas...
  18. 18. mobile first repensando mobile Imagens...como trabalhar? Se não der, utilize Responsive Image Server: Sencha.io Src
  19. 19. mobile first repensando mobile Externalize processamentos externos para Google Maps e Youtube Videos Externalize dados estruturais em CSS... Por que?
  20. 20. mobile first repensando mobile Mãos a obra... 1 - Finalize o layout 2 - Teste nas 02 resoluções

×