Mobile first - Um novo paradigma

14/04/2014

Mobile firstum novo paradigma

Alexandre Magno

Monday, May 12, 2014

Desenvolver para celular primeiro?

Pensando Mobile First como melhor estratégia de desenvolvimento


Alexandre MagnoQuem sou eu?


Autor


Otima referência

www.lukew.com/aboutMonday, May 12, 2014

Quebrar paradigmas


Quebrar paradigmas


Mas por que devo fazer isto?

antes

Agora


Depois


Estatísticas


Ignore desktop até ter uma versão mobile

http://cochichous.herokuapp.comMonday, May 12, 2014

http://cochichous.herokuapp.com

http://cochichous.herokuapp.com

Contexto antigo

http://www.slideshare.net/bradfrostwebMonday, May 12, 2014

http://www.slideshare.net/bradfrostweb

http://www.slideshare.net/bradfrostweb

Novo contexto


Exemplo Antes

10%

80%


Exemplo Agora

10%

80%



Internet no celular

http://exame.abril.com.br/tecnologia/noticias/25-dos-brasileiros-entram-mais-na-internet-pelo-celular






Mobile Web x Mobile App

✤ Um não exclui o outro

✤ Internet é feita de links(URI)

✤ A web é multiplataforma

✤ A web reside no browsers

✤ Apps apontam para sites

✤ Apps exploram recursos do dispositivo até o limite


Como fazer?

Fonte: Google


RESS Responsive design server side

✤ Resolve vários problemas do responsive

✤ Imagens já adaptadas no servidor

✤ Use com moderação

✤ Não altere o conteúdo


Unidades relativas

✤ Vamos voltar a usar o EM

✤ Porcentagens

✤ Pense fluido

✤ Fim do pixel perfect


De páginas a sistema

✤ Seja Fluido sempre

✤ Componentes de sistema e não de páginas

✤ Atomic Design


Atomic Design


Style tiles


Mobile First é só a ponta


Tem mais...


Sua preocupação agora é outra


Pare de assumir pelo usuário

“Usuários do celular não fazem isto”Mentiroso


Tudo começa aqui

<meta name="viewport" content="width=device-width, initial-scale=1" />


Desktop first x Mobile First

/* Desktop-first styles: Avoid */.column { float: left; width: 50%;}

@media all and (max-width: 50em) { .column { float: none; width: auto; }}

/* Mobile-first styles FTW */@media all and (min-width: 50em) { .column { float: left; width: 50%; }}


Desktop first x Mobile First

/* Desktop-first styles: Avoid */a:hover { color: red;}

@media all and (max-width: 50em) { a:hover { color: blue; }} /* Mobile-first styles FTW */

@media all and (min-width: 50em) { a:hover { color: red; }}


Pense no dispositivo

<a href=”tel:+552197654324”>Ligar para mim</a>


Design no browser

✤ Vá para o browser o quanto antes!

✤ Faça protótipos utilizando algum framework


Frameworks


Photoshop morreu?


Revendo o Photoshop

“Eu ainda uso o Photoshop, mas eu uso diferente. Não uso mais pra descrever exatamente como um site deve ficar. Ao invés disto, eu uso para fazer layouts rápidos

sobre exploração e criação de padrões de interface”Trent Walton.


Ele ainda tem seu uso


Photoshop morreu?

http://photoshopetiquette.com/


http://photoshopetiquette.com

http://photoshopetiquette.com

Tratando imagens

✤ Soluções no servidor para resolver imagem

✤ Considerando o corte da imagem(art direction)

✤ Sourceset

✤ Tag Picture

✤ Picturefill


Tag Picture, sourceset e picturefill

http://scottjehl.github.io/picturefillMonday, May 12, 2014

http://scottjehl.github.io/picturefill

http://scottjehl.github.io/picturefill

Tratando vídeos

fitvidsjs.comMonday, May 12, 2014

Tratando textos

http://fittextjs.com/




Estamos fazendo certo?


Sem foco no conteúdo


JS - Condicional loading


Desenvolvimento front-end limpoPrioridade ao uso de bibliotecas nativas

JS

if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the javascript application }


Com Mobile First

✤ Mais simples (foco)

✤ Flexibilidade

✤ Simplicidade

✤ Future friendly


[email protected]

twitter.com/alexanmtz

github.com/alexanmtz

alexandremagno.net

Contatos


mailto:[email protected]

mailto:[email protected]

http://www.github.com/alexanmtz






