Con el paso del tiempo, el diseño web re­s­po­n­si­vo se ha co­n­ve­r­ti­do en uno de los aspectos fu­n­da­me­n­ta­les en la creación de páginas web, in­de­pe­n­die­n­te­me­n­te de si se trata de la rea­li­za­ción de tiendas online, de blogs de noticias o de perfiles co­r­po­ra­ti­vos. En este sentido, los clientes po­te­n­cia­les ya no navegan por la red, como solían hacer, con el ordenador de sobremesa o el portátil, sino que el uso de di­s­po­si­ti­vos móviles como sma­r­t­pho­nes o tablets es cada vez más acusado. Esto no pone de relieve nada nuevo, sino que ya viene anu­n­ciá­n­do­se desde hace años debido a la venta creciente de te­r­mi­na­les móviles y del uso de Internet en ellos. En los apartados si­guie­n­tes te ex­pli­ca­mos por qué la op­ti­mi­za­ción para los di­s­po­si­ti­vos móviles forma parte del re­pe­r­to­rio estándar de factores para el éxito en los negocios online. A este respecto queda claro que en el mundo digital, que cada vez está más orientado a los di­s­po­si­ti­vos móviles, solo logran imponerse aquellos que ofrecen a sus usuarios la máxima usa­bi­li­dad en todo tipo de di­s­po­si­ti­vos. Uno de los pri­n­ci­pa­les aspectos de la op­ti­mi­za­ción para di­s­po­si­ti­vos móviles consiste en contar con la co­rre­s­po­n­die­n­te na­ve­ga­ción re­s­po­n­si­va, también conocida como re­s­po­n­si­ve na­vi­ga­tion por su no­me­n­cla­tu­ra en inglés.  La mobile na­vi­ga­tion (na­ve­ga­ción móvil) re­s­po­n­si­va co­n­s­ti­tu­ye todo un reto para los di­se­ña­do­res web: el co­m­po­r­ta­mie­n­to de los usuarios en pantallas táctiles de pequeñas di­me­n­sio­nes no es co­m­pa­ra­ble al que tienen con las pantallas de ordenador en las que el cursor del ratón hace más fácil la na­ve­ga­ción. Para hacer que la ex­pe­rie­n­cia del usuario sea igual de sencilla y sa­ti­s­fa­c­to­ria, es necesario dedicarle mucho tiempo a la co­n­se­cu­ción de un menú de na­ve­ga­ción re­s­po­n­si­vo a la hora de de­sa­rro­llar una página web adaptada a su uso en di­s­po­si­ti­vos móviles. Del mismo modo en que el co­m­po­r­ta­mie­n­to de los usuarios va cambiando, también se han mo­di­fi­ca­do sus ex­pe­c­ta­ti­vas en los últimos tiempos: tanto estos como los clientes po­te­n­cia­les se han vuelto más im­pa­cie­n­tes. Si la na­ve­ga­ción móvil no les permite ir de A a B sin di­fi­cu­l­ta­des, estos cambian de página rá­pi­da­me­n­te, lo que afecta tanto al tráfico como al volumen de ventas de la empresa en cuestión.

Una buena na­ve­ga­ción web es el eje central de una página web, ya que se convierte en la he­rra­mie­n­ta a través de la que el usuario encuentra la in­fo­r­ma­ción que para él es relevante. Los elementos de control deben, por lo tanto, funcionar con eficacia, la es­tru­c­tu­ra debe ser co­m­pre­n­si­ble y ex­pli­ca­ti­va y permitir, además, un manejo intuitivo. El reto pa­r­ti­cu­lar de los menús de na­ve­ga­ción re­s­po­n­si­vos es, sobre todo, la falta de espacio y el método de entrada táctil propio de los di­s­po­si­ti­vos móviles. Sin embargo, hoy en día existen algunas so­lu­cio­nes re­s­po­n­si­vas que po­si­bi­li­tan una na­ve­ga­ción web clara y de fácil manejo. La idea básica que se esconde detrás del diseño re­s­po­n­si­vo es que tanto el contenido como el diseño de las páginas web se adaptan de manera dinámica a sus re­s­pe­c­ti­vas co­n­di­cio­nes y al tamaño del terminal. Lo mismo es de apli­ca­ción para los menús de na­ve­ga­ción re­s­po­n­si­vos.  En la mayoría de los casos es adecuado optar por el enfoque “mobile first” para crear páginas web. La op­ti­mi­za­ción móvil pone en primer plano el concepto de diseño: la co­n­ce­p­ción, la usa­bi­li­dad y el re­n­di­mie­n­to de la versión móvil tienen pre­fe­re­n­cia, mientras en un segundo lugar se sitúa la ada­p­ta­ción para poder vi­sua­li­zar­se en or­de­na­do­res de sobremesa y po­r­tá­ti­les. Adaptar la na­ve­ga­ción web existente a los di­s­po­si­ti­vos móviles es, a menudo, una tarea co­m­pli­ca­da que conlleva grandes esfuerzos y que en la mayoría de los casos no cumple con las ex­pe­c­ta­ti­vas de los usuarios de dichos te­r­mi­na­les. Antes de comenzar a pla­ni­fi­car y elaborar un menú de na­ve­ga­ción re­s­po­n­si­vo es necesario responder a algunas preguntas básicas. Lo primero que hay que de­te­r­mi­nar es su posición en la propia página web.

Los modelos más ha­bi­tua­les consisten en colocar el menú de na­ve­ga­ción en el footer o al principio de la página. En la primera modalidad, el usuario encuentra al principio de la página úni­ca­me­n­te un enlace que lleva al menú de na­ve­ga­ción en el footer, donde puede consultar cada uno de los puntos de dicho menú.

Los menús de na­ve­ga­ción que aparecen en el footer no se ca­ra­c­te­ri­zan siempre por la facilidad de manejo, sino que, por el contrario, dicha co­lo­ca­ción puede dar lugar a co­n­fu­sio­nes. Sin embargo, la atención se centra en el contenido de la página principal, lo que, en función del objetivo de la propia página web, puede co­n­ve­r­ti­r­se en una gran ventaja. Más común, por el contrario, es hallar el menú de na­ve­ga­ción al principio de la página. Esta di­s­po­si­ción clásica del diseño web re­s­po­n­si­vo es con la que más están fa­mi­lia­ri­za­dos los usuarios.

Tanto en una variante como en la otra se pueden añadir o suprimir algunos puntos.  

La cuestión fu­n­da­me­n­tal es: ¿cómo se abre el menú de na­ve­ga­ción adaptado a los di­s­po­si­ti­vos móviles? El modo en que el usuario ve el menú de na­ve­ga­ción determina el concepto. Las opciones de vi­sua­li­za­ción son muy variadas: el menú se encuentra di­re­c­ta­me­n­te en el campo de visión o se abre mediante un clic, hace que se desplace el contenido o se basa en este. A co­n­ti­nua­ción te pre­se­n­ta­mos algunos ejemplos para ilu­s­trar­lo.

Decidir cuál es el concepto de menú de na­ve­ga­ción más adecuado para cada proyecto depende de muchos factores. Lo que está claro es que no hay una solución única. Los conceptos de menús de na­ve­ga­ción web an­te­rio­r­me­n­te me­n­cio­na­dos co­n­s­ti­tu­yen un buen punto de re­fe­re­n­cia, aunque se deben adaptar a cada uno de los conceptos y proyectos. Al principio, es muy im­po­r­ta­n­te crear la es­tru­c­tu­ra de na­ve­ga­ción o hacer una lista de las di­fe­re­n­tes ca­te­go­rías. Tras ello, se puede tomar una decisión acerca del menú en sí y de los puntos que se tienen que tener en cuenta.

El conocido icono ha­m­bu­r­gue­sa es todo un clásico en los di­s­po­si­ti­vos móviles y, por tanto, es digno de mención. El pequeño símbolo con tres líneas ho­ri­zo­n­ta­les y di­s­pue­s­tas de manera paralela se ha co­n­ve­r­ti­do en un símbolo universal para ocultar menús en sma­r­t­pho­nes y tablets.

Una de sus pri­n­ci­pa­les ventajas es su re­co­no­ci­mie­n­to, puesto que este icono sigue siendo objeto de co­n­tro­ve­r­sias entre los di­se­ña­do­res web. Un asunto polémico re­la­cio­na­do con él es el concepto de la usa­bi­li­dad. Los críticos suelen hablar a menudo en este sentido de que oculta las opciones que se ofrecen y que hace que aumenten los costes de in­ter­ac­ción.

El icono fue concebido a pri­n­ci­pios de los años 80 para Xerox Star, una de las primeras es­ta­cio­nes de trabajo con una interfaz de usuario gráfica, aunque también formó parte de la primera versión de Windows.