Slides da apresentação realizada dia 29/10/2014, para a disciplina Programação para Internet I, do curso de Análise e Desenvolvimento de Sistemas da faculdade Senac Porto Alegre.

1. Web Design Responsivo Victor Melo Programação para Internet I ADS - Senac

2. 1. Introdução

3. O que é web design responsivo
Web Design Responsivo é uma abordagem de web design destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares).
“Wikipédia”

4. O que é web design responsivo
Site
Design
Conteúdo
Diversos Dispositivos
Ou seja:

5. O que é web design responsivo

6. Case Revista W
Antes:
http://revistaw.com.br/

7. Case Revista W
http://revistaw.com.br/
Depois:

8. 2. Na prática

9. •Fundação Flexível
•Media Queries
•Grids Fluídos
•Mobile First
•Otimização Tópicos

10. Fundação Flexível
É o esqueleto básico do layout:

11. Fundação Flexível
•Na mão, com medidas relativas e um pouco de matemática
•Grids Fluídos
Pode ser feita de duas formas:

12. Fundação Flexível - Medidas
(Quase) tudo é relativo
•PX para definir altura ou largura máxima
•EM ou REM para definir tamanho de fonte
max-width: 1200px; height: 700px;
•% para definir largura
width: 70%;
Font-size: 1.2em;
Font-size: 1.2rem;

13. Fundação Flexível - Fonte PX: Medida na fonte :
•Medida absoluta. Usuário não pode alterar o tamanho da fonte através de configurações do browser.
EM/REM: Adaptável,Flexível, melhor acessibilidade
•Medida relativa. Usuário pode alterar o tamanho da fonte através de configurações do browser.
Preciso, inflexível, acessibilidade ruim

14. Fundação Flexível - Fonte html { font-size: 62.5%; } EM passa a ser em base 10, ou seja: 1.5em = 15px; 1.2em = 12px; 2.5em = 25px; target ÷ context = result 1em equivale ao tamanho do font-size do body, que em geral é 16px. 1.5em = 24px Truque:
Exemplos:
24 ÷ 16 = 1.5 2em = 32px 32 ÷ 16 = 2 Fórmula EM: OBS:
•Com EM, pode-se aplicar o font- size no body.
•Com REM, apenas no html

15. Fundação Flexível - Fonte EM é relativo ao font-size do contâiner REM é relativo ao font-size do elemento html
body { font-size: 20%;
}
html { font-size: 62.5%; } Body .p1 { font-size: 1rem; } Não afetado pelo font-size do body Body .p2 { font-size: 1.6rem; } Afetado pelo font-size do body Font-size REM: * { font-size: 1.6rem; line-height:1.6rem; }

16. Fundação Flexível - Fonte
Exemplo EM vs REM

17. Fundação Flexível – Containers e Imagens
•Largura em porcentagem;
•Usar max-width ou min-width quando necessário. #container{ width: 90%; max-width: 850px; } <section id=“container”> </section> 2 Regras

18. Media Queries
“consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.”
Developer.mozilla.org

19. Media Queries Ex:
•All: Para todos os dispositivos.
•Braille: Para dispositivos táteis.
•Handheld: Para dispositivos portáteis, geralmente com telas pequenas e banda limitada.
•Print: Para impressão em papel.
•Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada. <link rel="stylesheet" media="Handheld" href="example.css" /> Media Types: definem para que tipo de media um certo código CSS é direcionado.

20. Media Queries
Handheld ou Screen? Screen Problema: Falta de padronização de aparelhos.

21. Media Queries <link rel="stylesheet" media="only screen and (max- width: 800px)" href="example.css" /> No HTML: @media screen and (max-width: 600px) { p { font-size: 20px; color: red; } }
No CSS:
Estas definições são conhecidas como breakpoints.
Dica: Solução: Definir estilo por tamanho de tela, e não por dispositivo utilizado.

22. Media Queries @media only screen and (max-width: 480px) { body{ font-size:25em; } }

23. Fundação Flexível - Viewport Viewport é o quanto de conteúdo cabe na tela, em CSS pixels, não device pixels.
Existem 3 tipos de pixels:
•Pixel do dispositivo: corresponde ao tamanho da tela do seu aparelho.
•CSS pixel: medida definida no CSS.
•Dpi pixel: quantidade de pixels que cabe em uma polegada.
A equivalência entre estes varia, dependendo do aparelho.

24. Fundação Flexível - Viewport Sem tela retina: 163dpi
Com tela retina:
326dpi
•Dois aparelhos
•mesmo tamanho de tela
•Dpis diferentes Resoluções diferentes Por isso, devemos nos preocupar com o pixel do dispositivo, e não a sua resolução.

25. Coloque no <head> o seguinte trecho: <meta name="viewport" content="width=device- width,initial-scale=1"> Fundação Flexível - Viewport
Como definir que o parâmetro é o pixel do dispositivo:

26. Exemplo Site Responsivo Responsivo na mão

27. Frameworks como Bootstrap utilizam classes para definir grids: Grids Fluídos http://getbootstrap.com/

28. Exemplo Site Responsivo Bootstrap Responsivo com Bootstrap

29. Mobile First

30. Mobile First - Características
Capacidades técnicas mais interessantes
•acelerometro
•GPS
•multitouch
•giroscópio
•etc.

31. Mobile First - Características Foco
Focar nas ações essenciais do usuário.

32. Mobile First - Características
Atenção dobrada com:
Em mobiles, decidir onde cada botão vai ser posicionado é tão essencial quanto a programação server-side ou um HTML bem feito.
•Arquitetura de Informação
•Usabilidade
•Acessibilidade

33. Otimização Pensar na experiência do usuário não é apenas fazer seu site responsivo. Mas também, torná-lo acessível. http://browserdiet.com
http://browserdiet.com

34. Otimização
Algumas dicas do BrowserDiet:
•Evite código inline/incorporado
•Prefira <link> a @import
•Comprima sua folha de estilo (CSS)
•Combine vários arquivos CSS em um só http://browserdiet.com

35. 3. Internet além dos sites

36. Internet é um ambiente de desenvolvimento de aplicações, e não apenas de sites comerciais. Você pode usar as tecnologias web pra desenvolver aplicativos e serviços.
Internet além dos sites

37. Internet além dos sites
http://www.html5gamedevelopment.com/
http://browserquest.mozilla.org/

38. Internet além dos sites
http://bjork.com/

39. Outros cenários Sites mobile são só o começo!

40. Referências
http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/
http://browserdiet.com/pt/
http://tableless.com.br/ http://sergiolopes.org/responsive-web-design/

41. Obrigado! Victor Melo victordossantosmelo@gmail.com fb.com/victormelooo