Responsive Web Design

Un paso a paso en nivel básico e intermedio sobre como hacer Responsive Web Design.

Transcript

1. Responsive Web Design
2. Responsive Web Design Es una técnica que reune elementos de desarrollo conocidos para: Construir un único sitio que se adapte a múltiples dispositivos, para ofrecer la mejor Experiencia de Usuario.
3. 01 Layout basado en grilla flexible 02 Imágenes flexibles 03 Media Queries (CSS3) ...
4. En un sitio web que tiene su diseño basado en una grilla fija, Si el tamaño de la pantalla es menor al ancho total, scrollbars aparecen...
5. 01 Diseño basado en grilla flexible
6. Para conseguir flexibilidad necesitamos establecer proporción. ¿Cómo? buscado ÷ contexto = resultado
7. Comencemos fácil... Fonts Flexibles.
8. Para conseguir proporción, utilizaremos herencia de CSS.
9. Tamaño inicial de fuentes, aplicado al <body> font-size: 100%; En la mayoría de los navegadores equivale a 16px.
10. Debemos pasar de un tamaño fijo (px) a tamaño proporcional (em), utilizando la fórmula: buscado ÷ contexto = resultado
11. Ejemplo HTML CSS <body> <div class=”container”> <header> <h1>UX Team <span>blog!</span></h1> </header> <article> <header> <h2>Responsive Web Design</h2> </header> </article> </div> body{ font-size: 100%; } header h1{ font-size: 36px; } header h1 span{ font-size: 22px; } article h2{ font-size: 32px; }
12. Ejemplo HTML CSS <body> <div class=”container”> <header> <h1>UX Team <span>blog!</span></h1> </header> <article> <header> <h2>Responsive Web Design</h2> </header> </article> </div> body{ font-size: 100%; } header h1{ font-size: 2.25em;/* 36px / 16px */ } header h1 span{ font-size: 0.55555555555556em; /* 20px / 36px */ } article h2{ font-size: 2em;/* 32px / 16px */ }
13. Implementemos ahora un diseño con grilla flexible... Si tenemos un contenedor reemplazamos width por max-width.
14. Pasamos widths, margins y paddings, de un tamaño fijo (px) a tamaño proporcional (%), con la fórmula: buscado ÷ contexto = resultado * 100
15. Ejemplo HTML CSS <body> <div class=”container”> <header> </header> <article> </article> <aside> </aside> </div> .container{ width: 960px; margin: 0 auto; } article{ width: 540px; margin: 20px 10px 20px 90px; float:left; } aside{ width: 220px; margin: 20px 10px 20px 90px; float: left; }
16. Ejemplo HTML CSS <body> <div class=”container”> <header> </header> <article> </article> <aside> </aside> </div> .container{ max-width: 960px; margin: 0 auto; } article{ width: 56.25%; /* 540px / 960px */ margin: 2.083333333333% 1.041666666667% 2.083333333333% 9.375%; /* 20px / 960px , 10px / 960px , 90px / 960px */ float: left; } aside{ width: 22.916666666667%; /* 220px / 960px */ margin: 2.083333333333% 1.041666666667% 2.083333333333% 9.375%; /* 20px / 960px , 10px / 960px , 90px / 960px */ float: left; }
17. Realizar repetidamente cálculos, toma mucho... mucho tiempo.
18. Frameworks estáticas flexibles http://960.gs/ http://www.1kbgrid.com/ http://www.blueprintcss.org/ http://adapt.960.gs/ http://cssgrid.net/ con soporte para Preprocesadores de CSS (SASS o Less) http://goldengridsystem.com/ http://framelessgrid.com/ http://semantic.gs/ http://twitter.github.com/bootstrap/ http://foundation.zurb.com/ http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/
19. El diseño se adapta según el ancho de la pantalla. Scrollbars desaparecen... Las imágenes tienen tamaño fijo y rompen el diseño.
20. 02 Imágenes flexibles
21. Las imágenes tienen ancho fijo y rompen el layout cuando desbordan a su contenedor.
22. Podemos ajustar por corte, por medio de una regla de css que controla cuando algo desborda al elemento: overflow. .img-container{ width: 25%; /* 240px / 960px */ overflow: hidden; }
23. Mejor es ajustar proporcionalmente, que la imagen se adapte al tamaño del contenedor automáticamente. .img-container{ width: 25%; /* 240px / 960px */ } img{ max-width: 100%; height: auto; }
24. No solo las imágenes tienen ancho fijo, también videos y otro tipo de objetos. .media-container{ width: 25%; /* 240px / 960px */ } img, embed, object, video{ max-width: 100%; height: auto; }
25. Tenemos un diseño flexible, que se ajusta a distintos tamaños de pantalla. Sin embargo hay puntos en los que el diseño se rompe...
26. 03 Media Queries (CSS3)
27. CSS2 Media Types Permiten especificar como se presenta el mismo contenido en distintos medios. http://www.w3.org/TR/CSS2/media.html
28. Los media types disponibles son: all braille embossed handheld print projection screen speech tty tv
29. Se pueden utilizar de distintas maneras /* En el <head> del html */ <link rel="stylesheet" type="text/css" media="print" href="print_styles.css"> /* Dentro de un archivo css */ @import url("print_styles.css") print; @media print { /* reglas css */ }
30. CSS3 Media Queries Extienden a CSS2 Media Types. Permiten aplicar un conjunto de estilos cuando una condición se cumple. http://www.w3.org/TR/css3-mediaqueries/
31. CSS3 Media Queries Ejemplo .title{ width: 56.25%; color: #333; font-size: 2.25em; } @media screen and (max-width: 480px){ .title{ width: 100%; font-size: 1.5em; } } Los estilos de width y font-size aplicados a la clase title se sobreescriben cuando el ancho de la ventana del browser sea hasta 480px, mientras que el color sigue siendo el mismo.
32. devices features disponibles: http://www.w3.org/TR/css3-mediaqueries/#media1 width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid No aceptan min- max-
33. 01 display area vs rendering surface 02 browser viewport vs entire display 03 width vs device-width En desarrollo para testing utilizar max-width o min-width
34. Breakpoints?
35. Una mejor estrategia es elegir breakpoints en las resoluciones u otras restricciones donde nuestro diseño se rompe.
36. Múltiples Media Queries body{ color: black; background-color: white; } @media screen and (min-width:1200px) { body{ color: blue; } } @media screen and (max-width:768px) { body{ color: red; } } @media screen and (max-width:320px) { body{ color: green; background-color: black; } } Ejemplo: Si el ancho es 600px color: red y background-color: white Si el ancho es 240px color: green y background-color: black
37. Expresiones lógicas /* AND */ @media screen and (min-width:180px) and (max-width:480px) { /* El ancho de la ventana del browser es < 480px y > 180px */ } /* OR */ @media screen and (min-width:180px), print (min-width:20em) { /* El ancho de la ventana del bowser es > 180px o la hoja > 20em */ } /* NOT */ @media not all and (color) { /* El dispositivo no tiene pantalla color */ } /* ONLY */ @media only screen and (color) { /* Sirve para esconder css a browsers que no soportan media queries */ }
38. Mobile browsers tienen definido el viewport por defecto en un ancho mayor que el display. Defaults: 980px Safari iPhone 850px Opera 800px Android WebKit 974px IE
39. El viewport debe ser controlado, por medio de su metatag. Para responsive: device-width. Podemos evitar el zoom del dispositivo por medio de user-scalable. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable = no"> http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
40. Soporte de Browsers Desktop Chrome Firefox 3.5+ Safari 3+ Opera 9.5+ Internet Explorer 9+ http://caniuse.com/css-mediaqueries
41. Con ayuda de algun polyfill... Chrome Firefox 1+ Safari 2+ Opera 9.5+ Internet Explorer 5+ http://code.google.com/p/css3-mediaqueries-js/ http://github.com/scottjehl/Respond https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
42. Modernizr solo detecta features de browsers, permite por medio de yepnope, cargar polyfills externos. http://modernizr.com
43. Soporte de Browsers Mobile http://caniuse.com/css-mediaqueries http://www.quirksmode.org/mobile/tableViewport.html#mediaqueries iOS Safari Android Browser Google Chrome Opera Mobile Opera Mini Symbian Firefox BlackBerry (Webkit) IE windows phone 7.5+ Para IE windows phone 7 http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
44. Para poder apuntar con media queries a Retina y otros displays de alta definición, tenemos la opción de la actual feature resolution, o la mejor, device-pixel-ratio. #image { background: url(image.png); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2) { #image { background: url(image_2x.png); background-size: 50%; } }
45. 01 Layout basado en grilla flexible 02 Imágenes flexibles 03 Media Queries (CSS3) ... 04 Estrategia de Contenidos 05 Optimización de Recursos 06 Conditional Loading Cualquier optimización posible mas
46. Según el dispositivo y el entorno donde se lo utiliza, tendremos restricciones como tamaño de pantalla, conectividad, distintas maneras de input, etc.
47. 06 Estrategia de Contenidos
48. Es necesaria una estrategia a la hora de que contenidos mostrar en cada dispositivo. El contenido también debe ser responsive a las posibilidades que ofrece el dispositivo.
49. Ejemplo
50. Ejemplo
51. Imágenes y videos, de alta resolución, en dispositivos con pantallas de baja resolución son desperdiciados. Necesitamos poder ofrecer alternativas de recursos eficientemente.
52. 05 Optimización de Recursos
53. Actualmente se trata desde los Web Standards, por parte de la W3 <picture alt="descripcion de la imagen"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width: 400px)"> <source src="large.jpg" media="(min-width: 800px)"> <img src="small.jpg" alt="descripcion de la imagen"> </picture>
54. Grupo de Responsive Images en W3 http://www.w3.org/community/respimg/ http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/ Actualmente no hay soporte en browsers pero si un polyfill de la propuesta https://github.com/scottjehl/picturefill
55. Los videos en HTML5 ya son responsive. <video> <source src="video-small.mp4" type="video/mp4" media="all and (max-width: 480px)"> <source src="video-small.webm" type="video/webm" media="all and (max-width: 480px)"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video>
56. Además de CSS y recursos de imágenes y video, tenemos javascript que aportará comportamiento a nuestro sitio según el dispositivo.
57. 06 Conditional Loading
58. Media queries en javascript var mq = window.matchMedia( "(max-width: 500px)" ); if (mq.matches) { ! // ventana hasta 500px } else { ! // ventana mayor a 500px }
59. Detección de características del navegador. Podemos utilizar Modernizr. if ( Modernizr.touch ) { // scripts para comportamiento con touch } else { // scripts para comportamiento sin touch }
60. Aún hay algunos celulares en el mercado que no soportan totalmente HTML5. Se estima que el consumo de internet desde mobile superará ampliamente al de desktops.
61. Mobile First! Sitio diseñado y desarrollado primero para mobile ejemplos: http://www.smashingmagazine.com/ http://bostonglobe.com/ Graceful Degradation Progressive Enhancement
62. Artículos http://www.alistapart.com/articles/dao/ http://www.alistapart.com/articles/responsive-web-design/ Libros
63. Fernando Pasik Lead Front-End Developer @fernandopasik Gracias!