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.

El uso de tipos de letras alternativas, utilizar imagenes con efectos, pestañas, menus interactivos, etc. Una gran cantidad de ejemplos y muchos de ellos son capaces de lograrse sin necesidad de utilizar flash, tan solo CSS y Javascript, la recopilación fue hecha por los chicos de smashing magazine, aquí les dejo algunas imagenes de la navegación de algunos sitios con sus respectivos enlaces.

Enlace: Showcase of moder navigation design trends

En fin en design mag realizaron una excelente recopilación de estos plugins para jquery para navegación que deberias conocer, aquí les dejo algunos de esos plugins para crear menus con jquery.

jQuery (mb)Menu

FastFind Menu

jQuery Pagination

Enlace: 25 jquery plugins for navigation

MenuMatic es un excelente script javascript hecho con MooTools 1.2 que no facilita la tarea de crear menus de navegación rápidos en base a listas.

Con solo modificar unos parámetros podrías elegir entre un menu vertical o un menu horizontal, como funciona? así…

HTML:

<link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" />
...
<ul id="nav">
	<li><a href="#" >Link 1</a></li>
	<li><a href="#" >Link 2</a>
		<ul>
			<li><a href="#" >Link3</a></li>
			<li><a href="#" >Link4</a></li>
		</ul>
	</li>
	<li><a href="#" >Link 5</a></li>
</ul>
...
<script type="text/javascript" src="js/mootools-1.2-core-min.js" ></script>
<script type="text/javascript" src="js/MenuMatic_0.67.js" ></script>

JavaScript:

var myMenu = new MenuMatic({/*options here*/});

Sus caracteristicas son:

• Amigable para los buscadores: únicamente manipula los enlaces no utiliza enlaces javascript.
• Usable
• Accesible
• Personalizable
• Flexible

Enlace: MenuMatic

En 1st web designer han recopilado 300 menus de navegación creados con CSS, jQuery y MooTools, aquí les dejo 3 de los mas interesantes si quieren conocer los 300 menus y descargarlos para su sitio web solo sigan el enlace.

Menus estilo Xbox 360

Menus tipo Acoordion

Menu animado

Enlace: 300+ jQuery, CSS, Mootools and js navigation menus

Aquí uno de esos post que hace rato que no hacia y tratare ahora si de realizarlos mas seguido, se trata de 5 notas rápidas en este caso sobre desarrollo web.

Open Source Rails

Ruby on Rails ese lenguaje de programación que desde que salio dio de que hablar, si tu eres uno de los que le intereso y se metio a conocer y programar con Ruby este sitio te puede interesar recopilan aplicaciones Open Sources creadas con Ruby on Rails.

Consejos para optimizar consultas MySQL

La mayoría del sitios en Internet mas conocidos usan MySQL pero mantener una base de datos como por ejemplo de la twitter no es fácil, asi que hay que optimizarla al máximo, aqui unos tips para optimizar tus consultas MySQL.

Creando menús con efecto kwicks con jQuery

Excelente tutorial para crear menús con efecto kwicks, este efecto es el mismo que usa mootools en su portada en los cuadritos de colores.

Snipplr Code 2.0

Snipplr se trata de un servicio que recopila snippets muy usados en sitios web 2.0, los snippets son recortes de código fuente, si estas empezando en la programación este tipo de recursos son perfectos.

63 tips para optimizar tu codigo PHP

PHP otro código muy utilizado en Internet su gran ventaja es que es gratuito, pero también necesita de ser optimizado recuerda que la experiencia del usuario en tu sitio web es tu valor agregado, un sitio lento en sus procesos no sirve, asi que aqui hay 63 tips para optimizar tu codigo PHP. (en ingles)

La parte mas importante de nuestro sitio web son los menus y con eso se relaciona la navegación por nuestro sitio web de cada visitante que entra a la pagina, una buena navegación puede significar muchas mas visitas, visitantes que regresen regularmente y/o visitantes que se sientan comodos al encontrar lo que andan buscando de manera rapida.

Una forma o tecnica de navegación que siempre se usa es incluir dos menus como minimo uno en la parte de arriba o a un costado y otro similar en el pie de pagina claro dependiendo de las opciones.

Esto va muy de la mano con el SEO, pero bueno el diseño de estos menus primeramente debe pasar por las manos de un diseñador grafico o diseñador web y pues en Vandelay hicieron una excelente recopilación de tutoriales para photoshop para hacer menus que permitan una navegación optima.

Enlace: 45 photoshop tutorials for better navigation

Los menus de navegación pueden considerarse la columna vertebral de muchos sitios, es un elemento muy importante y que no debe hacer falta en un sitio, pero no es solamente el hecho de que este ahi, si no que tambien su usabilidad juega una función muy importante y por supuesto su diseño.

En cuanto a la usabilidad debes conocer el publico hacia el que diriges tu sitio si sientes que tus visitantes son gente grande no les pueden poner un menu ultra moderno como que talves si puedas hacer en un sitio dirigido a gente joven.

Sin embargo no es lo unico debes considerar la cantidad de visitas porque si el sitio tiene un diseño muy trabajado este usualmente requiere de muchas imagenes y esto afectaria al consumo de ancho de banda de tu sitio, pero bueno ese es otro tema, el diseño de tu menu de navegación cuenta mucho ya que su atractivo puede ser un punto clave para dirigir a tu visitante a el y que no se pierda en tu sitio.

Ahora no toca un tutorial de los cuales ay muchisimos pero toca una recopilación hecha por Smashing Magazine que muestra excelentes diseño de menus de navegación utilizados en diferentes blogs y sitios web, asi como cuales son las tendencias que siguen los diseñadores en este punto especifico.

Sigue este enlace para ver la lista completa: Navigation Menus: Trends and Examples