El diseño web atajos para el salón de la fama
Los diseñadores web siempre hemos sido un grupo astuto. Si hay una apariencia o funcionalidad específica que necesitamos lograr, generalmente podemos armar una solución. Ese es el caso incluso cuando no hay una norma o herramienta específica para guiarnos. Aquí es donde entra en juego el concepto del truco del diseño web.
Los hacks son métodos creativos, a menudo indirectos, para hacer que un sitio web se vea o funcione de cierta manera. A veces, llevan una connotación negativa. Por ejemplo, los diseños basados en tablas HTML se ridiculizaron como no accesibles para los lectores de pantalla. Pero no todos los hacks son malos.
De hecho, se implementan por la necesidad de ampliar el alcance de lo que es posible. La web siempre ha tenido sus limitaciones y los diseñadores han usado hacks para tratar de sortearlos.
Con eso, echemos un vistazo a algunos de los hacks de diseño web más útiles y frecuentes de años pasados, inspirados en una discusión de Twitter con colegas diseñadores. Si bien no necesariamente mantienen una vela a los estándares que tenemos hoy, fueron salón de la fama en su propio tiempo.
Diseños: tablas HTML y flotantes CSS
Nuestras primeras selecciones irán juntas a este salón de la fama virtual. Aunque su respectivo uso máximo estuvo separado por años, se utilizaron esencialmente para lograr lo mismo: diseños de varias columnas.
Tablas HTML
Antes de que CSS apareciera en escena, las primeras páginas web eran un asunto de una sola columna. No había relleno ni márgenes, y no había una forma estándar de colocar contenido en columnas horizontales. Es decir, hasta que un alma emprendedora decidió usar tablas para este propósito.
Por supuesto, las tablas HTML estaban destinadas a contener datos tabulares, no diseños de página. Pero en realidad eran una forma efectiva de hacer el trabajo hasta que apareció CSS.
Flotadores CSS
Las tablas tenían muchos inconvenientes, incluidos los problemas de accesibilidad mencionados anteriormente. También fueron lentos para renderizar en el navegador. Entonces, cuando se introdujeron los flotadores CSS , se vio como un cambio de juego para los diseñadores web.
Los flotantes no eran marcado HTML, por lo que eran más accesibles y podían aumentar el rendimiento. De repente, los diseños de varias columnas fueron posibles a través de CSS y podrían adaptarse mejor a cosas como el tamaño de la pantalla.
Sin embargo, las carrozas no nos llevaron hasta la tierra prometida. Si deseaba que las columnas tuvieran la misma altura, se debía implementar un hack de clearfix adicional .
Cada uno de estos elementos también sigue siendo muy útil hoy en día cuando se usan para su propósito original. Pero para los diseños, sus días están afortunadamente terminados.
Espaciado de elementos: espacios que no se rompen ( ) y Spacer.gif
Los diseñadores web orientados al detalle a menudo han buscado formas de espaciar elementos hasta el píxel exacto. Nuevamente, esto no fue tan fácil en el pasado. Por lo tanto, el espacio que no se rompe (& nbsp;) y spacer.gif se usaron para obtener más control sobre el espaciado.
Espacio sin ruptura ( )
¿Desea colocar un elemento horizontalmente, pero sin centrarlo ni alinearlo a la derecha? Agregar algunos espacios que no se rompen haría el truco.
Sin embargo, no era una ciencia tan exacta. El tamaño real de cada espacio dependía de la familia de fuentes y el tamaño de fuente. E incluso teniendo en cuenta esas diferencias, este truco podría tener un aspecto diferente dependiendo del navegador y el sistema operativo que estaba utilizando un visitante.
Spacer.gif
Este truco de espaciado más preciso se produjo al crear una imagen .GIF transparente (a menudo denominada spacer.gif ) y colocarla en una página. El aspecto atractivo era que, debido a que es una imagen transparente, los diseñadores podían establecer la altura y el ancho en cualquier cantidad de píxeles sin impactos negativos en el aspecto o el rendimiento.
CSS hizo que estos dos hacks fueran obsoletos. ¿Pero no sabrías que el editor de WordPress Gutenberg tiene un bloque Spacer que hace más o menos lo mismo? Simplemente demuestra que la necesidad sigue ahí.
Tipografía: texto basado en imágenes
La necesidad de este era bastante simple. La primera web se limitaba esencialmente a las fuentes instaladas en el sistema del usuario. Por supuesto, los diseñadores no tenían forma de conocer todas las fuentes a las que los usuarios tenían acceso, aparte de los elementos básicos como Times New Roman, Georgia, Arial y Helvetica.
Con eso vino la horrible decisión de crear imágenes llenas de texto en Photoshop . Si bien esto permitió el uso de prácticamente cualquier fuente, fue a expensas de la accesibilidad. Además, el uso de una imagen en lugar de una etiqueta de encabezado HTML también eliminó la semántica de la página, lo que podría dañar el SEO.
Encabezados adhesivos y navegación: marcos
Los marcos HTML quizás se adelantaron a su tiempo, ya que muchas de las tareas para las que alguna vez los usamos ahora se realizan a través de CSS y JavaScript.
El concepto era bastante simple. Cada «marco» individual dentro de un diseño era en realidad su propia página. Esta fue una manera fácil de separar un encabezado, pie de página o navegación del resto del contenido del sitio. Hacer un cambio en la navegación, por ejemplo, significaba un solo cambio en un solo archivo. Es similar a lo que incluyó el lado del servidor, solo con algunos otros beneficios de diseño incluidos.
El principal de ellos era la capacidad de crear encabezados y navegación «pegajosos». A medida que el usuario se desplazaba por el contenido, aún podía navegar fácilmente por el sitio.
Esta técnica cumplió su propósito, pero estaba lejos de ser ideal. No era muy adaptable en términos de diferentes tamaños de pantalla y tampoco era tan bueno para el SEO. También hubo algunas preocupaciones de seguridad sobre la carga potencial de un marco desde una URL nefasta.
Optimización de imagen: imágenes en rodajas
En los días previos a la disponibilidad generalizada de banda ancha, la optimización de imágenes era vital. Incluso una imagen de 50 kb podría pesar una página en una conexión lenta.
El gigante de software Adobe proporcionó una solución interesante. Con su software ImageReady , los diseñadores podrían dividir una sola imagen en cualquier cantidad de piezas más pequeñas. Cada segmento individual podría entonces optimizarse, teóricamente haciéndolos rápidos de descargar.
Pero eso no es todo. El software podría exportar los cortes a una tabla HTML. A partir de ahí, puede copiar y pegar ese HTML en su página.
El problema con esta técnica era doble. Primero, el diseño de la tabla podría tomar más tiempo para renderizarse, lo que podría matar cualquier optimización que haya logrado. En segundo lugar, podría ser un verdadero dolor mantener. Agregar un elemento de navegación a un gráfico de encabezado grande, por ejemplo, puede requerir comenzar de nuevo con un conjunto completamente nuevo de sectores, lo que requiere cambios en la plantilla.
Si bien la optimización de la imagen sigue siendo importante, afortunadamente la banda ancha nos permite un poco más de libertad con archivos grandes. Aun así, las versiones modernas de Photoshop todavía ofrecen corte de imágenes y exportación HTML.
Placating Internet Explorer: <!--[if IE]>
Hasta el día de hoy, todavía no es inusual escuchar a los diseñadores web ( incluido yo mismo ) maldecir la existencia obstinada de Internet Explorer. Su legado sigue vivo, en parte porque algunos usuarios simplemente no lo abandonan.
Debido a eso, parece que siempre estamos hackeando las muchas peculiaridades y limitaciones propias de IE. Durante muchos años, eso incluyó el uso de un comentario condicional para detectar usuarios de IE y mostrar estilos alternativos.
Era algo versátil porque podías aplicar estilos a todas las versiones de IE <!--[if IE]>, o apuntar a aquellos que usan versiones anteriores <!--[if lt IE 11]>. También puede usarlo al revés, buscando versiones mayores o iguales a una versión específica <!--[if gte IE 10]>.
Microsoft debe haber sentido cierta simpatía por los diseñadores web, ya que permitió que estos comentarios condicionales funcionaran en IE. Afortunadamente, su nuevo navegador Edge no requiere tales tonterías.
Hacks de diseño web para recordar
Los hacks en nuestro salón de la fama ciertamente no fueron los únicos utilizados por los diseñadores web. Hay innumerables cantidades de soluciones que nos ayudaron a hacer lo que parece imposible. Pero lo que distingue a esta lista es su uso masivo y, en algunos casos, el apoyo de las grandes corporaciones.
Y quizás lo mejor que podríamos decir sobre ellos es que funcionaron. Los usamos como un medio para un fin. Claro, pueden haberse mantenido unidos deshilachando la cinta adhesiva para conductos, pero lograr que ese diseño de alta mentalidad realmente se procese en un navegador se sintió como un logro real.
Aún mejor es que ayudaron a allanar el camino para lo que hoy es la web. La mayoría de los elementos de esta lista han sido reemplazados por estándares HTML y CSS, que benefician a todos.