Diseño Web Interactivo o "Responsive Web Design" Guía y herramientas.

Diseño Web Interactivo o "Responsive Web Design" Guía y herramientas.

Por Kseso ✎ 8

Este artículo pretende ser una guía para aclarar conceptos, tener claro qué y cómo realizar tus páginas y las herramientas para verificar su comportamiento en los distintos escenarios posibles.
Te encontrarás con enlaces a artículos que desarrollan más a fondo algunos aspectos. Así que si eres lector habitual del blog, puede que veas esta entrada como un resumen de temas precedentes.

Nota: "Interactividad" en este contexto

No es de la página con el usuario. Es la respuesta o comportamiento de la página al dispositivo donde se muestra y a los cambios que pueda haber en el aparato una vez cargada la página (orientación, redimensionado...). También debe tener presente las capacidades técnicas del aparato y las condiciones o vías de conexión del mismo a la red.

Qué es el Diseño Web Interactivo o "Responsive Web Design"

De un tiempo a esta parte ha aumentado enormemente la disparidad de dispositivos con los que se accede a internet y los navegadores o sus versiones utilizados.
Variedad tanto en el tamaño de la pantalla, capacidades técnicas para procesar las páginas y sus contenidos, ancho de banda o velocidad en la descarga, tecnologías, lenguajes o propiedades que soportan... E incluso en algunos dispositivos estas características pueden cambiar una vez cargada la página. Por ejemplo el tamaño de la pantalla en función de su orientación.

Debido a lo anterior, es impensable abordar la cuestión realizando una página distinta por cada posibilidad, discriminar qué y cómo accede y servir la más apropiada.

Así que en base a la premisa anterior, se puede entender que el Diseño Web Interactivo o "Responsive Web Design" es la técnica que hace posible que tanto la forma (estilos) como la información (contenido) que se suministra a cada dispositivo en cada situación es la óptima y está optimizada para él.
O de otra forma: hacer lo más grata la experiencia al usuario con independencia de con qué o cómo visite la página.
Y hacerlo con un mínimo de recursos o esfuerzos, tanto para el visitante como para el desarrollador.
Aquí te lo explico desde otro ángulo.

Y ahora es donde te preguntas si éste concepto no es lo mismo pero en moderno de lo que hasta ahora se llamaban diseños flexibles, layouts fluidos y elásticos.

No. En primer lugar el Diseño Web Interactivo es más que evitar el scroll horizontal. Involucra qué contenidos se suministra y al mismo tiempo cómo se distribuye en la página y cómo se ha de mostrar en función de las capacidades y características técnicas del dispositivo al que se envía.
Y en segundo lugar no es algo exclusivo de Css. También están implicados otros lenguajes y aspectos.

Cómo lograr el Diseño Web Interactivo

  1. Las reglas @Media queries mandan
  2. Usa imágenes sensibles al medio "responsive images".
  3. Usa "Javascript discreto" o no invasivo (Unobtrusive JavaScript)
  4. Trabaja con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.

Reglas @Medias Queries

El peso de todo el control de la estructura o layout, así como la disposición e incluso la apariencia de los elementos recae en las reglas @media queries. Es obligado entenderlas y dominarlas para lograr un verdadero Diseño Web Interactivo o "Responsive Web Design".

Puedes iniciarte y conocerlas a fondo en los siguientes artículos:

  1. "Css3 @media Queries Un adivino de variables y hacedor de imposibles". Un repaso a fondo en castellano al documento del consorcio.
  2. "Colección de @media Queries para smartphones".
  3. Ejemplos de páginas basadas en @media queries
  4. Verifica con javascript si tus @Media Queries se ejecutan
  5. Anchuras mínimas en párrafos en diseños fluídos

En el artículo enlazado en 1 podrás conocer a fondo las reglas media queries. Las distintas formas de enlazarlas, las propiedades por las que podemos discriminar los medios de acceso, cómo utilizarlas, etc.
En los siguientes, casos muy concretos de su uso.

Gestión y control de las imágenes

Otro elemento imprescindible al que hay que prestar especial atención son las imágenes incluidas en la página. Control que debe hacerse en varios aspectos, tanto si son imágenes colocadas vía src en el html como si son fondos vía css:

  1. Qué versión de la imagen servir en función del dispositivo.
  2. Tamaño con el que se visualiza.
  3. Mostrar la imagen completa o una parte de la misma.

En este momento, el cómo servir una imagen u otra se está debatiendo intensamente. Los frentes desde los que se aborda la cuestión son múltiples e involucran a varios lenguajes.
Sólo a mode de ejemplo, hay realizaciones que discriminar en el html de diversas formas:

<img alt="Celebrating Halloween in style" src="TEST/halloween-mobile-1st.png" data-maxwidth320px="TEST/halloween-x1.png" data-minwidth1024px="TEST/halloween-x2.jpg" data-maxwidth1023px="TEST/halloween-x2.jpg" data-maxwidth767px="TEST/halloween-x1.png" data-maxwidth479px="TEST/halloween-x1.png" /> <picture alt="descripción"> <source src="peque.jpg"> <source src="media.jpg" media="(min-width: 400px)"> <source src="grande.jpg" media="(min-width: 800px)"> </picture>

Lógicamente, estas propuestas necesitan de ayuda por parte de javascript o algún otro lenguaje para seleccionar la versión de la imagen servida.

Pero con independencia de cómo se resuelva esta cuestión, con css sí puedes controlar al menos la presentación de las imágenes para que no ocurran desbordamientos.
Basta definir un tamaño máximo con la propiedad max-width, ya sea en los estilos generales o dentro de las medias queries específicas:

img, video, object {max-width:100%!important;}

Y si tienes que utilizar display:none en imágenes junto a las @media queries te será de ayuda éste artículo.

Más información sobre responsive imag

Artículos para ampliar información sobre la gestión y uso de las imágenes en el Diseño Web Interactivo o "Responsive Web Design":

  1. Responsive Images Community Group (W3c)
  2. On Responsive Images
  3. Adaptive Images for Responsive Designs
  4. Which responsive images solution should you use?
  5. Responsive Images and Web Standards
  6. Responsive Images Chart
  7. Adaptive Images
  8. Responsive images using css3

Herramientas, recursos y ejemplos del Diseño Web Interactivo

Frameworks

imagen ilustrativa de Responsive Web Design Frameworks

Muchos de los aspectos expuestos del Responsive Web Design ya los ofrecen resueltos muchos frameworks existentes. Una selección de ellos puedes encontrarlos en este artículo al respecto.

Testea en línea tus realizaciones

Posíblemente no tengas a mano en todo momento todos y cada uno de los distintos dispositivos para comprobar cómo se ve tu trabajo en ellos. Por suerte para ti, hay quien ha pensado en ello y tienes a tu disposición y en línea herramientas para testarlas:

  1. Responsive Web Design Testing Tool
    Aplicación en línea de Matt Kersley. Te mostrará cómo se ve la página en función del tamaño de la pantalla o por dispositivos.
  2. Simple responsive design test page
  3. Responsive Design Test Bookmarklet
  4. Resizer basada en jQuery

Ejemplos

recopilacion paginas @media queries css

mediaqueri.es: Extensa recopilación de páginas que hacen uso de esta regla de Css. Cada página es mostrada con cuatro capturas de pantalla a otras tantas resoluciones de pantalla/dispositivo además del enlace a ella.

Otra página que siempre se pone como ejemplo es Css-tricks de Chris Coyier.
Pásate por Robot or Not? de Ettan Marcotte.
2 veteranas: Colly y en ALA The Baker Street Inquirer

Una de arena al Diseño Web Interactivo

El "Responsive Web Design" basado sólo en la presentación adaptada del contenido al medio no es la panacea universal por sí mimo.
En la versión destinada a los teléfonos móviles deberías plantearte no sólo adaptar los tamaños, sino ir un paso más allá.
Tanto por el uso tan particular, como por sus características y por la limitación de tráfico de muchos usuarios quizás deberías analizar además de cómo se ve tu página lo que manda tu servidor. Aligera los datos, reduce las peticiones al servidor y el tráfico generado.

El artículo de Jason Grigsby en Cloud Four "CSS Media Query for Mobile is Fool’s Gold" es de lectura recomendada y es el contrapunto final perfecto a este artículo.

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 8

  1. Muy buen artículo y todo muy resumido y claro, importante en estos días que cada vez se usan mas los dispositivos móviles para conectarnos a internet

    ResponderEliminar
  2. Me gusta tu articulo, pero lo tengo q reeler pq todavia me lio con todo esto.

    ResponderEliminar
  3. Amigo como puedo colocar una imagen flotante con estilo responsive? este es mi codigo...?

    ResponderEliminar
  4. Daniel
    EL RWD es un concepto, una filosofía o forma de concebir y realizar las páginas teniendo en mente la disparidad de dispositivos y condiciones en las que se puede acceder a ellas.

    Float es una propiedad que puede o no ser usada en un desarrollo concreto.

    Las imágenes y la aplicación del "responsive" a ellas (estén o no flotadas) es una cuestión no resuelta definitivamente. Están en desarrollo varias aproximaciones.
    Le sugiero que lea el artículo "más píxeles, más problemas" y otros más sobre este tema que ya he publicado.

    Un saludo y gracias por tu visita.

    ResponderEliminar
  5. Excelente articulo, de alta calidad como ya nos tienes acostumbrados.

    ResponderEliminar
  6. Great article, i like the designs you have made

    ResponderEliminar
  7. Buen articulo, quiero dar mi aportación, actualmente los navegadores como Chrome y Firefox cuentan con una herramienta para poder testear los diseños simulando el tamaño de los dispositivos, para activar esta herramienta en firefox solo basta con ctrl + shift + m

    ResponderEliminar
    Respuestas
    1. Gracias Alejandro
      Sí, en estos 3 años y medio trascurridos desde que escribí el post los navegadores se han puesto al día en este aspecto también.

      Por cierto, mira a ver qué ocurre con tu perfil pues no se muestran ni tu nombre ni tu imagen.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap