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

Lavender Fields, hermosas fotografías de un campo de lavanda por Jacek Kadaj

Jacek Kadaj es el fotógrafo que nos ha regalado eta majestuosa vista de una granja de lavanda; la cual, brinda un hermosos espectáculo a la vista y que ha sido captado por Kadaj; quien es de origen…

close

Adobe libera accidentalmente Nimbus, su nuevo software de edición fotográfica

El año pasado Adobe anunciaba que se encontraba trabajando en el desarrollo de una nueva plataforma de edición fotográfica, el cual, estaba pensado para personas no tan versadas en el tema. Este proyecto que se…

close

Artista transforma las calles de Nueva York en divertidas caricaturas

Tom Bob es un artista con sede en Nueva York que ha decidido salir a las calles para plasmar en diversos objeto urbanos sus caricaturas; esto se conoce en el argot artístico como “Street Art”…

close

Coca-Cola estrena un nuevo diseño de packaging para Coca-Cola Zero

Coca-Cola ha decidido renovar la imagen de uno de sus más recientes productos Coca-Cola Zero; el cual, además de estrenar un nuevo diseño de packaging estrena una nueva identidad; Coca-Cola Zero Azúcar, de manera oficial….

close

play_circle_outline Como crear un efecto de pintura o grabado con Adobe Illustrator

Las herramientas de Adobe nos brinda miles de posibilidades para desahogar nuestro ingenio creativo; es por eso, que regularmente recurrimos a tutoriales para explorar aquellas que no dominamos y por lo cual; Adobe lanza algunos…

close

The Rock johnson y Siri protagonizan el nuevo comercial de Apple

El actor Dwayne Johnson conocido como “La Roca” protagoniza de manera conjunta con Siri el nuevo comercial de Apple; el cual, muestra como el actor se sumerge en el reto de completar varias tareas con ayuda del…

notifications Recién publicamos
close