Internet es enorme y antiguo, y los dispositivos son cada vez más pequeños y compactos. Actualmente hay que adaptar tu pintura para un lienzo más pequeño sin perder su belleza. Aquí es donde entra en juego el diseño adaptable
Los sitios web ahora pueden verse tan bien en un teléfono como en un monitor de computadora. Pero no siempre fue así. Los desarrolladores necesitaron años de experimentación para llegar a ese punto. Y seguimos mejorando cada día.
A lo largo de este artículo descubriremos la historia del diseño web responsivo (Responsive Web Design), así como la evolución de los sitios web a través del tiempo.
En los inicios del Internet los diseñadores web sabían perfectamente como se verían sus sitios web debido a que la única forma de acceder era por medio de una computadora de escritorio con solo un puñado de resoluciones. Esto significaba que los diseñadores podían colocar cosas en cualquier lugar de la pantalla que quisieran sin preocuparse por adaptarlo a diferentes tamaños.
En los últimos tiempos, la mayoría de los desarrolladores han empezado con HTML básico, el cual se basa en cajas rectangulares que se van apilando unas sobre otras de manera predeterminada. En un inicio, HTML incluía etiquetas h1 a h6, etiquetas de imagen, listas, tablas, párrafos, entre muchas otras; incluso para las cosas más básicas (que ahora se hacen usando CSS). Todas estas etiquetas existen incluso hoy en día, aunque algunas de ellas quedaron obsoletas en HTML5 porque eran demasiado básicas.
Todo esto se derivó de una necesidad que tenían los diseñadores de crear una forma estructurada de diseñar elementos. Tenía que ser flexible y completamente personalizable.
Esto llevó a la creación de hojas de estilo en cascada (CSS), una forma estándar de diseñar elementos HTML.
“Las hojas de estilo en cascada o CSS son una forma de diseñar cualquier elemento HTML. Tienen un conjunto de propiedades predefinidas que se pueden aplicar a cualquier elemento HTML. Estos estilos se pueden incrustar en la misma página HTML o usarse como un archivo .css externo”
Cuando los diseñadores tuvieron control total sobre la página web, tenían que asegurarse de que se viera bien en todos los tamaños de pantalla.
Las computadoras de escritorio siguen siendo populares hoy en día, pero la mayoría de las personas también utilizan dispositivos móviles para navegar por la web. Ahora los diseñadores tienen menos ancho pero una altura más útil, ya que el desplazamiento es muy conveniente en los dispositivos de pantalla táctil en comparación con los equipos de escritorio.
Los sitios web ahora tenían que incorporar el diseño web adaptable:
“El diseño web receptivo es un enfoque del diseño web que hace que las páginas web se muestren bien en una variedad de dispositivos y tamaños de ventanas o pantallas.”
La forma más común de trabajar con pantallas más pequeñas es una barra lateral. Una barra lateral es como un cajón donde se pueden guardar los enlaces y otras cosas no tan importantes. Los diseñadores simplemente transfieren todas las cosas secundarias a la barra lateral para que la página web se vea limpia.
Los antiguos y enormes sitios web con miles de páginas se enfrentaron a un dilema: responder o no.
Cualquier diseñador web sabe que tener que hacer una transición de una pantalla más grande a una más pequeña es lo peor. Tu lienzo se hace más pequeño, mientras que la pintura sigue siendo la misma. O eliminas algunas partes de tu pintura o haces que se adapte.
Dado que no existían pautas para ser receptivo en el pasado, los diseñadores web a menudo usaban formas ingenuas de colocar elementos en varias partes de la pantalla. Por ejemplo, usando <table> etiquetas.
Usar una etiqueta de tabla para un diseño fue una mala práctica por varias razones, como:
Las tablas no están pensadas para diseños. Sirven para mostrar datos tabulares de forma compacta.
Las etiquetas de tabla, al igual que las etiquetas de conjunto de marcos, no responden y no se adaptan a tamaños de pantalla más pequeños.
La tabla no se puede renderizar hasta que se carguen todas sus celdas, mientras que el uso de etiquetas div para un diseño les permite cargar de forma independiente.
Estos eran los problemas a los que se enfrentaban los sitios que ya existían. Para los nuevos sitios web, el diseño responsivo se convirtió en una necesidad para competir con otros.
Google también introdujo recientemente la indexación de dispositivos móviles, lo que significa que prefiere sitios web optimizados para smartphones, siendo esta una razón más para adaptarse.
La web está creciendo a un ritmo increíble. Las empresas están pasando sus negocios al mundo digital y la competencia es más dura que antes.
También hay una discusión sobre si las empresas realmente necesitan una aplicación móvil. Con el crecimiento de las aplicaciones web progresivas (PWA) y varias API web, la web es mucho más poderosa que antes. La mayoría de las funciones nativas como notificaciones, ubicación, almacenamiento en caché y compatibilidad sin conexión ahora son posibles con PWA.
Aunque cabe aclarar que las PWA no reemplazan a las aplicaciones nativas. Las aplicaciones nativas seguirán existiendo. Las PWA son solo una forma más sencilla de lograr esas funciones sin tener que crear una aplicación móvil.
El cambio de las tendencias de diseño web se inclina más hacia el rendimiento y la experiencia del usuario. Y seguiremos continuando con esto.
También nos dirigimos hacia la Web 3.0:
“Web 3.0 es la próxima generación de tecnología de Internet que depende en gran medida del uso del aprendizaje automático y la inteligencia artificial (IA). Su objetivo es crear sitios web y aplicaciones web más abiertos, conectados e inteligentes, que se centren en utilizar una comprensión de los datos basada en máquinas.”
Esto significa que todo estará conectado y las máquinas también usarán Internet.
Un diseño web bueno, limpio y minimalista con más enfoque en el contenido ayudará a las máquinas a comprender mejor las cosas. Internet es un lugar abierto con mucha innovación.
En ATURA podemos asesorarte y/o ayudarte a crear tu sitio web adaptable.
¡Llámanos!
- Miguel Córdova
Contácto
