5 consejos para conseguir una web ‘responsive’

Hay cuestiones del plano puramente tecnológico que, a día de hoy, están fuera de cualquier duda. ¿Por ejemplo? El hecho de que el almacenamiento de documentos en la nube, en vez de acometerse en formato papel o en dispositivos físicos que pertenecen al propio usuario, supone un gran ahorro de espacio, tiempo e incluso dinero. Que a la gente le gustan las selfies. Que a los fabricantes les interesan los wearables. Que el Internet de las Cosas es el futuro. Que ya estamos en plena era del Big Data. Y que la movilidad lo ha invadido prácticamente todo con su ligereza de transporte y conveniencia de uso. Este último punto es muy interesante, porque ha supuesto cambios en el modo de vida de la gente desde un punto de vista personal y también en el plano profesional. Los trabajadores reclaman poder utilizar tabletas y smartphones en la oficina y las empresas están obligadas a responder a sus solicitudes sin mayor dilación. Y es que, si no, corren el riesgo de quedarse desfasadas y verse superadas por una competencia que nunca descansa, mucho menos ahora.

La movilidad se evidencia, más allá de tendencias del estilo BYOD, con otros rostros y otras necesidades. El crecimiento de los dispositivos móviles implica que cada vez es mayor la comunidad de usuarios que están dispuestos a descargar y probar aplicaciones para iOS, Android, Windows Phone y sistemas operativos similares. Asimismo, implica que son más las personas que consultan Internet desde pantallas más pequeñas que en el pasado. Unas pantallas que se caracterizan por su tactilidad y por haber generado unas reglas propias para relacionarse con el contenido. Tener una página web y no estar preparado para ofrecer una experiencia igual de favorable tanto si la visita se realiza desde un ordenador de sobremesa como desde un teléfono móvil supone un grave error, ya que sólo te ayudará a cabrear a usuarios y perder en credibilidad. Hasta los propios buscadores jugarán en tu contra. La herramienta de búsqueda online por antonomasia, Google, viene de renovar su algoritmo para premiar a las webs que presentan un diseño responsive por encima del resto.

Si no quieres hundirte en las listas de resultados de tan importante herramienta online y, sobre todo, si estás comprometido con tus clientes, no esperes más: ofrece una página que piense en lo móvil. No te preocupes si te encuentras algo perdido en estos temas y no sabes qué elementos deberías potenciar. En Silicon News hemos recopilado una lista de trucos para triunfar en el mundo de las webs que resultan de lectura y navegación agradable para quienes poseen teléfonos y tabletas. Se trata de los siguientes:

1. La fluidez por bandera. El primer aspecto que tienes que cubrir a la hora de reciclar tus conocimientos en diseño web es el de la impresión que causa la página de tu empresa en el espectador. Aquí entran unas cuantas cuestiones. ¿Se entrega información de utilidad desde el principio? ¿Carga rápido el contenido? ¿Está bien organizada la estructura? ¿Ayuda a la navegación intuitiva cuando se visita por vez primera? ¿Refleja con lealtad la imagen de tu marca? ¿Se antoja profesional? O, por el contrario, ¿responde a las pautas de diseño de hace años? Si no te suenan términos como HTML 5 y el diseño responsive, adaptativo o adaptable, haz saltar todas las alarmas y comienza a buscar a un experto que te ayude a solucionar tus problemas, porque ha llegado el momento de la renovación. Y, sobre todo, si hace tiempo que no le echas un vistazo a tu web desde un dispositivo móvil, haz la prueba ya mismo. No te escondas tras excusas y responde con sinceridad a estas dos últimas preguntas tan pronto tengas enfrente la versión móvil de tu página: ¿resulta fácil de consultar? y ¿está todo en su sitio, igual que cuando usas un ordenador?

Años atrás las ideas para una web se trazaban sobre las denominadas tablas de ancho fijo, valorando la resolución de la que gozaban las pantallas en cada momento. Primero fue el turno de los famosos 800×600 píxeles. Más tarde se dio el salto a los 960 y también a los 1.024 de ancho, como una forma de abarcar la variedad creciente que existía en el mercado de PC. Pero ese planteamiento ya está obsoleto. Dejó de tener sentido en el mismo instante en el que los usuarios pudieron elegir entre pantallas de prácticamente todos los tamaños y resoluciones, empezando por los clásicos sobremesas, modelos all-in-one de más de 27 pulgadas, portátiles que se pueden transportar de un lado a otro, convertibles o ligeros ultraportátiles, y terminando por el trío de phablets, tabletas y smartphones. Así que sustituye los diseños rocosos por otros basados en bloques movibles para cubrir el espacio que se ofrece en cada consulta particular, por pequeño o grande que sea. Hablamos de columnas capaces de apilarse unas debajo de otras a medida que se constriñe dicho espacio y menús que se pliegan sobre sí mismos.

2. El tamaño de las ventanas sí importa. Hay que tener en cuenta que el tamaño de un dispositivo y el de su pantalla va a determinar la amplitud que el usuario podrá darle a su navegador para moverse por tu web. Si hablamos de terminales móviles, estas dimensiones, como es obvio, no serán demasiado amplias, por mucho que se use el modo de pantalla completa. ¿Qué significa esto? Que no puedes pretender trasladar el diseño que ya tiene tu página, tal cual y sin pensar en tus clientes, al móvil. Olvídate de forzar a los usuarios a que invoquen al zoom para ver el contenido de una sección o a que hagan scroll horizontal desplazándose de izquierda a derecha para contemplar lo que no cabía de una foto o de un texto. Una web bien planteada debe abarcar por completo la ventana que la contiene, sin necesidad de ampliaciones ni salirse por los lados. El internauta es exigente y, si se topa con una navegación que le obliga a ir subsanando tus errores de diseño con más movimientos de los necesarios, abandonará la navegación.

Eso sí, no te agobies. Piensa que no tienes que crear una versión completamente distinta para móvil, sino actuar con inteligencia. Basta con ir desprendiéndose de aderezos e iconos y dejar sólo texto (o viceversa, para ahorra espacio si esos iconos que empleas tienen carácter universal), asegurarse de que tanto fotografías como vídeos se van reduciendo a medida que la ventana encoge (en este punto recuerda recurrir a las reglas width y max-width en CSS) y, como decíamos antes, pasarte a los diseños basados en columnas (pero que no sean estáticas).

3. El tamaño de la fuente también importa. El tamaño de la ventana del navegador que mostrará tu web en el móvil es crucial. Y el propio tamaño de la letra que elijas para dar vida a tus textos no lo es menos. Habrá títulos y partes que quieras destacar y seguro que funcionarán para los accesos móviles. Pero, ¿qué pasa con el resto? ¿Alguna vez te has enfrentado a un texto tan pequeño que más que leyendo en el móvil te sentías descifrando un jeroglífico? Es probable. La solución ante este inconveniente no es tirar de lupa digital e ir siguiendo las líneas de principio a fin, y vuelta a empezar, para ir superando párrafos. Lo que tienes que procurar es que todos los textos que vayan a aparecer en tu página web presenten un tamaño de fuente y también un interlineado, esto es, una separación entre renglones, que acomoden la lectura. Se trata de aplicar un poco de sentido común. Y, más allá de discutir si son más aconsejables los 12, los 14, los 16 o los 18 píxeles, por poner cuatro opciones, o el tipo específico de fuente que desconcentra menos al lector, es aconsejable recordar que este factor contribuye a simplificar la navegación independientemente del público al que va dirigida la página. Y también a comprender mejor lo que se está leyendo.

4. Vigila la distancia entre los enlaces. A la hora de hablar de los textos, una característica imprescindible de Internet y su fluir de unos contenidos online a otros es el enlace. Lo lógico es que tu página se nutra de unos cuantos de estos links, como los que provocan transiciones entre secciones o los que invitan a conocer más contenido. Y el error es colocarlos todos demasiado cerca, casi pegados. ¿Por qué? Porque en el móvil, por lo general, se interactúa con aquello que se muestra en la pantalla gracias a los dedos de la mano. No hay ratón ni cursor con forma de mano o flecha de punta fina que ayuden a pinchar de forma inequívoca sobre los distintos recursos que conforman la página. Y eso es algo que a veces se echa de menos. Podríamos decir, generalizando casi sin riesgo a equivocarnos, que todo el mundo ha sufrido en alguna ocasión el penoso síndrome de los dedos gordos y la frustración que éste provoca por acabar en un destino que no era el pretendido. Ocurre cuando alguien quiere abrir un enlace específico pero fracasa, activando cualquier otro de su alrededor. De ahí lo vital de colocarlos, ya sean hipervínculos en palabras o enlaces dentro de botones, con la separación suficiente y la ayuda de media queries en CSS para su correcto funcionamiento en todos los dispositivos.

5. Adiós flash, adiós. En su día, el Flash de Adobe se constituyó como una de las tecnologías estrella del diseño web. Pero ése es el tiempo verbal correcto: constituyó. Hablamos en pasado porque la época en la que los diseñadores desarrollaban con este componente en mente ha quedado superada. Hay que tener en cuenta que una compañía como Apple, de la que dependen sistemas operativos de popularidad mundial, ha mantenido una relación complicada con dicha solución en lo que se refiere a su soporte en dispositivos iOS modernos. Pensar en los usuarios de iPhone y iPad no es poca cosa cuando se diseña. Y también cabe señalar que a día de hoy existen alternativas de gran empuje y recomendadas por la industria como puede ser HTML 5. Lo mejor que puedes hacer si Flash aún inunda tu página web es buscarle un sustituto y cerciorarte de que el contenido es visible desde el móvil. De lo contrario no sólo te arriesgas a que tu web se vea mal, sino a que directamente no se vea nada. Junto a esta cuestión y el respeto de las leyes de lo responsive, con elementos optimizados para el móvil, cuida la velocidad de carga “minificando” el código, optando por imágenes de poco peso, reduciendo el número de peticiones de archivos y contratando un servidor que te dé garantías.

[nggallery template=nme images=40 id=135]