Calcula el HTML que quieras en tu PHP de acuerdo al tamaño de la ventana del navegador

¿Qué tal estos días de julio y agosto? Are you ok? Os cuento que yo estoy liado en un proyecto de comercio electrónico que ha planteado un problema muy interesante que paso a compartir con vosotr@s. Se trata de una tienda virtual cuya estructura HTML y CSS está ya hecha con media queries, o sea, con Responsive Design.

Windows

Para los que sois nuevos en esta técnica, lo que acabo de decir es, entre otras cosas, que la tienda virtual que me han pasado tiene un juego de URLs que siempre sirve el mismo HTML, o lo que es lo mismo, es responsabilidad del navegador que recibe el documento HTML el presentar tal o cual aspecto visual de acuerdo al CSS que tenga programado.

Vayamos a por el problema en cuestión. Resulta que debo añadir a esta tienda virtual una capa presentacional adaptada a todos los dispositivos móviles -smartphones, tablets y ordenadores de escritorio-, pero sucede que el HTML de cada dispositivo se parece poco al de los demás. Si ya has hecho algún proyecto con Responsive Design supongo que estarás de acuerdo conmigo en que esta técnica es tanto menos adecuada cuanto más diverge el HTML de los dispositivos objeto de nuestra maquetación. Por tanto descartamos servir un mismo HTML base desde ya para no volvernos micos.

En realidad no hay mucha vuelta de tuerca; un caso como éste debe resolverse con una de estas opciones:

  • Diseñar mi nueva capa con Responsive Design, tal y como viene la tienda virtual base, por muy divergente que sea el HTML de todos los dispositivos de mi nueva capa, e intentar liarme lo mínimo posible.
  • Crear un HTML diferente para cada dispositivo y servirlo de forma dinámica en función del dispositivo que lo solicita.
  • Crear un HTML diferente para cada dispositivo y ponerlo en URLs distintas: m.mitienda.com y www.mitienda.com, por ejemplo.

¡No digo nada nuevo! Puedes echar un vistazo a las recomendaciones de Google para repasar la optimización de websites para móviles.

Después de pensar un buen rato al final me he decantado por la tercera opción. Así es, he hecho un HTML para los móviles (m.mitienda.com) y otro para las máquinas de escritorio (www.mitienda.com). Pero me he empeñado en sacar la segunda opción de la lista anterior donde sí puedo servir el HTML de acuerdo al tamaño de la ventana del navegador que lo solicita vía JavaScript, aunque finalmente la descarto porque no quiero introducir el pequeño penalty de la redirección que explico algo más adelante.

A diferencia de la solución clásica que pasa por delegar la toma de la decisión del dispositivo en el servidor para, a continuación, servir dinámicamente el HTML -echa por favor un vistazo a Mobile_Detect para saber más sobre esta técnica-, yo he JavaScriptizado esta parte, haciendo partícipe al navegador. ¡He querido simular con JS la adaptación del diseño HTML + CSS cuando el usuario cambia el tamaño de la ventana de su navegador, tal y como sucede con Responsive Design!

No sé si me explico, así que diré todo esto de otra forma. En resumen, como resulta que la tienda virtual que me han pasado está en Responsive Design, yo me he empeñado en servir dinámicamente el HTML de mi capa presentacional vía JavaScript porque (I) el HTML de los dispositivos de mi capa es muy distinto entre sí (debo separarlo), (II) para que el usuario vea siempre el mismo juego de URLs, y (III) para que el usuario tenga la sensación de que el diseño de la nueva capa es también Responsive (cuando el usuario cambia el tamaño de la ventana, ¡entonces el diseño también cambia!). Al final, como digo, he descartado esta solución porque introduce dos pequeños penalties -concretamente una petición GET dummy y una redirección HTTP-, aunque simula bien el diseño adaptativo mediante JavaScript y permite la separación de las estructuras HTML de los dispositivos.

Según este esquema, por la ausencia de estado en HTTP -HTTP es un protocolo sin estado-, el agente de usuario deberá informar al servidor web del tamaño de la ventana de navegador mediante una cookie en la cabecera de petición GET.

Fíjate que utilizamos el plugin JQuery jquery-cookie para trabajar cómodamente con las cookies.

En el otro lado de la comunicación el servidor enviará el documento HTML de forma dinámica, consultando el tamaño de la ventana, y realizando la redirección sólo en la primera conexión:

Para que el diseño se adapte a la resolución a medida que el usuario cambia el tamaño de su ventana (¡igual que en Responsive Design!), la versión móvil de la aplicación deberá correr este JS:

Y la versión escritorio de la aplicación deberá correr este otro JS:

Este esquema puede visualizarse en la siguiente figura (por favor, pincha en el dibujo para hacerlo más grande y verlo mejor):

0 comentarios

¿Me dejas un comentario? ¡Gracias!

Deja un comentario

Los campos obligatorios están marcados con *