mobile first - como pensar mobile
TRANSCRIPT
Mobile firstComo pensar mobile
Diogo Machadogithub.com/diogomachadodiogomachado.com@tec_diogo
PHP, Javascript, Cordova/Phonegap, Mysql, CSS e HTML
Diogo MachadoDesenvolvedor web/mobile
www.diogomachado.com
Luke WroblewskiDiretor Produto, Google
O que é pensar mobile?
Versão desktophttp://www.sebrae.com.br
Versão mobilehttp://www.sebrae.com.br
Versão desktophttp://www.ufes.br/
Versão mobilehttp://www.ufes.br/
Versão desktopSistema de requisições
Versão mobileSistema de requisições
Versão mobileSistema de requisições
Designers precisam pensar mobile
Precisamos de um hotsite para nossa
campanha
Dono empresa
Precisamos de um hotsite para nossa
campanha
Dono empresa
Ok, está pronto, vou enviar o .psd
Designer agência
Precisamos de um hotsite para nossa
campanha
Dono empresa
Ok, está pronto, vou enviar o .psd
Designer agência
Programador
Meu Deus, como vou converter
isso para mobile...
Comece sempre pela versão mobile
Faça desenhos
http://www.interfacesketch.com
Otimize o que é possível otimizar
Padrão de touch muda para cada pessoa
xNoticiasPublicaçõesCalendárioFotosGalerias
Dedo fino
xNoticiasPublicaçõesCalendárioFotosGalerias
Dedo médio
xNoticiasPublicaçõesCalendárioFotosGalerias
Dedo gordo
Sendo a maioria da população destra, ações principais podem ser colocadas
ao meio ou da esquerda da tela.
xNoticiasPublicaçõesCalendárioFotosGalerias
+
Distância
As pessoas esperam fazer o que fazem no Desktop, no
Celular
Qualquer ação que dependa de hover do
mouse precisa ser repensada.
Priorizar o conteúdo.
Relacionados
Portal de notícias
Notícias
Relacionados
Portal de notícias
Notícias
Notícias
Relacionados
Priorizar o conteúdo não é excluir informação
E sim mostrar aquilo que é mais importante
primeiro
Precisamos considerar os diferentes
dispositivos e tamanhos de tela
iphone 6s plus iphone se
2015, 30 milhões de Iphones de 4 polegadas
vendidos
As pessoas ainda gostam de aparelhos
pequenos
As pessoas ainda gostam de aparelhos
pequenos
20152016
Se o site é rápido em mobile, no desktop já estará otimizado.
Redução é a melhor prática de layout para aparelhos móveis
Considere os eventos tap, drag e swipe
Diogo Machadogithub.com/diogomachadodiogomachado.com@tec_diogo