Interesantes ejemplos de menus de navegación + Tips

Lo mas importante de un sitio web para su posicionamiento en buscadores (SEO) son los menus de navegación, no solo es el contenido, los enlaces entrantes y el blogroll, cierto que son muchas cosas a considerar.

En frogx3 de unos meses a la fecha hemos estado en constante cambio del diseño buscando una formula perfecta y uno de los principales cambios que hemos realizado esta en los menus de navegación, de hecho estamos planeando un nuevo cambio con el mismo enfoque. Bueno pues algo que nos ha servido y nos gustaría compartir con ustedes es inspirarnos de menus de otros sitios y es que en diseño web debemos luchar siempre en lograr un equilibrio entre la optimización, programación y el diseño.

La siguiente lista de paginas lo han logrado haciendo un buen uso del diseño y equilibrandolo con buenas practicas para posicionamiento en buscadores, así que en los siguientes sitios no solo verán buenos diseños de menus de navegación, también podrán ver como han optimizado los menus, algunos utilizan menus sencillos, otros aplican submenus y otros hacen uso de JavaScript y CSS para crear menus desplegables, todos son validos y utiles, en fin les dejo la pequeña recopilación espero les sea de utilidad.

Tennessee Trains & Byways

Fantasy Cartography

Time For Cake

Design Bombs

Racket

Carbon Made

Blogger Bake Off

Tips

Vistos los ejemplos vale la pena apuntar que si bien el texto y las negritas son muy importantes, algunas buenas practicas en el código de una pagina web para hacer un buen menu de navegación son:

  • Si utilizas HTML5 el menu debe estar dentro de una etiqueta <nav>
  • Intenta utilizar siempre lista <ul>
  • Nunca olvides el atributo “title” en la etiqueta anchor <a> del enlace.
  • Si no utilizas texto en tus menus y optas por usar imagenes (una opción muy valida) jamas olvides incluir el atributo “alt” en la etiqueta de tus <img> de tus imagenes.
  • Checa dos veces antes de terminar si haz cerrado todas las etiquetas que iniciaste, en el caso de las etiquetas <img> siempre acostumbra a utilizarlas así: <img src=”” alt=”” /> de este modo indicas al traductor del código que haz cerrado dicha etiqueta con el “/>”.

Bueno eso es todo espero les sea de utilidad.

comment ¿Que opinas?

Artículos recientes

close

Mockups de bolsas de compra para descargar gratis

El día de hoy quiero compartir con ustedes estos geniales Mockups; que pueden servirte si estas buscando promocionar o modelar alguna marca en Shopping Bags. Sin duda, son un elemento imprescindible para aquellos que están…

close

Google Nik Collection, el software de edición para fotógrafos profesionales ahora es gratis

Google Nik Collection, es una herramienta de edición de fotografía que muchos conocen; este software que resultaba únicamente disponible para aquellos que pagasen por tal. No obstante, Google ha mostrado una vez más su generosidad…

close

play_circle_outline Este es el nuevo trailer de Spider-Man: Homecoming

Una agradable sorpresa para aquellos fanáticos del universo de Marvel y sobre todo para los seguidores del universo de las pelicular de los Vengadores; pues el día de hoy se dio a conocer el nuevo adelanto…

close

Estos son los primeros ganadores del Sony World Photography Awards 2017

El día de hoy se dieron a conocer algunos de los ganadores del Sony World Photography Awards 2017; estos ganadores pertenecen a las categorías Open y National; por lo que aún restan los ganadores de…

close

Mockups gratis para presentar publicidad exterior

Les comparto una selección de útiles mockups gratuitos perfectos para presentar diseños de publicidad exterior, todos los mockups son de diferentes formatos para algunos de los medios de publicidad exterior más populares que puedes ver en…

close

Mira esta colección de logotipos animados para tu inspiración

Los logotipos son fuentes de inspiración únicas; esto debido a que para su realización se utiliza una gran gama de técnicas y estilos; las cuales son apreciables para los ojos entrenados que andan en busca…

notifications Recién publicamos
close