Archive | Diseño Web RSS feed for this section

Porque reducir el peso de tu sitio web

Resumen.

1.      Paginas más ligeras incrementan el numero de paginas vistas.

2.      Elimina las imágenes. Elimina los banners de autopromocion (no dan beneficios).

3.      Aprovecha todo lo que el sistema operativo te ofrece (botones, colores, tablas, tipografias).

4.      Sé flexible con las limitaciones del html.

Reduce el peso de tu site.
Reducir el peso de un site en un 20% equivale a incrementar en un 20% el numero de paginas vistas. El peso de las páginas es un lastre que hace que el numero de paginas vistas se reduzca por sesion de usuario.

Peso de las paginas Total peso / velocidad de conexion En una sesion de 30segs
Site A 30kbs de html + 20kbs de imagenes 50kbs / 5kbs/seg bajan 3 paginas.
Site B 15kbs de html + 10kbs de imagenes 25kbs / 5kbs/seg bajan 6 paginas.

Tomando como constantes el tiempo de conexión y la velocidad de descarga, la variable donde un site puede tomar ventaja para servir mas paginas es reduciendo el peso. Reduciendo el peso podemos hacer que el usuario se baje más información en el mismo tiempo de conexión.

El reducir el peso de las paginas no tiene por que requerir cambios dramáticos. Conseguir una reducción del 10-20% del peso global del site puede suponer un gran adelanto respecto a la competencia.

En un site donde las páginas bajan con rapidez no da pereza pinchar en los botones.

No solo se trata de cuidar a los usuarios con módem. Si las páginas pesan poco y la respuesta de la web a las peticiones del usuario es rápida y ágil, no da pereza seguir pinchando para comprobar datos y recoger más información.  Si el site pesa y cada petición exige un tiempo de carga, el usuario se desanima y parara de pedir información con lo que no finalizara su labor de forma satisfactoria.

En internet que un sistema responda de forma rápida es vital para trasmitir valores de calidad, confianza y seguridad.

Es mejor crear 3 paginas de 10kbs que 1 de 30kbs.

En internet cuenta mas el acceder a información precisa que a mucha información. Ofrecer paginas ligeras donde el usuario pueda tomar decisiones rápidas sobre avanzar o retroceder es vital. El camino hacia la información final (donde si podremos crear paginas más completas) debe estar compuesto de páginas simples que ofrezcan rutas claras. El ofrecer todas las rutas no ayuda a tomar una decisión. Es mejor ofrecer una pagina sencilla y que sea el usuario el que tome la decisión de seguir o retroceder, pero no le intentes enganchar ofreciendo muchas opciones (solo le aturdirás).

La regla básica para crear páginas de 10kbs es evitar ponerlo todo en cada pagina. Muchos sites “arrastran” los menús de navegación de todo el site en todas las paginas cuando por lo general indicar la posición del usuario en el site junto a un boton de “home” y un buscador resuelven todas las dudas.

Elimina el grafismo. Esto incluye los banners de autopromoción.

El único gráfico necesario es el logo de tu site. Si es relevante, incluye fotografías del producto, noticias o ilustraciones de la actividad.

No pongas banners de autopromoción. Si tu site incluye banners, procura ponerlos solo cuando tengas un patrocinador real. Si no lo tienes evita poner banners internos. Están incrementando el peso de la pagina, su utilidad es mas o menos nula y están creando ceguera en el usuario.

El problema de los gráficos es doble. El peso suele ser alto y generan una conexión con el servidor que suele retrasar el envío del resto de información. Procura usar los gráficos esenciales. Cuanto menos pese tu pagina mas satisfecho estará tu usuario.

Aprovecha lo que el sistema te da.

Botones, tablas, paleta de colores, tipografías, menús desplegables. El sistema operativo te ofrece una gran cantidad de herramientas que sabiendo combinar te pueden ayudar a sustituir gran parte del grafismo de tu site.

Las tipografías que ofrece el sistema son limitadas pero más que suficientes para crear titulares, botones, etc. No uses imágenes para crear “solo títulos”.

Las tablas y los colores del sistema suelen ser mas que suficientes para crear todo tipo de botoneras, lay-outs. La austeridad de este estilo se puede enriquecer con gráficos bien seleccionados y fotos.

Procura utilizar todo lo que el html crea por defecto como las listas y bullets. El querer cambiar el sistema solo genera paginas mas lentas, nadie va a apreciar la mejora si al final el site va mas lento. Concentra las fuerzas en ofrecer contenido de calidad y en crear herramientas que funcionen más rápido.

Se flexible con las limitaciones del html.

El principal motivo por el que las paginas bajan despacio es por que los diseñadores (gráficos y programadores) de las paginas, pretenden imponer su “estilo de diseño” a un soporte que tiene ciertas características.

La precisión del html es algo ruda en cuanto al manejo de tipografía, párrafos, márgenes y justificaciones, pero es mejor saber moverse con agilidad dentro de estos limites que imponer a base de código y gráficos unos límites que no mejoran el funcionamiento del site.

Sé flexible con la herramienta y todo funcionara de forma más rápida.

Diseño Web – Que es Navegabilidad?

En todos lados se escribe y se habla mucho sobre el término Usabilidad, pero no debemos olvidar  el concepto de Navegabilidad.

¿Qué es la Navegabilidad?

Son aquellas premisas que nos permiten construir nuestro web de manera lógica, en el que la información se encuentra de manera muy intuitiva, de carga rápida en el navegador, lo que supone un ahorro de tiempo y genera valor añadido en nuestro site.

¿Cómo conseguimos una buena Navegabilidad en nuestras páginas web?

1.- La navegación recursiva.
Se llama al menú que tiene que estar siempre presente en todas nuestras páginas web, es decir, el link que va a la página principal, o también llamada “Home” y todo aquello que creamos relevante en nuestra página que deba tener visible nuestro lector, tal como nuestra dirección de mail o cualquier medio de contacto.

2.-Mapa del web.
En la medida de lo posible, siempre que nuestro site sea lo suficientemente amplio, debemos incluir un link, en nuestra navegación recursiva, que se enseñe el mapa del web. Esto va a proporcionar a los surferos en nuestro site, encontrarse a si mismos y la información que buscan.

3.-Directorio Dinámico:
Otra de las cosas sencillas de hacer que proporcionan un alto valor añadido a nuestras páginas. Se trata de una pequeña línea en la parte superior de la página que nos va indicando el lugar en el que nos encontramos y por el que vamos navegando. Nos enseña los directorios y subdirectorios por los que hemos pasado, hasta llegar a la página actual. Además, no hay que olvidar añadirles un link que nos permita volver hacia atrás en nuestra navegación con solo un click en cualquier momento.

4.-Distribución de la información de manera lógica:
La finalidad de esto es conseguir un mejor acceso a la información de forma rápida y clara, con los menores toques de ratón posibles. Tengamos en cuenta que cada toque de ratón significa el volver a cargar una página en el navegador, que como ustedes suponen conlleva un mayor tiempo muerto delante de la pantalla. Hay que tener muy presente, que una gran parte de la población se conecta a la red mediante módems de baja transferencia y los accesos de banda ancha a Internet aún no son masivos.

5.-Inclusión de imágenes de bajo peso:
Siempre que sea posible hay que añadir imágenes relacionadas con el tema en cuestión, ya que Internet es mayoritariamente visual. Pero por lo comentado anteriormente, debemos tener en cuenta que las imágenes tardan en cargar bastante en los browsers y por ello deben ser lo menos pesadas posibles. Para tener una referencia, una imagen no debería pesar mas allá de los 7Kb-15Kb. Hoy en día, existen en el mercado programas que reducen el peso de las imágenes para adecuarlos al web.

6.-Depurar el código fuente siempre que sea posible:
La tecnología nos ha permitido desarrollar herramientas que de una manera visual nos permite construir sites complejos de forma rápida y sencilla. Pues bien, lo que mucha gente no sabe es que estos programas generan mucho más código del necesario, es decir, mucha basura. Esto supone que hay más código que leer y los navegadores tardan más en mostrar la información haciendo que la navegación por la web sea más lenta y pesada.

Pensemos siempre que nuestros clientes no tienen los recursos óptimos para acceder a nuestro site, que debemos enseñar todo de manera clara y concisa, sin recargar demasiado la web y que la posibilidad de contacto esté siempre presente y factible al posible comprador.  Generemos un valor añadido en nuestras páginas que permitan desmarcarnos de nuestra competencia.

Diseñando un sitio web funcional

¿Has notado cómo te gustan realmente algunos web sites, mientras que otros te han frustrado por completo?

¿Cuántos sites has visitado y saliste en unos pocos segundos?

¿Por qué? ¿Cómo puedes evitar que eso suceda con tu sitio?

¿Cómo puedes conseguir que tus visitantes se queden en tu sitio y hacer que hagan lo que quieras que ellos hagan? Aquí vas a descubrir muchos de los principios básicos del diseño de web site los cuales complacerán más a tus visitantes y aumentarán tus posibilidades de tener éxito en el Internet.

Empecemos:

El diseño de un Web site involucra muchas consideraciones y muchos pasos. Vamos a ir por cada uno de estos en esta sección. Pero, antes de seguir, una palabra de advertencia:

No empieces a diseñar un web site hasta que sepas:

- Qué quieres alcanzar con este y,
- Cómo encaja en tu negocio y planes de marketing.

Mucho tiempo y esfuerzo será gastado si no determinas esos elementos de frente. El web site no es el fin, es el medio para alcanzar tus objetivos estratégicos de tu negocio de Internet. Tu sitio será diseñado para implementar las tácticas de marketing seleccionadas. Construir un sitio antes de ver cómo el cuadro en general encaja es como poner el carruaje antes del caballo.

OK, suficiente de filosofar, continuemos aprendiendo cómo diseñar un web site que alcanzará esos objetivos.

El trabajo del diseñador de web es balancear dos intereses:

1. Debes hacerlo fácil para que tu visitante obtenga aquello para lo que vino a tu sitio. Debe ser fácil de usar. Para hacerlo efectivamente, debes ser capaz de ver tu sitio a través de los ojos de tu visitante.

2. Debes hacerlo fácil para que el visitante haga lo que tu quieres que el/ella haga. Debes tener ojo para identificar los obstáculos que detienen a los visitantes de volverse clientes.

Lo que debes o no hacer para implementar el balance de una manera para obtener resultados pueden ser clasificados en seis categorías:

1. ¿Cómo de rápido se carga el sitio?

2. ¿Es inmediatamente claro acerca de lo que es el sitio? ¿Claramente afirma “¿Qué Hay Ahí Para Mi?” desde la perspectiva del visitante? ¿Te enfocas en un sólo tópico, o la página contiene demasiadas y diferentes cosas que el visitante se confunde?

3. ¿Es la navegación clara e intuitiva?

4. ¿Es la presentación orientada hacia la venta? ¿Es fácil para los visitantes comprarte?

5. ¿Puede un visitante fácilmente averiguar quién eres y cómo contactarte?

6. Consideraciones Generales – la apariencia y sentido del sitio.