En los últimos meses/años estamos viviendo un momento en que la compatibilidad entre diferentes plataformas no sólo depende de un proveedor, si no que el mercado se está distribuyendo y descentralizando además de aumentar exponencialmente en navegación desde terminales móviles. En respuesta, han surgido diferentes tecnologías o maneras de entender las anteriores que nos permiten adaptar los contenidos a todos los usuarios, sin morir en el intento claro. Una de ellas es lo conocido como “Responsive Design“, y se puede ver claramente como funciona en los sites de la entrada relacionada con esto, simplemente, redimensionar el navegador y mirar como mola.

Responsive Design es la utilización de tecnología CSS3 con tal de remaquetar el site de una manera ágil y dinámica, con todo lo positivo que ello supone aunque por otro lado no es oro todo lo que reluce. En este pequeño artículo voy a intentar desgranar un poco que es, donde nos puede ayudar, que limitaciones tiene y si vale la pena o no.

Comentado anteriormente, utiliza tecnología CSS3 como base, de manera que no es necesario tocar nada de programación para poder crear las diferentes versiones del site. Para ello, lo que este concepto nos puede ayudar es en cargar y aplicar diferentes hojas de estilo según la resolución de la pantalla en la que estemos visualizando el site, ojo porque es independiente del SO y de la versión del navegador, tiene en cuenta varias opciones, las que más nos van a servir son las siguientes:

•    Alto y ancho de la pantalla del navegador
•    Alto y ancho de la pantalla del aparato
•    Orientación, por si está vertical o horizontal

Las diferentes opciones de la etiqueta “media” para este propósito son:

•    Width/Height: es el ancho/alto de la pantalla de la aplicación sobre la que se visualiza el site.
•    Device-width/Device-height: es el ancho/alto del dispositivo de la aplicación sobre la que se visualiza el site.
•    Orientation: se puede pasar “portrait” o “landscape” y nos permite controlar la visualización en ambos modos.

Un ejemplo de ello podría ser el siguiente:
<link rel=”stylesheet” type=”text/css” media=”only screen and (max-width: 480px)” href=”small-device.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”general.css” />

Lo que estamos haciendo es asignar un fichero CSS llamado “small-devices.css” que se activará en el momento que nuestra pantalla tenga una resolución de 480px o inferior, en caso que tuviese 481px cargaría el fichero CSS genérico. Permitiendo marginar hasta límites tan altos como queramos entre diferentes tipos de tamaño y modos, de una manera realmente fácil y cómoda.

Hasta aquí todo han sido cosas positivas y que nos ayudan de una manera sobresaliente, no obstante, también existen diferentes problemas que nos complican el resultado final. En primer lugar, tenemos que pensar, que a los usuarios de escritorio no le gusta esperar para ver una página, como por ejemplo la home del site, y más o menos, entienden, que quizá deberán esperar algo más si quieren ver una imagen con gran resolución si la han solicitado. No obstante, y aquí vienen los problemas, por norma general los usuarios quieren extrapolar la velocidad de su navegador de escritorio a su navegador móvil, siendo este último más pobre en opciones y, el dispositivo, sin contar con conexión WiFi, considerablemente más lenta.

Ahora voy a pasar a considerar una serie de cuestiones que ponen en entredicho si realmente a nosotros nos va a beneficiar o no hacer una “portabilidad” utilizando esta tecnología o no:

Imágenes
En primer lugar, las imágenes que podemos tener en un dispositivo móvil son considerablemente más pequeñas, incluso en su tamaño máximo, con tal de evitar scrollers horizontales de modo que tenemos que encontrar un sistema práctico de poder redimensionar en peso estas.

Por medio de PHP se puede hacer fácilmente no obstante tenemos que integrarlo con el dispositivo que lo está viendo en cada momento, no obstante hay que tener en cuenta el coste que conlleva a nivel de CPU en el servidor.

Contenidos no visibles
La función que hacen los media-querys y los CSS es mostar/esconder y/o modificar los estilos de manera que las diferentes cajas de maquetación se adapten, bien, esto implica que si un contenido no se puede mostrar no lo eliminamos de la carga en ningún momento, simplemente no se muestra, lo que no hace que la carga sea menor, lo que conlleva una optimización peor.

Compatibilidades con CSS3
No todos los navegadores móviles son compatibles y no nos van a permitir hacer lo que queremos, el gran Quirksmode nos ilustra en el tema. Existen alternativas para obtener el mismo resultado, por ejemplo con JS se podía detectar el tamaño de la pantalla y cargar un fichero u otro, o incluso hay una librería llamada “CSS3 Mediaqueries JS” que nos ayuda con este asunto, pero estamos en la misma situación de la carga de ficheros innecesarios en ciertos momentos.

Creado vs Portados
Por norma general todas las cosas que están creadas para una función específica responden mejor que las que tienen varias funcionalidades aprovechando ciertas tecnologías disponibles, por ejemplo, no es lo mismo visitar Google+, Facebook o Twitter mediante una navegador móvil que mediante las aplicaciones creadas para ello. Por lo que, tendremos que pensar bien en que medida nos va a funcionar mejor que opción, y para ilustrar el concepto que mejor que una imagen gracias a la ayuda de YSlow. Comparamos en la izquierda el :

Como se puede ver, claramente la versión móvil explícitamente creada tiene un peso y menor y el número de peticiones es menor por lo que está mucho más optimizada en rapidez al usuario móvil con tal de la que la experiencia escritorio y móvil sean iguales.

Necesidades
Y no por estar el último punto es el menos importante. Es importante entender que necesidades tienen los usuarios cuando visitan el site, ya que no es lo mismo que un usuario necesite consultar los datos de contacto a que tenga que buscar o leer contenidos durante un tiempo.

Testing
Y es que parece una chorrada pero si queremos asegurarnos de que nuestros usuarios van a tener una experiencia buena, tenemos que hacer un testing intensivo. Existen diferentes maneras de hacerlo, unas más caras que otras e incluso gratuitas pero siendo de pago no, el tiempo que debemos dedicar a este punto es importante y asegurarnos, de la manera que podamos, de que los emuladores realmente emulan como debería ser.

En conclusión, nada es la panacea, y siempre va a depender de a quien y como queramos llegar y si nuestros usuarios van a aumento de cara móvil o son más de escritorio, de manera que en unos casos sí será interesante hacer una versión móvil y en otros con las soluciones como el Responsive Design tendremos una alternativa fácil y rápida.