¿Qué es mejor para los usuarios, hacer desplazamiento en una web (scrolling) o hacer clic?.

Esta es una cuestión que los diseñadores web han de plantearse cuando están diseñando el layout de la web. Hacer clic supone el uso de menús que llevan a otra nueva página, mientras que hacer desplazamiento (scrolling) ofrece todo el contenido en una sola página dividido por secciones.

Hace algunos años, hacer clic era lo más apropiado. El razonamiento que se empleaba era que si la página web era demasiado larga, los usuarios sólo veían y leían el principio de la web, ignorando el resto de información. Hoy en día, las cosas han cambiado. La mayoría de los usuarios hacen scrolling hasta el final de la página y no tienen problema en hacerlo.  Haces desplazamiento se ha convertido en algo natural, mientras que hacer clic en algo que requiere algo más de trabajo.

Las ventajas de hacer scrolling superan las desventajas. El desplazamiento es más rápido que hacer clic, para los usuarios. El comportamiento de los usuarios cambia a lo largo del tiempo, y más si lo hacen desde nuevos dispositivos como tabletas, donde el desplazamiento se hace de forma natural. Hacer clic require buscar el link, leerlo, apuntad a él, hacer clic y esperar a que la nueva página se cargue.

Al contrario que al hacer clic, al usar desplazamiento se mantiene al usuario en el flujo natural de lectura, que irá haciendo scrolling a medida que lo necesite. Hacer clic no mejora el tiempo de carga ni facilita la lectura, sin embargo, tiene sus ventajas, como la de realizar seguimiento (tracking) con Google Analytics o la de tener más URL a indexar por parte de los buscadores.

Hacer desplazamiento suele ser mejor en términos de usabilidad, mientras que hacer clic es mejor si se requiere hacer seguimiento con analytics o por razones específicas de posicionamiento seo. Esto es lo que tiene que valorar el diseñador web.

Cuando se rediseña un sitio web, es recomendable usar esta checklist para ayudar a contestar preguntas básicas sobre la estética y el nuevo contenido.

Sobre tu negocio y tu compentencia.

• Descripción de los productos o servicios que se ofrecen
• Cuál es el público objetivo al que dirige la web, clasificado por edad, industria, sexo, ingresos,…
• Lista de tus principales competidores. ¿Qué es lo que gusta o no de sus webs?
• ¿Cuáles son las diferencias que te apartan de tus competidores?. Analizarlas y resaltarlas.
• Distribución del contenido del sitio web+
• Definición del nombre de dominio y hosting
• ¿Quién mantendrá y actualizará el contenido del sitio web?
• ¿Qué atributos te gustaría mostrar en el rediseño web que refleje tu negocio?
• ¿Tienes preparado el contenido (textos e imágenes) que te gustaría incluir en el sitio web?
• ¿Has registrado tu nick en Twitter, Linkedin y facebook? ¿Tienes los perfiles ya operativos?
• ¿Cuáles son las palabras claves que te gustaría usar para que encontraran tu sitio web?. ¿Cuál es la palabra clave más importante?
• ¿Qué tipo de contenido exclusivo vas a proporcionar en tu sitio web?

Look & Feel:

• ¿Dispones imagen corporativa definida, seguida por un manual de identidad?. ¿Se usan colores  y tipografía consistentes?
• ¿Dispones de un logo adecuado? ¿Tienes catálogos o folletos impresos por los que guiarse?
• Lista webs que sean de tu gusto o que tenga algún valor que quieras añadir a tu rediseño web.

Objetivos y plan de marketing.

• ¿Vas a invertir tiempo generando tráfico a tu web?
• ¿Cuál es el objetivo mensual de tu web?. Número de visitas, ventas, comentarios, leads,…
• ¿Cuántos clientes necesitas para completar el contenido?
• ¿Vas a blogear, interacturar con las redes sociales, hacer construcción de enlaces, crear páginas de lanzamiento,…?. En caso negativo, ¿quién se va a encargar de ésto?

Una URL por página

En un mundo ideal, la arquitectura de la web debería configurarse de tal forma que el robot de google sólo pueda visitar una página de la web para cada URL. Se trata de minimizar parámetros PHP de la URL o bien, informar adecuadamente a Google desde Herramientas Webmaster.

Mantener atributos de producto juntos, en el caso de tiendas online

Crear múltiples páginas de producto, cuya única diferencia es el color o la talla es un error. Lo ideal es agrupar estos atributos creando una única página.

La meta descripción de la página

El propósito de la meta descripción es informar al robot de google con una descripción unívoca que explique al visitante cuál es el contenido de la página en no más de 150 caracteres. Es importante que la meta descripción  esté bien redactada.

Títulos unívocos

Cada página de una web ha de tener un título único ( <title> ) que describa la página con no más de 60 caracteres que incluya las palabras clave. Esta es una regla muy importante.

Ssubtítulos adecuados

Al igual que la etiqueta <title>, es importante distribuir la información de la página con subtítulos (<h2>, <h3>… ), reservando la meta etiqueta <h1> al título principal de la página. Es importante incluir palabras claves en estos meta datos.

Etiqueta ALT en imágenes.

El uso de la etiqueta ALT en imágenes en fundamental, ya que de no existir, el robot de google no puede saber qué información contiene la imagen. Existen algunos buenos plugins para WordPress para tener listas y bajo control todas las imágenes de la web con este atributo ALT. Si además, completamos la información CAPTIONS mejor que mejor.

Nombrar adecuadamente ficheros y directorios usando guiones medios

Al crear ficheros PDF o imágenes han de usarse palabras que describan el contenido de los mismos, evitando los guiones bajos y usando guiones medios para separar las palabras claves del título del fichero.

Velocidad de carga y renderizado en el navegador

La velocidad es fundamental para una buena experiencia del usuario, más teniendo en cuenta que cada día llegan más visitas desde dispositivos móviles que tienen ancho de banda limitado a 3G. Además, es un parámetro que Google cada día le aporta más importancia. Es un punto del diseño web muy a tener en cuenta.

Bootstrap

Bootstrap es un intuitivo y poderoso front-end framework para un desarrollo web rápido y fácil. Usa una rejilla de 12 columnas con diseño adaptable y docenas de componentes, estilos, y plugins javascript.

Less Framework

Tiene 4 configuraciones (por defecto, tableta, móvil y móvil ancho), con tres estilos de tipografía. La configuración por defecto, tiene 992 píxeles, CSS3 y media querys, con múltiples rejillas de 768, 480, 320 píxeles.

Skeleton

Skeleton es un pequeño framework para webs con diseño adaptable.  Está construido con una rejilla de 960 píxeles, la cual se adapta al tamaño de pantallas, tabletas y móviles. Tiene una estructura CSS bien organizada y fácil de aprender. El diseño básico de su tipografía permite adaptar el estilo de la web fácilmente.

Foundation

Foundation de ZURB, es un framework avanzado, de poco peso y de diseño adaptable. Basado en una rejilla flexible de 12 columnas  que pueden escalarse a un tamaño definido por el usuario. La rejilla se puede combinar indefinidamente. El framework incluyte elementos y estilos para disminuir el tiempo de desarollo.

Responsive Grid System

No es estrictamente un framework, pero ofrece un sistema de rejillas limpio y fácil de usar. Se pueden especificar el número de columnas (hasta 12).

Gumby Framework

Construido con la potencia de Compass and SASS, Gumby es un framework adaptable que tiene un sistema de rejilla híbrida que permite crear diseños definiendo el tip ode rejilla que quieres usar en cada página. Incluye las últimas tendencias de diseño en los elementos de tipografía que incorpora y hace un uso mixto de diseño plano y diseño con degradados.

Base

Base es muy fácil de usar. Está desarrollado con LESS, y se basa en 12 columnas adaptables. Tiene plantillas HTML5 y elementos Javascript.

Semantic Grid System

Construido por Tyler Tate, creador de 1KB CSS Grid, es un framework adaptable ideal para construir sistemas de rejilla fija o fluida. Se puede establecer el número de columnas, su ancho, el espacio entre ellas,… Es completamente semántico y adaptable.

Responsive Grid System

Es framework muy ligero, disponible en 12, 16 y 24 columnas.

Compass

Es un framework open-source que usa Sass.

Columnal

Su rejilla con un ancho de 1140px de ancho, sin embargo es fluida y adaptable a la mayoría de navegadores. Es una mezcla entre el framework cssgrid.net y 960.gs

Fluid Baseline Grid

Posee un sistema de rejilla fluida basada e tres columnas, plantillas HTML5 y CSS3.

Profound

Construido con SASS permite al usuario un total control y flexibilidad.

Os dejo link con otros framework de interés.

• Goldilocks
• Gridless
• InuitCSS
• Blueprint
• YAML
• Gridlock
• 960 Grid System
• Amazium
• 34 Grid
• Gridiculo.us
• Less+ Framework
• BluCSS Framework
• Ingrid
• Titan Framework
• Golden Grid System
• Zen Grids
• Rock Hammer
• Kube CSS Framework
• HTML5 Mobile Boilerplate
• Proportional Grids
• Stack Layout
• Simple Grid
• Initializer
• Groundwork CSS
• Ivory
• Unsemantic
• CSS Horus
• ResponsiveAeon
• Toast CSS Framework
• Sassaparilla

En un vídeo reciente, Matt Cutts, responsable de Google, listó los cinco errores más comunes que comenten los diseñadores web al hacer una web. Matt concretó que no son los peores errores que se puedan cometer en poscionamiento web SEO, pero sí los más comunes.

1. No tener sitio web o tener un sitio web difícilmente indexable por parte de Google es uno de los errores más comunes.

2. No incluir las palabras claves correctas en la página web. el ejemplo que Matt ofrece es: No escribas simplemente “la altura del monte Everest”, sino “¿cuánto mide el monte Everest?”, ya que es así como la gente lo busca en Google.

3. No pensar en la construcción de enlaces (link building), sino centrarse en la creación de contenido y en cómo darlo a conocer a través de las herramientas de marketing online.

4. No olvidar incorporar un buen título y una correcta descripción en los meta-datos de las páginas web más importantes de tu web.

5. No usar los recursos de webmaster Google, y no preocuparse por aprender cómo funciona el SEO en Google mes a mes.

Os dejamos el vídeo de Matt (está en inglés). Ver video

La web Bodegas Carlos Plaza ha sido nominada para los premios de diseño web “CSS Design Award”.

La nominación a este premio se otorga a sitios web que demuestran altos niveles de creatividad, originalidad y competencia global de un buen diseño.

El marketing de contenidos es una de las tendencias más importantes en internet y continuará siendo. El objetivo es conseguir más tráfico de calidad, ptenciales clientes y mantener el negocio centrado en los clientes. De esta forma hacer “blogging” ayudará y mucho, en el posicionamiento natural (SEO). Cuantos más artículos se publiquen más páginas se crearán y consecuentemente más páginas aparecerán en los resultados de búsqueda. el blog activa el tráfico orgánico y familiariza a los visitantes a conocernos.

En Estados Unidos, cerca del 40% de las compañías usan los blogs para acciones de marketing de contenido. Por ejemplo, Starbucks tiene una campaña muy sólida en redes sociales, la cuál incluye un blog especializado que ayuda a sus clientes a construir relaciones con la marca y ayuda a Starbucks a obtener información de retorno sobre el lanzamiento de nuevos productos. Lo más importante al hacer “bloggin” es estar seguro de ofrecer valor al lector con la opinión personal del autor del artículo. Normalmente, un blog trata los siguientes temas:

• Responder a preguntas frecuentes de clientes
• Discutir las tendencias del sector
• Comparar servicios o productos de la industria 
• Entrevistar a expertos de la empresa o del sector
• Actualizar contenido sobre productos o servicios

La frecuencia importa

La mayoría de las empresas que tienen blog (incluido yo), no escribimos con la suficiente frecuencia. Una publicación periódica de artículos en el blog consigue que tengamos un público fidelizado. Las empresas que escriben en su blog de forma continua  pueden obtener hasta un 55% más de tráfico a su web.

Blogear orientando a palabras clave

Hacer blogging es relativamente fácil para añadirlo a la mezcla de la campaña de marketing online, pero además hemos de escribir centrados en las palabras claves en las que queremos que nos encuentren en los buscadores sociales. Así conseguiremos atraer más tráfico.

Crear o rediseñar un sitio web es un trabajo de equipo. En el momento de contratar a un diseñador es recomendable uno que tenga conocimientos de marketing online, SEO (posicionamiento natural), que entienda el poder de un blog y las redes sociales, así como que esté listo para dar un soporte a largo plazo para ir completando metas en el desarrollo del marketing online.

¿Qué debería conocer un diseñador web?

1. Cómo crear un sitemap basado en palabras claves.

La forma de distribución del contenido de la web es fundamental para una buena experiencia del visitante. El sitemap debería poder balancearse entre palabras de cola corta (short tail), como por ejemplo “regalos de chocolate”, y palabras de cola larga (long tail), como por ejemplo “regalos de trufa de chocolate negro”. De esta forma se conseguirá una mejor indexación por parte de los buscadores como Google.

2. Cómo diseñar un sitio web alrededor de un contenido de calidad, bien escrito y centrado en las palabras claves seleccionadas para el proyecto.

El diseño debería servir al mensaje y no viceversa. El diseñador web y el “copy writer” deben de trabajar en equipo para estructurar lo mejor posible el contenido, desde un punto de vista de la usabildiad, como desde el punto de vista de la transmisión del mensaje principal del producto o servicio que queremos ofrecer.

3. Aplicar SEO sobre la página.

Las palabras claves no están limitadas a los textos de la web. Han de emplearse también en los metadatos, como etiquetas, títulos H1, H2, cabeceras, “breadcrumbs”, texto ALT de imágenes, links, etc. Un diseñador experimentado ayudará a determinar cuál es la mejor posición para cada uno de esos metadatos.

4. Cómo crear y probar llamadas a la acción “calls to action”.

Cuando se diseñan, por ejemplo botones para llamadas a la cción existen varias aproximaciones, como por ejemplo elegir un mensaje corto o largo, mostrar el link sobre el texto o en un botón separado,… Por ello es necesario diferenciar estos elementos y al mismo tiempo integrarlos en el diseño de la web, haciéndolos destacar.

5. Cómo las páginas de lanzamiento “landing pages” transforman visitantes en potenciales clientes.

Este tipo de páginas tienen un gran trabajo que hacer: deben intentar que los visitantes realicen una acción, como por ejemplo, suscribirse a una lista de correo, descargarse algo, comprar, compartir información, etc. Para los diseñadores, significa ajustar el diseño al público objetivo de la landing page.

6. Cómo se muestra la página en dispositivos móviles.

Hoy en día, tan importante es mostrar de forma homogénea y correcta la web en dispositivos móviles como en ordenadores, por esto el diseñador web ha de optimizar la página web para que funcione bien en pantallas pequeñas, adaptando y recolocando elementos, según un diseño adaptable (responsive design).

7. Cómo crear un blog que enganche y guste.

Si lo que se desea es llevar tráfico de visitas a la web, un blog centrado en las palabras claves es la mejor campaña de marketing que puede hacerse. El blog debería complementar el sitio web para que los usuarios tengan información adicional.

8. Hacer el diseño del sitio web local.

Para las pequeñas y medianas empresas, el posicionamiento SEO local es fundamental. Es fundamental tener una página en Google Places, estar listado en directorios y portales locales, aparecer en páginas con información local, etc. El diseñador debe conocer cómo colocar micro-datos, direcciónes, ratings, palabras claves, … en la cabecera de esas webs de referencia.

9. Cómo ajustar herramientas sociales en el diseño web.

Un sitio web bien diseñado donde se encuentre de forma rápida los enlaces para compartir en Facebook, Twitter, Youtube, Google Plus, … es esencial. Las llamadas a la acción en redes sociales, las veces que compartimos la información, son cada día más importantes.

10. Cómo comercializar la web, para un crecimiento mensual.

El diseñador debe conocer cuáles son los objetivos de la web y la estrategia de marketing online para establecer objetivos y desplegar el diseño web de una forma coherente con lo que se pretende. El dueño de la web debe tener acceso a informes de estadísticas para ir comprobando cómo van dando resultados el trabajo sobre el diseño web.

Para mejorar este escenario es posible utilizar una serie de consejos en títulos, subtítulos, títulos de páginas, navegación, enlaces, llamadas a la acción y botones.

• Usar un lenguaje sencillo y descriptivo.
• Llamar a las cosas por su nombre y ser claro con lo que queremos transmitir.
• Colocar las palabras más importantes en primer lugar
• Asegurarse de que el texto es predictivo, utilizando términos comunies y específicos.
• Usar sentencias optimistas
• Antes de usar acrónimos y jerga específica es recomendable investigar en redes sociales cómo habla el tipo de visitante al que nos estamos dirigiendo.

Actualmente lo que conocemos es que cuando más corto sea el texto, mejor se leerá la página. En una página web estándar, un usuario de Internet sólo lee el 28% de las palabras. Sin embargo, también conocemos que al resumir demasiado, se tiende a generalizar. En este sentido, lo ideal es escribir lo menos posible, y tanto como sea necesario. Esta necesidad de contenido dependerá de:

• el tipo de página; ¿El usuario escanea el contenido o se adentra en el sitio web para aprender más?
• el tipo de tarea. ¿Está el visitante en nuestro sitio web buscando información o sólo está buscando la mejor forma de realizar alguna tarea?
• el tipo de usuario. ¿es un visitante que se interesa de forma pasajera o tenemos lectores que realmente disfrutan con el contenido?.