designtrends-teaser

Tendencias de diseño en navegación receptiva: Mejores prácticas 2015

Los sitios web receptivos se han convertido en estándar. Cada vez más personas pasan de sus dispositivos de escritorio a clientes móviles como teléfonos inteligentes y tabletas para consumir sitios web. Si no quiere quedarse atrás y perder visitantes valiosos, es hora de optimizar su sitio web para la vista móvil. Dicho sitio web proporciona una navegación buena y accesible en dispositivos móviles. En términos prácticos, la navegación móvil es uno de los elementos más importantes en el diseño receptivo, así que asegúrese de invertir el tiempo adecuado.

Últimas tendencias en navegación móvil

Los menús de navegación receptivos se desarrollan continuamente con nuevas soluciones. Algunos de ellos pueden ser solo soluciones de nicho, pero siguen siendo interesantes. Entonces, echemos un vistazo a ellos. Le mostraré cómo se ve la vista de escritorio y móvil de cada menú porque de eso se trata este artículo. Si es posible, proporcionaré un enlace de descarga debajo del menú presentado.

Pestañas receptivas de ancho completo

Responsive-fullwidth-tab-navegaciónRetrato móvil (320×480)

responsive-tabs-klein

Una solución fantástica para sitios web con pocos elementos de navegación. Las pestañas son lo suficientemente grandes para operar incluso con guantes.

Demostración y descarga

Menú receptivo apto para retina

móvil-retina-listo-menú-grandeRetrato móvil (320×480)

Responsive-retina-ready-menú

Una solución muy inusual para blogs y sitios web con pocos elementos de navegación. Al usar fuentes de íconos en lugar de íconos gráficos puros, esta solución está lista para retina. Lo que debe mencionarse es que las tabletas muestran un menú diferente al de los teléfonos inteligentes. En las tabletas, es una lista de elementos de menú en capas (ya sea uno al lado del otro o uno encima del otro), mientras que en los teléfonos inteligentes se extiende con un clic.

Demostración y descarga

Menú receptivo de varios niveles

menú multinivel responsivoresponsive-multi-level-menu-in-aktion

El menú receptivo de varios niveles retoma una idea antigua refinada con muchos efectos interesantes. Desafortunadamente, no se pueden capturar en capturas de pantalla. Por lo tanto, le recomiendo que visite el sitio. Puedes elegir entre 5 efectos diferentes.

demostraciones y descarga

MENÚ PULSADOR DE NIVELES MÚLTIPLES

menú push multinivelmulti-level-push-menu-ausgefahren

Lo mismo aquí. Recogieron una vieja idea y la refinaron. La implementación, sin embargo, sigue un enfoque bien concebido ya que los niveles superpuestos están diseñados de manera extremadamente fácil de usar. Los elementos del menú también son lo suficientemente grandes como para acceder con guantes.

demostraciones y descarga

Menú deslizable

menú deslizableRetrato móvil (320×480)

slideout-menu-móvil

El menú deslizable es un tutorial de nuestra hermana mayor SmashingMagazine.com y se adapta perfectamente a los sitios web que tienen muchos elementos de menú.

Demostración y descarga/tutorial

Menú fuera del lienzo con un toque

off-canvas-1off-canvas-2

Esta es la solución más atractiva que he encontrado hasta ahora. Es adecuado tanto para el escritorio como para la vista móvil. Desafortunadamente, la vista móvil solo muestra los botones de íconos mientras que la escritura está oculta.

Retrato móvil (320×480)

off-canvas-3Demostración y descarga

Interacción del menú desplegable

menú desplegable

El Pull Menu ofrece un concepto muy interesante e innovador que está bien implementado. Los elementos del menú se pueden elegir tirando hacia abajo del icono del menú tanto como sea necesario. Al soltar el icono, se cargará el elemento.

El menú se desplegó

das-gezogene-menúDemostración y descarga

Menú del sitio web de Google Nexus

menú-google-nexus

El menú del sitio web de Google Nexus no es solo un menú para teléfonos inteligentes y tabletas, sino que funciona para todas las resoluciones de pantalla. Lo que lo hace interesante es que solo tienes que agregar una navegación durante el proceso de desarrollo del proyecto. Al tocar el elemento del menú en la esquina superior izquierda, el menú se desliza un poco. La lista completa se abre cuando pasa el cursor sobre uno de los elementos.

Retrato móvil (320×480)

menú móvilDemostración y descarga

Menú de aplicaciones sociales

menú-aplicación-socialEl menú activo

social-app-menu-aktiv

Esto también se basa en una idea antigua, sin embargo, con un enfoque completamente nuevo. Está bien hecho y definitivamente vale la pena examinarlo más de cerca.

Demostración y descarga

Complementos de jQuery para menús de navegación receptivos

Los complementos de jQuery más importantes son, por supuesto, imprescindibles en un artículo sobre navegación móvil. Aquí puede encontrar productos probados y nuevos, uno que brinda una nueva experiencia desde un enfoque que siempre ha sido el mismo.

jQuery navobile

jquery-navobileRetrato móvil (320×480)

jquery-navobile-mobilDemostración y descarga

jQuery.mmenu

menúRetrato móvil (320×480)

mmenu-mobil

Este complemento se destaca de la multitud porque ofrece enfoques completamente nuevos con una búsqueda integrada y submenús atractivos. Además, no es solo un menú móvil, sino que es adecuado para todas las resoluciones de sitios web.

Demostración y descarga

Trunk.js: una solución web receptiva

tronco-jsRetrato móvil (320×480)

tronco-js-móvil

Trunk.js es una de las soluciones más utilizadas cuando se trata de navegación receptiva. Funciona suave como la seda, es bastante rápido y adecuado para sitios web con muchos elementos de navegación.

Demostración y descarga

SlickNav – Menú Móvil Responsivo

slicknavRetrato móvil (320×480)

slicknav-geoeffnet

SlickNav es un complemento que funciona bien y que, sin embargo, solo puede mostrar la versión móvil receptiva de un menú de navegación. Esto hace que funcione bien y rápido, por lo que SlickNav siempre es una opción en el proceso de desarrollo.

Demostración y descarga

Ejemplos de menús receptivos bien implementados (no descargables)

Los siguientes ejemplos muestran cómo se puede implementar de manera óptima la navegación móvil receptiva. Los sitios web tienen navegaciones extraordinariamente diseñadas y pueden ser una verdadera fuente de inspiración para su propio sitio web.

Lotta Nieminen – Diseñadora gráfica

lotta-nieminenRetrato móvil (320×480)

lotta-nieminen-mobile-retrato

Esta solución es cada vez más popular para sitios web con pocos elementos de menú. Los elementos del menú simplemente se colocan uno encima del otro usando CSS y se puede acceder a ellos con bastante facilidad.

Enlace al sitio web

Ableton

capazRetrato móvil (320×480)

ableton-mobil

Ableton se basa en un menú desplegable con una función de búsqueda integrada y enlaces al carrito y al perfil de uno. Un buen ejemplo de facilidad de uso.

Enlace al sitio web

taller digital

taller-digitalRetrato móvil (320×480)

taller-digital-mobil

Digital Atelier tiene una navegación móvil bastante extravagante y única. Se puede operar con guantes pero resoluciones de 800×600 e inferiores no muestran escrituras de la navegación del móvil.

Enlace al sitio web

Trucos CSS de Chris Coyier

css-trucosRetrato móvil (320×480)

css-trucos-mobil

El gran maestro de CSS, Chris Coyier, toma el camino más fácil al tener solo unos pocos elementos de menú. Usando CSS, permite que los elementos de navegación fluyan uno encima del otro o uno al lado del otro. El resultado es agradable, ya que los elementos del menú son de un tamaño decente, lo que garantiza el funcionamiento con los guantes puestos.

Enlace al sitio web

sketchin – diseño de experiencia evolutiva

dibujandoRetrato móvil (320×480)

Sketchin-móvil

Una idea bien probada recién interpretada. La navegación móvil junto con una animación se coloca sobre el sitio web real.

Enlace al sitio web

Conclusión

En 2015, veremos más ideas innovadoras que nunca, ya que muchas soluciones se están desarrollando e interpretando continuamente. Seguramente, no todas las soluciones presentadas aquí son adecuadas para la producción en masa, ya sea porque se cree que son experimentales, porque no son compatibles con Internet Explorer o porque no pueden mostrar suficientes elementos de menú. Pero, de nuevo, hay algunas soluciones nuevas que se destacan de la masa y hacen que la vista móvil de su sitio web sea única. Y lo que no se puede usar en sitios web en vivo hoy, será algo común mañana.

enlaces relacionados

Soluciones descargables

Complementos de jQuery

Ejemplos

(dpe)

#Tendencias #diseño #navegación #receptiva #Mejores #prácticas

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.