Mejorando la usabilidad de un sitio web con jQuery

Mejorando la usabilidad de un sitio web con jQuery:
Nuevamente tenemos a José Vicente Carratalá con un excelente artículo en exclusiva para video2brain.
El objetivo de este artículo es demostrar cómo la tecnología puede contribuir fácilmente a la mejora de la usabilidad de un sitio web.
Al planificar el diseño de un sitio web, uno de los principales problemas con el que nos encontramos es el de la anchura del sitio con respecto a las múltiples resoluciones de pantalla de nuestros usuarios.
En el caso que trato en este artículo, he revisado en primer lugar el analytics del sitio web www.comotocar.es, para revelar las siguientes resoluciones de pantalla:


La idea, teóricamente, es estudiar las resoluciones con las que entran mis usuarios para crear una resolución óptima. Sin embargo, en la práctica, vemos cómo las resoluciones con las que entran los usuarios del sitio web son tan dispares como para ir desde 1920 x 1080 hasta 1024 x 768. Es decir, una variación de prácticamente el 100% en el eje X horizontal.
Al probar el sitio en diferentes resoluciones, el resultado es el siguiente:

A 1920 x 1080 el espacio sobrante en pantalla es demasiado
En las resoluciones de 1280 x 720 y 1360 x 768 es donde el sitio web mejor se ve, ya que he apostado por un término medio


Sin embargo, en resoluciones inferiores, el contenido queda gravemente cortado

Evidentemente, reducir el tamaño de mi maquetación perjudicaría a los usuarios de pantallas más grandes, y viceversa. Así pues, ¿qué puedo hacer para que mi maquetación se vea igual en todos los monitores?
Ya sabemos que con CSS3 disponemos del parámetro «media» que nos permite adaptar nuestra web a varios rangos de pantalla. De hecho yo soy un gran defensor del uso de «media» en CSS3, como pudisteis ver en el eSeminar video2brain Desarrollo de webapps para dispositivos móviles, sobre todo para crear maquetaciones para múltiples dispositivos. Pero este caso es ligeramente diferente, ya que no estoy consierando múltiples dispositivos, sino múltiples resoluciones de un mismo dispositivo (una pantalla de ordenador). CSS3 media sigue siendo una opción válida, pero nos obliga a crear varios archivos CSS, lo cual, en el fondo, no deja de ser una duplicación o triplicación de trabajo.
Para este caso he optado por una solución diferente:

Voy a usar la nueva función de CSS3 transform:scale. Mediante transform:scale, puedo ampliar y disminuir el tamaño de todo mi sitio web de manera uniforme, sin tener que reprogramar todo el CSS para cada resolución. De esta forma, introduciendo una simple instrucción CSS, puedo ampliar y disminuir el tamaño de la maquetación.
En mi CSS introduzco (desarrollando en principio para Chrome/Safari):
html{

…

–webkit-transform-origin:50% 0%;

–webkit-transform:scale(1.5,1.5);

…

}
Y esto hace que la página se vea un 50% más grande en cualquier monitor, lo que beneficia por ejemplo a la resolución de 1920 x 1080, ya que ya no se pierde tanto espacio alrededor.

Sin embargo, estoy perjudicando gravemente al resto de resoluciones.
Podría poner esto:
html{

…

font-family:arial;

–webkit-transform-origin:50% 0%;

–webkit-transform:scale(0.5,0.5);

…

}
Lo que haría que la web se viera correctamente en 1024 x 768 e incluso en 800 x 600, pero perjudicaría gravemente a las resoluciones superiores.
Lo que voy a hacer, por tanto, es hacer que ese factor de escala sea dinámico. ¿Cómo lo puedo hacer? Por ejemplo con Javascript/jQuery.

Elimino el CSS de transform, y en la etiqueta script de javascript escribo:
var x;

x=$(document);

x.ready(inicio);

function inicio(){

var y;

y=$(«html»);

y.css(«-webkit-transform-origin»,«50% 0%»);

y.css(«-webkit-transform»,«scale(0.5,0.5)»);

}
Tras lo cual, he conseguido pasar el código CSS a Javascript — jQuery.

A continuación, creo una regla de tres, en la que pongo:
var x;

x=$(document);

x.ready(inicio);

function inicio(){

var y;

y=$(«html»);

y.css(«-webkit-transform-origin»,«50% 0%»);

y.css(«-webkit-transform»,«scale(«+(window.innerWidth/1400)+»,»+(window.innerWidth/1400)+»)»);

}
Con lo que habremos conseguido que la maquetación se vea igual en cualquier resolución de pantalla, usando Chrome o Safari.

La pregunta más evidente que puede surgir es: ¿De dónde sale el parámetro 1400? Respuesta: La web original estaba diseñada para verse óptimamente en una pantalla de 1400 x 800. Por tanto, si window.innerWidth es igual a 1400, el factor será 1400/1400=1, con lo que la web se escalará en el resto de resoluciones para verse como originalmente se veía a 1400 x 800 píxeles. Evidentemente podemos jugar con este valor para personalizar la escala de visualización.
El siguiente paso es establecer compatibilidad con el resto de navegadores:
var x;

x=$(document);

x.ready(inicio);

function inicio(){

var y;

y=$(«html»);

y.css(«-webkit-transform-origin»,«50% 0%»);

y.css(«-webkit-transform»,«scale(«+(window.innerWidth/1400)+»,»+(window.innerWidth/1400)+»)»);

y.css(«-moz-transform-origin»,«50% 0%»);

y.css(«-moz-transform»,«scale(«+(window.innerWidth/1400)+»,»+(window.innerWidth/1400)+»)»);

y.css(«-o-transform-origin»,«50% 0%»);

y.css(«-o-transform»,«scale(«+(window.innerWidth/1400)+»,»+(window.innerWidth/1400)+»)»);

y.css(«-ms-transform-origin»,«50% 0%»);

y.css(«-ms-transform»,«scale(«+(window.innerWidth/1400)+»,»+(window.innerWidth/1400)+»)»);

}
El único problema que nos quedaría por solucionar, es añadir compatibilidad con versiones anteriores a Internet Explorer 9, que no soportaban ningun tipo de transform:scale.
En este caso estamos de suerte, ya que Microsoft soporta una propiedad no estándar de CSS llamada «zoom», que también soportan Chrome y Safari, pero no Firefox y Opera.
De esta manera, podríamos usar Zoom para Chrome, Safari e Internet Explorer, y transform:scale para Firefox y Opera, quedando asi:
var x;

x=$(document);

x.ready(inicio);

function inicio(){

var y;

y=$(«html»);

y.css(«zoom»,(window.innerWidth/1400));

y.css(«-moz-transform-origin»,«50% 0%»);

y.css(«-moz-transform»,«scale(«+(window.innerWidth/1400)+»,»+(window.innerWidth/1400)+»)»);

y.css(«-o-transform-origin»,«50% 0%»);

y.css(«-o-transform»,«scale(«+(window.innerWidth/1400)+»,»+(window.innerWidth/1400)+»)»);

}
A partir de este momento, por tanto, podremos comprobar que la web se visualiza con las mismas proporciones independientemente de la resolución de pantalla que tengan nuestro usuarios, ajustándose automáticamente en monitores pequeños, y ampliándose automáticamente en monitores de gran resolución.
En definitiva, lo que hemos conseguido con estas 11 líneas de Javascript+CSS es posibilitar que una web se visualice exactamente igual independientemente de la resolución del navegador con el que se acceda, demostrando de esta manera dos cosas:
1.-La programación dinámica, bien usada, sirve para mejorar la experiencia del usuario.

2.-El coste de desarrollo e implementación de mejoras en la usabilidad de un sitio web, como la que acabamos de ver, no tiene por que ser elevado.
Cursos relacionados: Usabilidad, jQuery, HTML5 y CSS3.