Hace algunos años, cuando comenzaba la carrera por crear sitios cada vez más atractivos e interactivos, todo el diseño estructural de los mismos se basaba en tablas, sí tablas, como las de tu hoja de cálculo. Esto permitía cierta flexibilidad pero requería mucho trabajo y no garantizaba una experiencia óptima (o al menos usable) si el dispositivo del usuario no tenía especificaciones similares a las del que usó el desarrollador.

Además los navegadores estaban en pañales y todos interpretaban el HTML como podían (o como querían), por lo que un sitio podía verse radicalmente distinto dependiendo del navegador y su versión, sistema operativo, etcétera. Era como el salvaje oeste.

Los estándares al rescate

Poco a poco fue surgiendo la necesidad de crear un organismo que se encargara de estandarizar ciertos aspectos del Internet: el World Wide Web Consortium (o W3C como también es conocido). Una de sus principales tareas fue definir un conjunto de reglas para la presentación de los contenidos, así como el soporte de nuevas características como audio, video y animación sin importar el navegador y esto se ha logrado a través de varios estándares como CSS3 y HTML5.

Estos nuevos estándares generaron una revolución en la forma de crear sitios web y uno de los cambios más importantes fue estructural: el modelo de cajas.

Como ya lo mencionamos, antes todo se basaba en tablas, similares a un clóset o estantería: una vez que está armado, es muy complicado (si no es que imposible) cambiar su forma, agregar columnas o filas, cambiar su ancho, etcétera. Sin embargo, el modelo de cajas ofrece un sistema modular en el cual podemos cambiar el tamaño, anclaje, dirección o posición de cualquier elemento sencillamente.

Otro factor decisivo en esta nueva forma de ver el contenido web fueron los dispositivos móviles: al hacerse cada vez más inteligentes pasaron de ser simples teléfonos a contar con versiones especiales de los principales navegadores. Por lo que había que hacer que los sitios funcionaran correctamente en cualquier dispositivo.

Tamaños de pantalla

Y es que no era lo mismo mostrar un sitio en una laptop o computadora de escritorio con un monitor a, digamos 1140 por 900 pixeles que en un teléfono inteligente o tableta con resolución variable: desde 960 por 640 pixeles para el iPhone 4 hasta 2436 por 1125 pixeles para el iPhone X.

Era fundamental encontrar un método para adaptar los contenidos de los sitios, ya que los primeros en adoptar estos nuevos dispositivos solían tener dos versiones distintas, la de escritorio y la de móviles, lo que generaba problemas a la hora de actualizar la información o reparar errores. Se trabajaba doble.

La solución llegó de la mano de los nuevos estándares y de una nueva filosofía de diseño.

Responsividad

Un sitio se dice que es responsivo si ha sido creado con la infraestructura necesaria para adaptarse a diferentes dispositivos y mostrar la información de forma que sea accesible sin importar el tamaño de la pantalla, densidad de pixeles o relación de aspecto (además de otros factores, como permitir el uso sin teclado y mouse).

Esto se logra a través de una cuidadosa preparación de las reglas que establecen la capa presentacional del sitio: decidir desde el momento del diseño cómo es que van a fluir los elementos que componen al sitio (botones, párrafos, imágenes y más) dependiendo del ancho de la pantalla en la que se va a consumir el contenido, por ejemplo, mostrando varias columnas en dispositivos de escritorio y una sola en móviles sin sacrificar la usabilidad.

Ahora los diseñadores se enfrentaban a una nueva forma de crear, pero aún se tenían dos versiones del sitio y generalmente el proceso era definir la visualización en dispositivos de escritorio y luego adaptarla a los dispositivos móviles. Lo cual, como era de esperarse, generaba algunos problemas técnicos importantes.

¡Los móviles primero!

Ya se había cambiado el paradigma de diseño, que no solamente debía contemplar laptops y equipos de escritorio sino también una nueva gama de teléfonos, tabletas y cosas inteligentes con acceso a internet. Pero aún faltaba cambiar algo y este cambio sería decisivo para la evolución de los sitios y aplicaciones web como los conocemos hoy en día: la filosofía mobile-first.

Criticado entonces por algunos, aclamado por otros; lo cierto es que este nuevo enfoque en el cual se diseñaba primero para móviles y luego se redistribuía ese mismo diseño para los demás dispositivos ha permitido que los sitios contemporáneos puedan visualizarse (y utilizarse sin dramas) en cualquier aparato que cuente con una pantalla y un navegador: teléfonos, tabletas, laptops, refrigeradores, asistentes inteligentes, es más, hasta sistemas de entretenimiento automotrices. No importa el dispositivo si el sitio está bien diseñado y su ejecución sigue los lineamientos del web moderno.

Y es éste ultimo punto con el que nos quedaremos: web moderno. Si, hoy en día cualquiera puede diseñar su sitio y armarlo con las herramientas que nos dan algunos servicios o plataformas. Y se va a ver bien... a veces... en casi todos los dispositivos.

Consulta a un profesional

En este sentido es muy importante que al momento de acercarte a una agencia o estudio digital les requieras que tu sitio sea al menos responsivo y preferentemente mobile-first a fin de que tus usuarios no sufran cada que lo usan; es mejor consultar a alguien con experiencia para evitar futuros problemas.

Nuestros diseñadores siguen al pie de la letra estos principios y usan herramientas estándar en la industria como Sketch o Adobe XD para preparar la propuesta gráfica; mientras que nuestros desarrolladores se apegan estrictamente a los lineamientos de la W3C para generar código que funciona correctamente en todos los navegadores modernos.

No esperes más y ven con nosotros; aquí analizaremos tu proyecto correctamente para que sin importar si tus usuarios navegan desde una laptop o un tostador, puedan visualizar tu información y usar tu sitio sin ningún problema. ¡Estamos a tu servicio!