featured3

Menús adaptables en el responsive design

Las técnicas responsive design nos permiten adaptar una web a múltiples dispositivos… pero el tema del menú no deja de ser un incordio. ¿Cómo trasladar ese magnífico menú desplegable con docenas de paneles anidados a un móvil?

La locura del responsive design es todavía bastante reciente, pero no deja de ser interesante repasar las distintas aproximaciones al problema.

Déjalo fluir

Una solución muy elegante pero tremendamente limitada. Se trata de colocar el menú en la parte superior y dejarlo fluir de manera natural. Si tenemos un menú con un número de elementos verdaderamente reducido puede ser una opción práctica y elegante… pero claro, eso es ponerse en el caso fácil… imagínate que el menú tenga también que verse en alemán.

Es la solución que veo para pequeñas webs corporativas, portfolios online etc.

ej1

A favor

  • Facilidad.
  • Elegancia.

En contra

  • Cabeceras enormes a medida que crecen los elementos del menú.
  • Limitado, limitado, limitado…

Ejemplos

Enlaces en el pie

Otra táctica es colocar una lista de enlaces en el pie. Es un sitio práctico porque el hecho de que “crezca” no supone tantos inconvenientes como en la cabecera, pero no deja de ser un sitio menos accesible y, porque no, raro.

ej2

A favor

  • Fácil.

En contra

  • No es muy elegante, incluso algo desorientador. Podríamos decir que es una práctica que va en contra de las convenciones… y ya sabemos lo importante que es abrazar las convenciones.

Ejemplos

Usar un select

Personalmente fue la primera aproximación seria al problema que encontré, pero con la que no dejo de sentirme algo incómodo. Es genial crear el típico select de los formularios y confiar en que los navegadores crearán un menú desplegable o lo que sea necesario para que sea accesible… pero no deja de ser un maldito select.

ej3

A favor

  • Práctico y usable. Su usabilidad está asegurada en el momento en el que los sistemas operativos móviles se esfuerzan por hacerlo accesible.

En contra

  • Solución relativamente poco elegante a nivel técnico. Puede ser necesario crear un menú alternativo y controlar cuando se debe mostrar. Incluso un poco de JavaScript para que funcione bien.
  • Feo. Depender de un elemento nativo, como es un select, produce una pérdida de control en el diseño. Nuestro botón aparecerá distinto en los diferentes navegadores, puesto que es muy complicado darle estilo y que lo respeten.
  • Limitado a la hora de trabajar con  submenús (no queda muy claro qué está dentro de qué).
  • Potencialmente confuso. Un select es fácilmente reconocible por los usuarios, eso es cierto, pero están acostumbrados a verlo en el contexto de un formulario, no en el de la navegación.

Ejemplos

Menú desplegable

Y llegamos a mi favorita. Recordar bien este botón, porque quizá se convierta en una nueva convención (si no lo es ya).

botonmenu

Se trata de ocultar el menú y hacer que éste se despliegue al pulsar un botón. Es el sistema que usa el kit de desarrollo web de twitter y sí, me gusta especialmente.

ej4

A favor

  • Usable. Y esto es lo importante. Queda perfectamente claro qué elementos están dentro de otros y el menú se muestra bajo demanda, dejando de estorbar cuando no lo necesitamos.
  • Solución elegante. Es posible reutilizar la misa estructura del menú, simplemente cambiando los estilos CSS y añadiendo una pizca de JavaScript.
  • Bonito. Las posibilidades que ofrece este enfoque desde el punto de vista del diseño son muy interesantes.

En contra

  • Confuso. Es posible que el icono no sea suficiente para que el usuario entienda de qué se trata, puede que ni añadir la palabra “menú” sea suficiente.
  • Dependiente de Javascript. Puede parecer menos elegante por el hecho de necesitar un poco de JavaScript para lograr la interacción.

Ejemplos

Menú desplegable desde la izquierda

Una especie de variación curiosa respecto a la anterior. Si no me equivoco la idea viene de la versión móvil de Facebook. Se trata de desplegar el menú desde un lateral, desplazando el contenido a la derecha.

Realmente no sabría decir qué aporta respecto a la solución anterior a parte del cambio visual y de feeling. En cualquier caso resulta anecdótico que lo tenga la web de Obama.

ej5

A favor

  • Usable elegante y bonito, al menos tanto como la solución anterior.
  • Seguimos convenciones. Usar la solución de Facebook puede ser una buena idea, por aquello de no reinventar la rueda y aferrarse a las convenciones.

En contra

  • Confuso y dependiente de Javascript, como la solución anterior.
  • ¿Raro? Sé que aquí estoy entrando en el terreno de lo subjetivo, pero podría decirse que mostrar un poquito de la web a la derecha no resulta muy útil y, por lo contrario, puede resultar algo confuso. ¿Qué os parece?

Ejemplos

Ocultar el menú

A mi modo de ver esta solución no es ninguna solución en absoluto. Se sustenta sobre la idea de que el usuario móvil quiere ver cosas muy concretas; no tiene tiempo y no necesita todas las funciones de la página original… De ahí que se oculte mediante CSS ciertas partes de la web.

Pero esta idea está ya cerca de ser un mito.

El “ordenador tradicional” está dejando de ser el método por excelencia de acceso a la red. Se prevé que la gente navegue intensivamente desde móviles, tablets, televisores… y vete tú a saber qué más puede inventarse. Precisamente por eso es tan importante la filosofía que hay detrás del responsive design y considero que esta aproximación rompe con ella.

ej6

A favor

  • Flexibilidad. Si tienes problemas de espacio, ocultar lo que no necesitas resulta un alivio sintomático.
  • Puede ser útil en casos concretos. No “incendiemos las naves”, nunca se sabe…

En contra

  • Las partes que no se muestran siguen “pesando”. Ocultar mediante CSS sólo afecta a la visualización, el código y las imágenes se siguen descargando.
  • Tus usuarios llorarán. Descubrir de repente que no puedes acceder desde tu móvil a lo que el otro día veías desde el ordenador de la oficina puede dejarte un regusto amargo pegado en el fondo del paladar.

Ejemplos

Conclusión

El responsive design puede estar algo verde, de hecho están surgiendo ideas muy interesantes por ahí, como menús “deslizantes” que podríamos desplegar deslizando el dedo hacia abajo.

ej7

En cualquier caso el responsive design parece que ha venido para quedarse y que lentamente va limando asperezas, como el tema de la navegación. ¿Qué opináis, se os ocurren más soluciones?

Fuente: http://bradfrostweb.com/blog/web/responsive-nav-patterns/


Gabriel Gómez Pérez
Gabriel Gómez Pérez
Responsable de los desarrollos informáticos y diseño de interacciones. Programador especializado en desarrollos front-end.



  • http://www.facebook.com/iSimgt Luis Dueñas

    Me ha gustado mucho tu estudio y los ejemplos mostrados, y concuerdo contigo.

  • http://twitter.com/Defe266 gabriel gomez perez

    Muchas gracias Luis, da gusto saber que le leen a uno ^^

  • Mr. Mustache

    Un respeto por la fuente: http://bradfrostweb.com/blog/web/responsive-nav-patterns/

    Y podrias haver mantenido los links para acceder a algunos recursos que son muy útiles.

    • http://twitter.com/Defe266 Gabriel Gómez Pérez

      Tienes razón, por mucho que le diera mi “toque”, es lo justo.

  • Maritza Rivero

    ahora la pregunta mas importante…. como rayos lo hago =).. me encanta el menu abajo… asi sea desorientador!! saludos desde Venezuela!

    • http://twitter.com/Defe266 Gabriel Gómez Pérez

      Pues con mucha paciencia: A estudiar CSS y Javascript

      ^^

      Hay cursos muy intersantes por ahí, como los de: https://mejorando.la/

      ¡Suerte!

  • Nash

    Muy buen articulo!

  • Jose

    Creo que una opción interesante sería hacer un menú horizonatal deslizante, es decir, incluir el mismo menú que en la web normal que permita ser deslizado de izquierda a derecha (sólo el menú) para acceder a los elementos que quedan fuera de la pantalla. Con un icono de una flechita fija a la derecha se le puede indicar al usuario la existencia de esta funcionalidad. Supongo que se podría conseguir sólo con CSS.

    • http://twitter.com/Defe266 Gabriel Gómez Pérez

      Mmmm Abría que ver un ejemplo, creo que podría resultar aparatoso. Por otro lado vas a tener que trabajar con eventos, así que creo que CSS se quedaría corto.

      • Jose

        Supongamos que encerramos un menú horizontal clasico de 800pix no redimensionable en un frame (como se hacía antiguamente). El frame de destino, en la zona inferior sí que tendría las características de un diseño adaptable.
        Como el frame con el menú no cabe en la pantalla del móvil, tendríamos que deslizarlo para verlo entero, pero como está encerrado en un frame solo se desliza el menú de forma aislada, sin afectar a lo que se ve abajo. Solamente cuando hacemos clic es cuando cambia el contenido del destino (es un menú).
        Evidentemente ya nadie usa los frames, simplemente es para intentar explicar la idea.

        • http://twitter.com/Defe266 Gabriel Gómez Pérez

          El caso es que creo que había visto algo parecido pero no lo encuentro. Mi instinto me sugiere que me aleje de los scrolls horizontales desde siempre jeje… pero no sería la primera vez que veo un uso interesante.

          También podría ser complicado estéticamente, parece inevitable que en algunas resoluciones saliesen palabras cortadas. Por eso me gustaría ver un ejemplo terminado.

          Te animo a que desarrolles tu idea; un poco de I+D es siempre bueno ;-)

        • http://twitter.com/Defe266 Gabriel Gómez Pérez

          Ahora que lo pienso… creo que algunos menús de ipad hacen lo que dices

  • http://twitter.com/AntonioCortinaL Antonio Cortina

    Muy bueno, precisamente estoy terminando mi primer diseño responsive (web sencillita) y me he encontrado con el problema de dejar o no un submenú que en la versión desktop tiene imágenes y en la mobile son sólo texto, pero no me termina de gustar como queda… Te paso el enlace por si puedes darme una idea sobre si incluir o no el menú desplegable: http://s470319894.mialojamiento.es/rutas.html

    • Anónimo

      No sé si te he entendido bien Antonio. Pero si preguntas si hace falta usar un menú desplegable en la versión móvil de esa web yo diría que mientras no se complique más, está bastante bien resuelto así.

  • Marta

    Había optado de forma natural por la primera opción pero me convence más el botón con el menú desplegable, era algo lógico y ni siquiera se me había ocurrido. Gracias!

  • Pingback: Diseño de interfaces. Lo que deberías saber | Estudio Creativo

  • sergiosan81

    Voto por el menu desplegable desde la izquierda. A estas alturas, medio planeta o más sabe como funciona este menú ya que las diferentes redes sociales empezando por facebook, utilizan este método responsive.

    • Gabriel Gómez Pérez

      La verdad sea dicha: con el tiempo todas las técnicas “off canvas” se han convertido en una fuerte tendencia. El artículo ya tiene un tiempo, pero a día de hoy creo que hay que reconocer que el menú desplegable a la izquierda es la mejor opción.