Todos queremos tener la web más atractiva y dejar a nuestros visitantes con los ojos abiertos y completamente deslumbrados. Por lo general un diseño muy atractivo implica gran cantidad de elementos gráficos, aumentando el tamaño de la página. Aquí hablaremos de algunos consejos útiles sobre cómo mantener un diseño web atractivo, pero con descargas rápidas.
Debido a la tasa media de ancho de banda de Internet por ordenador, los webmasters dejan de desarrollar sitios web complejos cargados con fuertes elementos gráficos. En casos extremos se pueden encontrar sitios web que toman unos minutos para cargar el contenido en su navegador. Por supuesto el usuario no va a esperar ese tiempo para que un sitio web cargue, y pasará a la siguiente página web en sus resultados de búsqueda.
¿Entonces por qué algunos webmasters aún desarrollan páginas de carga lenta? Principalmente debido a la falta de conocimiento de sencillas técnicas de optimización de gráficos que les permitan mantener un sitio web atractivo, manteniendo el tamaño de página más pequeño.
¿Cuántos somos conscientes del hecho de que un cuadro con esquinas redondeadas puede conseguirse utilizando el código CSS solamente, sin la necesidad de cualquier imagen gráfica. Los que están familiarizados con CSS saben que un nivel relativamente alto de la programación es necesario, los errores más comunes pueden tener relación con la optimización de las soluciones simples.
Se podría hacer la afirmación de que lo que un diseñador Web puede hacer con el software gráfico es imposible de aplicar al código. No estoy de acuerdo. Cuando el diseño está terminado y está listo para cortarlo en pequeñas imágenes a utilizar en el código html, la creatividad se ha probado. Todo lo que se hace en esta etapa afectará al tamaño de página total. Si el diseño contiene formas redondeadas que se superponen unas a otras o zonas con gradientes de color, entonces deberemos cortarlas con cuidado para que el resultado sea tamaño de archivo pequeño.
Veamos lo que significa cortar eficientemente:
Técnicas avanzadas
Gráficamente la optimización de un sitio web es algo más que saber hacer optimizaciones de la imagen. Existen algunas técnicas avanzadas que requieren un alto nivel de programación. CSS2 tiene mucho más que ofrecer que el CSS. Aunque no todos los navegadores han adoptado esta norma todavía se debe estar listo para cuando lo hagan. JavaScript también nos da un conjunto de opciones para crear algunos efectos interesantes sin necesidad de sobrecargar la página con Flash. El uso de herramientas limitadas, como JavaScript, frente a una aplicación avanzada, como Flash para crear los efectos deseados puede ser difícil. Sin embargo, pensemos en el resultado del esfuerzo que puede diferenciar el sitio web de los demás. Obtendremos un atractivo sitio web de aspecto profesional y que carga rápidamente.
Regreso al futuro
Las PDAs, teléfonos móviles y ordenadores portátiles mini son usados con conexiones a inalámbricas para navegar por Internet, la publicación de páginas web de carga rápida mejorará la experiencia de navegación, no sólo para aquellos que utilizan conexiones de gran ancho de banda, sino también hará que el usuario tenga una experiencia de navegación fácil.
Para aquellos que insisten en que la optimización del diseño web no es necesaria porque todos tendrán conexiones de banda ancha alta con el tiempo, estoy de acuerdo, hasta cierto punto. Sin embargo, las empresas de software están creando aplicaciones que utilizan más ancho de banda porque saben que están disponibles para que se utilicen. Acostumbrémonos a optimizar bien las páginas web, porque este juego del gato y el ratón no terminará nunca, y es mejor aprender las reglas del juego, que ser mordido.
La navegación web es uno de los elementos más cruciales en la determinación de la eficacia de un sitio web.
Para que la navegación web se eficaz, ante todo debe tener sentido. Si bien siempre hay espacio para la creatividad, los sitios web bien diseñados tienden a tener esquemas de navegación similar.
Un diseñador de páginas web siempre debe tener en cuenta la finalidad básica de la web y la audiencia prevista en el diseño de los elementos de navegación. La mayoría de sitios web existentes tienen a bien informar al visitante sobre un producto o servicio o vender realmente ese producto o servicio. Por lo tanto, hay algunas pautas básicas a seguir:
Asegurémonos de que todos los elementos de la navegación están claros y que los vínculos tienen el uso de las convenciones estándar de los enlaces, tales como botones, menús, subrayando del texto o cambio de color en el ratón.
Cuando no utilicemos los enlaces convencionales, hay que indicar explícitamente al visitante que se trata de un enlace. Por ejemplo, supongamos que diseñamos una página web en la que se utiliza un mapa que muestra distintas ciudades y deseamos que el usuario haga clic en el nombre de la ciudad para obtener información sobre la misma. Hemos de asegurarnos de informar al usuario que haga clic en el nombre de la ciudad para obtener más información acerca de ella.
Recuerde la regla de los “Tres clics”. Los estudios han demostrado que la mayoría de los usuarios no suelen hacer clic en más de tres enlaces para obtener la información que desean. Así, cada página del sitio web debe ser accesible dentro de esos tres clics.
No se recomienda el uso de flash o de otro tipo de página de bienvenida en el sitio web. Hay que mantener el diseño de la página web de sencillo y atractivo. Pero si decidimos usar uno, asegurémonos de usar la etiqueta META REFRESH, que permita al visitante saltar la página de inicio después de unos segundos y proporcionar un botón en el que pueda hacerse clic, claramente marcado para que el visitante puede pasar la página de entrada e ir directamente a su página de inicio, de lo contrario un gran porcentaje de los visitantes no volverán jamás. Recuerde que la mayoría de los visitantes buscan información, no entretenimiento.
Elementos de navegación
Top Menús - La barra de menú de la página normalmente se encuentra debajo de la cabecera que contiene el logotipo del sitio. Estos elementos de menú pueden ser individuales, menús desplegables, o con ampliación. Cada elemento del menú puede ser representado por un gráfico o solo de texto.
Lateral izquierdo de navegación – La navegación del lado izquierdo normalmente se implementa como la columna A o área de texto en la parte superior izquierda de la página web. Al igual que el menú superior, cada elemento puede ser un simple enlace o un menú en expansión.
Lateral derecho de navegación – La navegación del lado derecho no se utiliza muy a menudo, pero cuando se utiliza, se implementa como una columna o área de texto en la parte superior derecha de la página web. La mayoría de los diseñadores utilizan esta área para la publicidad en lugar de navegación del sitio.
Menús de fondo – Los menús de fondo pueden ser una barra de menú o pie de página.
Elementos importantes de navegación
Enlaces – Todas las páginas del sitio web deben estar dentro de dos o tres clics de la página de inicio. Las páginas importantes se deben estar a un clic. El tipo de sitio web determina los vínculos que son más destacados.
Cajas de inicio de sesión - Las cajas de inicio de sesión deben ser bien visibles. Los lugares comunes son parte superior izquierda, arriba a la derecha o dentro de la cabecera de la página.
Carros de la compra - Si usted usamos un carrito de compra para vender productos, debemos mostrar el botón de compra en un lugar destacado sobre cada página. La localización más común es la parte superior derecha justo debajo o como parte de la cabecera.
Botones de Orden – Si utilizamos botones de orden individual deben ser grandes y visibles. Usaremos el menor número de clics para entrar a la página.
Barra de migas – La barra de migas, son los vínculos o representación gráfica de dónde nos encontramos. La barra de migas generalmente está situada en la parte superior izquierda de la página justo debajo de la cabecera. Cada palabra es un enlace a la página anterior. Suelen estar en esta forma: Inicio-> Artículos-> Marketing
Enlaces externos – Los enlaces externos pueden ser utilizados en cualquier lugar, pero son más utilizados dentro de las áreas de texto de la página web. Pueden ser referencias a más información que se encuentra en otro sitio, a los productos recomendados, o para cualquier otra cosa.
Anuncios – Los anuncios son normalmente gráficos o texto con un hipervínculo asociado. Los anuncios pueden ser colocados en cualquier lugar de una página web, pero normalmente se utilizan sólo en el banner, por el lado derecho de la página, debajo de los elementos de navegación en el margen izquierdo, en la parte inferior de la página o intercalados en las zonas de ensayo de las página. Los estudios demuestran que los anuncios “por encima de la tapa” son más eficaces.
( “Por encima de la tapa” se refiere a la zona de una página web que es visible sin tener que desplazarse.)
Elementos descargables – Si ofrecemos elementos descargables, tales como archivos de audio, video o pdf, asegurémonos de informar al usuario del tamaño del archivo o si hay una aplicación para utilizar el archivo. Si se necesita una aplicación, proporcionaremos un vínculo a la aplicación. Por ejemplo, proporcionaríamos un vínculo de Acrobat, si estamos ofreciendo archivos PDF.
Mapa del Sitio - Un mapa del sitio es una buena forma de la distribución de todo el sitio para sus visitantes. Es sólo una lista jerárquica de cada página del sitio.
Resumen
Un sistema de navegación bueno puede aumentar el número de páginas vistas por cada visitante. Esto a su vez puede aumentar las suscripciones, los clientes, ventas, los miembros y hacer que el sitio web sea más exitoso.