Tech Day 3: Slide do workshop sobre responsive web design. Esses slides foram apresentados durante o curso de 4h

1. Usando HTML5 e CSS3 para
implementar interfaces responsivas
CESAR EDU TechDay 3.0
Felipe de Albuquerque
fa@cesar.org.br

2. • Estrutura de layouts
• Media Queries
• Imagens responsivas
• Textos responsivos
• Meta tags
• Usando a Meta Tag Viewport
• Identificando os principais dispositivos e resoluções
Overview

3. Estrutura de
Layouts

4. Grids

5. Grids fluidos

6. Grids layouts
Exemplo de como seria o uso dos grids layouts

7. Box Model

8. Exemplo
Exemplo de Box Model

9. Box Fluido

10. Conversão de Medidas

11. Exemplo de Conversão de Medidas

12. Tamanho máximo e mínimo

13. Media Queries

14. Media Type
Declarando no HTML
No CSS

15. Valores do Media Type
Valores do Media Type
all Para todos os dispositivos
braille Para dispositivos táteis.
embossed Para dispositivos que “imprimem” em braille.
handheld
Para dispositivos de mão. Normalmente com telas pequenas e
banda limitada.
print Para impressão em papel.
projection Para apresentações, como PowerPoint.
screen
Para monitores ou outros dispositivos com telas coloridas e com
resolução adequada.
speech
Para sintetizadores de voz. O CSS 2 tem uma especificação de
CSS chamada Aural, onde podemos “formatar” a voz dos
sintetizadores.
tty
Para dispositivos que utilizam uma grade fixa para exibição de
caracteres, como por exemplo, teletypes, terminais, dispositivos
portáteis com display limitado.
tv
Para dispositivos como televisores, ou seja, com baixa resolução,
quantidade de cores e scroll limitado.

16. Sintaxe das Media Queries

17. Media Expressions

18. Media Values
Feature Definition
Accepts
min/max?
width width of display area/viewport yes
height height of display area/viewport yes
device-width width of device rendering surface yes
device-height height of device rendering surface yes
orientation portrait or landscape no
aspect-ratio ratio of display’s width to height (16:9, 4:3) yes
device-aspect-ratio ratio of device rendering surface width to height (16:9, 4:3) yes
color number of bits per color component of the output device yes
color-index number of entries in the color lookup table of the output device yes
monochrome number of bits per pixel in a monochrome frame buffer (0 for non-
monochrome devices)
yes
resolution resolution of the output device (pixel density; 72dpi, 300dpi) yes
scan progressive or scan for tv devices no
grid grid or bitmap (phone display with one fixed font; tty terminal) no

19. Imagens
Responsivas

20. Imagens e mídias fluidas

21. Imagens de background
Background image
Shortcut
CSS

22. Background tiles

23. Background size full image

24. Background cover full image

25. Performance de imagens responsivas

26. Soluções nativas para performance
Atributo srcset
Tag picture

27. Amenizar os problemas de performance
• Usar Media Queries para servir imagens diferentes quando necessário
• Comprimir as imagens o máximo possível em um editor gráfico
• Usar o conceito de Font Icons para substituir todos os ícones
• Fazer o máximo possível com CSS3

28. Textos
Responsivos

29. Unidades de medida e conversõesUnidades de medida e conversões

30. Unidades de medida PorcentagemUnidades de medida Porcentagem

31. Unidades de medida EMUnidades de medida EM

32. Convertendo PX em EM
Convertendo PX em EM
Convertendo PX em EM

33. Unidades de medida e conversões
Fazendo a conversão entre PX, EM, %, and PT
Unidades de medida e conversões
PX para EM
Fórmula size in pixels / parent size in pixels
Exemplo 12px / 16px = .75em
PX para %
Fórmula size in pixels / parent size in pixels * 100
Exemplo 12px / 16px * 100 = 75%
PX para PT
Fórmula size in pixels * (points per inch / pixels per inch)
Exemplo 16px * (72pt / 96px) = 12pt
EM para PX
Fórmula size in EMs * parent size in pixels
Exemplo 75em * 16px = 12px
EM para %
Fórmula size in EMs * 100
Exemplo 75em * 100 = 75%

34. Quebra de linhas automáticas

35. Reescrevendo textos com css

36. Meta Tags

37. Sintaxe das meta tags

38. Viewport

39. Usando a Meta Tag
Viewport

40. Tamanho da Tela X Resolução
Tamanho da tela é uma coisa,
e a resolução de tela é outra

41. Sintaxe das meta tags

42. Valores do content
Valor Descrição
width
Define uma largura para o viewport. Os valores podem ser em PX ou
“device-width”, que determina automaticamente um valor igual a
largura da tela do dispositivo.
height
Define uma altura para o viewport. Os valores podem ser em PX ou
“device-height”, que determina automaticamente um valor igual a
altura da tela do dispositivo.
initial-scale Define a escala inicial do viewport.
user-scalable
Define a possibilidade de o usuário fazer “zoom” em um determinado
lugar da tela. É ativado quando o usuário bate duas vezes com o dedo
em um lugar da tela.

43. Viewport size Apple family
Device Name Platform
Pixel
Density
Screen
Size
Portrait Viewport
Width
Landscape
Viewport Width
Apple iPad iOS 132dpi 9.7" 768 1024
Apple iPad 2 iOS 132dpi 9.7" 768 1024
Apple iPad 3 (and
4)
iOS 264dpi 9.7" 768 1024
Apple iPad Mini iOS 163dpi 7.9" 768 1024
Apple iPhone 3G iOS 163dpi 3.5" 320 480
Apple iPhone 3GS iOS 163dpi 3.5" 320 480
Apple iPhone 4 iOS 326dpi 3.5" 320 480
Apple iPhone 4S iOS 326dpi 3.5" 320 480
Apple iPhone 5 iOS 326dpi 4" 320 568
Apple iPod Touch iOS 163dpi 3.5" 320 480

44. Viewport size Samsung family
Device Name Platform Pixel Density Screen Size
Portrait
Viewport Width
Landscape
Viewport Width
Samsung Galaxy Ace Android 165dpi 3.5" 320 480
Samsung Galaxy Ace 2 Android 246dpi 3.8" 320 533
Samsung Galaxy Grand Android 187dpi 5" 480 800
Samsung Galaxy Note Android 285dpi 5.3" 400 640
Samsung Galaxy Note 2 Android 267dpi 5.5" 360 640
Samsung Galaxy Note 10.1 Android 149dpi 10.1" 800 1280
Samsung Galaxy S2 Android 217dpi 4.3" 320 533
Samsung Galaxy S3 Android 306dpi 4.8" 360 640
Samsung Galaxy S3 Mini Android 233dpi 4" 360 640
Samsung Galaxy S4 Android 441dpi 5" 360 640
Samsung Galaxy S4 Mini Android 256dpi 4.3" 360 640
Samsung Galaxy Tab 2 7.0 Android 170dpi 7" 600 1024
Samsung Galaxy Tab 7 Android 170dpi 7" 600 1024
Samsung Galaxy Tab 8.9 Android 170dpi 8.9" 800 1280
Samsung Galaxy Tab 10.1 Android 149dpi 10.1" 800 1280

45. Viewport Sizes Motorola family
Device Name Platform
Pixel
Density
Screen
Size
Portrait Viewport
Width
Landscape
Viewport Width
Motorola Defy Android 265dpi 3.7" 320 569
Motorola Droid3 Android 275dpi 4" 360 599
Motorola Droid Razr Android 256dpi 4.3" 360 640
Motorola Milestone Android 265dpi 3.7" 320 569
Motorola Razr HD
4G
Android 312dpi 4.7" 360 598
Motorola Razr M 4GAndroid 312dpi 4.7" 360 598
Motorola Xoom Android 149dpi 10.1" 800 1280
Motorola Xoom 2 Android 149dpi 10.1" 800 1280

46. Identificando os principais
dispositivos e resoluções

47. Identificando a orientação do dispositivo
iPads (landscape)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Regras CSS*/
}

48. Identificando Smartphones
Phone < 5
@media only screen and (max-device-width: 480px) {}

49. Device aspect ratio
iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}
iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}
iPad:
@media screen and (device-aspect-ratio: 3/4) {}

50. iPad em portrait & landscape
iPad em portrait & landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad em landscape
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPad em portrait
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

51. Dúvidas?
?

52. Obrigado!
Felipe de Albuquerque
fa@cesar.org.br