Ver perfil

El camino de un sitio web, empieza con un menú

No disparen al webmaster
No sé a los diseñadores en la sala pero a mí la parte que más me cuesta en una web es la navegación. Me llevan por la calle de la amargura. Creo que gran parte de este oficio de diseño web se resume en hacer un menú como toca. Para empezar en su correcta disposición en todas las pantallas. En ocasiones te encuentras (OMG!) cosas como un menú de navegación en dos líneas. Otras veces el menú móvil es, como decía Churchill de la trending topic Rusia “un acertijo, envuelto en un misterio, dentro de un enigma”. Maquetar un menú está lleno de pequeños detalles. ¿Qué pasará si metes más elementos? ¿Cuántos niveles aceptará? ¿Cómo indicas visualmente la página activa en la jerarquía?. Así van surgiendo hasta convertirse en una parte nada despreciable del tiempo que dedicas a maquetar.
Ahora el CSS nos hace mucho trabajo. Con flex podemos hacer las travesuras que queramos en poco tiempo. De hecho abundan “codepen” con ejemplos de menú en puro CSS, que piden a gritos un copy & paste. Por supuesto muchas librerías de CSS ofrecen soluciones para menús desplagables o que colapsan según tamaños (Bootstrap, siendo de los más populares). La cosa también ha mejorado barbaridad en el lado JS. Yo por ejemplo, como comentaba en el último episodio de República Web, me declaro fanático de AlpineJS. Soluciona esas pijadas que en ocasiones derivarían en un script largo y de difícil mantenimiento. Cosas que por parte, es algo crítico cuando vuelves tiempo después a implantar algún cambio o mejora.
Un aspecto realmente delicado de esto de los menús es la accesibilidad. Si quieres que la web tenga buena accesibilidad esos menús de hamburguesa o los efectos te van a jugar mala pasada. Debes respetar los tabindex, posición en DOM y también respetar contrastes. Por lo general los menús deberían tener los mínimos niveles posibles y cuidado con la creatividad. La gente espera un menú exactamente en su sitio. ¿Por qué será?
Cuando dependes de un CMS como WordPress para crear los menús tienes ventajas y desventajas. La ventaja es que WP te proporciona interesantes funcionalidades (como algún filtro molón como nav_menu_css_class) en el código para realizar modificaciones. El inconveniente es que la presentación suele ser muy estática si quieres depender de la edición desde el panel de control (no sé si el full edting mejora eso). En un par de webs, lo he solucionado justamente con una combinación de AlpineJS y una función molona wp_get_nav_menu_items. Lleva trabajo pero dejas un menú editable a mano desde el panel de control y con modificaciones guapas como añadir iconos o crear submenús (tengo que contarlo en un post).
Pero todo esto es poca cosa en comparación con lo que supone los menús en la arquitectura de la información de la web. Pienso que esto no se suele tener tan en cuenta o que se confunde cuando se plantea, pero sin duda determina aspectos tan importantes como el SEO o cómo evolucionará la organización del contenido en la web. Es la diferencia entre una web para Marie Kondo o el cajón de los juguetes de mi hijo. O que alguien abandone el sitio web porque no encuentra fácilmente una sección. Por eso me traen tan de cabeza lo de los menús. Es un sitio donde pasar tiempo pensando sobre algo más que un diseño acertado. El menú supone una simplificación de todo lo que el sitio web contiene y lo que podrá contener. El camino de un sitio web bien hecho, empieza con un menú bien pensado. Ahí te lo dejo.

¿Te ha gustado? No
Javier Archeni
Javier Archeni @javierarcheni

Una newsletter para compartir aprendizaje, conocimiento y experiencia alrededor de las profesiones que mueven la web. Escribo de tecnologías, contenidos y economía digital. Una visión abierta y global de interés para cualquier persona interesada en la web.

Para cancelar tu suscripción, haz clic aquí.
Si te han remitido este boletín y te ha gustado, puedes suscribirte aquí.
Created with Revue by Twitter.
Escrito desde Valencia, España