Cómo crear un sitio web. Guía táctica para la gente de marketing

Esto no va sobre estrategias de cómo diseñar un sitio web que funcione. Esta es mi opinión sobre cómo la gente de marketing puede trabajar con sus equipos, sus jefes y los desarrolladores para conseguir el sitio web que quieren en menos tiempo y con menos complicaciones. (P.S. Todo esto es aplicable, también, para el desarrollo de apps)

La mayoría de la gente responsable de sitios web son amateurs. Y esta es mi opinión sobre cómo personas no profesionales pero orientadas a objetivos pueden hacer un buen trabajo.

Tres cuestiones importantes de recordar

• Cada sitio web es un esfuerzo de marketing. Antes o después la web incluye alguna interacción con usuarios, y esta interacción no será siempre 100% técnica. Tienes que vender compromiso (engagement), interacción y la historia que tienes en mente. Los sitios web siempre han implicado a la tecnología, pero la tecnología es secundaria para tu capacidad de obtener el punto de vista del visitante.
• Prácticamente ningún sitio web está en la vanguardia de la tecnología. Están haciendo algo que se ha hecho antes, al menos técnicamente.
• Sincronizar el equipo es difícil, porque la mayoría de la gente entiende algo cuando lo ve, y verlo es caro. Es algo así como construir un centenar de casas con el fin de encontrar la que le gusta a tu cónyuge le gusta – no es un esfuerzo práctico.

El acercamiento que recomiendo

• Busca los elementos tecnológicos necesarios navegando por la web. Haz una lista – Quiero menús que funcionan como este sitio, un carrito de compras que funciona como ese sitio, una página web que funciona como ésta.
  
• Crear el sitio web entero (o al menos los elementos críticos) con Keynote en el Mac (PowerPoint también funciona, pero Keynote es un poco más fácil de trabajar). Empieza por copiar y pegar elementos desde otros sitios web, pero a medida que progreses, contratar a un diseñador gráfico para crear los elementos que necesita.
  Keynote hace que sea realmente fácil tener manchas en la pantalla que enlacen a otras diapositivas de la «presentación», para que el documento que creas permita al equipo hacer clic en diferentes partes de la pantalla y saltar a otras páginas.
• No programes una sola línea de código en absoluto.

Lo que obtendrás será un documento Keynote de 3, 10 ó 100 páginas, con el aspecto y presentación (look and feel) deseado. Con tipos de letra. Con todo organizado en jerarquías adecuadas.

Una vez has hecho esto bien, puedes construir o modificar un sitio web en cualquier momento.

Ahora cuentas con una herramienta poderosa. Puedes utilizarla en presentaciones, en encuentros e incluso en tests con posibles usuarios; todo ello antes de escribir una sola línea de código. Una vez has compartido esto con el quipo, la pregunta es simple: «si nuestra web funcionara así, ¿la aprobaríais?» No empieces a programar mientras la respuesta no sea «si».

Trabajar así requiere disciplina, y una buena cantidad de coraje, pero nos da grandes dividendos. No empieces la tarea de programas mientras no sepas lo que quieres.

Último paso: entrega el documento Keynote a los programadores y desaparece hasta que el trabajo esté terminado.

Como decía, esto también funciona para aplicaciones para móviles. Aquí hay un sitio lleno de plantillas y turcos para los dos.

Traducción libre de How to make a website: a tactical guide for marketers de Seth Godin

¿Qué te parecen estos consejos? ¿Añadirías algo más? Déjanos tu opinión…

¿Te ha resultado útil este post? Entonces, usa los botones sociales aquí abajo para recomendarlo a tus amigos. ¡Gracias! 😉

SEO para Desarrolladores Web

Original en: http://www.corbax.com/blog/como-crear-un-diseno-web-potente-en-seo

En esta presentación* tienes un resumen de los principios SEO más importantes para la optimización de un sitio web, parte de lo que trato aquí:

Iniciación al SEO para Desarrolladores Web

Ver más presentaciones de CORBAX

El diseño cuenta.

Aunque te lo pueda parecer, el diseño y el SEO no están reñidos, sino que ambos deben ir de la mano para cumplir los ojetivos de cualquier sitio web: ¡Obtener ganancias!

El diseño general del sitio web es muy importante para el SEO, ya que es lo primero que ven los usuarios y ello influye mucho en el porcentaje de abandonos, el número de páginas vistas y las conversiones.

Si no eres experto en diseño gráfico, (también), encarga el logotipo a un profesional ya que es una parte importante del diseño.

Hoy día la mayoría de CMS están diseñados para facilitar nuestro SEO, en lugar de dificultarlo. Aunque algunos generan demasiado código innecesario, lo que es malo para el rendimiento. Si vas a trabajar con un CMS, elije bien. Uno de los que mejor evolucionan en estos aspectos es WordPress.

Contenido de calidad: Claridad, Naturalidad y Rapidez

Calidad y Claridad

• Asegura una buena experiencia para tus visitantes:No diseñes contra el usuario: Combina creatividad y usabilidad eligiendo siempre la función sobre la forma.
  En esta Lista de control de usabilidad explico las pautas de usabilidad necesarias, por lo que no las voy a repetir aquí, pero con ellas tendrás buena parte del éxito garantizado.
• El código limpio es nuestro mejor aliado: Código bien estructurado y correcto semánticamente. Validar el código XHTML con el validador XHTML del W3C, te ayudará a corregir errores y conseguir un código limpio y ligero.
• Estructura lógica, en HTML – Formatos en una hoja de estilos CSS vinculada:Separar el contenido de la presentación mediante CSS genera un HTML más limpio y con menos líneas de código.Utiliza HTML sólo para la estructura y el contenido. El aspecto trabájalo con las reglas de estilos CSS.En lugar de utilizar estilos en línea, crea reglas CSS en una hoja de estilos vinculada: un archivo externo .css enlazado desde el head (<link href=”estilos.css” rel=”stylesheet” type=”text/css” />). Así tendrás un código más limpio y ligero.
• Prohibido maquetar con tablas.¡Las tablas son para mostrar tablas! No las uses jamás para maquetar: generan mucho código inútil que ralentiza la velocidad de carga, además de otros inconvenientes.Usa tablas sólo en caso necesario y optimizadas para los buscadores, (etiquetas caption, etc.) Sustitúyelas por divs.
• Estructura lógica en los Encabezados:Es importante que sigas la jerarquía corecta: Un sólo h1 para el título principal, h2 para subtítulos, h3 dentro de h2, h4 dentro de h3…Puedes poner la palabra clave principal en h1, secundaria en h2, ciudad en h3…
• Utiliza tecnologías compatibles, ligeras y sencillas.Muchas de las maravillas que encontramos en Flash, JavaScript… etc., se pueden hacer con HTML5 y CSS.
• Haz un uso útil de Ajax, Flash, JavaScript, Iframes.Ante la duda, usa texto.
• Prohibido usar frames, o marcos. Son una puñalada trapera para tus preciosas páginas y desaparecerán para los robots.
• Dale a cada página su propio enfoque. Cada archivo debe optimizarse individualmente. Puedes crear una página para cada palabra clave importante y optimizarla por separado.
• Títulos únicos para cada página.No repitas los títulos, procura incluir las palabras clave de cada página en el título. Alrededor de 60 caracteres es lo recomendable para el tag <tittle>, o no aparecerá entero en las páginas de resultados.
• Metaetiqueta Description adecuada, precisa y atractiva:Redacta una descripción de la empresa o producto
  que invite a pulsar. Ten en cuenta que es lo que verá el usuario en la página de resultados de Google, entre otras nueve opciones. Tienes que convencer de que buscan la tuya.
• Haz buen uso de las palabras clave:En este artículo: SEO para desarrolladores web: palabras clave encontrarás lo que necesitas saber en cuanto a las palabras clave, uno de los factores más importantes para el buen SEO de tu sitio web.
• Enlaza el logotipo a la página de inicio.
• Menús CSS: Navegación indexable para los robots.No utilces imágenes para los menús, ni Flash… Utiliza texto y dales el aspecto que quieras con las CSS. Hay muchos menús CSS ya disponibles, desplegables, impactantes. Con las CSS se pueden hacer tantas virguerías como en Flash, JavaScript, etc. No más de 7 enlaces por menú.
• Si tienes enlaces en JavaScript, inclúyelos también en HTML. Javascript no debe ser una barrera de acceso para los contenidos de la página.
• Texto alternativo (alt) en las imágenes. Necesario. Ha de ser descriptivo y conciso. Tiene mucho sentido desde el punto de vista del SEO porque es la información que dice a los motores de búsqueda y otras tecnologías lo que la imagen representa. Te recomiendo mantenerlo por debajo de los 140 caracteres.
• El nombre del archivo de imagen:El nombre del archivo también es información útil para los buscadores. Esfuérzate un poco y evita cosas como “imagen-01″, “imagen-02″…
• Títulos (title) en los enlaces y en las imágenes.Añade la etiqueta (title) a las imágenes y a los enlaces, (con palabras clave, mejor).
• El texto que rodea las imágenes y los enlaces. El texto alrededor de una imagen es importante para el SEO porque dice mucho sobre la propia imagen.
• Optimiza tus Formularios para mejorar las conversiones:Mejorar la usabilidad de los formularios en tu sitio web puede tener un gran impacto positivo en el aumento de las tasas de conversión.
• Optimiza los Documentos PDF.Google valora los PDF como contenido de calidad. Optimízalos también aplicándoles los principios SEO.
• Optimiza los vídeos.Los vídeos son una buena baza para tu sitio web. Ten en cuenta que el vídeo se ha convertido en uno de los formatos de contenido más potente en los últimos años.
• URL amigables.Procurar utilizar URL cortas y sin caracteres especiales.
• Palabras clave en nombres de archivos y directorios: (midominio.com/embalajes/bolsas-ecologicas.html)
• Mapa del sitio para los usuarios.Los mapas del sitio mejoran la Usabilidad, proporcionando una vista global del sitio, y ayudan en la indexación.
• Rastro de migas de pan(breadcrumbs)El rastro de migas de pan es una herramienta de navegación jerarquizada que representa la ruta de navegación y realiza funciones esenciales para la usabilidad y el SEO: facilita la navegación a los usuarios y ayudan a los motores de búsqueda a categorizar el contenido. Muy recomendable.
• Validar el código XHTML y las hojas de estilo CSS con los Validadores del W3C, no es necesario pero es recomendable y útil para el desarrollo web.
• Pruebas invisibles a los buscadores.Analiza el sitio con las herramientas de rastreo antes de publicarlo. Hay muchas herramientas en el mercado, como Browser.com.

Calidad y Naturalidad

• Por favor escribe para humanos. Contenido creado para los usuarios y optimizado para los buscadores (SEO).
• Corrección sintáctica, semántica y ortográfica:Contenido fresco, bien redactado y útil, con buena ortografía, con enlaces pertinentes. Google está dando importancia a estas cosas.
• Crea contenido original. No copies.Google está potenciando a los sitios con contenido original y penalizando a los sitios que solo copian contenido.
• Añade contenido orgánico a tu sitio de forma regular:Tanto para alentar a los visitantes a volver más a menudo a tu sitio web como para que los robots rastreen tu página frecuentemente y atraer más enlaces entrantes de calidad. Crea un blog en el mismo dominio y actualízalo frecuentemente.
• No seas tramposo.Evita texto invisible o diminuto, enlaces escondidos, exceso de palabras clave…

Calidad y Rapidez

Reducir el tiempo de carga de tu sitio web, además de importante para la usabilidad, es un factor relevante para el SEO, desde marzo de 2010.

• Minimiza el tiempo de carga:Aquí: Mejorar velocidad de carga y posicionamiento SEO, tienes muchos consejos y herramientas para medir y mejorar la velocidad de carga de tu sitio web.
• Recomiendo como Tiempo Óptimo: 2 segundoss. Tiempo Máximo: 5 segundoss.
• Con la herramienta gratuíta GTMetrix podremos medir la velocidad de nuestra web y recibir consejos para optimizar la página.
• Comprime el código HTML.
• Comprime el CSS, y colócalo todo en una sola hoja de estilos, en archivo externo vinculado.
• JavaScript, los justos y en archivo externo siempre que se pueda…
• Imágenes muy optimizadas, y en otro dominio:–Especifica las dimensiones de las imágenes: Fotos en JPG, GIFs optimizados para pequeñas imágenes y animaciones, PNG para gráficos.-El mejor servicio para alojar las imágenes es Picasa o Google Site, las imágenes tardan menos en descargarse; los más lentos son Flickr y Dropbox.
• Los mayores problemas de rendimiento los crean:Imágenes, Flash, AJAX; Marcos o Frames; Mapas de imagen; Tablas; Tamaño

Te recomiendo también este artículo de Iniciablog: Consejos y recursos para optimizar la velocidad del blog.

Y con todo esto no tendrás excusa para no tener una web rápida.

Seguimiento del sitio web:

Crea una cuenta en Google Webmaster Tools:

Herramientas para Webmaster de Google. Son gratuitas, fáciles de utilizar y obtenerdrás mucha información valiosa.

Da de alta tus sitios web, verifícalos y envía el sitemap.xml o .html de cada sitio.

Incluye también un archivo robot.txt :

Es un archivo de texto con la extensión .txt, que debes poner en la raíz del sitio, sirve para decirle a los buscadores qué archivos o carpetas no deben indexar:

User Agent: *

Disallow: /archivoX

A través de las Herramientas para Webmaster, podemos hacer un seguimiento del  rendimiento del sitio, enlaces rotos, palabras clave, errores de rastreo, consultas de búsqueda, enlaces al sitio… Y obtener sugerencias para mejorar el sitio.

¡No podrás vivir sin las Webmaster Tools!

Crea una cuenta en Google Analytics:

Sigue la evolución de las visitas mediante Google Analytics. Es imprescindible saber si nos visita alguien y quién.

Añade el código que te proporciona Google Analytics para cada sitio, al final de la etiqueta <head> </head> de tus sitios web.

Recabarás muchos datos como con qué palabras clave te buscan, cuánto tiempo pasan en tu sitio, cuántas y qué páginas visitan, desde qué países, ciudades y sitios web te visitan…

Y con todo lo que te traigo aquí estás preparado para crear un diseño web potente en SEO.

En otro artículo te mostraré todo lo referente a los enlaces y cómo tener una buena campaña SEO.

*La presentación “Iniciación al SEO para desarrolladores Web” es de marzo, 2011 en Adwe, Murcia.

Leer más: http://www.corbax.com/blog/como-crear-un-diseno-web-potente-en-seo#ixzz1ckc1P15L

¿Qué opinas? ¿Añadirías algo?