Diseño Web para Escritores

Quieres tener una página web decente pero no sabes por dónde empezar. Diseño web, Marketing y contenidos web, consejos para escritores que acaban de comenzar en el maravilloso mundo del diseño web. ¡No tengas miedo, no es tan difícil!

¿Qué hago mal?

Pues, en resumen, todo. Una página es tu tarjeta de presentación online, no debe ser perfecta pero debe estar presentable. La mayoría de personas cometen los siguientes errores de diseño:

Básico:

1. Elige solo TRES colores: no llenes tu página de mezclas, no es un arcoíris. Los colores que debes elegir deben encajar entre ellos, os recomiendo negro, blanco y otro a vuestra elección. Para la mayoría de páginas, recomendaría fondos en blanco, para facilitar la lectura ya que queremos que nos lean. En mi página, por ejemplo, uso el blanco, el negro y un rojo granate.

2. No pongas fondos con imágenes, con transparencias o difíciles de leer: odio entrar en una página o blog y ver el fondo con una imagen pixelada, el blog con transparencias y la imposibilitación total de leer cualquier texto que hayáis puesto. Evitad esto, sed MINIMALISTAS.

3. MINIMALISMO: menos es más, no llenéis todo de basura, elegid lo más esencial. No es necesario tener un bombardeo de información en tu blog, lo importante es tu escritura, también a la hora de realizar el diseño el minimalismo es importante, ya que el detallismo rococó pasó de moda hace años en el diseño web. No llenes la portada de información, simplifica. Puedes tener un apartado de Blog, otro para tus novelas y un Slide de promoción personal (como el que tengo yo en la portada).

4. Unificación: no uses mil tipos de letra, mil diseños, mil colores. Unifica tu estilo, crea una imagen corporativa. Compórtate y véndete como si fueras una marca. Puedes planear utilizar tres o cuatro colores, tres o cuatros tipos de letra y un mismo estilo en toda tu página y redes sociales. Incluso puedes crearte un logo.

Dónde, cómo y por qué

¿Wordpress o Blogger? No recomendaría ninguna otra herramienta, estas son tus dos opciones principales. Que sí, que puedes usar páginas web sencillas o blogs prediseñados, pero ahora te explicaré porqué NO debes.

Blogger:

Contras:

1. Tu página tardará, casi siempre, mucho más en cargar que las demás. En Blogger tienes las imágenes en los servidores de imágenes de Google y el propio código de Blogger, e incluso el template que uses, siempre tendrá archivos o enlaces que tengan que usar un servidor de terceros, con lo cual el tiempo de carga aumentará. 
2. El código fuente de Blogger es más sucio y desorganizado, con muchos problemas que, a simple vista no se ven, pero que están ahí.
3. No diferencia categorías de etiquetas.
4. El seo en Blogger es más difícil de manejar, para ello deberías ir directamente al código HTML y agregar las etiquetas manualmente. Aunque dicen que las etiquetas sirven para ello.
5. Las plantillas de Blogger siempre, SIEMPRE, tienen algún problema que resolver, a nivel de programación, nunca te darán lo que te prometieron y casi siempre quedarán mal en versión móvil. Es decir, NECESITAS SABER PROGRAMACIÓN Y DISEÑO WEB.
6. Reitero, es imprescindible que sepas diseñar una web para usar Blogger, si quieres que tu página quede decente. Blogger es para usuarios medios.
7. Da muchos problemas visuales, los templates cambian según el navegador, algunas veces los artículos desaparecen de la lista de archivos. Este problema es a causa del largo del artículo, pero para quién no lo sepa es una putada (para resolverlo tienes que poner un salto de línea en el artículo).
8. No puedes elegir una imagen principal sin que esté la imagen en el artículo y que ADEMÁS este la primera.
9. No existen plug-ins en Blogger, todo es manual.

Pros:

1. Total y completa libertad sobre el código fuente de tu blog y sobre su contenido, no habrá barreras ni límites para que modifiques CUALQUIER cosa del blog. Todo dependerá de tus conocimientos.
2. Puede quedar como una auténtica página profesional. Incluso puedes convertirla en una página normal o en una landing-page sin necesidad de pagar por un servidor.
3. ES TOTALMENTE GRATUITO, no necesitas de un servidor para ABSOLUTAMENTE NADA. Ni para subir las imágenes, ni los videos, ni los archivos. Tienes Google Drive para ello.
4. Es demasiado sencillo de usar, cualquier persona puede tener un blog en blogger, y es más, con tutoriales cualquier persona podría editar el código HTML de su plantilla. Sin problema.
5. Blogger tiene un sistema de diseño visual muy cómodo, para los que no sepan usar HTML, aunque te da menos libertad te permite añadir códigos, imágenes, texto...
6. Herramienta de Adsense implementada en Blogger para su fácil uso.

Wordpress.org:

Contras:

1. Se necesita un servidor donde alojarlo, ya que JAMÁS recomendaré Wordpress Gratuito. Lo más lógico es que te descargues Wordpress desde su página web y lo instales en un servidor. Es decir, que tienes que pagar por el servidor, no por Wordpress, pero has de buscar un servidor que se adapte a tus necesidades.
2. Puede resultar complicado instalarlo.
3. Se necesitan unos conocimientos mínimos de diseño web y/o programación, saber usar FTP y algo de programación web.
4. Uso de PHP en todas sus plantillas. Esto es una mejora para el código, ya que el PHP es más "limpio", pero muchísimo más difícil de comprender para el usuario medio. Puedes aprender diseño web básico en unas semanitas, pero PHP no.
5. Demasiado simple, la herramienta se queda corta y no te da libertad completa sobre tu propia web. 
6. Las páginas acaban pareciendo todas IGUALES y no tienen chispa, no tienen ese toque moderno y acabado realmente profesional que yo, personalmente, busco.
7. Probablemente dependas siempre de un servidor de pago y de un programador.
8. Las plantillas de Wordpress son: un desastre, una mierda y aburridas. Incluso las de pago no merecen la pena. La mayoría de plantillas no te deja editar el código fuente o editar sus secciones básicas. En resumen, te coarta la libertad como diseñador.

Pros:

1. Profesional.Tu página quedará mil veces mejor que Blogger a nivel de código (ya que Google usa un código de mierda en Blogger) y además tu página funcionará muchísimo más rápido (ya que tendrás todas tus imágenes y archivos en un mismo servidor, mientras que en Blogger ya sabéis).
2. Sencillo de usar. Apto para cualquier tipo de usuario.
3. Organizado y limpio.
4. Uso separado de categorías y etiquetas.
5. Permite poner una imagen principal en un artículo, independientemente de las imágenes que subas al mismo. E incluso esta imagen principal no tiene porque aparecer en el contenido del artículo.
6. Un uso del marketing y seo más organizado.
7. Infinidad de Plug-ins que te facilitan la vida de mil formas. Puedes modificar, crear y añadir herramientas a Wordpress sin problemas y la mayoría son gratis. Las más profesionales son de pago.
8. Es fácil modificar a tu gusto una plantilla de Wordpress. Recomiendo el uso de Divi-Builder.

Sé lo que estáis pensando: Wordpress parece mejor pero es una putada, Blogger es una putada decente y gratis. ¿Qué hago? Pues yo, como usuario de Blogger, recomiendo usar Blogger, os sorprendería la cantidad de páginas "profesionales" u "oficiales" que usan Blogger. Si la redireccionáis con un dominio .com o .es nadie se daría cuenta. Nadie salvo los programadores, claro.

Wordpress es más profesional y la larga conviene tener una página de verdad, sobre todo si es una landing-page de promoción para tus obras. Pero como el dinero puede escasear siempre tendrás a tu amigo Blogger para dártelo gratis.

Diseño Web

Vamos por pasos.

Página Principal:
Puedes hacer una landing-page, es decir, que todo esté en la portada principal. Yo creo que lo mejor es tener tres secciones como mucho y el resto en páginas adicionales vinculadas a tu propia página, como tengo yo.

Imprescindibles para quedarse:

1. Portada: por favor que aparezca TU nombre y QUÉ haces. Puedes poner una imagen de fondo o un color, incluso un gradiente.
2. Menú: hablaremos de él más tarde.
3. Promoción, ya sea en slide o en imágenes. Puedes tener una portada-slide, pero eso depende del template que elijas. Yo en mi caso no pude apañármelas para hacerlo.
4. Blog: evidentemente un apartado donde aparezcan tus entradas, puedes elegir que aparezcan todas de golpe con el texto directo o que aparezca un resumen y la imagen. Yo prefiero la segunda opción, ya que de esta forma aumentas los clicks de la página.
5. Footer: la parte inferior, el final de la página. Donde aparecerá el copyright (diseñador del template, el de tu página, e incluso SafeCreative).
6. REDES SOCIALES: te recomiendo siempre poner todas tus redes. ¿Dónde? En un menú superior al menú principal o a la portada/encabezado; en el encabezado o slide de la portada; bajo la portada-encabezado como tengo yo; en el Footer (aunque convendría que estuviera más visible).
7. Suscripción: conviene que lo tengas, pero seamos realistas, nadie le hace ni puto caso. Yo te soy honesto, además tienes que cerciorarte de que cumples la ley de protección de datos y tal.

Imprescindibles legales para quedarse:

1. Política de Privacidad.
2. Aviso legal.
3. Política de Cookies

Menús y páginas que necesitas: en el menú debe aparecer lo más importante.

1. Categorías de tu blog (si no son muchas, o puedes poner un segundo menú como tengo yo)
2. Sobre ti como autor (tu CV si es necesario)
3. Contacto (para que las empresas o personas interesadas te contacten, mediante formulario o dejando tu email y redes sociales)
4. Preguntas frecuentes (muy importante, sobre la funcionalidad de la web y respuestas básicas sobre ti y tu profesión).

Recomiendo, además, para escritores:

1. Tener una página con los libros que has leído, reseñado o criticado.
2. Puedes tener una sección, página o apartado donde aparezca el libro que actualmente estás leyendo.
3. Instalar comentarios de Disqus, así quitas los de Blogger o Google+ que no valen para nada. También puedes poner de Facebook pero yo prefiero no complicarme. Además, disqus permite anonimato, Facebook no.
4. Poner una sección con los artículos más visitados.
5. Al final de cada artículo que aparezcan recomendaciones de otros artículos.
6. Poner el archivo del blog.
7. Si tu página principal y los artículos individuales se encuentran en páginas distintas (es decir, en diseños distintos, como en mi caso) te recomiendo repetir las redes sociales, quizá tu email de contacto y las categorías.

¿Qué es un Slider?

Un slider es lo que yo tengo en la portada principal. Es un gadget que permite adjuntar varias imágenes, a veces añadir texto como títulos y enlaces para promocionar. Las imágenes se van sucediendo automáticamente y el usuario puede también pasarlas con las flechas, es una forma rápida de visualizar los artículos que TÚ quieres que el usuario lea.

¿Cómo poner un Slider en Blogger? Tampoco os lo voy a explicar todo. 

¿Cómo optimizo mi página?

No llenes la página de imágenes o el tiempo de carga será mayor. Contra más imágenes pongas, más tardará en cargar y está claro que pondrás una imagen para cada artículo de tu blog. Esto ya hará que la portada sea de carga lenta. Si elegiste Blogger, todavía más. Para ello, recomiendo reducir el número de imágenes en portada al mínimo y, además, subirlas a Google. Blogger carga mejor las imágenes del Blog si están subidas a los servidores de Blogger y no en un servidor tercero.

Para ello tendrás que ir a crear una nueva entrada, subirás una imagen nueva, la pondrás en tamaño original. Irás al código HTML y copiarás el enlace. De esta forma podrás ponerlo en tu código fuente. O directamente vais aquí. Para ver las imágenes que has subido a tu blog ve aquí.

Responsive Design:

Comprueba que tu página web se visualiza correctamente desde el móvil, es lo más importante hoy en día ya que la mayoría usamos el móvil para todo. Es cierto que los usuarios que suelen entrar en los blogs lo hacen desde un ordenador, pero no por ello debes olvidarte de los que usan móvil o tablets.

¡Que tu Blog se vea desde dispositivos móvil y tablets!

Es bastante complicado hacer un diseño responsive, como dije, la mayoría de plantillas tienen este detalle incluido en su código HTML, pero no completamente perfecto. Para ello deberás adentrarte en el código CSS y modificarlo a tu gusto. Es decir, que necesitas saber usar CSS. No hay tutoriales para esto y posiblemente cree un artículo posteriormente, pero no ahora ni aquí.

Consejos de Marketing

1. Usad vuestro nombre como autor o seudónimo, tanto en la URL como en el título del blog. Es importante que la gente sepa de quién es la página.
2. URL: no solo debe aparecer tu nombre sino que haces, muchas veces los nombres son demasiado largos para añadirles "escritor" detrás, pero en mi caso "Joel Guerrero" no dice nada. Si os compráis un dominio, pensad muy detenidamente que nombre le vais a poner, porque la URL es muy importante a la hora de posicionarte en los buscadores y a la hora de que te encuentre la gente. En mi caso, yo me recomendaría a mí mismo JoelGuerrero o JoelGuerreroEscritor. JoelDaimon no es factible, ya que un tal Joel Diamond me roba siempre la búsqueda.
3. Crea una Página de "sobre mí".
4. Crea una Página de Contacto:
5. Etiquetas y categorías: úsalas, por favor. Si usas blogger, de igual manera puede gestionarlo, ya que Blogger permite elegir que etiquetas usas en su gadget de "Categorías". En la zona de etiquetas de Blogger, pon tanto las etiquetas como las categorías. ¿Qué es una categoría? Poesía, Relatos, Novelas. ¿Qué es una etiqueta? Endecasílabo, poema de amor, Relato de terror, terror, escritos de amor, Libros de ciencia ficción. Las etiquetas sirven para que tu artículo se encuentre más fácilmente en los buscadores. O eso dicen.
6. Títulos de tus artículos: piensa siempre en un título que enganche y describa fácilmente de qué trata el contenido. Debe tener siempre una palabra clave. Si escribes una reseña sobre una novela, que tenga el título de la novela o el autor. Si escribes un artículo de opinión sobre una causa actual, que tenga una palabra importante (feminismo, por ejemplo, si trata sobre feminismo).
7. Usa redes sociales: no hay excusa, Facebook está de capa caída, Twitter va por el mismo camino, pero pueden ser grandes afluentes de visitas. Twitter para visitas, Facebook para grupos. Instagram para todo, apúntante a Instagram, ¿a qué esperas?
8. Puntos calientes: la portada y el slider, los menús. Pon ahí tu información más importante.
9. Analiza el contenido: haz análisis para ver como funciona tu página, si necesitas cambiar de estrategia, subir otro tipo de contenido o promocionarte de otra manera.

Contenido

1. Publica solo lo MEJOR de lo MEJOR.
2. Atiende a tu audiencia: cambia la temática de tu blog si ves que es necesario. Usa Google Analytics para ver que artículos son más visitados o mira las visitas en Blogger/Wordpress, de esta forma sabrás que les interesa más y qué debes seguir publicando.
3. Publicítate en tus redes.
4. No hagas SPAM: publicitarse no es avasallar a la gente, el spam no es gusto de nadie. Modérate.
5. Buffer: una herramienta para gestionar tus redes sociales, gratuita solo para tres redes. Recomendada.
6. Cuida tu ortografía y tu presentación: que tenga que decirle yo esto a escritores. SI ESCRIBES CON FALTAS DE ORTOGRAFÍA NO TE LEO. No te lo digo más, joder. ¿Qué cara se le quedaría una editorial al ver que escribes mal? ¿O que usas signos de exclamación sin cerrar en los títulos? Por dios cuida la presentación de tus artículos.
7. Fíjate en la competencia: si no sabes como hacer artículos, analiza a tus competidores (otros escritores con Blogs); si no sabes qué contenido puede funcionarte, analiza a tus competidores; si no sabes qué diseño te podría gustar, analiza a tus competidores. Sirven para todo.