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

Impresionantes paisajes espaciales creados a mano por Adam Makarenko

Adam Makarenko es un fotógrafo que ha demostrado su habilidad al lente y con las manos con esta increíble sesión fotográfica creativa;. Con un genial aspecto estas fotografías podrían parecer que son emitidas por la…

close

Nintendo anuncia SNES Mini la nueva miniatura nostalgica

SNES mini – la nueva consola de la nostalgia de Nintendo Nintendo sigue apostando por la nostalgia como estrategia de venta y posicionamiento; en primera instancia Nintendo presentó la “NES Mini“; la cual, fue todo…

close

play_circle_outline The Story of an idea, animación de Google muestra cómo se desarrollan las ideas

En el marco del Google I/O 2017 la multinacional Google busca inspirar a los asistentes de su evento así como a los creativos en general con la siguiente animación. Esta animación titulada “The Story of…

close

El rebranding de una panadería que fue de lo común a lo minimalista

Todas las empresas necesitan renovar su imagen y marca de vez en cuando; es por eso, que siguiendo esta premisa la agencia creativa mousegraphics ha realizado una renovación increíble para la empresa Mills of Saint George; este cambio…

close

Spinner Car la creación rusa de relajación para entusiastas de los autos

La moda de los Spinners contra el estrés está por todas partes y los amantes de los vehículos no podían quedarse atrás. Conducir un vehiculo debe ser la practica más relajante para los amantes de…

close

Pack with Care, una creativa y bonita campaña contra el abandono animal

Pack With Care es el nombre de esta campaña realizada y lanzada por SPCA (Sociedad para la Prevención de la Crueldad a los Animales) y Home Hardware en Canadá; esta creativa campaña busca crear conciencia sobre…

notifications Recién publicamos
close