O que você faz para ser Mobile? TDC2013

Trilha Mobile
Jackson F. de A. Mafra
Software Engineer

Globalcode – Open4education

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


O que você faz para ser mobile?
/ˈmə
ʊ.baɪl/ mobaiou
British
/ˈmo
ʊ.bəl/ mobou
American


Clique para adicionar um
título
Clique para adicionar
um texto

Comprar esse mobile para mim!

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.

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 


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?


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.


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


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


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?


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


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


"A PRIMEIRA COISA PARA SE
LEMBRAR DE DESIGN É
CONTEÚDO, CONTEÚDO,
CONTEÚDO."


DEGRADAÇÃO ELEGANTE
VS
APERFEIÇOAMENTO PROGRESSIVO
Graceful Degradation vs. Progressive Enhancement


DON’T SHRINK, RETHINK
Jeff Hawkins (Fundador da Palm) em 1998


A FUNCIONALIDADE
MOBILE MAIS
IMPORTANTE
A mais importante funcionalidade do seu site para um
usuário mobile é performance.


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.


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


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.


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/


OBRIGADO.


O que você faz para ser Mobile? TDC2013

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (20)

Similaire à O que você faz para ser Mobile? TDC2013

Similaire à O que você faz para ser Mobile? TDC2013 (20)

Plus de Jackson F. de A. Mafra

Plus de Jackson F. de A. Mafra (18)

O que você faz para ser Mobile? TDC2013