2. Jackson F. de A. Mafra
http://about.me/jacksonfdam
https://bitbucket.org/jacksonfdam
https://github.com/jacksonfdam
http://linkedin.com/in/jacksonfdam
http://www.slideshare.net/jacksonfdam
@jacksonfdam
Globalcode – Open4education
3. O que você faz para ser mobile?
/ˈmə
ʊ.baɪl/ mobaiou
British
/ˈmo
ʊ.bəl/ mobou
American
Globalcode – Open4education
4. Clique para adicionar um
título
Clique para adicionar
um texto
Comprar esse mobile para mim!
Globalcode – Open4education
5. Clique para adicionar um
título
Clique para adicionar
um texto
Muitas empresas tratam
o mobile como uma
apresentação do
PowerPoint, Keynote,
Impress.
Legenda da imagem fodastica.
Globalcode – Open4education
6. Estratégia?
Contrata-se os melhores Designers
Contrata-se os melhores Redatores
Contrata-se os melhores Desenvolvedores
Ou não
Estagiário com as melhores qualificações do
mercado, ou não..
Todos os direitos reservados e devidamente pagos, ou não
Globalcode – Open4education
7. Conteúdo embarcado ou dinâmico?
SMS ou Push Notification? Tablet ou Smartphone?
Bootstrap ou Foundation? Mobile Only ou Responsivo?
Android ou iOS? HTML5 ou XHTML Mobile?
Nativo ou Phonegap? Comprimir ou Imageset
Windows Phone ou Blackberry? Aplicativo ou Mobile Site?
Online ou Offline?
Otimizado ou Adpatado? RWD ou RESS?
Globalcode – Open4education
8. Mobile
Historicamente, a maioria dos designers e seus
clientes abordavam o lado desktop no início do
projeto, deixando a parte mobile como um objetivo
secundário que executava mais tarde. Mesmo
com a adoção do design responsivo, muitos de
nós começam com o "tamanho total" do site e
trabalham a partir desse ponto.
Globalcode – Open4education
9. Mobile
Há uma tendência crescente na indústria para
inverter o fluxo de trabalho na sua cabeça e na
verdade começar com portáteis e prosseguir até
uma versão desktop
Globalcode – Open4education
10. Título para estatísticas
Adicionar estatistícas,
números sempre
impressionam!
Há mais de 1,2 bilhão de usuários da web móvel em todo o mundo.
Só nos EUA, 25% dos usuários da Web móveis são somente móvel (que
raramente usa um desktop para acessar a web)
Aplicativos móveis foram baixados 10,9 bilhões de vezes
Vendas de dispositivos móveis estão aumentando em toda a linha com mais de 85
por cento de novos aparelhos capazes de acessar a Web móvel
Globalcode – Open4education
11. Título para pausa
dramática
E os 75% deles que não são?
Obviamente, o desktop ainda é um
meio importante, para não ser
esquecido ou empurrado para segundo
plano. Então por que estamos ainda
pensando em tornar Mobile First?
Globalcode – Open4education
12. Mobile
“O Google estava indo tomar essa abordagem a
partir de agora, indo tão longe a ponto de dizer "eu
acho que é agora o projeto conjunto de todos de
nós para fazer mobile a resposta para
praticamente tudo “
Eric Schmidt, no Mobile World Congress (Barcelona)
em16/02/2010
Globalcode – Open4education
13. Mobile
1. Mobile-first força que você se concentre no
núcleo do conteúdo e funcionalidade
2. Tamanhos de tela são abundantes na web mobile
3. Novos recursos com a web móvel
4. Aperfeiçoamento progressivo
Globalcode – Open4education
14. "A PRIMEIRA COISA PARA SE
LEMBRAR DE DESIGN É
CONTEÚDO, CONTEÚDO,
CONTEÚDO."
Globalcode – Open4education
19. Performance
Em mobile, é absolutamente essencial. E apesar das
limitações de hardware e rede dos aparelhos,
71% dos usuários esperam que um site abra tão
rápido no celular quanto no Desktop.
Um site ou aplicativo mobile não otimizado
simplesmente não será usado.
Globalcode – Open4education
20. Performance
1 – Habilite GZIP
2 – Minifique JavaScript
3 – Minifique CSS
4 – Comprima o HTML
16 – Coloque o JavaScript no fim
17 – Coloque o CSS no topo
18/ 19 – Adie o carregamento do que puder
5 – Não redimensione imagens no HTML
e Abuse do carregamento assíncrono
6 – Otimize as imagens
20 – Otimize o First-View e o Above the
7 – Pense no formato das imagens
Fold Time
8 – Diminua cookies e headers
21 – Design performático
9 – Junte arquivos JavaScript
10 – Juntar arquivos CSS
22 – Automatize
11 – Use Sprites
23 – Use ferramentas de diagnóstico
12 – Use Data URIs
24 – Pré-carregue componentes
13 – Configure os headers
25 – Escreva código eficiente
14 – Tire firulas do design
15 – Especifique o tamanho das imagens
26 – Dispare logo o onload
Globalcode – Open4education
21. Performance
1 – Use onPause()/onResume
1 – O metodo +[NSData
2 – Abuse do AsyncTask, FutureTask
dataWithContentsOfURL:] dispara
3 – Styles / Themes e SVGs são seus
requests synchronos
amigos
2 – Cache (SDWebImage / AFNetwoking)
4 - Libere os cursores / recursos após o
3 – Não use a MainThread
uso
4 - Lazy Loading quando puder.
5 – Use o LogCat
5 – Use bibliotecas de log, e Benchmark
6 – É java, pare de reclamar
6 – Testes de Stress
7 – Não copie experiencias / UI de outras
plataformas.
Globalcode – Open4education
22. Referêcias
Daniel Burrus - Do You Have A Mobile First Strategy? You Should!
http://www.linkedin.com/today/post/article/20130718142414-48342529-do-you-have-a-mobile-firststrategy-you-should
Joshua Johnson - Mobile First Design: Why It’s Great and Why It Sucks
http://designshack.net/articles/css/mobilefirst/
Why should I design for Mobile-First? - Caleb Mellas
http://www.webinsation.com/why-should-i-design-for-mobile-first/
Globalcode – Open4education