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

Glasstic type, tipografía en 3D por el diseñador Rafael Merino

Rafael Merino es el responsable de este experimento de diseño que comprende una genial propuesta tipográfica en 3D; esta nos muestra una serie de números apreciables en tres dimensiones a manera de espejos. En lo…

close

Diseñadora cataloga los colores de diferentes paisajes con ayuda de Pantone

Pantone se esta convirtiendo en referencia cuando tratamos de hablar el lenguaje del color; esto se hace evidente cuando notas que la recurrente tendencia en ámbitos como la fotografía, el arte y el diseño. Es por…

close

Como crear un Cinemagraph en menos de un minuto con Photoshop

Adobe continua lanzando pequeños tutoriales para motivar la supervivencia creativa entre sus usuarios; ello lo logra enseñando maneras de crear efectos de doble exposición y logotipos en algunas de sus plataformas. Razón por la cual,…

close

Posters que se convierten en casas para aves un ejemplo de diseño responsable

El diseño responsable es aquel que los profesionales del diseño hacemos pensando en el medio ambiente; esto claro puede ser mediante la utilización de materiales reciclables o con un fin ecológico. No obstante, cualquier aportación…

close

14 Maneras para mejorar tu disciplina y salud, para ser mas productivo

Les comparto una interesante infografía que lista maneras para mejorar tu disciplina y salud, tips que como principal beneficio te ofrecerán una mejor calidad de vida que te permitirá ser mas productivo. La infografía esta…

close

Este es el nuevo logo para la Serie Mundial de Beisbol 2017

La MLB ha publicado los que serán los nuevos logos para la Serie Mundial de Beisbol 2017 y la post temporada de las grandes ligas, los nuevos logos no han sido del agrado de muchos,…

notifications Recién publicamos
close