Responsive Web Design

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.

01 Layout basado en grilla ﬂexible
02 Imágenes ﬂexibles
03 Media Queries (CSS3)
...

En un sitio web que tiene su diseño
basado en una grilla ﬁja,
Si el tamaño de la pantalla es menor al
ancho total, scrollbars aparecen...

01 Diseño basado en grilla ﬂexible

Para conseguir ﬂexibilidad
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 ﬁjo
(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>
<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;
}

Ejemplo
HTML CSS
<body>
<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 */
}

Implementemos ahora un diseño con
grilla ﬂexible...
Si tenemos un contenedor
reemplazamos width por max-width.

Pasamos widths, margins y
paddings, de un tamaño ﬁjo (px) a
tamaño proporcional (%), con la
fórmula:
buscado ÷ contexto = resultado * 100

Ejemplo
HTML CSS
<body>
<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;
}

Ejemplo
HTML CSS
<body>
<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;
}

Realizar repetidamente cálculos, toma
mucho... mucho tiempo.

Frameworks
estáticas
ﬂexibles
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/

El diseño se adapta según el ancho de la
pantalla.
Scrollbars desaparecen...
Las imágenes tienen tamaño ﬁjo y
rompen el diseño.

Las imágenes tienen ancho ﬁjo 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: overﬂow.
.img-container{
width: 25%; /* 240px / 960px */
overflow: hidden;
}

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;
}

No solo las imágenes tienen ancho
ﬁjo, también videos y otro tipo de
objetos.
.media-container{
width: 25%; /* 240px / 960px */
}
img, embed, object, video{
max-width: 100%;
height: auto;
}

Tenemos un diseño ﬂexible, que se
ajusta a distintos tamaños de pantalla.
Sin embargo hay puntos en los que el
diseño se rompe...

CSS2 Media Types
Permiten especiﬁcar como se
presenta el mismo contenido en
distintos medios.
http://www.w3.org/TR/CSS2/media.html

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" href="print_styles.css">
/* Dentro de un archivo css */
@import url("print_styles.css") print;
@media print {
/* reglas css */
}

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/

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.

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-

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

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

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 */
}

Mobile browsers tienen deﬁnido el
viewport por defecto en un ancho
mayor que el display.
Defaults:
980px Safari iPhone
850px Opera
800px Android WebKit
974px IE

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

Soporte de Browsers Desktop
Chrome
Firefox 3.5+
Safari 3+
Opera 9.5+
Internet Explorer 9+
http://caniuse.com/css-mediaqueries

Con ayuda de algun polyﬁll...
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-Polyﬁlls

Modernizr solo detecta features de
browsers, permite por medio de
yepnope, cargar polyﬁlls externos.
http://modernizr.com

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

Para poder apuntar con media queries a
Retina y otros displays de alta
deﬁnició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%; }
}

01 Layout basado en grilla ﬂexible
02 Imágenes ﬂexibles
03 Media Queries (CSS3)
...
04 Estrategia de Contenidos
05 Optimización de Recursos
06 Conditional Loading
Cualquier optimización posible mas

Según el dispositivo y el entorno donde
se lo utiliza, tendremos restricciones
como tamaño de pantalla, conectividad,
distintas maneras de input, etc.

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.

Imágenes y videos, de alta resolución,
en dispositivos con pantallas de baja
resolución son desperdiciados.
Necesitamos poder ofrecer alternativas
de recursos eﬁcientemente.

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>

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 polyﬁll de la propuesta
https://github.com/scottjehl/pictureﬁll

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>

Además de CSS y recursos de imágenes
y video, tenemos javascript que aportará
comportamiento a nuestro sitio según el
dispositivo.

Media queries en javascript
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
! // ventana hasta 500px
}
else {
! // ventana mayor a 500px
}

Detección de características del
navegador.
Podemos utilizar Modernizr.
if ( Modernizr.touch ) {
// scripts para comportamiento con touch
} else {
// scripts para comportamiento sin touch
}

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.

Mobile First!
Sitio diseñado y desarrollado primero
para mobile
ejemplos:
http://www.smashingmagazine.com/
http://bostonglobe.com/
Graceful
Degradation
Progressive
Enhancement

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!

Responsive Web Design

Más contenido relacionado

Similar a Responsive Web Design

Responsive Web Design