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

play_circle_outline TGIF: Todos aman las tetas, una bizarra y divertida campaña contra el cáncer de mama

Por fin es viernes, y que mejor manera de empezar el fin de semana con un bizarro y divertido vídeo; el cual, en esta ocasión corresponde a una campaña denominada “Todos aman las tetas“; esta…

close

Diseños de logos minimalistas realizados principalmente con circulos

No cabe duda de que el diseño de logotipos puede ser realizado mediante diferentes técnicas de diseño; es por eso que el día de hoy comparto con ustedes unos geniales diseños de logos creados principalmente…

close

Ganadores del Sony World Photography Awards 2017

Ganadores del Sony World Photography Awards 2017 El pasado 30 de Marzo les dimos a conocer los ganadores de las primeras categorías del concurso fotográfico Sony World Photography Awards 2017; no obstante, aún quedaban darse a…

close

Pinturas callejeras que brillan en la oscuridad por María Lopez y Javier de Riba

En ocasiones el arte callejero puede ser tratado de creativo pero no de “arte”; no obstante, y por más confuso que pueda esto suponer esto queda a criterio del ojo apreciador, es por eso, que…

close

TrickPics, la nueva aplicación de censura divertida de PornHub

PornHub nunca esta quieto y siempre esta innovando mediante campañas en favor de osos panda y aplicaciones para móviles; como es en esta ocasión que lanza su nueva aplicación para censurar de manera divertida fotografías…

close

Ingenioso diseño de invitación de boda inspirada en la tipografía

Ander y Maria son una pareja de diseñadores fundadores de la agencia conocida como “La Caja de Tipos“; estos diseñadores, lo cuales, ademas de ser colegas actualmente son marido y mujer han realizado un majestuoso…

notifications Recién publicamos
close