Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Avatar for Eduardo Shiota Yasuda

Eduardo Shiota Yasuda

August 05, 2012
Tweet

More Decks by Eduardo Shiota Yasuda

Other Decks in Programming

Transcript

  1. 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; }
  2. Target ÷ Contexto = Dimensão 70px ÷ 16px = 4.375em

    80px ÷ 70px = 1.142857143 24px ÷ 16px = 1.5em 32px ÷ 24px = 1.333333
  3. 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 */ }
  4. #container { width: 1000px; } .main-content { float: left; width:

    660px; margin-right: 20px; } .side-content { float: left; width: 320px; }
  5. Target ÷ Contexto = Dimensão 1000px = 100% 660px ÷

    1000px = 66% 20px ÷ 1000px = 2% 320px ÷ 1000px = 32%
  6. #container { width: 100%; } .main-content { float: left; width:

    66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */ } .side-content { float: left; width: 32%; /* 32px ÷ 1000px */ }
  7. .blog-post .alignright { float: right; margin: 0 0 20px 16px;

    } .blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px; }
  8. .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; }
  9. $(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" }); });
  10. 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
  11. 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}]?)]* ]
  12. @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
  13. 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)
  14. @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 }
  15. 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
  16. Physical Pixels: Imagens 4x maiores (2x width / 2x height)

    Virtual Pixels: Dimensões virtuais, imagens redimensionadas
  17. #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
  18. “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/[email protected]); 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; } }
  19. @media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a {

    background-image: url(../images/[email protected]); -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
  20. <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>
  21. 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