FRONT-END BASICSResponsive Web Design

(RWD) / ♣ Octubre 2012Nadal Soler @nadalsol

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

RESPONSIVE ARCHITECTUREActualmente 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 , de Ethan Marcotte.

“Fragmentar nuestro contenido a través de diferentesexperiencias "dispositivo optimizadas" es un

propósito insostenible. La alternativa a esto se llamaResponsive Architecture: crear sitios no sólo más

flexibles, sino que también se adapten al medio quelos renderiza.”

"Responsive Web Design"

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

* Server-Side Device Detection Techniques.

SSDDT

¿WTF IS RWD?

La finalidad del RWD es hacer que la web se visualicecorrectamente en distintos contextos (dispositivos), conindependencia 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 unaexperiencia completa: diseño adaptable + contenido adecuado yoptimizado.

“Responsive Web Design = Diseño WebAdaptable/Adaptativo/Responsivo”

SSDDT

INGREDIENTES PARA RWD1. 2. *3.

* No sólo imágenes sino cualquier otro media: videos, flash, carousels…

Grid flexibleImágenes flexiblesCSS3 Media Queries

GRID FLEXIBLE“Retícula fluida o elástica, que se adapta a cambios

de resolución de pantalla y dimensiones delviewport.”

GRID FLEXIBLECARACTERÍSTICAS

Flexible Typesetting, o fuentes escalables en medidas relativas (em).Evitar usar px!

GRID FLEXIBLECARACTERÍSTICAS

Grid (columnas) y espacios horizontales (widths, margins, paddings) enporcentajes (%).

GRID FLEXIBLEEN 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 undiseño.

GRID FLEXIBLE*, en

* Redimensiona la ventana del navegadorpara ver como se comporta.

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

IMÁGENES FLEXIBLES¿CÓMO HACER UNA IMAGEN FLEXIBLE?

Encapsular-la dentro de un contenedor de bloque (p.e. un <span> condisplay:block).Definir un ancho en porcentaje (%) a dicho contenedor, para que estesea flexible. El valor del porcentaje determinará su ancho en funciónde su padre.Opcionalmente el contenedor puede ir flotado.Establecer display:block y max-width:100% a la imagen. Dejar susatributos HTML width y height vacíos.

IMÁGENES FLEXIBLESEjemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:

<span class="flexImg wp25 floatR"> <img src="img/responsive_sample_l.jpg" alt=" " /></span>

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

IMÁGENES FLEXIBLESEjemplo. En este caso la imagen flexible ocuparía el 25% de su contenedor padre:

IMÁGENES FLEXIBLESSi necesitamos que la imagen sea un enlace podemos sustituir el tag <span> por 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 <span>. Should be combined with a percentage width class */ display:block;}.flexImg img { display:block; max-width:100%;}.wp25 { width:25%;}.floatR { float:right;}

IMÁGENES FLEXIBLESEjemplos con tamaños de imagen distintos:

*

* Redimensiona la ventana del navegador para ver como se comporta el layout e imágenes flexibles, junto con losmedia queries.

Responsive Web Design (demo)

CSS3 MEDIA QUERIES

Del libro , de Ethan Marcotte.

“Ningún diseño, fijo o fluido, escala bien más allá delcontexto para el que fue originalmente diseñado.”

"Responsive Web Design"

CSS3 MEDIA QUERIESPROBLEMAS COMUNES LAYOUTS FLEXIBLES

Imágenes irreconocibles (demasiado pequeñas o recortadas poroverflow: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?

LAYOUTS FLEXIBLES+

MEDIA QUERIES

CSS3 MEDIA QUERIES¿QUÉ SON Y PARA QUÉ SIRVEN?

Son un robusto mecanismo, creado por la W3C, para identificar no sólolos tipos de media, sino también para inspeccionar las característicasfísicas de los dispositivos y navegadores que renderizan el contenido.

¿Sigues sin saber de qué va esto?

mediaqueri.es

Robot or Not?

CSS3 MEDIA QUERIESDISTINTAS NOMENCLATURAS

Se pueden encadenar múltiples queries juntas mediante la 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 QUERIESCAPACIDADES DE LOS DISPOSITIVOS A DETECTAR

widthheightdevice-widthdevice-heightorientationand many more…

Lista completa en .W3C Media Queries - Features

CSS3 MEDIA QUERIESCONSIDERACIONES

Recaudar información detallada sobre los dispositivos ynavegadores de tu target, saber qué características de los mediaqueries 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 detoda la pantalla.Añadir este meta tag en el HTML:

Esto hace que el ancho del viewport del navegador sea igual al ancho de la pantalla del dispositivo, y establece elnivel de zoom al 100%. Con esto logramos mayor consistencia con el tamaño actual del dispositivo.

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

CSS3 MEDIA QUERIESCOMPATIBILIDAD

Algunos navegadores aún no las soportan*, aunque existen scripts parasolucionarlo:

*

css3-mediaqueries-jsrespond.js

When can I use CSS3 Media Queries?

CSS3 MEDIA QUERIESEJEMPLO PRÁCTICO

/* Small screen */@media screen and (max-width:600px),screen and (max-device-width:480px) { /* our CSS here... */}

/* Still small (but scaling up) */@media screen and (min-width:600px) { /* our CSS here... */}

/* Desktop */@media screen and (min-width:860px) { /* our CSS here... */}

/* Wide screen */@media screen and (min-width:1200px) { /* our CSS here... */}

CSS3 MEDIA QUERIESLO 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 descargarinnecesariamente.El redimensionado es "CPU and memory intensive" por parte delnavegador.

Utilizar Media Queries para servir distintas imágenes no es lo ideal(aunque las escondamos vía CSS muchos navegadores las descargande 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 QUERIESRESPONSIVE WEB DESIGN STILL ROCKS!

“Planear el diseño para tamaños diferentes y pensarmodularmente acerca de bloques y como ubicarlos

según tamaño de pantalla, es bueno.”

RECURSOS, de Ethan Marcotte.

, de SmashingMagazine.

, de Opera Software.. Rapid Prototyping of Fluid Layouts, Adaptive CSS and

Responsive Design., de Jason Grigsby.

, de Net Magazine.

Responsive Web DesignDeveloping RWD With Opera Mobile Emulator

Opera Mobile EmulatorProtoFluid

CSS Media Query for Mobile is Fool’s Gold50 fantastic tools for responsive web design

DUDAS, PREGUNTAS, BOSTEZOS…

☛ The End ☚