{"id":262979,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/tecnicas-para-el-manejo-de-la-navegacion-en-disenos-responsivos\/"},"modified":"2022-12-25T16:24:00","modified_gmt":"2022-12-25T13:24:00","slug":"tecnicas-para-el-manejo-de-la-navegacion-en-disenos-responsivos","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/tecnicas-para-el-manejo-de-la-navegacion-en-disenos-responsivos\/","title":{"rendered":"T\u00e9cnicas para el Manejo de la Navegaci\u00f3n en Dise\u00f1os Responsivos"},"content":{"rendered":"

\n La navegaci\u00f3n es un elemento cr\u00edtico del dise\u00f1o receptivo. Esto se debe a que la medida de la utilidad de un dise\u00f1o de sitio web receptivo se debe en gran medida a la facilidad de transici\u00f3n entre los dise\u00f1os m\u00f3viles y de escritorio.\n<\/p>\n

\n La navegaci\u00f3n receptiva efectiva requerir\u00eda un cambio de tama\u00f1o suave a resoluciones m\u00e1s bajas y luego aumentar el tama\u00f1o a pantallas m\u00e1s grandes, como las de las computadoras de escritorio.\n<\/p>\n

\n \u00bfQu\u00e9 tipo de navegaci\u00f3n es \u00fatil para los dise\u00f1os receptivos?\n<\/p>\n

\n Existen diferentes tendencias y t\u00e9cnicas en la gesti\u00f3n de la navegaci\u00f3n en los sitios web.\n<\/p>\n

\n Enfoque minimalista de la navegaci\u00f3n.
\n<\/h5>\n

\n Este enfoque de la navegaci\u00f3n se considera minimalista, ya que se realiza un trabajo m\u00ednimo en la navegaci\u00f3n para garantizar un cambio suave y limpio. El cambio en la navegaci\u00f3n no es abrupto; hecho con bastante delicadeza ya que el tama\u00f1o de la pantalla sufre cambios. Por lo tanto, el enfoque es tal que se realiza el tipo m\u00ednimo de reelaboraci\u00f3n de los elementos de navegaci\u00f3n para lograr efectos m\u00e1ximos, elegantes y sutiles. Los enlaces de navegaci\u00f3n est\u00e1n dimensionados y reducidos al m\u00ednimo, y encajan muy bien en la p\u00e1gina. Este enfoque se puede utilizar para sitios web que desean mantener el enfoque en la elegancia y la simplicidad y eligen promocionar algunas funciones seleccionadas. Por ejemplo, el sitio web CrossTrees<\/strong>muestra un men\u00fa de navegaci\u00f3n muy simple, centr\u00e1ndose en lo esencial y manteniendo el espacio principal para mostrar el contenido de la imagen. Cambia el enfoque del usuario al tema principal, que es lo que quiere transmitir, y no permite que el usuario pierda el enfoque. Adem\u00e1s de los sitios de bienes ra\u00edces, los artistas, dise\u00f1adores y fot\u00f3grafos, entre otros, pueden usar dichos sitios web.\n<\/p>\n

\n Como puede ver, este sitio web enfatiza el minimalismo; el foco est\u00e1 en la imagen y el eslogan que es \u00abEspacio de oficina de casa adosada para alquilar en Glasgow\u00bb. La facilidad de acceso a la barra de navegaci\u00f3n se minimiza, pero es clara.\n<\/p>\n

\n Otro ejemplo es un sitio web de dise\u00f1o web Hashtag17<\/strong> que tambi\u00e9n ofrece muchos otros servicios. El desaf\u00edo es mostrar todos los servicios ofrecidos en una sola p\u00e1gina, sin saturar la p\u00e1gina. La t\u00e9cnica adaptada por la agencia fue mostrar una instant\u00e1nea de todos los servicios en la parte inferior del sitio web sobre un fondo blanco que ayudar\u00e1 al usuario a navegar a cualquiera de las 17 p\u00e1ginas de esta \u00fanica \u00e1rea.\n<\/p>\n

\"\"<\/a><\/p>\n

\n La ventaja aqu\u00ed es que una sola mirada mostrar\u00e1 al espectador los 17 servicios que ofrece esta empresa. El fondo blanco proporciona un enfoque sin distracciones y los usuarios pueden detectar de inmediato el \u00e1rea en la que podr\u00edan estar buscando ayuda.\n<\/p>\n

\n \u00a1Cuando la barra de navegaci\u00f3n soporta el peso de la p\u00e1gina web!
\n<\/h5>\n

\n La mayor\u00eda de los sitios web receptivos colocan el men\u00fa de navegaci\u00f3n en la parte superior. Hay claras ventajas de hacer esto, como la facilidad de implementaci\u00f3n, no depender de JavaScript y CSS simple. Sin embargo, este no es el posicionamiento \u00f3ptimo para m\u00f3viles donde el real estate es un reto. Una forma interesante de manejar la navegaci\u00f3n en el dise\u00f1o de sitios web receptivos es empujarla hacia la parte inferior del sitio, como lo sugiere el autor Luke Wroblewski. Una barra de navegaci\u00f3n ocupa menos espacio en el escritorio y, por lo tanto, se puede colocar en la parte superior. Adem\u00e1s, aqu\u00ed es donde los usuarios tambi\u00e9n lo buscar\u00edan. Pero en dispositivos m\u00e1s peque\u00f1os, es ideal empujarlo hasta el fondo donde no ocupar\u00e1 mucho espacio. La lista de navegaci\u00f3n se coloca en el pie de p\u00e1gina del sitio web o justo encima del pie de p\u00e1gina. Hay un enlace de anclaje en la parte del encabezado del sitio web.\n<\/p>\n

#access li a {\n   padding: 0;\n   margin: 0;\n   font-size: 16px;\n   height: 57px;\n}\n.container {\n   padding-bottom: 549px;\n   position: relative;\n}\n.nav-strip {\n   position: absolute;\n   bottom: 0;\n}<\/code><\/pre>\n
\n  La ventaja de esto es espacio para m\u00e1s contenido en la parte superior del pliegue del sitio web; al mismo tiempo, la navegaci\u00f3n es m\u00e1s f\u00e1cil y accesible y discreta. Una ventaja adicional es que el usuario puede leer todo el contenido y desplazarse hasta la parte inferior de la p\u00e1gina donde se encuentra la barra de navegaci\u00f3n. Esto les dar\u00e1 m\u00e1s opciones para hacer clic. Otras ventajas son que este enfoque no requiere el uso de JavaScript y, por lo tanto, es m\u00e1s f\u00e1cil de administrar y solucionar problemas. Este m\u00e9todo es m\u00e1s f\u00e1cil para dise\u00f1ar sitios web receptivos ya que la posici\u00f3n del encabezado y el pie de p\u00e1gina (que son fijos) permite una transici\u00f3n f\u00e1cil.\n<\/p>\n
\n  La parte inc\u00f3moda de este tipo de disposici\u00f3n del elemento de navegaci\u00f3n es que una persona necesita saltar de un lado a otro para acceder a los enlaces. Por lo tanto, es un tipo de interacci\u00f3n inc\u00f3moda, que puede ser bastante engorrosa en el m\u00f3vil y puede impedir la fluidez de la navegaci\u00f3n m\u00f3vil. Otra desventaja es que si un usuario no est\u00e1 leyendo el contenido, es posible que no se desplace hasta la parte inferior de la pantalla y, por lo tanto, puede perder la barra de navegaci\u00f3n y ahora saber d\u00f3nde buscarla.\n<\/p>\n
\n  Esto se puede corregir usando el men\u00fa Alternar
\n<\/h5>\n
\n  Aqu\u00ed, el men\u00fa se abre en el encabezado mismo y le da un aspecto limpio y elegante con una funci\u00f3n de mostrar\/ocultar. Es f\u00e1cil de codificar y es una transici\u00f3n suave. Pero el desaf\u00edo es que es posible que Android no proporcione una transici\u00f3n tan fluida con las animaciones CSS.\n<\/p>\n
\n  Un buen ejemplo del uso de Toggle es Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Adem\u00e1s, si el men\u00fa es grande, a\u00fan podr\u00eda ocupar mucho espacio. Este problema se puede solucionar creando diferentes men\u00fas para diferentes dispositivos. Una forma efectiva de hacer esto es usando el complemento Responsive Select Menu.\n<\/p>\n
\n  Otro m\u00e9todo es a trav\u00e9s del uso del enfoque de men\u00fa de selecci\u00f3n.
\n<\/h5>\n
\n  A diferencia de otros m\u00e9todos de navegaci\u00f3n, esta t\u00e9cnica implica el uso de Javascript. Nos hace de la propiedad de la forma. Convierte la lista del men\u00fa en un elemento de selecci\u00f3n. Aunque puede ser el elemento con mejor rendimiento en todos los navegadores, ya que se derivan de los men\u00fas desplegables, los dise\u00f1adores pueden encontrarlos restrictivos debido a la dificultad de personalizarlos en diferentes navegadores. Las mayores ventajas de estos men\u00fas en los dise\u00f1os de sitios web receptivos son que funcionan. Otro punto positivo es que se pueden utilizar para controlar los enlaces de navegaci\u00f3n cuando se encuentran en exceso; esto puede ser un problema para el enfoque de TopNav. Tambi\u00e9n liberan mucho espacio en el dise\u00f1o web, que se puede utilizar para el dise\u00f1o web. Los men\u00fas seleccionados se pueden adaptar a los diferentes dispositivos: los diferentes navegadores m\u00f3viles manejar\u00e1n los men\u00fas seleccionados de diferentes maneras.\n<\/p>\n
\n  Una manera f\u00e1cil de usar Select Menu es a trav\u00e9s de TinyNav<\/strong>, un complemento de JQuery.\n<\/p>\n
\n  Incluya el archivo JS despu\u00e9s de cargar su versi\u00f3n de jQuery, luego escriba el siguiente c\u00f3digo:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  Agregue algunas l\u00edneas a su CSS. Oculte la clase tinynav. Config\u00farelo para que se muestre en cualquier punto de interrupci\u00f3n que desee:\n<\/p>\n
\/* styles for desktop *\/\n.tinynav { display: none }\n \n\/* styles for mobile *\/\n@media screen and (max-width: 600px) {\n    .tinynav { display: block }\n    #nav { display: none }\n}<\/code><\/pre>\n
\n  El inconveniente es que pueden no ser tan limpios y est\u00e9ticos como otras t\u00e9cnicas de men\u00fa de navegaci\u00f3n. Son mejores en p\u00e1ginas simples con dise\u00f1os de una sola p\u00e1gina, como el de ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  La gesti\u00f3n de contenido es fundamental para la navegaci\u00f3n eficiente de sitios web receptivos. Durante la planificaci\u00f3n de la estructura met\u00e1lica para el sitio web receptivo, determine qu\u00e9 contenido se requiere para el escritorio y qu\u00e9 tipo de contenido se prefiere para el dise\u00f1o m\u00f3vil. Aseg\u00farese de que solo se coloque el contenido que cumpla con los objetivos espec\u00edficos. En este sentido, la navegaci\u00f3n puede seguir un enfoque similar. Para agilizar los men\u00fas de navegaci\u00f3n receptivos para m\u00f3viles, aseg\u00farese de que el men\u00fa de navegaci\u00f3n m\u00f3vil muestre solo los enlaces m\u00e1s importantes; los menos importantes deben quedar fuera. Por lo tanto, los usuarios m\u00f3viles pueden ver lo que quieren en sus sitios web.\n<\/p>\n
\n  Deber\u00e1 determinar qu\u00e9 contenido es absolutamente cr\u00edtico para colocarlo en la parte del sitio web que las personas observan al m\u00e1ximo, ya sea en una computadora de escritorio o en un dispositivo m\u00f3vil, y hacer eso.\n<\/p>\n
\n  Hay ciertos puntos clave que debe recordar mientras trabaja en un sitio web receptivo para garantizar una navegaci\u00f3n fluida:\n<\/p>\n