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