Responsive Web Design e a Ubiquidade da Web

Responsive Web Design e a Ubiquidade da Web

Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos?

O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.

Fa59eb5159c978e2577e65f45fa9171f?s=128

Eduardo Shiota Yasuda

August 05, 2012
Tweet

Transcript

  1. 6.
  2. 7.
  3. 8.
  4. 9.
  5. 10.
  6. 11.
  7. 12.
  8. 24.
  9. 28.
  10. 30.

    body { font: normal normal 14px/21px "cabin", sans-serif; } .headline

    h1 { font: normal bold 70px/80px "enriqueta", serif; } .headline p { font-size: 24px; line-height: 32px; }
  11. 34.

    Target ÷ Contexto = Dimensão 70px ÷ 16px = 4.375em

    80px ÷ 70px = 1.142857143 24px ÷ 16px = 1.5em 32px ÷ 24px = 1.333333
  12. 35.

    body { font: normal normal 100%/1.5 "cabin", sans-serif; } .headline

    h1 { /* 70px ÷ 16px & 80px ÷ 70px */ font: normal bold 4.375em/1.142857143 "enriqueta", serif; } .headline p { font-size: 1.5em; /* 24px ÷ 16px */ line-height: 1.333333; /* 32px ÷ 24px */ } .blog-post .post-content { font-size: .875em; /* 14px ÷ 16px */ }
  13. 36.
  14. 38.

    #container { width: 1000px; } .main-content { float: left; width:

    660px; margin-right: 20px; } .side-content { float: left; width: 320px; }
  15. 40.

    Target ÷ Contexto = Dimensão 1000px = 100% 660px ÷

    1000px = 66% 20px ÷ 1000px = 2% 320px ÷ 1000px = 32%
  16. 41.

    #container { width: 100%; } .main-content { float: left; width:

    66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */ } .side-content { float: left; width: 32%; /* 32px ÷ 1000px */ }
  17. 44.

    .blog-post .alignright { float: right; margin: 0 0 20px 16px;

    } .blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px; }
  18. 47.

    .blog-post .alignright { float: right; margin: 0 0 20px 16px;

    width: 40%; } .blog-post .alignright img { max-width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; }
  19. 48.
  20. 49.
  21. 51.
  22. 52.
  23. 53.

    $(function () { $(“#site-content”).find(“.main-content”).fitVids(); // FitText's formula: // // fontSize

    = elementWidth / (compressor * 10) // fontSize = 70 // elementWidth = 1000 // compressor = 100/70 = 1.428571429 $("#site-content") .find(".headline h1") .fitText(1.428571429, { minFontSize: "36px", maxFontSize: "96px" }); });
  24. 55.

    all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

    Tipos Features color color-index (min | max-)aspect-ratio (min | max-)device-aspect-ratio (min | max-)device-height (min | max-)device-width (min | max-)height (min | max-)width grid monochrome orientation (min | max-)resolution scan -webkit-(min | max-)device-pixel-ratio
  25. 56.

    ou <link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1200px)” /> @media screen

    and (max-width: 1200px) { /* insert styles here */ } Sintaxe Uso [only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]* [, [only | not]? {tipo} and ({feature}: [:{valor}]?) [and ({feature}[:{valor}]?)]* ]
  26. 57.

    @media print and (max-width:21cm) {} @media all and (max-width: 1024px)

    {} @media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px), only screen and (-webkit-device-aspect-ratio:1.5) {} Exemplos
  27. 58.

    Exemplos @media only screen and (orientation:landscape) and (min-device-width:768px) and (max-device-width:1024px)

    and (-webkit-min-device-aspect-ratio:1.5) {} device-width: 1024px device-height: 768px orientation: landscape -webkit-min-device-aspect-ratio: 1.5 (novo iPad)
  28. 59.

    @media screen and (max-width: 1024px) { // Diminuir a fonte

    do menu } @media screen and (max-width: 960px) { // Diminuir Header, logo e H2 // Galeria de fotos em 3 colunas // Nav fixo à esquerda // Search input maior } @media screen and (max-width: 840px) { // Diminuir H2, nav e campo de busca // Formatação de data simples } @media screen and (max-width: 767px) { // Uma coluna ao invés de duas }
  29. 60.
  30. 61.

    16 x 1 physical pixels 16 x 1 virtual pixels

    device-pixel-ratio: 1 32 x 2 physical pixels 16 x 1 virtual pixels device-pixel-ratio: 2 Normal displays “Retina” displays
  31. 63.

    Physical Pixels: Imagens 4x maiores (2x width / 2x height)

    Virtual Pixels: Dimensões virtuais, imagens redimensionadas
  32. 66.

    #site-header h1 a { display: block; width: 240px; height: 57px;

    background-image: url(../images/sprite.png); background-repeat: no-repeat; background-position: -10px -10px; overflow: hidden; text-indent: 100%; white-space: nowrap; } Normal display
  33. 68.

    “Retina” display @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1

    a { display: block; width: 240px; /* Virtual pixels, continua igual */ height: 57px; /* Virtual pixels, continua igual */ background-image: url(../images/sprite@2x.png); background-repeat: no-repeat; background-position: -10px -10px; /* Virtual pixels, continua igual */ -webkit-background-size: 260px 130px; /* Dimensionando os Physical */ -moz-background-size: 260px 130px; /* Pixels da imagem para os */ -ms-background-size: 260px 130px; /* Virtual Pixels do browser */ -o-background-size: 260px 130px; background-size: 260px 130px; overflow: hidden; text-indent: 100%; white-space: nowrap; } }
  34. 69.

    @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a {

    background-image: url(../images/sprite@2x.png); -webkit-background-size: 260px 130px; -moz-background-size: 260px 130px; -ms-background-size: 260px 130px; -o-background-size: 260px 130px; background-size: 260px 130px; } } “Retina” display
  35. 71.
  36. 73.
  37. 74.
  38. 75.

    <div data-picture data-alt="A beautiful kitty"> <div data-src="jamie_small.jpg"></div> <div data-src="jamie_medium.jpg" data-media="(min-width:

    400px)"></div> <div data-src="jamie_large.jpg" data-media="(min-width: 800px)"></div> <div data-src="jamie_extralarge.jpg" data-media="(min-width: 1000px)"></div> <!-- Fallback content for non-JS browsers. --> <noscript> <img src="external/imgs/jamie_small.jpg" alt="A beautiful kitty"> </noscript> </div>
  39. 76.

    HiSRC Usa JavaScript com jQuery, semântico, testa bandwidth, requer markup

    extra na tag <img> https://github.com/teleject/hisrc Adaptive Images Server-side, usa .htaccess e PHP http://code.google.com/p/css3-mediaqueries-js/ Picturefill Usa JavaScript, segue a proposta mais aceita entre developers sobre Responsive Images (tag <picture>) https://github.com/scottjehl/picturefill Outros O Chris Coyier, do CSS-Tricks, fez um excelente comparativo entre as diferentes técnicas (link em inglês) http://css-tricks.com/which-responsive-images-solution-should-you-use/ Responsive Images
  40. 79.
  41. 80.