Mobile First

mobile first - repensando mobile

Renato Bongiorno

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...


Como saber se precisamos adotar outra estratégia mobile além do

media queries?


http://developer.yahoo.com/yslow/

http://developer.yahoo.com/yslow/


Dica - Entenda como melhorar a performance da sua página:

http://developer.yahoo.com/performance/rules.html





Tenha um proxy e entenda o que acontece entre o seu site e o mobile:


Mobitest IO - http://mobitest.akamai.com

http://mobitest.akamai.com






HAR File - A mina de ouro...

HTTP Archive - Exibe o que acontece entre um servidor e um site








HTTP Archive - Exibe o que acontece entre um servidor e um site








HAR File - O que analisar?

Quais recursos são mais longos e demorados?

De onde vem os Javascripts?


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...


Mobile-First Responsive Web Design


Melhora progressiva


Strutured ContentPriorize seu conteúdo, ele é quem sabe sobre você!


Mobile First Media QueriesMuitos mobile browsers não entendem media

querie, então...

Inverta tudo...

1 - Regras Básicas2 - Media Queries

3 - Desktop Layout


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...


Imagens...como trabalhar?Se não der, utilize Responsive Image Server:

Sencha.io Src


Externalize processamentos externos

para Google Maps e Youtube Videos

Externalize dados estruturais em CSS...

Por que?


Mãos a obra...

1 - Finalize o layout

2 - Teste nas 02 resoluções

Mobile First

Internet