Responsive Web Designe a ubiquidade da webEduardo Shiota Yasuda@shiota | www.eshiota.com
Uma (breve) Históriado Design na Web
Tim Berners-LeePai do HTTP, HTML, diretor da W3C, e cavaleiro.
Primeira página da Webhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
Primeira Página do UOL23/12/1996 - archive.org
EVIL
HTML » Print » Table » Tableless » Standards » ?
http://1to1interactive.net/blog/?p=1718
http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html
http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html
Jeremy Keiths — @adactio — Instagram
HTML » Print » Table » Tableless » Standards »     Responsive Web Design
Responsive Web Design   Solução agnóstica à plataforma, browser e dispositivo
UOL           Close, but no cigar.Desktop   iPad Portrait    iPad Landscape   iPhone       iPhone                         ...
UOL          Close, but no cigar.Desktop                          Desktop?
The Boston Globe                ResponsiveliciousDesktop       iPad Portrait   iPad Landscape   iPhone       iPhone       ...
1. Design flexível         +2. Media Queries         +3. Ajustes e plugins
Flexible Web Design     Tipografia, grid & conteúdo
Golden ruleTarget ÷ Contexto = Dimensão
Tipografia   `em`
70px/80px    24px/32px14px/21px
body {  font: normal normal 14px/21px "cabin", sans-serif;}.headline h1 {  font: normal bold 70px/80px "enriqueta", serif;...
body » font-size: 100%  (16px na maioria dos browsers)
body {  font: normal normal 100%/1.5 "cabin", sans-serif;}
target (70px)       target (24px)                       CONTEXTO » body (16px)target (14px)
Target ÷ Contexto = Dimensão  70px ÷ 16px = 4.375em 80px ÷ 70px = 1.142857143    24px ÷ 16px = 1.5em   32px ÷ 24px = 1.333...
body {  font: normal normal 100%/1.5 "cabin", sans-serif;}.headline h1 {  /* 70px ÷ 16px & 80px ÷ 70px */  font: normal bo...
Grids %
1000px65px       20px660px         320px
#container {  width: 1000px;}.main-content {  float: left;  width: 660px;  margin-right: 20px;}.side-content {  float: lef...
Contexto (1000px)Target (65px)    Target (20px)Target (660px)      Target (320px)
Target ÷ Contexto = Dimensão       1000px = 100%   660px ÷ 1000px = 66%    20px ÷ 1000px = 2%   320px ÷ 1000px = 32%
#container {  width: 100%;}.main-content {  float: left;  width: 66%; /* 660px ÷ 1000px */  margin-right: 2%; /* 20px ÷ 10...
Conteúdomax-width: 100%img, embed, object, video     (IE6 => width: 100%)
525px        210px
.blog-post .alignright {  float: right;  margin: 0 0 20px 16px;}.blog-post .alignright img {  /* + 2px border + 2px paddin...
Contexto (525px)                   Target (210px)
Target ÷ Contexto = Dimensão    210px ÷ 525px = 40%
.blog-post .alignright {  float: right;  margin: 0 0 20px 16px;  width: 40%;}.blog-post .alignright img {  max-width: 100%...
$(function () {  $(“#site-content”).find(“.main-content”).fitVids();});
$(function () {  $(“#site-content”).find(“.main-content”).fitVids();  // FitTexts formula:  //  // fontSize = elementWidth...
Media Queries    Tipos e features
Tiposall, braille, embossed, handheld, print, projection, screen, speech, tty, tvFeaturescolor                            ...
Sintaxe[only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]*[, [only | not]? {tipo} and ({feature}...
Exemplos@media print and (max-width:21cm) {}@media all and (max-width: 1024px) {}@media only screen and (orientation:lands...
Exemplos@media only screen and (orientation:landscape)              and (min-device-width:768px)              and (max-dev...
@media screen and (max-width: 1024px) {  // Diminuir a fonte do menu}@media screen and (max-width: 960px) {  // Diminuir H...
Retina DisplayThe New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
16 x 1 physical pixels16 x 1 virtual pixelsdevice-pixel-ratio: 1    Normal displays32 x 2 physical pixels16 x 1 virtual pi...
Display: Mostra physical pixels CSS: Interpreta virtual pixels
Physical Pixels: Imagens 4x maiores (2x width / 2x height)Virtual Pixels: Dimensões virtuais, imagens redimensionadas
57px240px
Normal display                 sprite.png                                  130px                          260px
Normal display#site-header h1 a {    display: block;    width: 240px;    height: 57px;    background-image: url(../images/...
“Retina” display          sprite@2x.png                                  260px                          520px
“Retina” display@media screen and (-webkit-min-device-pixel-ratio: 2) {    #site-header h1 a {        width: 240px; /* Vir...
“Retina” display@media screen and (-webkit-min-device-pixel-ratio: 2) {    #site-header h1 a {        background-image: ur...
Responsive Images
3008 x 2000
FAIL
<div data-picture data-alt="A beautiful kitty">    <div data-src="jamie_small.jpg"></div>    <div data-src="jamie_medium.j...
Responsive ImagesHiSRCUsa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag <img>https://githu...
WARNINGNenhuma Media Query funciona no IE6–8 sem plugin. =/
Fallback para IE
Obrigado!@shiota | www.eshiota.com
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Upcoming SlideShare
Loading in...5
×

Responsive Web Design e a Ubiquidade da Web

5,622

Published on

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.

Published in: Technology, Business

Responsive Web Design e a Ubiquidade da Web

  1. 1. Responsive Web Designe a ubiquidade da webEduardo Shiota Yasuda@shiota | www.eshiota.com
  2. 2. Uma (breve) Históriado Design na Web
  3. 3. Tim Berners-LeePai do HTTP, HTML, diretor da W3C, e cavaleiro.
  4. 4. Primeira página da Webhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  5. 5. Primeira Página do UOL23/12/1996 - archive.org
  6. 6. EVIL
  7. 7. HTML » Print » Table » Tableless » Standards » ?
  8. 8. http://1to1interactive.net/blog/?p=1718
  9. 9. http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html
  10. 10. http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html
  11. 11. Jeremy Keiths — @adactio — Instagram
  12. 12. HTML » Print » Table » Tableless » Standards » Responsive Web Design
  13. 13. Responsive Web Design Solução agnóstica à plataforma, browser e dispositivo
  14. 14. UOL Close, but no cigar.Desktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  15. 15. UOL Close, but no cigar.Desktop Desktop?
  16. 16. The Boston Globe ResponsiveliciousDesktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  17. 17. 1. Design flexível +2. Media Queries +3. Ajustes e plugins
  18. 18. Flexible Web Design Tipografia, grid & conteúdo
  19. 19. Golden ruleTarget ÷ Contexto = Dimensão
  20. 20. Tipografia `em`
  21. 21. 70px/80px 24px/32px14px/21px
  22. 22. 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;}
  23. 23. body » font-size: 100% (16px na maioria dos browsers)
  24. 24. body { font: normal normal 100%/1.5 "cabin", sans-serif;}
  25. 25. target (70px) target (24px) CONTEXTO » body (16px)target (14px)
  26. 26. Target ÷ Contexto = Dimensão 70px ÷ 16px = 4.375em 80px ÷ 70px = 1.142857143 24px ÷ 16px = 1.5em 32px ÷ 24px = 1.333333
  27. 27. 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 */}
  28. 28. Grids %
  29. 29. 1000px65px 20px660px 320px
  30. 30. #container { width: 1000px;}.main-content { float: left; width: 660px; margin-right: 20px;}.side-content { float: left; width: 320px;}
  31. 31. Contexto (1000px)Target (65px) Target (20px)Target (660px) Target (320px)
  32. 32. Target ÷ Contexto = Dimensão 1000px = 100% 660px ÷ 1000px = 66% 20px ÷ 1000px = 2% 320px ÷ 1000px = 32%
  33. 33. #container { width: 100%;}.main-content { float: left; width: 66%; /* 660px ÷ 1000px */ margin-right: 2%; /* 20px ÷ 1000px */}.side-content { float: left; width: 32%; /* 32px ÷ 1000px */}
  34. 34. Conteúdomax-width: 100%img, embed, object, video (IE6 => width: 100%)
  35. 35. 525px 210px
  36. 36. .blog-post .alignright { float: right; margin: 0 0 20px 16px;}.blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px;}
  37. 37. Contexto (525px) Target (210px)
  38. 38. Target ÷ Contexto = Dimensão 210px ÷ 525px = 40%
  39. 39. .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;}
  40. 40. $(function () { $(“#site-content”).find(“.main-content”).fitVids();});
  41. 41. $(function () { $(“#site-content”).find(“.main-content”).fitVids(); // FitTexts 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" });});
  42. 42. Media Queries Tipos e features
  43. 43. Tiposall, braille, embossed, handheld, print, projection, screen, speech, tty, tvFeaturescolor (min | max-)widthcolor-index grid(min | max-)aspect-ratio monochrome(min | max-)device-aspect-ratio orientation(min | max-)device-height (min | max-)resolution(min | max-)device-width scan(min | max-)height -webkit-(min | max-)device-pixel-ratio
  44. 44. Sintaxe[only | not]? {tipo} and ({feature}[:{valor}]?) [and ({feature}[:{valor}]?)]*[, [only | not]? {tipo} and ({feature}: [:{valor}]?) [and ({feature}[:{valor}]?)]* ]Uso<link rel=”stylesheet” href=”wide.css” media=”screen and (min-width:1200px)” />ou@media screen and (max-width: 1200px) { /* insert styles here */}
  45. 45. Exemplos@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) {}
  46. 46. Exemplos@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) {} device-width: 1024px -webkit-device-aspect-ratio: 1.5 (novo iPad) device-height: 768px orientation: landscape
  47. 47. @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}
  48. 48. Retina DisplayThe New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
  49. 49. 16 x 1 physical pixels16 x 1 virtual pixelsdevice-pixel-ratio: 1 Normal displays32 x 2 physical pixels16 x 1 virtual pixelsdevice-pixel-ratio: 2 “Retina” displays
  50. 50. Display: Mostra physical pixels CSS: Interpreta virtual pixels
  51. 51. Physical Pixels: Imagens 4x maiores (2x width / 2x height)Virtual Pixels: Dimensões virtuais, imagens redimensionadas
  52. 52. 57px240px
  53. 53. Normal display sprite.png 130px 260px
  54. 54. Normal display#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;}
  55. 55. “Retina” display sprite@2x.png 260px 520px
  56. 56. “Retina” display@media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { width: 240px; /* Virtual pixels, continua igual */ height: 57px; /* Virtual pixels, continua igual */ background-image: url(../images/sprite@2x.png); background-position: -10px -10px; /* Virtual pixels, continua igual */ -webkit-background-size: 50% 50%; /* Dimensionando os Physical */ -moz-background-size: 50% 50%; /* Pixels da imagem para os */ -ms-background-size: 50% 50%; /* Virtual Pixels do browser */ -o-background-size: 50% 50%; background-size: 50% 50%; overflow: hidden; text-indent: 100%; white-space: nowrap; }}
  57. 57. “Retina” display@media screen and (-webkit-min-device-pixel-ratio: 2) { #site-header h1 a { background-image: url(../images/sprite@2x.png); -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -ms-background-size: 50% 50%; -o-background-size: 50% 50%; background-size: 50% 50%; }}
  58. 58. Responsive Images
  59. 59. 3008 x 2000
  60. 60. FAIL
  61. 61. <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>
  62. 62. Responsive ImagesHiSRCUsa JavaScript com jQuery, semântico, testa bandwidth, requer markup extra na tag <img>https://github.com/teleject/hisrcAdaptive ImagesServer-side, usa .htaccess e PHPhttp://code.google.com/p/css3-mediaqueries-js/PicturefillUsa JavaScript, segue a proposta mais aceita entre developers sobre Responsive Images(tag <picture>)https://github.com/scottjehl/picturefillOutrosO 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/
  63. 63. WARNINGNenhuma Media Query funciona no IE6–8 sem plugin. =/
  64. 64. Fallback para IE
  65. 65. Obrigado!@shiota | www.eshiota.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×