O documento discute o desenvolvimento de sites para múltiplos dispositivos. Apresenta estatísticas sobre o uso de smartphones e acesso à internet no Brasil. Recomenda o Google Web Starter Kit como uma ferramenta para desenvolvimento responsivo que facilita a criação de conteúdo para diferentes telas.

1. Google Web Starter Kit
Boilerplate & Tooling for Multi-Device Development

2. QUEM SOU EU?
Rodrigo Antinarelli
Front End Developer @ Quartel Design
http://rodrigo.vc
@rodrigo_ea

3. http://www.gdgbh.org

4. ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB
Alguns dados interessantes

5. ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB
“Brasil tem 40 milhões de consumidores
multitelas’’
“Praticamente um a cada três brasileiros
usa um smartphone.’’
Fonte: Pesquisa anual realizada pelo Google Brasil

6. ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB
Brasileiros com acesso a Internet
Fonte: Pesquisa realizada pelo CETIC.br (Centro Regional para o Desenvolvimento da
Sociedade da Informação) e divulgado na Folha de São Paulo (http://bit.ly/1jRQqql)
> Classe A - 98%
> Classe B - 80%
> Classe C - 39%
> Classes D e E - 8%
51% da população brasileira tem acesso a Internet, isso
equivale a 86 milhões de brasileiros.

7. Brasil tem 40 milhões de consumidores multitelas, afirma Google

8. 3 em cada 10 brasileiros são donos de smartphones

9. Brasil tem mais smartphones que França e Alemanha

10. Brasil já tem mais residências com notebooks do que com desktops

11. Tablet ultrapassa vendas de desktop e notebook pela 1ª vez no Brasil

13. O que nós temos a ver com isso?
De que forma temos entregado conteúdo para os usuários?
Temos usado boas práticas no desenvolvimento?
Responsive não é feature, é obrigação.

14. https://developers.google.com/web/fundamentals/

16. OLDSCHOOL

17. MODERNINHO

18. Mas e se a gente for um passo além?

19. https://developers.google.com/web/starter-kit/

20. Getting Started
Ferramentas necessárias:
→ GIT
→ Node
→ Ruby
→ Sass
→ Gulp

21. Getting Started
Terminal
$ git clone https://github.com/google/web-starter-kit.git
$ cd web-starter-kit
$ npm install
$ gulp serve

22. Getting Started
Estrutura de pastas

23. Getting Started
• Guia de estilos
• Auto reload no browser
• Sincronização multi-dispositivo
• Otimização de Performance (minificar,
concatenar…)
• Suporte a SASS

24. Getting Started
$ gulp
Terminal

25. Enchant Me
Simplify My Life
Make Me Amazing
Android User Experience Team
http://developer.android.com/design/get-started/principles.html

26. Construir experiências multi-dispositivo
não é tão difícil quanto parece.

27. O conteúdo é o aspecto
mais importante de qualquer site.
Então, vamos projetar para o conteúdo e não deixar que o
projeto limite o conteúdo.

28. that's all folks!
Obrigado :)
twitter.com/rodrigo_ea
http://rodrigo.vc