O documento discute a abordagem "mobile first" para projetar sites, sugerindo começar com as regras básicas para mobile e depois adicionar funcionalidades para desktop através de media queries. Também recomenda testar a performance mobile usando ferramentas como Mobitest IO para analisar recursos lentos e melhorar a experiência de navegação de forma progressiva.

1. mobile first -
repensando mobile
Renato Bongiorno

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. mobile first
repensando mobile
Como saber se precisamos adotar
outra estratégia mobile além do
media queries?

4. mobile first
repensando mobile
http://developer.yahoo.com/yslow/

5. mobile first
repensando mobile
Dica - Entenda como melhorar a
performance da sua página:
http://developer.yahoo.
com/performance/rules.html

6. mobile first
repensando mobile
Tenha um proxy e entenda o que
acontece entre o seu site e o mobile:

7. mobile first
repensando mobile
Mobitest IO - http://mobitest.akamai.
com

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. 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. mobile first
repensando mobile
HAR File - A mina de ouro...

11. mobile first
repensando mobile
HAR File - O que analisar?
Quais recursos são mais longos e
demorados?
De onde vem os Javascripts?

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. mobile first
repensando mobile
Mobile-First Responsive Web Design

14. mobile first
repensando mobile
Melhora progressiva

15. mobile first
repensando mobile
Strutured Content
Priorize seu conteúdo, ele é quem sabe sobre você!

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. 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. mobile first
repensando mobile
Imagens...como trabalhar?
Se não der, utilize Responsive Image Server:
Sencha.io Src

19. mobile first
repensando mobile
Externalize processamentos externos
para Google Maps e Youtube Videos
Externalize dados estruturais em CSS...
Por que?

20. mobile first
repensando mobile
Mãos a obra...
1 - Finalize o layout
2 - Teste nas 02 resoluções