Las técnicas de diseño web van y vienen como las modas ¿recuerdas Asynchronous, JavaScript y XML? Por varios meses en 2006 y 2007, el Ajax estaba de moda. Ahora, no tanto. Un cambio radical en la forma de utilizar las tecnologías ha visto un paradigma de desarrollo web que ha ascendido en los últimos meses, esta vez con poder de permanencia: Responsive Web Design.
(Lea: Ventajas, desventajas y datos del Responsive Web Design)
El principio de diseño y desarrollo de páginas web responsive (Nota del editor: “Sensibles” en español) garantiza que un sitio web sea visible desde cualquier dispositivo, con cualquier tamaño de pantalla, con una experiencia cómoda para el usuario. Se trata de respetar el hecho de que los usuarios quieren consumir los sitios web en su pantalla de 4 pulgadas del smartphone móvil, la pantalla de su mini-tableta de 7 pulgadas, el tamaño completo de su tableta de 10 pulgadas, la pantalla de su ordenador portátil, e incluso su 4H HDTV de pantalla grande. El diseño es sensible porque toma constantemente en cuenta las propiedades del dispositivo y el navegador en el que el usuario consume el contenido.
El Responsive Web Design utiliza juiciosamente las cuadrículas, que permiten a los desarrolladores definir cómo una experiencia escalará, así como imágenes, formatos y contenedores flexibles. También representa un cambio de mentalidad para el desarrollador, ya que ahora prescribe tamaños relativos, como 2.5 unidades de ancho, en lugar de medidas definitivas, concretas, tales como 202 píxeles, al colocar y clasificar elementos de una página.
Mediante el uso de medidas relativas y no definitivas para los elementos de una página y sus contenedores, el diseño básico y la usabilidad de una página se puede mantener al mismo tiempo que se sube o se baja en diferentes tamaños de navegadores –es decir, el sitio puede ser sensible a estos cambios-. Las páginas pueden eliminar elementos que no encajan en una ventana más pequeña, y también agregarla de nuevo cuando se amplía mediante el zoom del navegador, o se cambia a una pantalla más grande.
Si aún no has oído hablar de Responsive Web Design, sin duda estás destinado a estar expuesto a él. Incluso Google, sin duda uno de los guardianes de la industria de la Web, desde que los diseñadores crean sitios web esencialmente para atraer y retener el rastreador de Google y convencerlo de clasificar por lo alto sus sitios en consultas en los motores de búsqueda de los usuarios, ha abrazado el Responsive Web Design.
“Google recomienda a los webmasters seguir las mejores prácticas de uso de diseño web sensible, es decir, que tengan el mismo HTML para todos los dispositivos y utilizando sólo consultas de CSS media para decidir la reproducción en cada dispositivo”, dice el gigante de las búsquedas en la guía webmasters de Google.
(Lea: Diseño Web Adaptable: Cómo evitar que Google penalice tu página el 21 de abril)
Esto es lo que necesitas saber sobre diseño web sensible y la forma en que se fusiona con el entorno actual:
Los usuarios demandan experiencias de navegación móvil de primera clase
Una parte cada vez mayor de su público objetivo utiliza dispositivos que no soportan las resoluciones de ancho tradicionales en el navegador. Primero exigen una experiencia de primera clase en sus teléfonos y en un distante segundo lugar en sus escritorios.
Un apodo informal para el diseño web sensible y su desarrollo conjunto es “móvil primero”, que reconoce que una parte significativa de tráfico del sitio web en estos días proviene de dispositivos portátiles de todos los tamaños y formatos. Desde los teléfonos inteligentes a mini-tabletas y a tabletas de tamaño regular, una parte importante y creciente del consumo web está sucediendo en los dispositivos para llevar. Tú y tus desarrolladores ya no pueden asumir que tus sitios están siendo utilizados en una PC de escritorio de pantalla completa y desarrollar sitios móviles como una ocurrencia tardía.
Francamente, la situación del mercado de sitios web para móviles hoy en día es bastante deprimente. ¿Alguna vez has visitado un sitio web de una aerolínea en tu teléfono, por ejemplo? Eso era lo más probable una experiencia frustrante. Imagina un sitio idiotizado que te permite hacer una o dos cosas –chequear el estatus de vuelo y tal vez, sólo tal vez hacer el check-in para el vuelo– pero te devuelve al sitio completo para tareas tales como la reserva de entradas o la consulta del saldo de millas de viajero frecuente. El sitio completo tarda 45 segundos o más para cargar, claro está.
Esa no es ciertamente una experiencia «primero móvil». De hecho, ¿no sería una web de una aerolínea el sitio perfecto para un diseño «primero móvil»? Tienes un teléfono en el bolsillo o en la maleta la mayor parte del tiempo en un aeropuerto; no estás llevando tu ordenador portátil prendido con sesión iniciada en todas partes. ¿Por qué no podrías tomar una tarjeta de embarque, volver a reservar un vuelo, verte a ti mismo en modo de espera o actualizar las listas de forma predeterminada en los sitios móviles? Un cliente en un aeropuerto es un activo valioso, pero los sitios web de aerolíneas están a menudo diseñados para la persona en el hogar. En virtud de un paradigma de diseño web sensible, eso debería cambiar.
(Lea: Diseño Web Adaptable: la vida más allá del escritorio)
Los usuarios quieren contenido en este mismo segundo
Se accede a más sitios web a través de conexiones celulares por lo que es importante diseñar páginas que responden bien y se pueden utilizar a través de conexiones de latencia más lentas y/o superiores tan pronto como sea posible, incluso antes de que la página haya terminado de cargarse. Esto a menudo implica la creación de componentes de servidor que detecten qué tipo de dispositivo de un usuario está consumiendo contenido, para luego acceder a una base de datos completa de las diferencias de dispositivos para servir el contenido adecuado y del lado del cliente los controles adecuados (como JavaScript) así entonces las páginas se cargan más rápido de lo que de lo contrario harían en cualquier dispositivo dado.
Con un diseño web sensible, los requerimientos de media se utilizan para enviar las propiedades del dispositivo que un usuario está utilizando –en particular, el ancho del navegador– y el servidor sirve a diferentes reglas de estilo CSS que acaban dejando al usuario tener la mejor versión de la experiencia posible del sitio.
Sin embargo, esto puede virar rápidamente en un enfoque caro. Por un lado, esa base de datos del dispositivo será siempre cambiante, y esencialmente será una gran lista de rarezas –para este teléfono, cargue esta versión del código y envíe esta versión de la CSS, pero para esta tableta, envíe esta particular versión del código, y así sucesivamente. Crear y mantener esta base de datos consumirá tiempo y requerirá muchas horas de experiencia.
Esta parte del concepto global de Responsive Web Design puede estar fuera del alcance de las pequeñas y medianas empresas, que prefieren optimizar en un enfoque basado en estándares y, en esencia, esperar lo mejor. Por otra parte, esas empresas pueden ser capaces de tomar ventaja de los frameworks como jQuery Mobile que pueden consultar los dispositivos y realizar funciones inteligentes acerca de qué características de HTML y CSS funcionarán. Esta es, quizás, la zona más activa de la innovación en el paradigma del diseño web sensible.
La Tecnología de Publicidad Web no sostiene al Responsive Web Design
El desafío más común que los creadores de sitios web orientados hacia usuarios tienen –bueno, al menos los sitios orientados hacia el usuario financiados por dinero de la publicidad– es la forma de escalar la publicidad. Los banners suelen tener un ancho fijo y no escalan o disminuyen bien; simplemente funcionan a una cierto ancho y dejan de funcionar cuando ese ancho disminuye.
Obviamente, esto afecta los ingresos de los operadores del sitio. ¿Cómo pueden justificar hacer travesuras con el diseño y la creación de experiencias primero móviles cuando esos valiosas vistas y clics no están monetizados? Esta es un área donde la presión de los operadores de sitios será la gran palanca por la cual las empresas de publicidad serán inducidas a crear y proporcionar la tecnología para la que publicidad se convierta en compatible con las técnicas del diseño web sensible.
Sí, así sea que dirijas un equipo de diseñadores responsables de un sitio interno o externo, o que tú mismo seas un desarrollador web, necesitas saber que el diseño web sensible está aquí para quedarse. Familiarízate con él, estudia las técnicas e insiste en que tus socios hagan la tecnología que haga el diseño web sensible posible y atractivo a la vez.
Artículo original en Inglés por Jonathan Hassell vía CIO América Latina
Comentar