En defensa de las mesas y flotadores en el desarrollo moderno

Hace más de veinte años, las tablas eran la forma principal en que se creaban las páginas web en HTML. Les dio a los creadores web un control constante sobre la creación de páginas con cierto “diseño”. Los sitios ya no tenían que estar solo de arriba a abajo de manera lineal: podían configurarse con columnas que se alinearan de izquierda a derecha y de arriba a abajo. En aquel entonces, se consideró un gran avance.

Sin embargo, las tablas nunca fueron diseñadas para diseñar páginas y, de hecho, hoy en día presentan todo tipo de problemas cuando se usan de esa manera. Fue un truco conveniente , pero en ese momento muy bienvenido, particularmente para aquellos que intentaban lograr un diseño súper específico que las formas anteriores no podían manejar.

Avancemos rápidamente a los días modernos y ahora es obvio que hubo toneladas de problemas con el enfoque del diseño de la mesa. La accesibilidad es un tema importante. Los elementos , y tableno thson exactamente accesibles, especialmente cuando están anidados en varios niveles de profundidad. Los lectores de pantalla (los dispositivos que leen el contenido web y sirven como medida del cumplimiento de la accesibilidad) tienen dificultades para analizarlos en bloques coherentes de contenido. Eso no quiere decir que las mesas sean malas; simplemente nunca fueron concebidos como un mecanismo de diseño.trtd

Mira este diseño de tabla. No dudes en ejecutarlo a través de VoiceOver o cualquier software de lectura de pantalla al que tengas acceso.

Sí, ese ejemplo se parece mucho al diseño típico de un sitio web, pero está diseñado únicamente con una tabla. Puede ver con qué rapidez se vuelve inflado e inaccesible en el mismo momento en que comenzamos a usarlo para cualquier cosa que no sean datos tabulares.

Entonces, después de más de 20 años de pasar por el timbre, se podría pensar que deberíamos evitar las mesas por completo. Si nunca ha enviado un diseño basado en tablas, sin duda ha escuchado historias de guerra de aquellos de nosotros que lo hemos hecho, y esas historias nunca son amables. Es como si hubiéramos convertido las tablas en el “Internet Explorer de elementos HTML”.

Pero eso no es del todo justo porque las tablas efectivamente cumplen un propósito en la web y, de hecho, son accesibles cuando se usan correctamente.

Las tablas están diseñadas para manejar datos que están relacionados semánticamente y se presentan mejor en un formato lineal. Entonces, sí, podemos usar tablas hoy en el año 2020, y eso probablemente seguirá siendo así dentro de muchos años.

Aquí hay una tabla que se utiliza para mostrar exactamente lo que pretende: ¡ datos tabulares !

Con el impulso hacia los estándares web a principios de la década de 2000, las tablas se dejaron de lado como solución de diseño en favor de otros enfoques, sobre todo la floatpropiedad CSS. Tanto los diseñadores como los desarrolladores se regocijaron porque, por primera vez, teníamos una verdadera separación de preocupaciones que permitía al marcado hacer las cosas de marcado que necesita hacer y a CSS hacer las cosas visuales que necesita hacer. Eso hizo que el código fuera más limpio y mucho más fácil de mantener y, como resultado, pudimos centrarnos en estándares reales, como la accesibilidad e incluso otras prácticas, como el SEO.

¿Ves (o más bien escuchas ) la diferencia en este ejemplo?

Muchos de nosotros hemos trabajado con carrozas en el pasado. Fueron diseñados originalmente para permitir que el contenido fluya alrededor de imágenes que flotan hacia la izquierda o hacia la derecha, y aún están en el flujo del documento. Ahora que tenemos características de diseño más nuevas (nuevamente, como grid y flexbox), los flotantes también se han quedado en el camino, tal vez porque hay mejores maneras de lograr lo que hacen o porque también tienen las mismas características malas. rap como tablas después de haber sido (ab)usado durante mucho tiempo.

¡Pero las carrozas siguen siendo útiles y relevantes! De hecho, tenemos que utilizarlos para que la shape-outsidepropiedad funcione.

Un caso de uso legítimo floatpodría ser empaquetar contenido alrededor de un archivo blockquote.

Las funciones CSS como diseños de cuadrícula, flexbox y varias columnas se encuentran entre las maravillosas herramientas con las que tenemos para trabajar en estos días. Con aún más posibilidades de diseño y un código más limpio y accesible, seguirán siendo nuestros enfoques de diseño preferidos durante muchos años.

No hay trucos ni código adicional en este ejemplo de flexbox del mismo diseño que hemos visto a lo largo de este artículo:

---

Entonces, la próxima vez que esté considerando mesas o flotadores, ¡acúselos con confianza! Bueno, cuando sepas que la situación se alinea con el uso previsto. No es que espere que salgas de esto con un entusiasmo renovado por las mesas y las carrozas; sólo que, cuando se usan correctamente, son técnicas perfectamente válidas e incluso siguen siendo partes indispensables de nuestro conjunto de herramientas general.