Responsive Web Design II: Diferentes modelos

Después de haber hablado de los principios del diseño web adaptable, llegamos a la segunda parte del tutorial, con los modelos actuales, sus beneficios y sus debilidades. Como ya sabéis, tenéis el resto de entradas disponibles en el tab  Responsive Web Design, para acceder a cada entrada de forma sencilla.

 

Modelos de uso de Responsive Web Design

Como ya sabemos de la anterior entrega, el diseño web adaptable está pensado para aprovechar un mismo html para diferentes estilos según el dispositivo que lo muestre. Esto por tanto facilita enormemente el trabajo del robot de google (que solo debe indexar una URL), y el de los propios usuarios (que no tienen por tanto que acceder a una dirección distinta), además del beneficio en costo del mantenimiento.

Existen por tanto diferentes modelos a seguir, algunos con mejor vista por parte de los entendidos, y otros con menos, aunque quizás con algunos beneficios ocasionales. Aunque el tema es cuestión de debate en la actualidad, dudo mucho que cualquier experto no aceptara como una posible clasificación los tres que yo os propongo, y que detallaremos justo bajo estas líneas.

 

 

Misma URL, distintos HTML y distintos CSS

Sin duda se trata de la peor opción, pero quizás la más rápida para adaptar una web que ya esté online desde hace mucho tiempo. El mayor problema que tiene este método es referente al indexado del buscador, que puede tener bastantes problemas sino se configura correctamente. Para evitar esto, bastaría con usar Vary HTTP header, una suerte de código que permite avisar a los robots que la página puede modificarse según diferentes user agents. Otra solución viene dada por el atributo rel, rel=”canonical” para informar de la url equivalente del sitio completo y el uso en los sitemap de rel=”alternate”.

 

Misma URL, mismo HTML y distintos CSS

Es un caso muy común, y que funciona gracias a los meta de html, que pueden servir diferentes bibliotecas (en este caso CSS, pero podría tratarse de jQuery o JavaScript sin problemas), dependiendo de las variables elegidas.

Tiene la ventaja de la claridad, y que dependiendo del dispositivo, cargará uno o bien otro, ganando tiempo. El problema recae en cuando el mismo dispositivo debe aceptar un escalado (por ejemplo móviles, que se pueden ver en posición horizontal o vertical), lo que hace que deba cambiar dinámicamente su estilo, y por tanto cargar la página.

Las dos fórmulas que más se suelen usar son:

Suministrar la plantilla de CSS mediante JavaScript

Condicionas según el navegador (o el dispositivo) la carga de uno u otro CSS. Podéis ver un ejemplo en la siguiente imagen:

 

Suministrar la plantilla de CSS mediante PhP

Condicionas según el navegador (o el dispositivo) la carga de uno u otro CSS. Esta me gusta más que la anterior, ya que como pasa con JavaScript, dependes de que el usuario lo tenga activo, algo que no siempre ocurre. Podéis ver un ejemplo en la siguiente imagen:

 

Misma URL, mismo HTML y mismo CSS

Es el caso que más me gusta, aunque dependes para ello de conocer un poco CSS3 y sobre todo los MediaQuerys. La página cargará únicamente un HTML y un CSS, y será el propio CSS quien decida el estilo que debe mostrar. Un ejemplo sencillo lo tenéis en la siguiente imagen:

Tiene la ventaja de tener todo centralizado en un mismo CSS, y la desventaja de que en principio, debe cargar todo el contenido, aunque luego muestre el que sea adecuado.

 

Tenéis el resto de entradas sobre Responsive Web Design en Guía del diseño web adaptable.