Globalcode – Open4education

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

Globalcode – Open4education

O que você faz para ser mobile?/ˈməʊ.baɪl/ mobaiou

British

/ˈmoʊ.bəl/ mobou

American

Globalcode – Open4education

Clique para adicionar um

título

Clique para adicionar

um texto

Comprar esse mobile para mim!

Globalcode – Open4education

Clique para adicionar um

título

Clique para adicionar

um texto

Legenda da imagem fodastica.

Muitas empresas tratam

o mobile como uma

apresentação do

PowerPoint, Keynote,

Impress.

Globalcode – Open4education

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

Bootstrap ou Foundation?

Android ou iOS?

Nativo ou Phonegap?

Windows Phone ou Blackberry?

Mobile Only ou Responsivo?

HTML5 ou XHTML Mobile?

Comprimir ou Imageset

Aplicativo ou Mobile Site?

SMS ou Push Notification? Tablet ou Smartphone?

Online ou Offline?

Conteúdo embarcado ou dinâmico?

RWD ou RESS? Otimizado ou Adpatado?

Globalcode – Open4education

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

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

Título para estatísticas

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

Adicionar estatistícas,

números sempre

impressionam!

Globalcode – Open4education

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

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

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

"A PRIMEIRA COISA PARA SE

LEMBRAR DE DESIGN É

CONTEÚDO, CONTEÚDO,

CONTEÚDO."

Globalcode – Open4education

DEGRADAÇÃO ELEGANTE

VS

APERFEIÇOAMENTO PROGRESSIVOGraceful Degradation vs. Progressive Enhancement

Globalcode – Open4education

Globalcode – Open4education

DON’T SHRINK, RETHINK

Jeff Hawkins (Fundador da Palm) em 1998

Globalcode – Open4education

A FUNCIONALIDADE

MOBILE MAIS

IMPORTANTE

A mais importante funcionalidade do seu site para um

usuário mobile é performance.

Globalcode – Open4education

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

Performance

1 – Habilite GZIP

2 – Minifique JavaScript

3 – Minifique CSS

4 – Comprima o HTML

5 – Não redimensione imagens no HTML

6 – Otimize as imagens

7 – Pense no formato das imagens

8 – Diminua cookies e headers

9 – Junte arquivos JavaScript

10 – Juntar arquivos CSS

11 – Use Sprites

12 – Use Data URIs

13 – Configure os headers

14 – Tire firulas do design

15 – Especifique o tamanho das imagens

16 – Coloque o JavaScript no fim

17 – Coloque o CSS no topo

18/ 19 – Adie o carregamento do que puder

e Abuse do carregamento assíncrono

20 – Otimize o First-View e o Above the

Fold Time

21 – Design performático

22 – Automatize

23 – Use ferramentas de diagnóstico

24 – Pré-carregue componentes

25 – Escreva código eficiente

26 – Dispare logo o onload

Globalcode – Open4education

Performance

1 – Use onPause()/onResume

2 – Abuse do AsyncTask, FutureTask

3 – Styles / Themes e SVGs são seus

amigos

4 - Libere os cursores / recursos após o

uso

5 – Use o LogCat

6 – É java, pare de reclamar

7 – Não copie experiencias / UI de outras

plataformas.

1 – O metodo +[NSData

dataWithContentsOfURL:] dispara

requests synchronos

2 – Cache (SDWebImage / AFNetwoking)

3 – Não use a MainThread

4 - Lazy Loading quando puder.

5 – Use bibliotecas de log, e Benchmark

6 – Testes de Stress

Globalcode – Open4education

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-first-

strategy-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

OBRIGADO.