Este documento discute o design responsivo na web. Primeiro, define o que é design responsivo e seus princípios, como projetar para diferentes dispositivos. Também discute as tecnologias fundamentais para o design responsivo, como HTML5, CSS3 e JavaScript. Por fim, fornece exemplos e dicas sobre como implementar design responsivo na prática.

1. Web Design Responsivo
Tiago B. dos Santos | Senac Penha

2. Quem sou eu
Nome e idade:
Tiago Bezerra dos Santos
Formação: Tecnólogo em Processamento de Dados
Atuação: Docente de Internet e Consultor GD2 Senac
@_tiagobstiago.bsantos@sp.senac.br
www.ecosdaweb.com tiago.bsantos

3. RESPONSIVO?

4. Definições

5. Somos todos responsivos!

6. Arquitetura Responsiva
Nicholas Negroponte

7. Arquitetura Responsiva
• Combinação de espaços físicos,
experimentos arquitetônicos, materiais,
sistemas de automação e robótica

8. Arquitetura Responsiva
• Sensores que ajustam a temperatura do
ambiente
• Sensores de iluminação
• Óculos que se ajustam às condições de
iluminação
• Tecnologia "Smart Glass"

9. Web Design Responsivo
Ethan Marcotte

10. Responsive Web Design (RWD)
“Projetar para o fluxo e o refluxo das coisas”
Ethan Marcotte

11. UM POUCO DE HISTÓRIA

12. Layout Fixo (anos 1990-2000)

13. Portal Terra (18/10/00)

14. Layout Líquido (anos 2000)

15. Portal Terra (31/12/05)

16. Layout Adaptativo (anos 2000)

17. Portal Terra (30/12/10)

18. Layout Responsivo (anos 2010)

19. Portal Terra (09/04/15)

20. Princípios do RWD
• Design capaz de responder às
características do dispositivo
• Movimentar, expandir e contrair
• Adaptar ao contexto onde é renderizado

21. Pilares

22. Por que HTML5?

23. Porque HTML5
• Semântico
• Novos elementos e atributos
• Bem estruturado
• Acessível e bom para SEO
• Não precisa de plugins para mídia
• Metatag viewport

24. Por que CSS3?

25. Porque CSS3
• Novos seletores, propriedades e valores
• Box Sizing
• Media Queries
• Módulos Flexbox e Grid Layout

26. Por que JavaScript?

27. Porque JavaScript
• Scripts para navegadores antigos
• Polyfills

28. COMO "FAZER" WEB DESIGN
RESPONSIVO?

29. Ingredientes
• Grid fluido
• Imagens e mídias flexíveis
• Media Queries

30. Grid Fluido
• Módulos Flexbox e Grid Layout
• Medidas relativas, como % e EM
• Base de qualquer framework

31. Imagens e Mídias Flexíveis
• Capazes de contrair e expandir suas
dimensões
• Art Direction
• Elemento <picture> e atributo srcset

32. Media Queries
• Consulta ao tipo de mídia
• Folhas de estilos de acordo com
características dos dispositivos

33. WORKFLOW
Mobile First vs Desktop First

34. Por que Mobile First?
• Explosão da tecnologia mobile
• Layout para mobile implica em otimização
• Dispositivos com cada vez mais
funcionalidades nativas
• Progressive Enhancement

35. Por que Desktop First?
• Converter projeto já existente
• Reaproveitar código legado
• Graceful Degradation

36. EXEMPLOS

37. Mitos do RWD
• Usuários utilizam dispositivos móveis
apenas na rua e a conexão é sempre
lenta
• Usuários de dispositivos móveis não
precisam do conteúdo total
• Usuários de dispositivos móveis preferem
uma experiência mais simples
• Existe uma "internet móvel"
• Breakpoints pré-definidos

38. Para refletir
“Design Responsivo deve priorizar
interfaces leves e flexíveis, sem detalhes e
efeitos desnecessários, focando em
usuários que você ainda não conhece ou
que ainda vão surgir.”
Bernard de Luna

39. Referências
• Exemplos usados na palestra: http://goo.gl/fu6Rvv
• Como começar um RWD: http://www.designculture.com.br/10-dicas-de-como-
comecar-um-design-responsivo/
• Converter PX para EM: http://pxtoem.com/
• Interface com tipos de layouts: http://www.liquidapsive.com/
• Guia sobre Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Guia sobre Grid Layout: https://css-tricks.com/snippets/css/complete-guide-grid/
• Compatibilidade & Funcionalidades: http://caniuse.com/ e http://html5please.com/
• Diversos Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
Browser-Polyfills
• Responsive Images: http://responsiveimages.org/ e
http://alistapart.com/article/responsive-images-in-practice

40. OBRIGADO!
Tiago B. dos Santos
@_tiagobs
tiago.bsantos@sp.senac.br
www.ecosdaweb.com
tiago.bsantos