Responsive
Web
Design
Responsive Web Design
Es una técnica que reune elementos de
desarrollo conocidos para:
Construir un único sitio que se ada...
01 Layout basado en grilla flexible
02 Imágenes flexibles
03 Media Queries (CSS3)
...
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, scrollb...
01 Diseño basado en grilla flexible
Para conseguir flexibilidad
necesitamos establecer proporción.
¿Cómo?
buscado ÷ contexto = resultado
Comencemos fácil...
Fonts Flexibles.
Para conseguir proporción,
utilizaremos herencia de CSS.
Tamaño inicial de fuentes, aplicado
al <body>
font-size: 100%;
En la mayoría de los navegadores
equivale a 16px.
Debemos pasar de un tamaño fijo
(px) a tamaño proporcional (em),
utilizando la fórmula:
buscado ÷ contexto = resultado
Ejemplo
HTML CSS
<body>
<div class=”container”>
<header>
<h1>UX Team <span>blog!</span></h1>
</header>
<article>
<header>
...
Ejemplo
HTML CSS
<body>
<div class=”container”>
<header>
<h1>UX Team <span>blog!</span></h1>
</header>
<article>
<header>
...
Implementemos ahora un diseño con
grilla flexible...
Si tenemos un contenedor
reemplazamos width por max-width.
Pasamos widths, margins y
paddings, de un tamaño fijo (px) a
tamaño proporcional (%), con la
fórmula:
buscado ÷ contexto = ...
Ejemplo
HTML CSS
<body>
<div class=”container”>
<header>
</header>
<article>
</article>
<aside>
</aside>
</div>
.container...
Ejemplo
HTML CSS
<body>
<div class=”container”>
<header>
</header>
<article>
</article>
<aside>
</aside>
</div>
.container...
Realizar repetidamente cálculos, toma
mucho... mucho tiempo.
Frameworks
estáticas
flexibles
http://960.gs/
http://www.1kbgrid.com/
http://www.blueprintcss.org/
http://adapt.960.gs/
htt...
El diseño se adapta según el ancho de la
pantalla.
Scrollbars desaparecen...
Las imágenes tienen tamaño fijo y
rompen el di...
02 Imágenes flexibles
Las imágenes tienen ancho fijo y
rompen el layout cuando desbordan
a su contenedor.
Podemos ajustar por corte, por
medio de una regla de css que
controla cuando algo desborda al
elemento: overflow.
.img-cont...
Mejor es ajustar proporcionalmente,
que la imagen se adapte al tamaño del
contenedor automáticamente.
.img-container{
widt...
No solo las imágenes tienen ancho
fijo, también videos y otro tipo de
objetos.
.media-container{
width: 25%; /* 240px / 960...
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 r...
03 Media Queries (CSS3)
CSS2 Media Types
Permiten especificar como se
presenta el mismo contenido en
distintos medios.
http://www.w3.org/TR/CSS2/me...
Los media types disponibles son:
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv
Se pueden utilizar de distintas
maneras
/* En el <head> del html */
<link rel="stylesheet" type="text/css" media="print" h...
CSS3 Media Queries
Extienden a CSS2 Media Types.
Permiten aplicar un conjunto de
estilos cuando una condición se
cumple.
h...
CSS3 Media Queries
Ejemplo
.title{
width: 56.25%;
color: #333;
font-size: 2.25em;
}
@media screen and (max-width: 480px){
...
devices features disponibles:
http://www.w3.org/TR/css3-mediaqueries/#media1
width
height
device-width
device-height
orien...
01 display area vs rendering surface
02 browser viewport vs entire display
03 width vs device-width
En desarrollo para tes...
Breakpoints?
Una mejor estrategia es elegir
breakpoints en las resoluciones u otras
restricciones donde nuestro diseño se
rompe.
Múltiples Media Queries
body{
color: black;
background-color: white;
}
@media screen and (min-width:1200px) {
body{
color:...
Expresiones lógicas
/* AND */
@media screen and (min-width:180px) and (max-width:480px) {
/* El ancho de la ventana del br...
Mobile browsers tienen definido el
viewport por defecto en un ancho
mayor que el display.
Defaults:
980px Safari iPhone
850...
El viewport debe ser controlado, por
medio de su metatag.
Para responsive: device-width.
Podemos evitar el zoom del dispos...
Soporte de Browsers Desktop
Chrome
Firefox 3.5+
Safari 3+
Opera 9.5+
Internet Explorer 9+
http://caniuse.com/css-mediaquer...
Con ayuda de algun polyfill...
Chrome
Firefox 1+
Safari 2+
Opera 9.5+
Internet Explorer 5+
http://code.google.com/p/css3-me...
Modernizr solo detecta features de
browsers, permite por medio de
yepnope, cargar polyfills externos.
http://modernizr.com
Soporte de Browsers Mobile
http://caniuse.com/css-mediaqueries
http://www.quirksmode.org/mobile/tableViewport.html#mediaqu...
Para poder apuntar con media queries a
Retina y otros displays de alta
definición, tenemos la opción de la
actual feature r...
01 Layout basado en grilla flexible
02 Imágenes flexibles
03 Media Queries (CSS3)
...
04 Estrategia de Contenidos
05 Optimiz...
Según el dispositivo y el entorno donde
se lo utiliza, tendremos restricciones
como tamaño de pantalla, conectividad,
dist...
06 Estrategia de Contenidos
Es necesaria una estrategia a la hora de
que contenidos mostrar en cada
dispositivo.
El contenido también debe ser
respons...
Ejemplo
Ejemplo
Imágenes y videos, de alta resolución,
en dispositivos con pantallas de baja
resolución son desperdiciados.
Necesitamos po...
05 Optimización de Recursos
Actualmente se trata desde los Web
Standards, por parte de la W3
<picture alt="descripcion de la imagen">
<source src="sma...
Grupo de Responsive Images en W3
http://www.w3.org/community/respimg/
http://www.alistapart.com/articles/responsive-images...
Los videos en HTML5 ya son
responsive.
<video>
<source src="video-small.mp4" type="video/mp4" media="all and (max-width: 4...
Además de CSS y recursos de imágenes
y video, tenemos javascript que aportará
comportamiento a nuestro sitio según el
disp...
06 Conditional Loading
Media queries en javascript
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
! // ventana hasta 500px...
Detección de características del
navegador.
Podemos utilizar Modernizr.
if ( Modernizr.touch ) {
// scripts para comportam...
Aún hay algunos celulares en el mercado que no
soportan totalmente HTML5.
Se estima que el consumo de internet desde mobil...
Mobile First!
Sitio diseñado y desarrollado primero
para mobile
ejemplos:
http://www.smashingmagazine.com/
http://bostongl...
Artículos
http://www.alistapart.com/articles/dao/
http://www.alistapart.com/articles/responsive-web-design/
Libros
Fernando Pasik
Lead Front-End Developer
@fernandopasik
Gracias!
Upcoming SlideShare
Loading in …5
×

Responsive Web Design

1,383 views

Published on

Una Introducción y algo más sobre Responsive Web Design

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,383
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Responsive Web Design

  1. 1. Responsive Web Design
  2. 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. 3. 01 Layout basado en grilla flexible 02 Imágenes flexibles 03 Media Queries (CSS3) ...
  4. 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. 5. 01 Diseño basado en grilla flexible
  6. 6. Para conseguir flexibilidad necesitamos establecer proporción. ¿Cómo? buscado ÷ contexto = resultado
  7. 7. Comencemos fácil... Fonts Flexibles.
  8. 8. Para conseguir proporción, utilizaremos herencia de CSS.
  9. 9. Tamaño inicial de fuentes, aplicado al <body> font-size: 100%; En la mayoría de los navegadores equivale a 16px.
  10. 10. Debemos pasar de un tamaño fijo (px) a tamaño proporcional (em), utilizando la fórmula: buscado ÷ contexto = resultado
  11. 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. 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. 13. Implementemos ahora un diseño con grilla flexible... Si tenemos un contenedor reemplazamos width por max-width.
  14. 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. 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. 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. 17. Realizar repetidamente cálculos, toma mucho... mucho tiempo.
  18. 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. 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. 20. 02 Imágenes flexibles
  21. 21. Las imágenes tienen ancho fijo y rompen el layout cuando desbordan a su contenedor.
  22. 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. 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. 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. 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. 26. 03 Media Queries (CSS3)
  27. 27. CSS2 Media Types Permiten especificar como se presenta el mismo contenido en distintos medios. http://www.w3.org/TR/CSS2/media.html
  28. 28. Los media types disponibles son: all braille embossed handheld print projection screen speech tty tv
  29. 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. 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. 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. 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. 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. 34. Breakpoints?
  35. 35. Una mejor estrategia es elegir breakpoints en las resoluciones u otras restricciones donde nuestro diseño se rompe.
  36. 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. 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. 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. 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. 40. Soporte de Browsers Desktop Chrome Firefox 3.5+ Safari 3+ Opera 9.5+ Internet Explorer 9+ http://caniuse.com/css-mediaqueries
  41. 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. 42. Modernizr solo detecta features de browsers, permite por medio de yepnope, cargar polyfills externos. http://modernizr.com
  43. 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. 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. 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. 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. 47. 06 Estrategia de Contenidos
  48. 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. 49. Ejemplo
  50. 50. Ejemplo
  51. 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. 52. 05 Optimización de Recursos
  53. 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. 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. 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. 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. 57. 06 Conditional Loading
  58. 58. Media queries en javascript var mq = window.matchMedia( "(max-width: 500px)" ); if (mq.matches) { ! // ventana hasta 500px } else { ! // ventana mayor a 500px }
  59. 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. 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. 61. Mobile First! Sitio diseñado y desarrollado primero para mobile ejemplos: http://www.smashingmagazine.com/ http://bostonglobe.com/ Graceful Degradation Progressive Enhancement
  62. 62. Artículos http://www.alistapart.com/articles/dao/ http://www.alistapart.com/articles/responsive-web-design/ Libros
  63. 63. Fernando Pasik Lead Front-End Developer @fernandopasik Gracias!

×