Responsive Web Design e a Ubiquidade da Web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Web Design e a Ubiquidade da Web

on

  • 5,638 views

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 ...

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.

Statistics

Views

Total Views
5,638
Views on SlideShare
5,461
Embed Views
177

Actions

Likes
28
Downloads
184
Comments
0

14 Embeds 177

http://candidosalesg.wordpress.com 60
http://candidosg.com 38
https://twitter.com 35
https://si0.twimg.com 14
http://flavors.me 6
http://marlontomio.wordpress.com 6
http://www.linkedin.com 6
http://jp.flavors.me 5
http://us-w1.rockmelt.com 2
http://webcache.googleusercontent.com 1
http://de.flavors.me 1
http://fr.flavors.me 1
http://es.flavors.me 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design e a Ubiquidade da Web Presentation Transcript

  • 1. Responsive Web Designe a ubiquidade da webEduardo Shiota Yasuda@shiota | www.eshiota.com
  • 2. Uma (breve) Históriado Design na Web
  • 3. Tim Berners-LeePai do HTTP, HTML, diretor da W3C, e cavaleiro.
  • 4. Primeira página da Webhttp://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
  • 5. Primeira Página do UOL23/12/1996 - archive.org
  • 6. EVIL
  • 7. HTML » Print » Table » Tableless » Standards » ?
  • 8. http://1to1interactive.net/blog/?p=1718
  • 9. http://babybilingual.blogspot.com.br/2012/05/who-knew-spelling-could-be-so-cute-and_19.html
  • 10. http://www.theinternetisclosedforwinter.com/2012/06/yes-people-use-ipad-as-camera.html
  • 11. Jeremy Keiths — @adactio — Instagram
  • 12. HTML » Print » Table » Tableless » Standards » Responsive Web Design
  • 13. Responsive Web Design Solução agnóstica à plataforma, browser e dispositivo
  • 14. UOL Close, but no cigar.Desktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  • 15. UOL Close, but no cigar.Desktop Desktop?
  • 16. The Boston Globe ResponsiveliciousDesktop iPad Portrait iPad Landscape iPhone iPhone Portrait Landscape
  • 17. 1. Design flexível +2. Media Queries +3. Ajustes e plugins
  • 18. Flexible Web Design Tipografia, grid & conteúdo
  • 19. Golden ruleTarget ÷ Contexto = Dimensão
  • 20. Tipografia `em`
  • 21. 70px/80px 24px/32px14px/21px
  • 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. body » font-size: 100% (16px na maioria dos browsers)
  • 24. body { font: normal normal 100%/1.5 "cabin", sans-serif;}
  • 25. target (70px) target (24px) CONTEXTO » body (16px)target (14px)
  • 26. Target ÷ Contexto = Dimensão 70px ÷ 16px = 4.375em 80px ÷ 70px = 1.142857143 24px ÷ 16px = 1.5em 32px ÷ 24px = 1.333333
  • 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. Grids %
  • 29. 1000px65px 20px660px 320px
  • 30. #container { width: 1000px;}.main-content { float: left; width: 660px; margin-right: 20px;}.side-content { float: left; width: 320px;}
  • 31. Contexto (1000px)Target (65px) Target (20px)Target (660px) Target (320px)
  • 32. Target ÷ Contexto = Dimensão 1000px = 100% 660px ÷ 1000px = 66% 20px ÷ 1000px = 2% 320px ÷ 1000px = 32%
  • 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. Conteúdomax-width: 100%img, embed, object, video (IE6 => width: 100%)
  • 35. 525px 210px
  • 36. .blog-post .alignright { float: right; margin: 0 0 20px 16px;}.blog-post .alignright img { /* + 2px border + 2px padding = 210px */ width: 206px;}
  • 37. Contexto (525px) Target (210px)
  • 38. Target ÷ Contexto = Dimensão 210px ÷ 525px = 40%
  • 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. $(function () { $(“#site-content”).find(“.main-content”).fitVids();});
  • 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. Media Queries Tipos e features
  • 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. 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. 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. 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. @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. Retina DisplayThe New iPad™, iPhone 4(S), The Next Generation MacBook Pro with Retina Display™
  • 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. Display: Mostra physical pixels CSS: Interpreta virtual pixels
  • 51. Physical Pixels: Imagens 4x maiores (2x width / 2x height)Virtual Pixels: Dimensões virtuais, imagens redimensionadas
  • 52. 57px240px
  • 53. Normal display sprite.png 130px 260px
  • 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. “Retina” display sprite@2x.png 260px 520px
  • 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. “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. Responsive Images
  • 59. 3008 x 2000
  • 60. FAIL
  • 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. 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. WARNINGNenhuma Media Query funciona no IE6–8 sem plugin. =/
  • 64. Fallback para IE
  • 65. Obrigado!@shiota | www.eshiota.com