<Sitios web> <Tips> <Concepto> Lo primero de todo a tener en cuenta es: Se debe reconocer rápidamente sobre que se trata el sitio. Claridad ante todo. Tanto el contenido del sitio como su diseño deben tener coherencia. Recurre a elementos sistemáticos para su realización teniendo en cuenta siempre quien es el cliente y quienes los clientes de tu cliente (target).
<Sitios web> <Tips> <Usuario> Respecto al usuario: Ten en cuenta que desconoces todo acerca de él. No sabes acerca de qué equipo accede, su conexión a internet, las fuentes instaladas que tiene, la resolución que utiliza, como tiene calibrado su monitor, si el mismo es rectangular o cuadrado, etc. (si bien lo cierto es que uno tiene herramientas para conocer acerca de que dispositivos se accede al sitio, uno debe plantearse que pueden ver nuestra web desde una infinidad de equipos con cualidades diferentes). Recuerda testear la web desde diferentes puntos de acceso (recurre a familiares y amigos para ello, y pídeles que te envíen capturas de pantalla).
<Sitios web> <Tips> <Navegación> <Usuarios> En lo concerniente a la navegación del sitio y la respuesta de los usuarios ante la misma ten en cuenta que: La misma debe ser intuitiva y fácil de realizar. A la hora de asignar contenidos recuerda siempre que la forma de lectura en occidente es de izquierda a derecha y de arriba abajo. No dividas el sitio en cantidades excesivas de páginas. Esto puede hacer que el usuario se pierda o se de por vencido ya que demora más de lo esperado en llegar al contenido deseado. Es fundamental que el usuario no deba realizar grandes movimientos de desplazamiento dentro de una misma página. De tener la necesidad de incluir grandes cantidades de contenidos puedes recurrir a enlaces de red orgánica y/o paginaciones.
<Sitios web> <Tips> <Navegación> <Usuarios> La carga de la página debe ser lo más rápida posible. Estudios revelan que los usuarios no esperan más de 10 o 20 segundos para la carga de la misma (aunque esto se deba a un exceso de ansiedad ). El contenido de la página de inicio debe ser reducido ya que un contenido extenso de entrada puede asustar a los usuarios (a no ser que se trate de una web donde la extensión, y el pantallazo del mismo, es lo primordial, como un portal de noticias). Este primer grupo de tips es fundamental a la hora de la permanencia primaria de usuarios en nuestro sitio.
<Sitios web> <Tips> <Navegación> <Enlaces> Otra cuestión fundamental a la hora de la navegación es como se accionan los enlaces: Los enlaces a sponsors y links recomendados deben abrirse en una pestaña o ventana aparte. Con respecto a los enlaces internos del sitio lo adecuado es que se abran en la misma ventana. Ten cuidado en utilizar ventanas pop-up ya que, dependiendo de cómo las programes, las mismas pueden ser bloqueadas por los navegadores utilizados por los usuarios, y si allí colocas información de gran importancia esta tal vez nunca se llegue a visualizar.
<Sitios web> <Tips> <Contacto> La principal función de un sitio web es la ampliación del mercado y la mejora de los canales de comunicación con el mismo. Para ello: Incluye los datos de contacto del usuario y los legales necesarios. Puedes hacerlo tanto en los banners como en el pie del sitio (sobre todo cuando el desplazamiento es necesario para recorrer el contenido). Es imprescindible colocar una página dentro del sitio que nos sirva para que el usuario pueda hacer sus consultas (sobre todo si se trata de una web institucional o comercial). Puedes generar asistencia online directa. Otros recursos son los libros de visita, los comentarios y los foros.
<Sitios web> <Tips> <Nombres de archivo> Al momento de nombrar tus archivos respeta las siguientes convenciones: Utiliza nombres que representen el contenido que tienen, tanto para las páginas como para las imágenes y otros elementos. No dejes espacios en blanco (barra espaciadora). Reemplaza los mismos con guiones (es mejor visto por los buscadores utilizar el guión medio). Llama a la página de inicio index.
<Sitios web> <Tips> <Dimensiones del sitio> Cuánto debe medir el sitio?: El responsive web design nos permite generar un sitio web adaptable pero para ello debes conocer de programación profunda o bien recurrir a alguien que conozca de ella. fuente: http://www.6suns.com/services/responsive-web-design-service/3057-responsive-web-design-for-content- management- system-based-websites.html
<Sitios web> <Tips> <Dimensiones del sitio> Si deseas simplificar esa labor lo mejor será recurrir a dos resoluciones de base. Puedes optar por 800 x 600 o bien por 1024 x 768. Tiempo atrás la primera de ellas era la recomendada, hoy día lo recomendable es utilizar la segunda. Respecto al ancho lo acertado sería reservar un área para la barra de desplazamiento y los márgenes si los consideras necesarios (los navegadores pueden llegar a reservar para éstas y otras áreas hasta 40px aproximadamente). Para lo cual en vez de 800 puedes utilizar 760 y en vez de 1024 harás lo mismo con 980. En lo concerniente a lo alto ten en cuenta que puedes perder alrededor de 200px o más, ya que el usuario puede tener instaladas barras personalizadas en su navegador. Por ello lo más común es que el sitio termine desplazándose hacia abajo, pero de hacerlo tanto hacia abajo como para los costados estarían incurriendo en una incomodidad para el usuario.
<Sitios web> <Tips> <Tipografía> <Legibilidad> Lo que debes tener en cuenta a la hora del texto: Recurrir a tipografías sans serif para áreas con gran cantidad de texto. fuente: http://www.w3.org/tr/2011/wd-css3-fonts-20111004/ Utilizar tipografías con cuerpos que faciliten la lectura, sin que sean innecesariamente grandes. Sería bueno que dejes un margen de lectura alrededor de las cajas de texto para que no se peguen a los contenidos lindantes y aún mejor si el mismo resalta por contraste sobre su fondo.
<Sitios web> <Tips> <Tipografía> <Fuentes> Qué fuentes puedes utilizar?: Utiliza tipografías de sistema o enlaza las mismas desde sitios que permitan hacerlo como por ejemplo: http://www.google.com/fonts/ (ten en cuenta esto a la hora de diseñar el boceto). Si deseas incluir otro tipo de fuentes puedes recurrir a hacerlo mediante imágenes pero ello tiene su contra en que la misma pesará más que si lo hubieses hecho como texto directamente ralentizando así la carga de la página y también restarás en elementos que aportan datos a la búsqueda en motores como Google, los cuales interpretan el contenido mejor si éste es realmente un texto.
<Sitios web> <Tips> <Tipografía> <Unidades de medida> Qué unidad de medida utilizar y en qué tamaño hacerlo?: Puedes utilizar diversas unidades de medida para el diseño web (pt, px, %, em, ex), pero lo más sencillo, si recién estás empezando, sería que utilices px (pt no ya que se trata de una medida absoluta, aunque puedes recurrir al mismo a la hora de desarrollar el boceto). Puedes tomar como base para un texto de lectura corrida a un cuerpo de 16px.
<Sitios web> <Tips> <Tipografía> <Unidades de medida> Punto es una medida de tamaño absoluta mientras que las otras son relativas. Las más recomendadas para su utilización en pantalla son px, em y %. -pt: El punto DTP (desktop publishing, publicación de escritorio) o punto postscript equivale a 0,3528 mm. -px: Es una unidad relativa a la resolución de salida (resolución de pantalla). -em: Unidad relativa al tamaño de letra empleado. -ex: Unidad relativa al tamaño de la x (minúscula) del tipo de letra que se esté usando. -%: Unidad porcentual basada en el tamaño de letra empleado. En la diapositiva siguiente observarás una tabla comparativa (la misma resulta orientativa ya que los valores pueden variar dependiendo el navegador y el sistema operativo):
<Sitios web> <Tips> <Tipografía> <Unidades de medida>
<Sitios web> <Tips> <Imágenes> <Formatos> Formatos de archivo: Los formatos de imagen admitidos en la web son JPG, PNG, GIF y SWF. JPG es un formato que permite regular la compresión de las imágenes. Pero sólo sirve para imágenes estáticas y con fondo. Puedes comprimir imágenes con formatos como el jpg y hasta reducir su calidad entre 7 y 8 en Illustrator o 9 en Photoshop (ten en cuenta que si lo que buscas es calidad fotográfica esto último no será recomendable). GIF es un formato que comprime las imágenes reduciendo considerablemente su calidad pero permite transparencia y animaciones. PNG es una variante mejorada del GIF pero que no permite animaciones. Actualmente permite compresión. SWF es el formato nativo de Flash el cual permite transparencias y animaciones de calidad pero muchas veces resulta en un archivo pesado y dependiendo de los plugins instalados por el usuario puede llegar a presentar dificultades su reproducción.
<Sitios web> <Tips> <Imágenes> <Dimensiones y peso> Cuánto pueden pesar y medir las imágenes?: No generes imágenes con dimensiones innecesariamente grandes. Una imagen se considera grande cuando su tamaño es superior o igual a 1024x768 píxeles, mediana si el mismo oscila entre 320x240 y 1024x768 píxeles, pequeña cuando éste sea inferior a 320x240 píxeles y muy pequeña cuando es inferior a 100x100 píxeles. Con respecto al peso, las imágenes ideales no deberían pesar más de 300kb (si pesan menos de 100kb es excelente) pero lo cierto es que a veces debes realizar imágenes que poseen dimensiones extremadamente grandes por lo cual deberías tratar que pesen menos de 500kb o, si no lo logras, menos de un 1mb.
<Sitios web> <Tips> <Imágenes> <Dimensiones y peso> En lo concerniente a la resolución no debes hacerte problema ya que lo que importa son las dimensiones de la imagen en píxeles (su ancho y alto), los ppp responden directamente a las cuestiones de impresión. Ahora bien, si esto te provoca algún ruido lo mejor será que dejes la resolución del archivo, en los programas de Adobe, a 72ppp (se aclara lo de los programas de Adobe ya que en Corel Draw la resolución recomendable para pantalla es 96ppp).
<Sitios web> <Tips> <Imágenes> <Galerías> Existen diversas formas de realizar una galería de imágenes. Puedes recurrir a tablas para ubicar las miniaturas o bien desplazarte para observar la totalidad de ellas a través de un carousel. fuente: http://www.technogadge.com/caroufredsel-jquery-infinite-circular-carousel-plugin/ fuente: http://netfruits.com/2013/02/jquery-carousel-plugins/
<Sitios web> <Tips> <Imágenes> <Galerías> Al hacer clic en las miniaturas puedes abrir el contenido en una pestaña o ventana aparte (lo cual no es recomendable), en una ventana aparte pero flotante (cuyas dimensiones no completan la totalidad de la ventana del navegador, lo que resulta más adecuado que la opción anterior), utilizar un lightbox (lo que permitirá sobreimprimir la imagen sobre la página actual atenuando el entorno sobrante) o bien cargar la imagen dentro de la misma página. fuente: http://www.ibm.com/developerworks/web/library/wa-ltbox/
<Sitios web> <Tips> <Botoneras> Respecto a las botoneras: Son también conocidas bajo el nombre de barras de navegación. Las mismas pueden ser horizontales o verticales. La navegación horizontal permite un fácil divisamiento de la barra, la cual, generalmente, va luego del banner. A su vez nos aseguramos de que la barra sea percibida desde el primer vistazo, lo cual resulta fundamental. Las barras verticales resultan adecuadas cuando poseemos dos tipos de contenidos (por ejemplo tenemos la barra de navegación horizontal para navegar el sitio en general y una vertical para navegar un carrito de compras ) funcionando así como una barra auxiliar (aunque en algunos sitios, como lo son los portales de noticias recurren a una segunda barra horizontal por encima del banner). El peso visual resulta más marcado en los botones de la izquierda de las barras horizontales que en los superiores de las verticales.
<Sitios web> <Tips> <Botoneras> fuente: http://www.thuer.com.ar/blog/2010/navegacion-horizontal-vs-navegacion-vertical
<Sitios web> <Tips> <Botoneras> Otra cuestión es si las botoneras son de un nivel o resultan ser desplegables (de más de un nivel). Deberás recurrir a los menús desplegables al momento de necesitar compilar la información. Ten cuidado de no abusar con subniveles, lo cual puede resultar dificultoso para el usuario. fuente: http://www.cosassencillas.com/articulos/menu-desplegable-animacion-css3
<Sitios web> <Tips> <Botoneras> Los menús desplegables pueden empujar a los botones de primer nivel o bien desprenderse desde ellos sin desplazarlos. Los primeros son conocidos bajo el nombre de acordeón. fuente: http://www.cosassencillas.com/articulos/2-mens-con-atractivo-efecto-acorden
<Sitios web> <Tips> <Color> En lo concerniente al diseño el color cumple un rol fundamental: Utiliza el color bajos parámetros lógicos. El mismo debe responder ante todo al color corporativo de la marca a representar y luego a cuestiones psicológicas que permitirán reforzar el concepto de la web.
<Sitios web> <Tips> <Color> fuente: http://reinspirit.com/8-consejos-de-diseno-web-para-pequenas-empresas/
<Sitios web> <Tips> <Color> Evita utilizar colores que agredan la vista del usuario (ten cuidado, entre otras cosas, con las saturaciones extremas y la utilización directa de pares complementarios). Adobe nos brinda online una herramienta práctica que permite la selección de una paleta adecuada de colores https://kuler.adobe.com/. En las últimas versiones ya viene incorporada a programas de la suite.
<Sitios web> <Tips> <Color> El valor otorgado en web a los colores es un valor hexadecimal, compuesto por números del 0 al 9 y letras de la A a la F precedidos por un #. Observa en los programas de gráfica que además de brindarte la composición en CMYK y RGB entre otros también lo hacen en hexadecimal.
<Sitios web> <Tips> <Búsqueda en la web> Lo fundamental para nuestro cliente será que su sitio pueda localizarse en la web. Para ello deberás: Recurrir a la utilización de palabras claves, texto alternativo y títulos. Lo mejor es que el nombre del dominio del sitio sea el de la marca o persona propietaria del sitio. Otra opción es que represente un concepto de búsqueda. Conseguir enlaces desde otras páginas. Para ello, además de la publicidad, puedes acceder a una gran cantidad de directorios que existen en la web, muchos de ellos son gratuitos. Recurrir a las herramientas para webmaster que brindan los motores de búsqueda (tanto Google como Bing).
<Sitios web> <Tips> <Búsqueda en la web> La actualización periódica de contenido permite posicionarte mejor y a la vez atrae más gente a tu sitio. Por último algo fundamental es la cantidad de usuarios que acceden a tu sitio.
<Sitios web> <Tips> <Redes sociales> Integración con las redes sociales: En la actualidad las redes sociales resultan imprescindibles a la hora de manejar la comunicación. Dentro de las más reconocidas encontramos a Facebook, Twitter y LinkedIn.
<Sitios web> <Tips> <Distribución del contenido> Los elementos que no deben faltar en una web son los siguientes: Banner superior: Es la imagen principal que representará al sitio y a la entidad que el mismo pertenece. Puedes incluir en ella datos de contacto. fuente: http://cestudio.com.ar/ Barra de navegación: Como ya vimos anteriormente, se trata de la botonera. fuente: http://cestudio.com.ar/
<Sitios web> <Tips> <Distribución del contenido> Contenido: Su distribución dependerá de las necesidades del sitio. El mismo puede contener varias subdivisiones. fuente: http://cestudio.com.ar/
<Sitios web> <Tips> <Distribución del contenido> Banners publicitarios: Generalmente se ubican sobre los laterales y principalmente sobre el derecho (aunque en sitios de desplazamiento largo, como en portales de noticias, puedes encontrarlos entre el contenido). Recuerda que los enlaces a los sitios que representan deben abrir una pestaña o ventana nueva. fuente: http://lacapital.com.ar/
<Sitios web> <Tips> <Distribución del contenido> Pie: Permite reforzar los datos de la entidad o persona propietaria del sitio. fuente: http://cestudio.com.ar/