Introducción al Diseño Web Adaptable o Responsive Web Design

Hoy en día los usuarios de nuestras páginas web o tiendas online pueden acceder a las mismas desde diferentes medios: un ordenador de sobremesa con pantalla panorámica, un móvil, una tableta… Partiendo de la base de que el diseño de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseñador, en el programador o en el dueño de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo más placentera posible con independencia de qué medio esté usando para verla. Es por ello que últimamente tantos sitios webs están utilizando lo que se llama Responsive Web Design o Diseño Web adaptable.

Nota: Actualización de este artículo: Diseño web adaptativo: mejores prácticas

¿Qué es el Responsive Web Design o Diseño Web Adaptable?

Son una serie de técnicas que permiten a nuestra página web adaptarse al medio a través del cual un usuario está accediendo a la misma. Los tamaños de pantalla cambian según el medio con el que se accede (no es lo mismo una pantalla de un iPhone que la de un monitor panorámico de sobremesa) pero el usuario cada vez más exige que su experiencia usando nuestra web sea la óptima en cada caso concreto. Utilizando HTML y principalmente CSS podemos servir al usuario una versión de nuestra web en función del ancho de pantalla utilizado. Es decir, nuestra web se adapta al ancho de pantalla, responde ante los cambios del tamaño la misma. Además podemos pensar en mejorar el acceso a formularios, botones, etc… Eso es Responsive Web Design o Diseño Web Adaptable.

¿Por qué es importante el Diseño Web Adaptable?

Como nos dice este artículo de InternetRetailing la web a través del móvil está defraudando a los usuarios. ¿La razón? Los sitios no están optimizados, no están pensados para verse a través de una pantalla tan pequeña como la del móvil. Como decíamos antes, si el usuario es lo más importante no podemos permitr que esto suceda con nuestra web.

Además, tal y como explico en el artículo Haz una auditoría SEO a tu web, la experiencia de usuario debe ser prioritaria a la hora de pensar en tu estrategia SEO. Las webs con mejor experiencia de usuario gustarán más, serán más compartidas, mejor valoradas, más populares. Y eso en SEO es muy importante.

Dado el gran número de medios y navegadores existentes no es factible crear una versión de nuestra web para cada uno de ellos, por lo que necesitamos un sistema para que nuestra web se adapte al contexto en el que está siendo vista, optimizándose de manera automática.

Primer paso: El diseño fluido

El principal concepto en el que se apoya el Diseño Web Adaptable es en abandonar los anchos fijos de nuestra web. Estos deberán ser fluidos. En lugar de diseñar nuestra web basándonos en valores fijos (por ejemplo width: 960px), el diseño fluido está pensado en términos de proporciones. De esta manera cuando veamos nuestra web a través de la pequeña pantalla de un móvil todos los elementos de la web se harán más pequeños guardando la proporción entre ellos. Por ejemplo, para saber ahora el ancho de un elemento tendremos que dividir el ancho inicial del mismo entre el ancho del elemento “padre”, por llamarlo de alguna manera sencilla. Pongamos que tenemos por ejemplo esta estructura:

Diseño web fluido

En este ejemplo partíamos de unos valores fijos: un contenedor de 960 pixels y dentro del mismo un elemento de 360 pixels de ancho. Si dividimos el segundo entre el primero y multiplicamos el resultado por 100 obtendremos el valor de 37,5%, que será el ancho que aplicaremos a dicho elemento. Es decir, el ancho del elemento interior será siempre el 37,5% del ancho del primero. De esta forma cuando el ancho del elemento “padre” se adapta, todos los anchos de los elementos interiores varían en función de su porcentaje. Ahora el elemento interno, en la hoja de estilos, tendrá en lugar de un width=”360px” un width=”37,5%”.

Lo mismo haremos con los tamaños de las fuentes (por ejemplo, si el tamaño general es del 100%, que equivale a 16px, y tenemos un título de 22px, su nuevo tamaño será de 22/16 = 1.375em). ¿Pero, qué pasa con las imágenes u otros elementos que tienen un ancho fijo? Podemos adaptar su ancho así:

De esta manera su ancho nunca excederá del ancho del elemento que la contiene. Y si dicho elemento cambia de ancho, también lo hará la imagen en todos los navegadores modernos. ¿He dicho modernos? Efectivamente, IE7 e IE6 no lo soportan. Para estos navegadores lo mejor es incluir en su hoja de estilos específica:

Esta regla es completamente distinta de la anterior: Ahora decimos que la imagen (por ejemplo) siempre tendrá el mismo ancho de su contenedor. Es por ello por lo que hay que tener cuidado sobre qué elemento se aplica.

Esta última opción está aplicada de manera general (no sólo para IE) en nuestra página de trabajos realizados. Probad a reducir el ancho de la ventana del navegador y veréis como se reduce el tamaño de cada imagen.

Esto está muy bien hasta que nos encontramos con anchos de pantalla realmente pequeños (por ejemplo un móvil). Si tenemos una web con tres columnas, montones de botones, menú horizontal a la derecha del logo, etc.. al comprimir tanto el tamaño de la pantalla, por mucho que los anchos sean fluidos, puede acabar todo en un caos. Es probable que tengamos que prescindir de ciertos elementos de la web o situarlos en un lugar diferente. Para ello utilizaremos los Media Queries.

Segundo paso: Los Media Queries

Como decíamos ningún diseño escala de manera adecuada cuando cambia el contexto para el que fue pensado. Los Media Queries forman parte de CSS3 e inspeccionan las características físicas del medio que va a mostrar nuestro diseño (no olvidemos que “query” equivale a “pregunta”, es como preguntar: ¿qué medio se está usando?). Si las características del medio utilizado por el usuario están dentro de un condicional establecido con los Media Queries, se aplicarán una serie de instrucciones CSS contenidas dentro del mismo, de esta manera cuando nuestro diseño fluido cambia de tamaño podremos aplicar una serie de instrucciones CSS pensadas en exclusiva para ese nuevo tamaño. Vamos a ver un ejemplo.

El ancho de pantalla actual del iPhone es de 320px. Vamos a suponer que para ese ancho nuestro diseño fluido presenta una serie de dificultades (puede ser desde cambiar el logo, eliminar una columna, cambiar la organización de los elementos de la pantalla, etc…). Dentro de nuestra hoja de estilos haríamos:

Como veis la instrucción se compone de dos partes: el tipo de medio utilizado (o Media Type, en este caso “screen”, que agrupa a todos los medios que se ven via una pantalla) combinándolo mediante un “and” con el Media Query (max-width: 320px). Estamos preguntando: ¿Es un medio con pantalla y tiene un ancho de 320px o menor? Entonces le aplicamos los estilos situados entre los corchetes correspondientes.

Podemos empezar desde este ancho e ir subiendo a otras posibles opciones. Algunos autores recomiendan optimizar estos anchos de pantalla:

  • 320px
  • 480px
  • 600px
  • 768px
  • 900px
  • 1200px

La mayor parte de las veces estos son demasiados anchos de pantalla, no hay tiempo suficiente para tanta optimización. Investiga bien cuales serán (o son si tienes ya datos históricos gracias por ejemplo a tu herramienta de analítica web) los anchos usados por tus usuarios y céntrate en ellos. Lo más habitual es, al menos, hacerlo para 480 píxeles.

También puedes, si quieres, dar una serie de reglas CSS para pantallas superiores a un ancho determinado, usando min-width. Por ejemplo, para anchos superiores a 1.200px:

Como veis podemos tener perfectamente separados los estilos de cada ancho de pantalla para el que queramos optimizar nuestro diseño. Si queréis incluso separar las hojas de estilo podéis también hacerlo. Por ejemplo, si queréis cargar una hoja de estilo independiente para anchos de pantalla inferiores a 480 píxeles:

O también:

Podéis ir incluso más allá gracias al uso de “and” para poner un mínimo y un máximo en los anchos de pantalla donde aplicar los estilos:

O detectar si es un iPhone 4 (por Thomais Maier):

O incluso detectar si estamos en un iPad y su orientación (por Cloudfour):

¿Qué navegadores soportan los Media Query?

En general todos los navegadores modernos lo soportan. Eso quiere decir que Internet Explorer 8, 7 y 6 no lo soportan (qué raro!). Afortunadamente hay soluciones utilizando Javascript, por ejemplo respond.js. Tal y como podéis ver (y traduzco) “respond.js proporciona un script rápido y ligero (3kb minified / 1kb gzipped) que permite utilizar diseños web adaptables en navegadores que no soportan CSS3 Media Queries – en concreto Internet Explorer 8 e inferiores”.
Otra opción (que es la que uso yo normalmente) es usar Modernizr.

Meta tags

Por último, es importante añadir un meta-tag dentro del elemento header de nuestra web que le diga al navegador que use el ancho del medio (por ejemplo, del móvil) como ancho de la web, anulando la escala inicial:

Actualización: Ver comentarios más abajo.

¿Puedo ver un ejemplo?

Hay muchos diseñadores que están ya realizando nuevas versiones de sus webs utilizando media queries y diseño fluido. Creo que un buen ejemplo es el nuevo diseño de CSS-Tricks. Si cargáis la página, a medida que reducís el ancho de la ventana del navegador veréis cómo se va adaptando el diseño. Incluso ha introducido animaciones para mover elementos de sitio (como el buscador) a medida que reducimos el ancho de pantalla. Como podéis leer en el artículo, Chris Coyier explica su nuevo diseño, destacando:

  • Su diseño por defecto es para navegadores con un ancho superior a 1200px
  • Hay dos optimizaciones con media query a 1024 y 860px
  • Utiliza Respond.js para hacer funcionar los Media Queries en Internet Explorer

Otro gran ejemplo es Robot or Not?, utilizado por Ettan Marcotte como ejemplo de su gran libro Responsive Web Design.

Otro ejemplo, quizás menos efectista que los anteriores, es esta web sobre Garret Keizer.

En Media Queries podéis ver una colección de sitios que usan Diseño web adaptable.

Artículos recomendados

Os recomiendo que leais el artículo de Ethan Marcotte en A List Apart. Es el que empezó a hablar del “Responsive Web Design” o Diseño Web Adaptable.

También es interesante ver Frameworks que te ayudarán a acelerar tus desarrollos o a aprender más sobre el tema investigando cómo están hechos, como el 320 and Up. Otro conocido framework es Less Framework 4.

Using Media Queries in the Real World es también otro artículo interesante con valiosos consejos.

Para testear tu diseño web adaptable con distintos anchos de pantalla en el mismo navegador. También te puede interesar esta plantilla con ejemplo para Photoshop de Elliot Jay Stocks de 1000px para diseño web adaptable.

Otro interesante artículo es el de Cloud Four, en el que nos avisa de que los media queries no son la solución definitiva, especialmente debido al problema de las imágenes y a la mayor lentitud de carga de los móviles.

En relación a este último artículo hay que decir que el Diseño Web Adaptable no es siempre la mejor solución para llevar un sitio web al móvil. Hay que pensar siempre en el contexto en el que el usuario va a ver nuestra web y qué información va a demandar. Es probable que a través del móvil muchas veces busquemos una información distinta que la que buscamos desde el ordenador de sobremesa, por lo que no vale con servir la misma información a un tamaño diferente. Además, sitios web con más carga de imagen que de texto lo tendrán más dificil, dada la menos velocidad de descarga del móvil. Nota: Es interesante http://adaptive-images.com/, que permite servir una imagen diferente según el ancho de pantalla.

70 comentarios en “Introducción al Diseño Web Adaptable o Responsive Web Design

      1. hola buenas tardes juan
        te escribo por que pienso que me puedes ayudar, estoy un poco desesperado y estoy buscando informacion por todos lados

        un ex amigo informatico me iso una web de prestachop y lo que pasa ahora que ya no somos amigo y no puedo modificar mi web, lo que puedo es meter productos por el panel de control, pero no cambiar de plantilla, colores ect,,,

        si me puedes ayudar de como hacer yo todo eso estaria muy agradesido

        espero tu respuesta

        un cosrdial saludo
        gracias.

        1. Hola Issac,

          Lamentablemente no puedo aconsejarte que cambies nada si no tienes controlado qué estás haciendo. Lo mejor es que contrates los servicios de un profesional que te haga los cambios que necesites.

  1. Buenas
    me ha encantado el post. Soy muy fan de csstricks y me di cuenta de la genial adaptación que hace según el tamaño de pantalla, y me quedé alucinando. Me parece que también seré fan de este blog.
    Suerte!.

  2. hola Juan, creo que es el mejor post en español que he encontrado hasta la fecha y difícilmente superable, actualmente estoy en medio de una reingeniería de conocimiento en cuanto a web design, hoy creo que un buen diseñador web debe conocer conceptos de usabilidad, debe conocer conceptos de ux, debe saber html/css/js, debe saber usar psd/ai/fw/dw e id, si, in design que bien sirve para maquetar para ipad, además no debe dejar de lado al ms expression que otra vez vuelve a estar en los requisitos de muchos trabajos, tiene que, por último, meterse de lleno al css3, al html5, conocer mejor o estudiar el jquery (creo yo que es la librería más usada), empezar a darse una vuelta por las nuevas tecnologías de adobe html5, estar al tanto de buenas practicas de diseño de apps y empezar a tener en mente en sus presupuestos el responsive design, como ves, el área del diseño web se vuelve más compleja pero más interesante! otra vez, genial post y gracias por ello

  3. Que gran articulo, mil gracias por tan valiosa información. Quisiera hacerte unas preguntas:
    1) Será necesario realizar un sitio responsive web design sin morir en el intento?
    2) Que sitio me recomendarías para registrarme y realizar un sitio responsable?

  4. hola Juan

    encontré un error en el tutorial, y es que cuando dices …. ” Esta última opción está aplicada de manera general (no sólo para IE) en nuestra página de trabajos realizados. Probad a reducir el ancho de la ventana del navegador y veréis como se reduce el tamaño de cada imagen. ”

    tal cosa no ocurre, he probado de reducir el ancho de la ventana del navegador y las imagenes NO se reducen de tamaño -el firebug me indica que tienes el width: 100% en vez de max-width: 100%-

    saludos

    1. Hola martin,

      Si, eso pone en el artículo, que en esa página está con width: 100%

      Depende de con qué ancho comiences, pero se reducen de 619 a 475px

        1. Me alegro, gracias Martín!

          Lo que si es verdad es que nuestra web no está adaptada. En casa del herrero cuchillo de palo… Pero estamos rediseñándola y antes de que acabe el año lanzaremos una nueva, lo que pasa es que estamos con mucho trabajo y no tenemos tiempo para nada. Ultimamente tengo hasta algo abandonado el blog, a ver si lo retomo cuanto antes!

  5. Hola muy interesante el articulo, te felicito mira tengo una peque duda, por cuestiones de trabajo tengo inplementar un diseño web adaptable y bueno la infraestructura esta alojado el sitio es un servidor iis 6.0
    La verdad no se si sorporte yo nunca he trabajado con iis soy amante de GNU/Linux y el software libre, y no encontrado mucha información sobre el tema, tu que opinas ????

    Saludos

    1. Hola Paúl,

      Tampoco tengo experiencia en ese sentido, pero para crear un diseño adaptable no deberías tener problema puesto que lo importante va a ser el HTML que generes y la hoja de estilos.

      1. Si es verdad pero como tu mencionas en el articulo que media query no soportan las distintas versiones de IE 6 -8 que raro……….. no te parece como que si puede tener igual problemas si trabajo con IIS 6.0, peor que es una versión antigua, bueno me va a tocar investigar mas y empezar a probarlo, igual gracias por la respuesta y nuevamente te felicito por el artículo

        1. No tengo experiencia con desarrollo sobre servidores windows, pero ten en cuenta que eso te afecta a nivel servidor, es decir, si tienes que programar en ASP o una versión más antigua de ASP, etc… pero el HTML que generes que llegue al navegador del usuario no debería ser diferente, no?

        2. Espero que no te moleste mi comentario pero si no sabes diferenciar entre que tecnologías son del lado del cliente y cuales del servidor o como funcionan estas deberías de darte una vuelta por la escuela, tus archivos html,css y js no son mas que texto que el navegador interpreta y muestra, el servidor no tiene nada que ver con la forma en que se muestre el contenido lo único que este hace es servir la información que le pides y nada mas.

  6. hola he creado una web pero tengo un problema, con el chrome se ve perfectamente, pero con el internet explorer no, pk en las imagenes con el chrome puedo poner height:* , i en canvio en el internet explorer tengo k poner un numero, no puedo poner asterisco para k se adapte la imagen al Div, i en una galeria de imagenes k tengo fotos de diferentes tamaños.. no puedo poner un numero de tamaño pk no son todas iguales i saldrian algunas deformes, sabes si hay alguna cosa que funcione como el asterisco pero k lo entienda tambien el internet explorer?

  7. Que bueno encontrar un artículo como este pues desde que empecé con CSS siempre abogué y pensé que es mejor diseñar y maquetar los divs en base a porcientos, gracias por el post,
    salu-DDoS

  8. La verdad es que la traducción a diseño web adaptable no me parece muy acertada (aunque no veo como traducir responsive). El motivo es que un diseño creado con un layout fijo y media queries sería adaptable, pero no responsive. Responsive es cuando es un layout fluido junto a media queries.. yo al menos prefiero utilizar el término responsive porque me parece mucho más acertado.

    1. Gracias Sandra,

      Quizás tengas razón y sea más acertado hablar de “reactivo” o algo por el estilo….

      Es que intento no usar palabras inglesas ( aunque en nuestra profesión es una batalla imposible)

  9. A mi me gusta la palabra que usó Adobe al principio, le llamaba Liquid Design.

    Diseño líquido suena bién…aunque no es tan autoexplicativa como las que proponéis.

    El líquido se adapta o fluye allá por donde pasa…tomando nuevas formas sin perder su esencia.

    1. Hola,

      Si, lo que sucede es que además de líquido hay que ajustar contenidos al medio. Quizás para móvil algunos contenidos no sean relevantes, o al revés.

      Lo que sí está bien de la definición de líquido es olvidarnos cada vez más de saltos en los media queries y que la web esté rota entre salto y salto e ir adaptando en cada momento en que la web se rompa, ya que dado el gran número de tabletas diferentes que están surgiendo no hay que pensar en dispositivos (es el nuevo término de moda, “device agnosticism”) sino en que la web no se rompa en ningún momento.

  10. Son muchas las ventajas de realizar un diseño web responsive, no únicamente se trata de usabilidad (aunque sí es el punto más importante). Ahorro de recursos (nada de desarrollos independientes por dispositivo) e incluso para posicionamiento web un diseño adaptable mejora los resultados. Un gran post.

  11. Excelente Juan, me sirvio como introduccion a este tema y es un primer paso , gracias por tu contenido te sigo en TW desde ya, saludos

    1. Pues sí, es bastante sorprendente, sobre todo viniendo de una empresa porque normalmente son blogueros sin más los que lo hacen. Han usado hasta mis imágenes. Creo que es fácil saber cual es el original, sólo hay que ver cuando se publicó uno y otro )) Pero bueno, ya estoy acostumbrado a estas cosas. Al principio mandaba emails, ahora ni me molesto.

      1. Aunque esta vez sí les he mandado un email al ser una empresa (ya que puede ser que sea un artículo pagado y no sepan que es copiado). No parece que vayan a quitar el artículo pero me han dicho que van a poner que la fuente principal es mi artículo, con un enlace al mismo. Bueno, algo es algo.

  12. Disculpa q haya hecho el comentario asi de esa manera, es q me estoy documentando sobre el tema, y despues de leer tu articulo, trate de leer el otro y ahi me di cuenta

    Pero hablando claro, este es el mas completo que he leido hasta ahora, y en español..j.ejeje

     

    1. No te preocupes, en realidad te lo agradezco, sino no me habría dado cuenta! Les he mandado un email para que sean conscientes del tema y eliminen el artículo. Me contestaron muy rápido pidiendo disculpas y diciéndome que lo iban a investigar, aunque ahora veo que tienen la web caída, por lo que no sé qué han hecho….

    1. Gracias Gianluca.

      La tendencia actual de algunos frameworks como HTML5 Boilerplate, es usar simplemente:

      Las razones son:
      – Accesibilidad, ya que maximum-scale=1.0 hace que el usuario no pueda usar el zoom.
      – Ausencia de problemas, ya que initial-scale=1.0 causa el zoom en un bug que sucedía en IOS al girar el móvil.

    1. Hola Andrés,
      Con un media query en la hoja de estilos puedes ocultar ese div para un ancho de pantalla determinado. No sé si es eso a lo que te refieres.

  13. Hola Juan.

    Si eso es exactamente lo que quiero hacer, verás el caso es que tengo un formulario de suscripción debajo del artículo y otro en la barra derecha, hay todo bien.

    El problema es que en la versión de móviles automáticamente el sidebar lo pone en el fondo, el resultado es que sale dos veces seguido el formulario de suscripción uno encima de otro, no quedando muy profesional.

    ¿Conoces algún tutorial para hacer lo que me comentas? Me sería muy útil.

    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">