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

Animales de fieltro por Zenia Kli Zafska

El arte sólo tiene un límite; la imaginación, la cual siempre está en creciente aumento en el ámbito creativo y por ello todos los días hay nuevos proyectos, piezas de arte que vale la pena…

close

Nautilus, un proyecto de arquitectura sustentable

Vincent Callebaut es un arquitecto conocido en el mundo de la construcción por sus diseños ecológicos e innovadores; en esta ocasión ha presentado Nautilus, un Eco-Resort diseñado para apoyar la economía, naturaleza y el turismo…

close

Fotografías aéreas por Niaz Uddin

Desde que se popularizaron los drones se han popularizado en igual medida las fotografías aéreas por parte de los aficionados y profesionales del ramo. Esto debido a que presentan nuevas perspectivas de paisajes, objetos e…

close

Okomito, una fuente tipográfica inspirada en Japón

Quiero compartir con ustedes un recurso bastante interesante que podrán adquirir de forma gratuita; ya que la fuentes tipográficas nunca son demasiadas cuando las posibilidades son infinitas. Es por eso, que comparto con ustedes esta…

close

Ilusiones 3D para fomentar la seguridad vial

En d’Ísafjörður, Islandia se está adoptando una medida creativa para fomentar la seguridad vial en el tema de la conducción y el respeto al peatón; los cuales sufren accidentes por culpa de conductores que no respetan…

close

Currículum LEGO, la creativa forma de postularse de un diseñador

Postularse para un nuevo empleo es algo muy serio sobre todo en la parte inicial que es la elaboración de un Currículum Vitae competente; los cuales deben ser igualmente creativos con el trabajo que se…

notifications Recién publicamos
close