Mobile First desenvolvimento

14/04/2014
Mobile first
um novo paradigma
Alexandre Magno
Monday, May 12, 2014

Desenvolver para celular primeiro?
Pensando Mobile Firstcomo melhor estratégia de desenvolvimento

Alexandre Magno
Quem sou eu?

Otima referência
www.lukew.com/about

Quebrar paradigmas

Mas por que devo fazer isto?
antes
Agora

Estatísticas

Ignore desktopaté ter uma versão mobile
http://cochichous.herokuapp.com

Contexto antigo
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 ﬂuido
✤ 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 ﬁcar. 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/

Tratando imagens
✤ Soluções no servidor para
resolver imagem
✤ Considerando o corte da
imagem(art direction)
✤ Sourceset
✤ Tag Picture
✤ Pictureﬁll

Tag Picture, sourceset e picturefill
http://scottjehl.github.io/pictureﬁll

Tratando vídeos
fitvidsjs.com

Tratando textos
http://ﬁttextjs.com/

Estamos fazendo certo?

Sem foco no conteúdo

JS - Condicional loading

Desenvolvimento front-end limpo
Prioridade 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

alexanmtz@gmail.com
twitter.com/alexanmtz
github.com/alexanmtz
alexandremagno.net
Contatos

Mobile First desenvolvimento

Recommended

Recommended

More Related Content

Featured

Featured (20)

Mobile First desenvolvimento