Front end basics - Responsive Web Design

FRONT-END BASICS
Responsive Web Design
(RWD)
/ ♣ Octubre 2012Nadal Soler @nadalsol

RESPONSIVE WEB DESIGN (RWD)
Responsive Architecture
¿WTF is RWD?
Ingredientes para RWD
Recursos

RESPONSIVE ARCHITECTURE
Actualmente diseñamos para más dispositivos que nunca (mobile,
desktop, tablet, smart tv…).
Cada medio es distinto (ancho mínimo de pantalla, densidad de pixel,
n° de colores, fuentes, navegador…).

RESPONSIVE ARCHITECTURE
¿TIENE SENTIDO?
Del libro , deEthan Marcotte.
“Fragmentar nuestro contenido a través de diferentes
experiencias "dispositivo optimizadas" es un
propósito insostenible. La alternativa a esto se llama
Responsive Architecture: crear sitios no sólo más
flexibles, sino que también se adapten al medio que
los renderiza.”
"Responsive Web Design"

¿WTF IS:NOT RWD?
No es el nombre de la banda de moda, ni de ninguna revista de
tendencias.
Una web con RWD no es una web móvil ya que los contenidos y
performance no están optimizados.
Para hacer una web móvil deberíamos usar *, para servir los
contenidos adecuados al medio: "copys" resumidos, imágenes más
pequeñas y optimizadas, funcionalidad básica, etc…
* Server-Side Device DetectionTechniques.
SSDDT

¿WTF IS RWD?
La finalidad del RWD es hacer que la web se visualice
correctamente en distintos contextos (dispositivos), con
independencia del tamaño de pantalla o resolución del mismo,
mejorando la experiencia de cada tipo de usuario (mobile, desktop,
smart tv, whatever…).
El RWD se puede combinar con las para ofrecer una
experiencia completa: diseño adaptable + contenido adecuado y
optimizado.
“Responsive Web Design = Diseño Web
Adaptable/Adaptativo/Responsivo”
SSDDT

INGREDIENTES PARA RWD
1.
2. *
3.
* No sólo imágenes sino cualquier otro media: videos, flash, carousels…
Grid flexible
Imágenes flexibles
CSS3 Media Queries

GRID FLEXIBLE
“Retícula fluida o elástica, que se adapta a cambios
de resolución de pantalla y dimensiones del
viewport.”

GRID FLEXIBLE
CARACTERÍSTICAS
Flexible Typesetting, o fuentes escalables en medidas relativas (em).
Evitar usar px!

GRID FLEXIBLE
CARACTERÍSTICAS
Grid (columnas) y espacios horizontales (widths, margins, paddings) en
porcentajes (%).

GRID FLEXIBLE
EN DEFINITIVA…THINK FLEXIBLE!
Romper con el hábito de traducir los pixels de Photoshop a CSS.
Focalizar nuestra atención en las proporciones que hay trás un
diseño.

GRID FLEXIBLE
*, en
* Redimensiona la ventana del navegador
para ver como secomporta.
Flexible Grid (demo) A List Apart

IMÁGENES FLEXIBLES
“Imágenes elásticas, que se escalan según cambios
de resolución de pantalla y dimensiones del
viewport.”

IMÁGENES FLEXIBLES
¿CÓMO HACER UNA IMAGEN FLEXIBLE?
Encapsular-la dentro de un contenedor de bloque (p.e. un con
display:block).
Definir un ancho en porcentaje (%) a dicho contenedor, para que este
sea flexible. El valor del porcentaje determinará su ancho en función
de su padre.
Opcionalmente el contenedor puede ir flotado.
Establecer display:block y max-width:100% a la imagen. Dejar sus
atributos HTML width y height vacíos.

IMÁGENES FLEXIBLES
Ejemplo. En estecaso la imagen flexibleocuparía el 25% desu contenedor padre:

<img src="img/responsive_sample_l.jpg" alt=" " />

.flexImg { /* The flexible image wrapper, could be <a> or . Should be com
bined with a percentage width class */
display:block;
}
.flexImg img {
display:block;
max-width:100%;
}
.wp25 {
width:25%;
}
.floatR {
float:right;
}

IMÁGENES FLEXIBLES
Ejemplo. En estecaso la imagen flexibleocuparía el 25% desu contenedor padre:

IMÁGENES FLEXIBLES
Si necesitamos quela imagen sea un enlace podemos sustituir el tagpor un <a>(usando el mismo CSS que
en el ejemplo anterior):
<a href="#" class="flexImg wp25 floatR">
<img src="img/responsive_sample_l.jpg" alt=" " />
</a>
.flexImg { /* The flexible image wrapper, could be <a> or . Should be com
bined with a percentage width class */
display:block;
}
.flexImg img {
display:block;
max-width:100%;
}
.wp25 {
width:25%;
}
.floatR {
float:right;
}

IMÁGENES FLEXIBLES
Ejemplos con tamaños de imagen distintos:
*
* Redimensiona la ventana del navegador para ver como secomporta el layout eimágenes flexibles, junto con los
media queries.
Responsive Web Design (demo)

CSS3 MEDIA QUERIES
Del libro , deEthan Marcotte.
“Ningún diseño, fijo o fluido, escala bien más allá del
contexto para el que fue originalmente diseñado.”
"Responsive Web Design"

CSS3 MEDIA QUERIES
PROBLEMASCOMUNESLAYOUTSFLEXIBLES
Imágenes irreconocibles (demasiado pequeñas o recortadas por
overflow:hidden).
Márgenes demasiado grandes.
Lineas de texto demasiado cortas (o demasiado largas).
Elementos de navegación rotos dificultando legibilidad.
Otros problemas…

CSS3 MEDIA QUERIES
¿Cómo crear un diseño que pueda adaptarse a cambios de resolución
de pantalla y dimensiones del viewport?
¿Cómo hacer diseños más responsive?
LAYOUTSFLEXIBLES
+
MEDIA QUERIES

CSS3 MEDIA QUERIES
¿QUÉ SON YPARA QUÉ SIRVEN?
Son un robusto mecanismo, creado por la W3C, para identificar no sólo
los tipos de media, sino también para inspeccionar las características
físicas de los dispositivos y navegadores que renderizan el contenido.
¿Sigues sin saber dequéva esto?
mediaqueri.es
Robot or Not?

CSS3 MEDIA QUERIES
DISTINTASNOMENCLATURAS
Sepueden encadenar múltiples queries juntas mediantela keyword“and”
@media screen and (min-width:1024px) {
body {
font-size:100%;
}
}
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
@import url("wide.css") screen and (min-width:1024px);
@media screen and (min-device-width:480px) and (orientation:landscape) { … }

CSS3 MEDIA QUERIES
CAPACIDADESDE LOSDISPOSITIVOSA DETECTAR
width
height
device-width
device-height
orientation
and many more…
Lista completa en .W3C Media Queries - Features

CSS3 MEDIA QUERIES
CONSIDERACIONES
Recaudar información detallada sobre los dispositivos y
navegadores de tu target, saber qué características de los media
queries soportan, y testear acorde.
Width y height hacen referencia al viewport o ventana del navegador,
mientras que device-width y device-height miden las dimensiones de
toda la pantalla.
Añadir este meta tag en el HTML:
Esto hacequeel ancho del viewport del navegador sea igual al ancho dela pantalla del dispositivo, y estableceel
nivel dezoom al 100%. Con esto logramos mayorconsistenciacon el tamaño actual del dispositivo.
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

CSS3 MEDIA QUERIES
COMPATIBILIDAD
Algunos navegadores aún no las soportan*, aunque existen scripts para
solucionarlo:
*
css3-mediaqueries-js
respond.js
When can I use CSS3 Media Queries?

CSS3 MEDIA QUERIES
EJEMPLO PRÁCTICO
/* Small screen */
@media screen and (max-width:600px),
screen and (max-device-width:480px) {
/* our CSS here... */
}
/* Still small (but scaling up) */
}
/* Desktop */
}
/* Wide screen */
}

CSS3 MEDIA QUERIES
LO QUE NO MOLA :(
Según Jason Grigsby en su artículo :
Se añade más código CSS (en la web mobile la velocidad importa!).
Dejar que el navegador escale las imágenes es una mala idea:
Imágenes grandes = Grandes ficheros a descargar
innecesariamente.
El redimensionado es "CPU and memory intensive" por parte del
navegador.
Utilizar Media Queries para servir distintas imágenes no es lo ideal
(aunque las escondamos vía CSS muchos navegadores las descargan
de todos modos).
Las Media Queries no optimizan el HTML o el JavaScript.
Las Media Queries no estan bien soportadas.
Ignoran el contexto mobile.
Tener una web mobile separada es bueno.
CSS Media Query for Mobile is Fool’s Gold

CSS3 MEDIA QUERIES
RESPONSIVE WEBDESIGN STILLROCKS!
“Planear el diseño para tamaños diferentes y pensar
modularmente acerca de bloques y como ubicarlos
según tamaño de pantalla, es bueno.”

RECURSOS
, de Ethan Marcotte.
, de Smashing
Magazine.
, de Opera Software.
. Rapid Prototyping of Fluid Layouts, Adaptive CSS and
Responsive Design.
, de Jason Grigsby.
, de Net Magazine.
Responsive Web Design
Developing RWD With Opera Mobile Emulator
Opera Mobile Emulator
ProtoFluid
CSS Media Query for Mobile is Fool’s Gold
50 fantastic tools for responsive web design

DUDAS, PREGUNTAS, BOSTEZOS…
☛ The End ☚

Front end basics - Responsive Web Design

Front end basics - Responsive Web Design

Más contenido relacionado

La actualidad más candente (12)

Destacado (9)

Similar a Front end basics - Responsive Web Design (20)

Más de Nadal Soler (6)

Último (20)

Front end basics - Responsive Web Design