O que você faz para ser Mobile? TDC2013

326 views

Published on

Lightning talk sobre mobile no TDC2013 Porto Alegre

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
326
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

O que você faz para ser Mobile? TDC2013

  1. 1. Trilha Mobile Jackson F. de A. Mafra Software Engineer Globalcode – Open4education
  2. 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. 3. O que você faz para ser mobile? /ˈmə ʊ.baɪl/ mobaiou British /ˈmo ʊ.bəl/ mobou American Globalcode – Open4education
  4. 4. Clique para adicionar um título Clique para adicionar um texto Comprar esse mobile para mim! Globalcode – Open4education
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. "A PRIMEIRA COISA PARA SE LEMBRAR DE DESIGN É CONTEÚDO, CONTEÚDO, CONTEÚDO." Globalcode – Open4education
  15. 15. DEGRADAÇÃO ELEGANTE VS APERFEIÇOAMENTO PROGRESSIVO Graceful Degradation vs. Progressive Enhancement Globalcode – Open4education
  16. 16. Globalcode – Open4education
  17. 17. DON’T SHRINK, RETHINK Jeff Hawkins (Fundador da Palm) em 1998 Globalcode – Open4education
  18. 18. A FUNCIONALIDADE MOBILE MAIS IMPORTANTE A mais importante funcionalidade do seu site para um usuário mobile é performance. Globalcode – Open4education
  19. 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. 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. 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. 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
  23. 23. OBRIGADO. Globalcode – Open4education

×