Etapas de la creación de una página web

Conoce nuestro proceso de creación web

FASES PARA LA CREACION DE UNA PÁGINA WEB
La creación de una página web o el desarrollo a medida de un proyecto para el diseño de una página
web, existen al menos, 6 etapas esenciales. No hay que olvidar que el fin de una página web no es otro
que adaptar un modelo de negocio al mundo online. Durante cada etapa de vida de cada ciclo, el
contenido está en continua actualización y deben consolidarse con el fin de mejorar la experiencia del
usuario y reducir costes en el desarrollo. La página web, a diferencia de documentos impresos, en un
soporte que está en continua mejora o desactualización y donde realmente nunca se termina. Una página
web está en continuo crecimiento y evolución. Una página web está siempre vida.

1.- INVESTIGACIÓN
La investigación para la creación de una página web se debe tomar como referencia páginas web de la
competencia ya existes. Una buena página web requiere una investigación veraz, exigente y
profunda. Se deben analizar diferentes campos de actuación, desde el modelo de negocio, público
objetivo, competencia y objetivos de resultados alcanzables reales a corto/medio plazo.
Modelo de negocio de nuestra página web: Dependiendo del sector al que vaya destinado, debe
adaptarse a las necesidades del sector y examinar los diseño web que ya se hayan realizado
(Competencia).

Público Objetivo al que va destinada nuestra web: Es de vital importancia saber a quién va dirigida
nuestra web, conocer sus necesidades presentes y futuras. Para el diseño web tenemos que tener claro
como vamos a plasmar de la manera más sencilla, eficiente y atractiva las necesidades de nuestros
usuarios a medio y largo plazo, creando de esta forma una página web que ofrezca soluciones a
nuestros clientes.

Nuestra competencia: Dentro de la competencia podemos aprender, analizar y estudiar lo que hacen

bien y lo que hacen mal. Saber exactamente quienes son nuestros competidores reales nos ayudará a
adaptar nuestra web para mejorar lo ya existente y canalizar así mejor a nuestro target. Además, la
competencia nos aportará una experiencia de recorrido que nosotros con nuestra web vamos a empezar
a andar. También podemos investigarlos para extraer nuevas tendencias de negocio y prospección.

Nuestros objetivos: Cuando se realiza el diseño de una página web, hay que construir ideas sobre la
filosofía de la empresa/modelo de negocio y crear metas alcanzables. Se deben marcar objetivos y definir
cual es exactamente nuestra finalidad. El diseño de la página web tiene que tener en cuenta cuales
van a ser los objetivos a cumplir. De esta forma podremos evaluar si nuestra web a fallado en algo o no
hemos sabido transmitir nuestro modelo de negocio. Los objetivos que se marquen deben ser REALES.

2.- PLANIFICACIÓN
Cuando se diseña una página web, la planificación juega un papel importante para anticiparnos en un
medio que está en continuo cambio, nos ayudará a crear una estrategia, ya no sólo de difusión sino
también de los contenidos que puedan ser de interés para nuestra audiencia. La elección y disponibilidad
del dominio es una parte de peso a tener en cuenta dentro del desarrollo de una página web.
El nombre del dominio es de vital importancia, pudiendo optar por la elección de un dominio de “marca
o branding” (nombre de la empresa) o decidirnos por un dominio EMD (Extact Mach Domain) que son
aquellos que incluyen dentro del dominio la palabra clave “keywords” de nuestro sector. La decisión del
dominio debe tomarse con tranquilad y a conciencia.

3.- ARQUITECTURA Y CONTENIDO DEL SITIO WEB

En base a las preferencias de los contenidos de la página web, creamos una esquema o mapa de
arquitectura para testar visualmente como se organizan elementos que la componen, los contenidos y la
estructura del sitio. La usabilidad (UI) y la experiencia del usuario (UX) es otro factor que no podemos
pasar por alto, ya que la fácil navegación y una correcta estructuración del sitio, hará que nuestra
audiencia se sienta cómoda en nuestro sitio web y la experiencia sea satisfactoria.

4.- DISEÑO WEB, CONSTRUIR Y TESTAR

La creación de la gráfica, el diseño web y plasmarlo en nuestro sitio nos dará el aspecto visual, de esta
forma sabremos captar lo que te transmite con lo que se está viendo. Una vez creado el contenido y
adaptado el diseño web, debemos ser exigentes en las gráficas y el cuidado de las imágenes, además la
optimización de las mismas.
Una vez finalizado esta fase, tenemos la estructura web finalizada en modo de pruebas y ahora
debemos testar tanto el diseño web como el desarrollo con usuarios y grupos de interés por parte
de la empresa (target).
Una vez finalizada la etapa de test, pasamos a PUBLICAR y pasar la página web a “producción”. Ya
tenemos en “vivo” la web ahora a ver que tal funciona.

5.- OPERAR, OPTIMIZAR Y EVALUAR            

En esta etapa el sitio web está con un continuo control a tiempo real y en constante mantenimiento para ir
optimizando y realizando continuas mejoras en el sitio web. Analizamos mediante herramientas de
medición (Google Analytics) para obtener informes de rendimiento y garantizarnos que la página web
esté funcionando como deseamos y esté cumpliendo nuestras perpectivas.
En base a los datos obtenidos mediante la medición, evaluaremos y está “cumpliendo” con nuestras
expectativas. El tener una correcta medición de los datos del sitio web, nos facilitará información para
realizar las mejoras en el sitio o reestructurarla por completo.
Una vez consolidemos los contenidos dentro de la página web, podremos saber si finalmente la operación
ha sido rentable.

6.- DESPUÉS DEL LANZAMIENTO

Para potenciar los resultados del sitio, es más que recomendable y necesario realizar campañas
de marketinkg online y hacer una importante inversión en SEO (Search Engine Optimization) para
generar tráfico a nuestro sitio. Diseñar una estrategia de comunicación que convierta a nuestros visitantes
en clientes y conseguir una mayor rentabilidad de nuestro sitio web. También se pueden
realizar campañas en buscadores SEM para dar a conocer sus productos a su público y conseguir
resultados en un corto periodo de tiempo.

¿Por qué realizar SEO?

Actualmente el SEO está considerado, junto con otros medios de marketing online, la manera MÁS
RENTABLE a medio plazo de conseguir conversión en nuestro sitio web. Hay que tener en cuenta que
el SEO no es algo inmediato como puede serlo el SEM, ya que el SEO es a medio plazo y más “una
carrera de fondo”, donde hay que ir construyendo día a día y donde el tiempo invertido juega un factor
importante.
Si desea que te asesoremos para la creación de tu página web, estaremos encantados de ayudarte y
aplicar nuestra experiencia en tu proyecto web.
El diseño web es una actividad que consiste en la planificación, diseño e
implementación de sitios web. Un diseñador web tiene que ver con cómo crear y
desarrollar un pagina web así también como los clientes interactúan con ella. ... Se lo
considera dentro del diseño multimedia.25 sept. 2012

QUE ES UN DISEÑO CONCEPTUAL

En el diseño de un producto o invento, existen multitud de  etapas, pero
claramente se pueden diferenciar dos principales, el diseño conceptual y
el diseño industrial, muchas veces estos dos pasos se confunden y se
pretenden utilizar para lo que no están planteados
Cuando se piensa en desarrollar un producto una vez encontrada la necesidad
se empieza con un diseño conceptual del producto. En los diseños
conceptuales se sientan las bases de cómo va a ser el producto, esta es la
parte más creativa del desarrollo, porque un problema se puede resolver de
muchas maneras y aquí es donde la mente creativa piensa en distintas
soluciones, y se plantean múltiples propuestas. Se pueden definir cosas como
materiales, el concepto de los mecanismos que lo hacen funcionar, cómo lo va
a utilizar el usuario e incluso cosas cómo la forma de enfocar el marketing del
producto ya que cuando se desarrolla un producto se ha de ser consiente de
todas las etapas para su desarrollo, cómo tener en cuenta la fabricación,
transporte, marketing, etc. Los diseños conceptuales son la base para el
posterior desarrollo del producto por eso no hay que tomarse esta etapa a la
ligera por lo que hay que dedicarla tiempo y trabajo.

 
Qué es un menú de navegación?
Es el / los elementos de la web que permite que los usuarios puedan
seleccionar la parte de nuestro sitio que desean visitar.

En las imágenes del ejemplo, vemos que a pesar de ser capturas de

pantallas de distintas páginas y secciones de un mismo sitio, el menú
de la columna izquierda se encuentra en todas ellas, elemento que
nos permitirá desplazarnos a cualquier otra parte del mismo sitio
cuando lo deseemos.

¿Qué debe tener un buen sistema de

navegación web?
La página de inicio
La página de inicio de tu web es la puerta principal de acceso a tu
web. Por ella entrarán la mayor parte de visitantes, por lo que hay que
cuidar al máximo cada detalle.
Si tu sitio web es pequeño, puedes permitirte el lujo de enlazar a todas
las páginas de tu web desde la página principal, así el usuario tiene a
su alcance toda la información disponible en el sitio.
Pero en muchos casos incluir un enlace a cada página convertiría en
un caos a la portada del sitio debido a la gran cantidad de páginas
internas. En estos casos lo más conveniente sería enlazar a las
secciones principales de la web, desde las cuales se enlazaría al
contenido de esa sección concreta, etc.

Pie de página
El pié de página de la web también puede usarse para mejorar la
navegación del sitio.

Normalmente no se utiliza para poner enlaces a todas las secciones

(para eso ya está el menú), pero sí para poner enlaces importantes o
que consideras que deben aparecer en todas las páginas de la web,
por ejemplo información legal sobre tu empresa, direcciones de
contacto, políticas de uso del sitio, etc.

Evitar páginas huérfanas

Una página huérfana es aquella desde la cual no se puede acceder a
ninguna otra. Cuando el usuario se encuentra con una de estas
páginas la confusión y el enfado pueden ser importantes.
Es cierto que dándole al botón “atrás” del navegador o modificando el
campo de la url puede llegarse perfectamente a otra página del sitio,
pero no todo el mundo tiene porqué saberlo, y hacer a la gente
molestarse demasiado en navegar por un sitio es signo de falta
de usabilidad web. No cuesta nada poner en cada página al menos un
enlace a la principal.
Enlazar siempre al índice
Una de las formas de evitar páginas huérfanas y que mejora sin duda
la navegabilidad de una web es incluir en cada página del sitio un
enlace al índice.

Parece bastante extendido el enlazar a la página principal del sitio

mediante el banner o logo de cabecera. Así, el usuario siempre tiene
un recurso para volver al principio y buscar lo que necesita.

Ruta de acceso o ¿dónde estoy?

Es frecuente que aunque el usuario pueda navegar con facilidad por
las páginas de tu sitio no sepa exactamente donde está.

Para evitar esto es muy útil incluir el camino que se sigue desde la
página principal, pasando por las secciones (principales) hasta la
página concreta en la que se encuentra el usuario. Las típicas migas
de pan.
No hace falta que indiques cada uno de los pasos, con los más
importantes es suficiente, no es cuestión de que se convierta en una
guía interminable. Un ejemplo de esto lo encontramos en
LaWebera.es:

Es conveniente que cada parte de la ruta tenga su enlace

correspondiente, de forma que el usuario pueda ir a esa categoría si lo
desea. Sin el enlace a cada sitio, la ruta de acceso pierde sentido ya
que le dice al usuario donde está pero no le da alternativas.

Incluir un buscador
Para páginas web con mucho contenido es realmente útil la inclusión
de un buscador interno que permita a los usuarios buscar
directamente los temas que le interesan.
Páginas web didácticas, de manuales, etc. son sitios que tienen
mucho contenido distribuido a su vez en muchas páginas. Buscar una
información concreta en ellas puede ser complicado dado el volumen
de archivos que contienen.

Los buscadores mejor la experiencia del usuario en el sitio web y le

ayudan a ahorrar tiempo en su búsqueda de información.

Hay herramientas gratuitas muy buenas para poner un buscador en tu

web. Por ejemplo: Google Co-op.
Evitar el empleo de botones “volver”
En algunos sitios se puede ver que cuando se llega a ciertas
secciones o páginas, la única alternativa que se presenta al usuario
que se encuentra en ella es la de hacer click en un botón “volver” o
“atrás”.
Este tipo de navegación termina siendo desagradable para la mayoría
de los usuarios, ya que para leer otro artículo debe seguir al menos
dos pasos. Veamos un ejemplo:

Imaginemos que cada una de las páginas tuvieran como alternativa de

salida el botón “volver”, si hubiéramos accedido a la página 1 y nos
quisiéramos desplazar a la página 4, deberemos hacer click en el
botón volver de la página 4, otro en el de la página “sección 2”, para
luego retomar la ruta.
Toda esta peripecia pudo haber sido evitada si se implementa una
navegación horizontal (entre secciones) y se enlaza a la home.

Volver en un click a la página principal

Algo que resulta particularmente útil para hacer sencilla la
navegabilidad de un sitio y que no requiere implementaciones
importantes, es incluir algún enlace a la página de inicio desde todas
las demás páginas del sitio.
Esto da seguridad al usuario y facilita el reinicio de la navegación por
el sitio en caso de haberse extraviado.

Una de las formas más sencillas de hacer esto es hacer que

el logotipo tenga un enlace a la página principal del sitio.
Este método es conocido por casi todos los usuarios de Internet, por lo
que los mismos esperarán que el logotipo de todos los sitios se
comporten de esta forma.

Una sección, un menú

Cuando el contenido de la web se encuentra distribuido en secciones
de varias páginas, además de implementar un menú principal es
conveniente hacer un menú secundario para navegar por cada una de
las secciones.
Algunas páginas tienen en una de sus columnas laterales un amplio
menú, el cual puede ser desplegable o no, que permite ver como se
ordena el contenido de la sección donde se encuentra. La siguiente
imagen nos muestra una página donde se ha implementado un
submenú de este tipo.

En esta tienda virtual, el acceso a cada sección del sitio se encuentra

en la parte superior, a la derecha del logotipo. Para facilidad de los
visitantes, se ha implementado en este sitio un menú lateral a la
izquierda, que permite navegar por las diferentes páginas de las
secciones.
Otra forma de conseguir algo similar es el empleo de menus
desplegables. Esta solución debe ser cuidadosamente empleada, ya
que es bastante frecuente ver sitios donde el empleo de estos menus
es dificultoso.
Regla de los tres clicks
Una forma de ver si la navegabilidad de un sitio es lo suficientemente
buena, es verificar cuantos clicks se deben hacer para llegar a
cualquier parte del sitio. Si se superan los tres clicks, es porque la
navegabilidad necesita mejoras.
Sin embargo, a pesar de que con hacer tres clicks se llegue a
cualquier parte del sitio, el paradigma de la navegabilidad es poder
acceder desde cualquier parte del sitio a otro con solo hacer un click,
aunque no siempre es posible.

Tipos de menú de navegación

El menú de una página web es la principal herramienta de navegación
que le podemos facilitar al visitante para que encuentre lo que busca.
Es imprescindible para que las personas encuentren las demás
páginas de la web, además del índice.

Los menús de navegación son básicamente listas de enlaces a las

diferentes páginas o secciones de la web. De su estructuración
dependerá en gran medida que los visitantes encuentren lo que
buscan, por lo que es conveniente pensarse dos veces cómo hacerlo
antes de implementarlo en la web.
Podemos encontrar un menú horizontal:

O un menú vertical;

Como mencionamos antes, para sitios web con un número de páginas

pequeño puede ser bueno enlazar a todas ellas desde cada página
para que el usuario tenga en todo momento la información disponible
en la web a su alcance.

Por ejemplo, si es una página web informativa sobre tu empresa y no

tiene otra finalidad, puede que cuente con 10 ó 15 páginas en total, las
cuales pueden perfectamente ser enlazadas desde cada página
individual.

Sin embargo, cuando una web contiene mucha información este tipo
de menús tiene poco sentido, porque entonces tendríamos menús con
cientos de enlaces, algo excesivamente largo para ser usable.
Lo normal en estos casos es enlazar desde la página principal a las
secciones más importantes, y desde cada una de ellas a sus
contenidos concretos.

Consejos para mejorar nuestro menú

de navegación
Si el usuario no cuenta con los medios adecuados para encontrar
rápidamente lo que está buscando, o existen elementos que lo pueden
distraer fácilmente de su objetivo, se puede crear una sensación de
frustración y su experiencia se ve claramente afectada.
Es por esto, que debemos analizar los elementos claves para lograr
una buena navegación, y el más importante de estos siempre será
nuestro menú.
El menú de navegación es un aspecto central muy relevante para la
usabilidad del sitio, si se le da una estructura y uso adecuado ésta se
ve beneficiada en gran medida, permitiendo guiar al usuario a través
de su visita.

Simplicidad
Siempre trata de mantener las cosas simples, si tienes un menú
sencillo será más fácil para un visitante primerizo aprender a utilizarlo,
y de esa manera navegará con mucha más confianza.
Si mantenemos la sencillez lograremos obtener una navegación
eficaz. Sin importar cuántas categorías tenga el sitio, ni la cantidad de
páginas que alberga, nunca debes llevar al extremo la exigencia hacia
el usuario, por lo que mantener alejada la complejidad del diseño de tu
sitio se debe de convertir en una de tus tareas principales.

Para poder lograr la simplicidad en nuestro menú, primer

debemos tener bien definida la estructura que tendrá la información, y
a partir de ahí podemos definir el diseño que más nos conviene.
Es muy importante que los elementos de contenido que estén
relacionados, se agrupen y se definan en categorías para que de esa
manera la navegación sea más intuitiva y tenga más sentido para los
usuarios.
No sobrecargues tu menú, mantén sólo los elementos que aumentan
la usabilidad del sitio y mejoran la experiencia del visitante.
Buena descripción de los ítem del menú
Una vez que tenemos definida la estructura en que estableceremos la
información de nuestro menú, es importante tomarnos un tiempo para
definir qué palabras claves vamos a utilizar para fijar los elementos
que enlazarán a la información.

Es en esta parte que la descripción juega un papel muy relevante para

lograr un funcionamiento eficiente.

De nada sirve tener toda la información del sitio en un orden adecuado

y con la estructura correcta, si los elementos de navegación que llevan
a ella no son llamados de la manera en que se espera.

Si al momento de ver un enlace, no nos explica realmente sobre el

contenido al que lleva, los datos siguen siendo difíciles de encontrar
para el usuario.
Trata de utilizar palabras que sean familiares para el usuario, si es
necesario hacer uso de frases o palabras extrañas trata de dar una
explicación a través de algún otro medio, no dejes de ser creativo pero
no malinterpretes este concepto, selecciona una redacción que sea
simple y que vaya al grano.

Posicionamiento en la parte superior

La posición de nuestro menú es un factor muy importante, ya que las
personas que ingresan a un sitio tienden a seguir un patrón de
observación, centrando su atención en ciertas partes de la página a la
vez.

Generalmente este patrón forma la figura de una F, esto nos dice que
su atención esta puesta generalmente en la parte superior del sitio.
Si es necesario desplazarse a una parte media de la página, puede
que la atención del usuario se pierda y su vista se centre en otros
elementos, causando una distracción involuntaria, lo que puede llevar
a la frustración que mencionábamos anteriormente. Es por eso que es
importante mantener el menú en la parte superior de la ventana.

Visualmente atractivo
Esta comprobado que nuestros cerebros procesan, a cierta
medida, mejor la información visual que la textual.

Cuando ingresamos a un sitio de manera apresurada, tendemos a

hacer un análisis rápido del contenido, por lo que podemos omitir un
cierto nivel del texto que se muestra, pero las imágenes son mucho
más difíciles de omitir.
La idea de hacer un menú visualmente atractivo, es ayudar a los
visitantes a interpretar el enlace mediante imágenes de fácil relación.
Elementos como iconos y patrones de colores, hacen que el usuario
recuerde la posición de alguna categoría o sección de su interés.
Los colores también son importantes para resaltar los elementos que
actualmente se encuentra activos, o que son llamados con algún
evento, de esta manera el usuario podrá percatar si realmente esta
realizando alguna acción y recordará la parte del menú a la que
accedió.

¿Es conveniente que mi página web

tenga menús desplegables?
Los menús desplegables son muy agradables a la vista, pero los
menús no tienen en sí mismos una función decorativa, sino que se
trata de elementos que colaboran en la usabilidad de la página y por
consiguiente, mejoran la experiencia de los usuarios en nuestra página
web.

Para determinar si una página web requiere de un menú desplegable

o es mejor utilizar menús sencillos, debemos preguntarnos cuál es la
utilidad que se agregará y evaluar beneficios e inconvenientes.

No cabe la menor duda que cuando tenemos una página web con
contenidos que se encuentran divididos en muchas categorías y
secciones, es necesario que los mismos sean presentados a los
usuarios en forma ordenada, de modo que pueda acceder rápido a
cualquier parte de la página.
Para estos casos, la utilización de los menús desplegables, más que
una opción se trata de una necesidad, ya que presentar los títulos de
secciones y categorías de otra forma podría ocupar gran cantidad de
espacio y quedar parcialmente fuera de la vista del usuario
haciéndose necesario desplazarse por la página para ver todo, lo que
es un grave inconveniente.

Pero teniendo en cuenta esta último, debemos saber que los menús
desplegables es información oculta, y que obliga al usuario a realizar
algunos movimientos para que se produzca el despliegue del menú.

Esto hace que la utilización de los menús desplegables deba ser

racionalizada y llevada al mínimo posible, dado que es preferible que
la información de navegación se encuentre visible.
Para los sitios pequeños o con contenidos que se encuentran poco
subdivididos, lo más aconsejable es que la información de navegación
sea colocada en menús simples (horizontales o verticales), tanto en la
parte superior de la página como en las columnas laterales.
Malas prácticas en el uso de menús desplegables
Si la página web requiere de la utilización de estos recursos,
tengamos en cuenta que no debe realizarse de cualquier forma, y que
en todos los casos, lo que debe primar es la usabilidad. Cuando no se
tiene en cuenta esto, se producen los fracasos que son frecuentes en
la web, donde los menús son una molestia para el usuario o son
prácticamente inútiles.
Uno de los errores más frecuentes es la utilización de scripts pesados
para conseguir efectos diversos, sin tener en cuenta que los mismos
afectan la carga de la página, como los menús hechos en flash con
carga gráfica importante.
El menú debe siempre ser una mejora en la usabilidad de la página,
por lo que aumentar el tiempo de carga resulta contraproducente.

Otro de los errores comunes es la utilización de menús con tiempos de

retardo para su despliegue. Los retardos excesivos pueden hacer que
el usuario se impaciente al pasar de un ítem a otro y tener que esperar
que se desplieguen.

Todo ítem que se despliega cuando se hace clic, debe estar

señalizado de forma que el usuario pueda advertir rápidamente de qué
se trata.
Se debe prestar especial atención a la utilización de transparencias en
los menús desplegables, ya que puede verse en algunas páginas, que el
texto de fondo interfiere con la lectura de los ítems de menú, o que la
imagen de fondo de la página hace que se pierda la visibilidad de los
ítems.
Las transparencias en los menús desplegables son un efecto muy
agradable, pero no en todos los casos es posible utilizarlas.

También es importante tener en cuenta que no deben

haber alteraciones durante el desplazamiento del puntero por el menú,
para que cuando el usuario realice este movimiento el menú no se
cierre y se deba repetir la acción; este error, que parece elemental, es
bastante frecuente.
Consejos para la instalación de menús desplegables
Siempre se debe tratar de que haya continuidad visual entre el menú
que se despliega y el ítem desde el que parte, de forma tal que el
usuario siempre tenga visible el punto de partida y le resulte sencillo
desplazarse a otro ítem.
Cuando se realice o instale un menú en el que se debe hacer clic para
que se despliegue, es conveniente señalizar esto mediante la
colocación de una flecha, de forma tal que el usuario tenga presente
que algo va a suceder mediante una acción suya.
Hay menús desplegables que tienen un tiempo de retardo para
cerrarse. Siempre debe tenerse en cuenta que esto se hace
principalmente para que el menú no se cierre por una acción
involuntaria del usuario, pero el tiempo de retardo no debe ser tal que
cuando el usuario deba esperar en forma innecesaria para que el
efecto termine.

 Y no debe perderse de vista que los menús, sean desplegables o no,

no son simples elementos decorativos, sino que son ayudas que se
ofrecen a los usuarios para que la navegación sea más sencilla.
Ante la duda, siempre es preferible optar por la opción más simple.
Basta con hacer una recorrida por las páginas web más visitadas, para
ver que los efectos no son un elemento principal, y en muchas, ni
siquiera existen.

Técnicas para realizar menús

adaptables
Diseño responsive
Manejar un diseño adaptable (responsive design) te permitirá
proporcionar una mejor experiencia para el usuario, previendo los
problemas relacionados a las diferentes tipos de resoluciones y
tamaños de pantalla, que se presentan por la variedad de dispositivos
que se utilizan en la actualidad para desplegar páginas web.
Debes tener en mente, que los usuarios que acceden a tu sitio
utilizando dispositivos con resoluciones de pantalla pequeñas, también
necesitan navegar a través de él, por lo que es necesario darles una
clase de soporte.
El diseño adaptable (responsive design), se ha convertido en una
consideración casi obligatoria al momento de elaborar la estructura de
un sitio web.

Actualmente son muchos los usuarios y clientes potenciales que

acceden a través de algún dispositivo móvil, a alguna de las páginas
que hemos desarrollado para presentar un proyecto o producto, como
tal debemos de proporcionar el soporte adecuado a estos dispositivos
para no tener una fuga de inversión.
Vale destacar que sólo haremos uso de CSS para llevar a cabo estos
ejemplos, pero nos respaldaremos con una pequeña línea de código
JavaScript.

Uso de menus que ocupen toda la horizontal

Esta es la técnica más sencilla para crear un menú responsive, ya que
simplemente consiste en crear los elementos en forma de lista y darles
un ancho para que abarquen totalmente la pantalla en sus distintos
tamaños.
Con este código cuando la ventana se haga pequeña o la página se
visualice en una pantalla de dispositivo móvil, los elementos del menú
tomarán un ancho de 100% para desplegarse de manera horizontal.

Las ventajas de este método son que no te utilizamos JavaScript, no

es necesario añadir código HTML extra y el CSS se mantiene sencillo.

Desplegar elementos en un select

Con este método nos encargaremos de ocultar el menú cuando la
pantalla sea muy pequeña, y en vez de él mostaremos un elemento de
tipo select donde desplegaremos todos elementos que componen
dicho menú.

Para poder lograr esto necesitaremos agregar un nuevo elemento

HTML par así crear el select. Además de esto, haremos uso de
JavaScript para redireccionar a la página que se seleccione de la lista.

Para las pantallas y ventanas grandes ocultaremos el select. Mientras

que para las pequeñas ocultaremos el menú y desplegaremos el
select.

De igual manera mediante el pseudo elemento “:before” agregamos la

palabra Menú para que el usuario sepa que debe dar clic ahí para
acceder a las secciones.
Las ventajas de esta técnica es que no se necesita mucho espacio y
se utilizan controles nativos, mientras que las desventajas son la
necesidad de usar JavaScript, el duplicado de contenido y que el
elemento select no puede ser muy estilizado.

Menú fijo con scroll suavizado (sticky menu)

Otra opción muy interesante es tener el menú fijo en la parte superior
de la página y hacer que al pinchar en una de las opciones de menú,
vaya a la sección con una animación que haga el movimiento más
suave.
Puedes ver el siguiente ejemplo y pinchar en los elementos para ver
de lo que hablamos.

Pasos para hacer un menú web eficaz

La navegación web es una de los principales elementos que podemos
mejorar y adecuar con las hojas de estilo, esto se ve reflejado en el
constante uso de menús y barras para guiar al usuario en las páginas
de internet.
Por ello, debemos de realizar un esfuerzo a la hora de diseñar un
menú y no simplemente tomarlo como un paso más, debemos
planearlo y codificarlo de tal manera de que el producto sea efectivo y
sobre todo útil para los internautas.
La creación de menús de navegación con CSS es un tema creativo,
con muchas formas de explotarse y que nos permitirá desplegar
nuestras ideas para que los usuarios se sientan cómodos en nuestra
página.

Existen cientos de galerías y códigos en internet para obtener menús

desplegables, horizontales, verticales,  transparentes, con hijos, sin
hijos, etc., es cuestión de buscar y con la ayuda de Google tendremos
un sinfín de menús que lucirían fantásticos en nuestros sitios.

Esto no es ninguna novedad, pero que pasa si deseamos ir más allá y

queremos empezar a diseñar nuestros propios menús y nosotros
mismos manipular cada aspecto y saber el para qué y cómo de las
cosas, para ello hay que empezar con la estructura la cual se irá
formando tomando en cuenta varios puntos.
Elegir el lenguaje web para crear el menú
En primer lugar debemos definir con que lenguaje haremos nuestro
menú, como ya mencionamos en nuestro caso usaremos
únicamente CSS por ser el lenguaje en el que nos estamos adentrando
actualmente y debido a su sencillez y fácil ejecución.
Se puede optar por crear menús en otros lenguajes o mezclar estos
con el propio CSS, como es el caso de Javascript, el cual se ha
convertido en la mejor opción para hacer menús dinámicos ligeros que
muestren los “hijos” o sub-secciones de las páginas principales, para
ello el uso de librerías como jQuery nos puede ahorrar unas cuantas
horas de trabajo.
Estructura básica del menú de navegación
La estructura básica en XHTML para nuestro menú será la siguiente:
<nav id="menu">
<ul>
<li>Sección 1</li>
<li>Sección 2</li>
<li>Sección 3</li>
<li>Sección 4</li>
</ul>
</nav>
Estos son los cimientos sobre los cuales construiremos el resto del
proyecto, como podemos ver se trata simplemente de una lista
desordenada (unordered list) que contendrá el número de “ítems” o
secciones que queremos mostrar en el menú los cuales están
resguardados dentro de las etiquetas “<li>”.

Sin agregar un estilo, esto se vería nada más como una lista con
viñetas de punto en nuestro navegador, pero ahí es donde empieza a
hacer su trabajo el CSS.

Añadiendo estilos CSS

Debemos declarar la propiedad “inline-block” para los ítem del
id #menu en nuestro CSS, así todo el texto dentro de las etiquetas
“<li>” se acomodaran dentro de una sola línea sin que exista saltos
entre ellos; es decir, al momento de definir esta propiedad en el
navegador veremos una lista pero ahora de manera horizontal y sin
decoración, aunque esto puede variar si nosotros se la agregamos.
Para lograr esto basta con agregar las siguientes líneas en nuestro
código:
#menu li {
display: inline-block;
}
Al momento de definir la propiedad “inline-block” también podemos
agregar otras como padding para separar cada elemento por cierta
distancia dada en pixeles, si yo indico algo como “padding-left: 15px;”
existirá una distancia de 15 píxeles a la izquierda de cada elemento de
la lista.
Con “inline-block” podemos agregar width y height para definir el
tamaño del elemento, es por ello que en este caso lo usamos en vez
de “inline”, que aunque a simple vista parecen la misma propiedad, al
usar “inline” no se puede dar ancho ni altura a los elementos de la
lista.

También podemos irle dando estilo a nuestro menú agregando

atributos como fuentes y colores.
#menu a {
background-color: #e0e0e0;
color: #3c3c3c;
text-decoration: none;
border-left: 4px solid #c000ff;
}
Con ello tenemos definida la estructura del menú, este menú lo
podemos incrustar dentro de un div “contenedor” y así centrarlo o
colocarlo en el lugar donde queremos que luzca.
Para poder realizar una menú vertical básicamente se hace lo mismo
sólo que obviamente la propiedad “inline-block” se omite.

A partir de ahí podemos usar nuestra creatividad para darle el estilo

que deseemos a nuestro menú podemos manejar fondos, sombras,
eventos y demás.

Y aquí puedes ver el menú en funcionamiento: