View
414
Download
7
Category
Preview:
DESCRIPTION
O Mobile First veio para atender a demanda da web por adaptação ao crescente uso da internet em dispositivos móveis, mas para o desenvolvedor se adaptar a esta nova forma de pensar para web, é preciso quebrar alguns paradigmas. Nesta palestra irei mostrar o workflow de desenvolvimento pensando primeiramente em desenvolver sites adaptados para dispositivos móveis e assim tirar proveito das vantagens de se construir um site ou aplicação web em vários dispositivos.
Citation preview
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
Monday, May 12, 2014
Alexandre MagnoQuem sou eu?
Monday, May 12, 2014
Autor
Monday, May 12, 2014
Otima referência
www.lukew.com/aboutMonday, May 12, 2014
Quebrar paradigmas
Monday, May 12, 2014
Quebrar paradigmas
Monday, May 12, 2014
Mas por que devo fazer isto?
antes
Agora
Monday, May 12, 2014
Depois
Monday, May 12, 2014
Estatísticas
Monday, May 12, 2014
Ignore desktop até ter uma versão mobile
http://cochichous.herokuapp.comMonday, May 12, 2014
Contexto antigo
http://www.slideshare.net/bradfrostwebMonday, May 12, 2014
Novo contexto
Monday, May 12, 2014
Exemplo Antes
10%
80%
Monday, May 12, 2014
Exemplo Agora
10%
80%
Monday, May 12, 2014
Monday, May 12, 2014
Internet no celular
http://exame.abril.com.br/tecnologia/noticias/25-dos-brasileiros-entram-mais-na-internet-pelo-celular
Monday, May 12, 2014
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
Monday, May 12, 2014
Como fazer?
Fonte: Google
Monday, May 12, 2014
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
Monday, May 12, 2014
Unidades relativas
✤ Vamos voltar a usar o EM
✤ Porcentagens
✤ Pense fluido
✤ Fim do pixel perfect
Monday, May 12, 2014
De páginas a sistema
✤ Seja Fluido sempre
✤ Componentes de sistema e não de páginas
✤ Atomic Design
Monday, May 12, 2014
Atomic Design
Monday, May 12, 2014
Style tiles
Monday, May 12, 2014
Mobile First é só a ponta
Monday, May 12, 2014
Tem mais...
Monday, May 12, 2014
Sua preocupação agora é outra
Monday, May 12, 2014
Pare de assumir pelo usuário
“Usuários do celular não fazem isto”Mentiroso
Monday, May 12, 2014
Tudo começa aqui
<meta name="viewport" content="width=device-width, initial-scale=1" />
Monday, May 12, 2014
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%; }}
Monday, May 12, 2014
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; }}
Monday, May 12, 2014
Pense no dispositivo
<a href=”tel:+552197654324”>Ligar para mim</a>
Monday, May 12, 2014
Design no browser
✤ Vá para o browser o quanto antes!
✤ Faça protótipos utilizando algum framework
Monday, May 12, 2014
Frameworks
Monday, May 12, 2014
Photoshop morreu?
Monday, May 12, 2014
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.
Monday, May 12, 2014
Ele ainda tem seu uso
Monday, May 12, 2014
Photoshop morreu?
http://photoshopetiquette.com/
Monday, May 12, 2014
Tratando imagens
✤ Soluções no servidor para resolver imagem
✤ Considerando o corte da imagem(art direction)
✤ Sourceset
✤ Tag Picture
✤ Picturefill
Monday, May 12, 2014
Tag Picture, sourceset e picturefill
http://scottjehl.github.io/picturefillMonday, May 12, 2014
Tratando vídeos
fitvidsjs.comMonday, May 12, 2014
Tratando textos
http://fittextjs.com/
Monday, May 12, 2014
Estamos fazendo certo?
Monday, May 12, 2014
Sem foco no conteúdo
Monday, May 12, 2014
JS - Condicional loading
Monday, May 12, 2014
Desenvolvimento front-end limpoPrioridade ao uso de bibliotecas nativas
JS
if('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // bootstrap the javascript application }
Monday, May 12, 2014
Com Mobile First
✤ Mais simples (foco)
✤ Flexibilidade
✤ Simplicidade
✤ Future friendly
Monday, May 12, 2014
alexanmtz@gmail.com
twitter.com/alexanmtz
github.com/alexanmtz
alexandremagno.net
Contatos
Monday, May 12, 2014
Recommended