El primer ingrediente para tan ansiado cóctel pasa por colocar un mensaje en rojo nada más entrar como si se tratase de una página porno (o en este caso un burdel) y uno deba confirmar ser mayor de 18 años.

Para continuar, pondremos un mensaje como éste del que muestro un extracto:

La dirección del Hotel La Residencia, se reserva el derecho de establecer jurídicamente las denuncias que sean menester ante los Tribunales y competencias legales que corresponda contra cualquier empresa que ilegalmente publique en Internet alguna crítica de nosotros a través de presuntos clientes que dicen haber estado en nuestro establecimiento. Estas empresas – generalmente agencias de viajes de dudosa legalidad-y a efectos de captar clientes de una manera delictiva, no dudan en publicar y evaluar sin control las críticas que les llegan de nuestro Hotel. (…)

Y sigue. Ya que nuestro objetivo es que el cliente además de pensar que ha entrado en la página de un burdel piense “qué coño tendrá esta gente TAN MALO que hasta amenazan con denunciarte si lo cuentas”.

Y por si con esto no tiene suficiente, cuando entre en la web mostraremos unas curiosas hormigas recorriendo la misma para que el cliente capte ya desde el inicio la esencia de nuestro hotel y lo confortable del mismo… vamos, como ir al camping eh.

Y lo rematamos con fotos a lo visillera 2.0 mostrando un perro en una silla y las múltiples obras de arte alrededor del propietario, que mi duda es, ¿está promocionando el Hotel o a si mismo?

¿¡Pero quién ha diseñado esta página por dios!? No voy a comentar otros detalles como diversos textos por encima de imágenes o divs rotos en Firefox porque quizás son menos obvios y tras lo visto esos detalles pasan desapercibidos…

Fuente: Menéame

En mi opinión, la frase es bastante acertada y considero que eso sucede por dos motivos:

El primero, que un SEO ha de justificar su sueldo y saber venderse, por lo que si no encuentra posibles mejoras en un site daría la sensación de que “no aporta nada”.

Por el otro, si el site está bien hecho, habrán sabido buscar el punto de equilibrio entre marketing, usabilidad y SEO. Pues mientras que marketing preferirá incluir imágenes muy vistosas y montones de complementos, usabilidad preferirá un concepto minimalista, práctico e intuitivo, pero lo peor es SEO, que no aporta nada al usuario y tan solo incluye basura para indexarse en buscadores.

En una página correctamente diseñada se buscará el punto de equilibrio entre todos estos factores, de forma que exista una imagen corporativa y se incluya la estrategia SEO buscando no perjudicar en exceso la experiencia del usuario.

Por este motivo ninguna de las 3 facetas estará desarrollada al 100% en una web bien hecha, y cualquier experto en SEO, usabilidad o marketing te hallará posibles mejoras, otra cosa es que esas mejoras rompan o no el equilibrio y vayan o no en detrimento de otras características a tener en cuenta al diseñar un sitio web.

Coherencia con otras webs

Es una de las bases de la usabilidad, si las webs de tu misma temática colocan un botón con forma de triángulo en donde pone “Ir a caja”, y tu decides que ese botón sea cuadrado y ponga “Realizar pedido”, es posible que el usuario pierda un par de segundos buscando el botón triangular al que está acostumbrado. Si los usuarios se han acostumbrado a algo a través de otras webs de tu misma temática, copia esos “estándares” y facilitarás la vida al usuario. Ejemplo: El icono de RSS en los blogs o el de Compartir.

Coherencia del color

Los colores nos dan información sobre relevancia, tipo de mensaje, opciones añadidas, etc. Para evitar confundir al usuario lo más importante es que toda la web siga la misma línea cromática, pero además, a esto suele ayudar mucho que nuestra web no parezca el arco iris: escojamos 1 o 2 colores y diseñemos en base a eso, un color en distintas tonalidades puede dar mucho juego, por lo que normalmente con 2 colores, además del blanco y el negro, basta.

Coherencia de los botones o enlaces

Si decides que los botones normales sean azules y los importantes (eliminar, nuevo, comprar) de color naranja, asegúrate de cumplir siempre este esquema y no demasiados colores o formas. Siguiendo la coherencia con la World Wide Web, los enlaces deberían ser azules y subrayados para ser más fácilmente identificables.

Coherencia de la tipografía

Sencillo, si usas Arial, usas Arial, y no 7 tipos de letra distinto según el bloque de texto o la página en que me encuentro. Salvo casos como títulos o secciones muy especiales, un mismo tipo de letra debe predominar en todo el site, de lo contrario puede dar la sensación de que no hay orden o coordinación entre los distintos autores o departamentos.

Coherencia en la estructura

Puede que cada sección de tu site tenga unas necesidades distintas, pero intenta mantener una línea: cabecera y pie, logotipo, sidebar, bloque de contactar, botón de guardar,… son cosas que deben permanecer inalteradas a lo largo de la web aunque el contenido sea completamente diferente. Por ejemplo: un listado de productos o una descripción de producto con foto y características son bastante distintos, pero ambos deben llevar la misma cabecera, logotipo, sidebar y pie de página.

Otro apunte: si el botón de “guardar” normalmente está abajo a la derecha, asegúrate de que siempre se cumpla ese esquema, y no hagas como Microsoft, que te lo cambia de sitio para que te diviertas en su juego “la búsqueda del botón guardar“, muy divertido según creen ellos, una putada según opinamos algunos.

Coherencia en las nuevas versiones

Ya sé que pido un imposible, pero si a tu empresa llega un nuevo diseñador con nuevas ideas y pretende cambiar el diseño, debería tener en cuenta todo lo anterior, que si te fijas, es contrario a la innovación. La coherencia dice: monotonía. La innovación dice: se rompedor. El usuario pide monotonía.

Si en tu site tenéis que cambiar el diseño de arriba a abajo, podéis hacerlo por fases, primero cambiando los colores, para que el usuario se acostumbre a la nueva información cromática, luego la estructura, manteniendo la posición de las funcionalidades más importantes (guardar, comprar, …) y finalmente estas últimas, de forma que el usuario no se pierda y no tenga que volver a aprender lo ya aprendido (las personas mayores os lo agradecerán).

Todos quienes hemos montado alguna web hemos pasado por ese proceso alguna vez, ¿qué color elegir? ¿Porqué no puedo poner naranja fosforito de fondo? Bueno, algunas cosas parecen obvias, pero otras no tanto. Voy a intentar ordenar algunas ideas respecto a este asunto en un post:

Cuando diseñes una web, lo primero que tienes que pensar es en cuál es el objetivo de la misma, y a partir de ahí, intenta dirigir al usuario hacia ese objetivo. Por ejemplo, pongamos que haces un blog por hobbie y lo que quieres es que los usuarios lean lo que escribes. Te pongo dos ejemplos de diseño:

En el primer ejemplo, vemos como las zonas que no queremos que llamen la atención tienen colores grisáceos, poco llamativos, dejando el blanco para la zona del blog en que irá el texto, lo que facilita la lectura al usuario (cansa menos la vista leer sobre fondo blanco). En el segundo diseño hemos mantenido el blanco para el texto, pero en un arrebato de originalidad le hemos colocado algunos colores mas llamativos.

Fíjate en el segundo diseño, ¿hacia donde se te van los ojos? Lo mas probable es que a cualquier sitio menos al contenido, ya que el blanco llama menos la atención, y ahora, fíjate en el primer diseño, aunque la cabecera llame algo la atención, tus ojos seguro que tienden hacia el blanco. ¡Caray! ¡Pues eso es lo que yo quería! Parece que no es tan difícil después de todo…

El truco consiste en poner los colores más llamativos en la zona objetivo, partiendo de que si tenemos texto éste debe ir sobre fondo blanco (salvo algunas excepciones), si nuestro objetivo fuera llevar al usuario a la barra lateral podríamos usar el amarillo del segundo diseño, si en cambio el objetivo es llevar el usuario al texto, hemos de usar colores menos brillantes que el blanco para el resto de la página.

Ejemplo práctico

Veamos ahora un ejemplo, el Blog de racingpasión utiliza un fondo rojo oscuro, lo que le da personalidad y nos hace recordar el rojo tan característico de Ferrari. He cogido este ejemplo precisamente para mostrar cómo se puede mantener la usabilidad y la libertad creativa al mismo tiempo. El rojo, aunque llama la atención, está en una zona desértica, sin contenido, distrae al usuario 1 segundo al entrar pero éste enseguida sabe que ahí no hay nada y dirige su mirada al contenido, sobre fondo blanco. Fíjate en que aunque es un diseño muy arriesgado y agresivo, luego lo suavizan colocando el resto en gris oscuro, para evitar mas distracciones de las que ya genera el fondo, y de paso darle un aire ferrarista de F1.

Resulta bastante sencillo y no supone un gran coste, pero para poder explicarme con más comodidad y hacer artículos menos densos prefiero hacerlo en 2 o 3 partes, de forma que separe unos temas de otros. De esta manera, pasaré a explicar cómo crear y configurar un theme y qué archivos son necesarios, los estilos que deberíamos incluir, los archivos que deberíamos editar y por último algún truco más avanzado. Empecemos.

Creando nuestro nuevo theme. ¿Qué necesitamos?

Lo primero que hay que saber es que los themes se guardan en carpetas independientes dentro de wp-content/themes/, por lo tanto, nos metemos ahí y creamos una nueva carpeta, por ejemplo “miNuevoTheme“.

Tras esto es necesario crear un archivo style.css que empiece por el siguiente texto, esto es importante ya que wordpress no reconocerá el theme si no tiene estos datos ya que wordpress utiliza esta información para mostrar los themes en el panel de administración. Si quieres ver un ejemplo utiliza el style.css del theme por defecto de wordpress.

/*
Theme Name: Mi super Theme
Theme URI: http://www.entrecodigos.com/
Description: Theme de pruebas.
Version: 1
Author: Ruben Canton
Author URI: http://www.entrecodigos.com/
Tags: blue, custom header, fixed width, one column, widgets
*/

Ahora sólo hace falta que coloquemos ciertos archivos php que definen la estructura de las distintas secciones de nuestro blog, sólo 3 de ellos son imprescindibles:

• index.php: Es el archivo al que realmente se llama, éste es quien debe llamar a header.php y footer.php.
• header.php: incluye la cabecera.
• footer.php: Incluye el pie de página.

Seguramente te preguntarás cómo meter un sidebar, widgets o cómo hacer estructuras distintas para listar categorías, páginas o resultados de búsqueda. Pues bien, por eso en la mayoría de themes hay muchos más archivos, los 3 anteriores son imprescindibles para un diseño básico, pero si quieres hacer algo mas complejo sin provocar que el index.php termine ocupando 800 líneas de código lleno de bifurcaciones será mejor que te mires la carpeta con el theme por defecto de wordpress y copies todos los archivos php que contiene. Así podrás tener todos los archivos y partir de una base, como hice yo, lo que puede resultarte muy útil.

Por último, existe una imagen llamada screenshot.png de 300×225 que wordpress utiliza para mostrarte una minipreview del theme en el panel de administración, cuando termines tu theme puedes hacer una captura y colocarlo para distinguirlo fácilmente.

¿Qué estilos colocar en style.css?

Cada uno trabaja a su manera, si coges el style.css de algún theme te encontrarás con mucha basura o estilos que no vas a utilizar, si utilizas el style por defecto de wordpress no te libras de esa basura, y además, su forma de organizar el css puede que no se adapte a tu forma de trabajar, como me pasó a mi. Por lo que lo mejor es borrarlo todo y empezar desde 0 teniendo claro qué estilos sí son imprescindibles o necesarios, aunque como tú eres quien define la estructura puedes modificar el nombre de los mismos, te recomiendo que utilices los que vienen por defecto, así tu theme será más compatible. Te muestro la estructura básica:

• body
• • page
  • • header
    • content
    • • post
      • postmetadata
      • entry
      • commentlist
      • commentmetadata
      • avatar
      • commentform
    • sidebar
    • footer

Por supuesto no hay que olvidar ponerle estilo a las típìcas etiquetas HTML como a, h1, h2, ul, ol, li, img, … y tras eso ya puedes empezar a crear tus propios estilos o bloques e incuirlos en la estructura y en el css.

Nota: Si has copiado los archivos php del theme por defecto, fíjate que el header.php mete un estilo de forma dinámica en función del tipo de página que se carga, puedes utilizar esto si te interesa para tener distintos estilos o eliminarlo para que no te moleste.

Continuará…

Fuente: Un especial agradecimiento a Andrés Nieto, por su manual y por su recopilación de manuales.

Opción A: Meter texto y fastidiarse, lo simple es mas efectivo y si el cliente se queja le hablamos de la moda minimalista.

Opción B: Metemos imagen y nos olvidamos de Google, ¿pero quién narices querría indexar su propio nombre de empresa en Google?

Opción C: Metemos una imagen, metemos también el texto y usamos un truquillo en CSS para ocultarlo sin que afecte al posicionamiento.

Para hacer esto último simplemente nos aprovecharemos de 2 propiedades de CSS, una de ellas es el background, que nos permite colocar una imagen de fondo en una capa, la otra es el text-indent, que nos permite colocar la sangría del texto (incluso en negativo) y hacer que el mismo se esconda. Pongo un ejemplo:

<div style="background: url('../images/logotipo.gif'); text-indent:-2000px; width:400px; height:90px; overflow:hidden;">El nombre de mi web</div>

Como lo de colocar una imagen de fondo parece muy básico, centrémonos en el text-indent, el valor es negativo y desplazaría el texto fuera de la capa de forma que el mismo no pueda verse, si el usuario visualiza la página con el CSS activo verá la imagen de fondo en la cabecera, si por el contrario navega sin visualizar el CSS (como hacen los buscadores) lo que se mostrará es el texto, y no la imagen, ya que si el CSS no está activo la propiedad background tampoco cargará la imagen.

Esta solución me parece una de las más limpias y eficientes que hay para este tipo de problemas, de forma que puedas colocar junto al logotipo el nombre de la empresa y posicionarte mejor en Google sin afectar al diseño y sin tener que utilizar trucos en javascript que tienden a crear problemas.

No quiero alargarme mucho, por lo que colocaré aquí únicamente las características básicas de los colores principales cuyo significado o forma de afectar a una persona puede ser tenido en cuenta para muchas cosas, tanto a la hora de vestir (ponte una camiseta naranja y verás como te llenas de energía) como a la hora de diseñar un web (no te recomendaré el negro con amarillo…).

Bueno, sé que hay mas colores pero estoy un poco cansado así que lo dejo aquí, por cierto, ¿cuál es tu color preferido?

No obstante, la mayoría de veces se descuida la opinión técnica de un diseñador o desarrollador web y son comunes los siguientes errores:

Catalogación de spam

Hoy en día son comunes los filtros antispam en todos los sistemas de correo electrónico. Los mismos, utilizan una serie de criterios a la hora de calificar un email de SPAM que debes tener en cuenta si no quieres enviar emails directamente al vacío:

Lo primero es fácil, evita poner mayúsculas en el asunto, evita también colocar frases típicas de emails de spam como “Oferta especial!!” o palabras comunes como “gratis, sexo, super, ahorre,…”. Ten cuidado también con la dirección de email que utilizas al enviar o la IP, ya que si caes en una lista negra costará salir de la misma.

Lo segundo no es tan fácil, y es que los filtros de correo electrónico del usuario pueden tener en cuenta la acción del usuario sobre el email, esto es, si el usuario decide enviarlo a la carpeta de SPAM tras recibirlo o simplemente lo elimina sin leerlo, puede provocar que el email sea considerado SPAM. Para evitar esto, asegúrate de enviar el email en un momento adecuado -de martes a jueves por la mañana a empresas, por la tarde/noche a particulares- y de incluir contenido interesante.

Diseño del HTML

Además de asegurar el cumplimiento de estándares, la accesibilidad y usabilidad, es importante tener en cuenta que no todos los lectores de correo interpretan igual el HTML, de hecho, muchos -normalmente por configuración del usuario- sólo lo leen en formato texto. El diseño pues debe ser capaz de leerse y verse adecuadamente en ambos formatos, lo ideal es un HTML sencillo que en caso de desaparecer no suponga un problema y claro está, usar el formato MIME.

Otra opción es el uso de imágenes, pero también a día de hoy es común el bloqueo de las mismas.

Cumplimiento de la LPD

Cuando envíes un email a todos tus clientes, nunca olvides el cumplimiento de la Ley de Protección de Datos. Para tranquilizar al usuario, lo mejor es poner un mensaje explicativo al final del email en donde se informe al usuario del cumplimiento de la misma y de la forma de darse de baja de ese listado. Esto le dará confianza y evitará que piense que somos spammers.

Petición de alta

Remitiéndonos al punto anterior, al dar de alta un usuario en el RSS, sistema de alertas o cualquier otra cosa que suponga un envío masivo de emails, no olvidemos asegurarnos de informar al usuario de la LPD, y, para que el mismo se sienta mas cómodo, debemos colocar un mensaje en dónde informemos de lo fácil que le resultará darse de baja en cualquier momento si lo desea.

Llevo años haciendo gifs con fondo transparente, pero ojo, no soy un experto, además de haber usado (como todos) los ciento un mil programas de edición fotográfica y las 9 versiones de Photoshop que solo se parecen en el nombre, ¿Alguien sabe porqué cambian los menús en cada versión si a fin de cuentas son lo mismo?, no suelo hacer muchos gifs animados o transparentes y para uno que hago al año siempre olvido como se hacía.

Finalmente he decidido, por lo menos, apuntármelo en mi blog (¡nótese la etiqueta transparente en este artículo!), estaba por apuntarlo en la agenda pero seguro que luego me cuesta mas encontrarlo… y eso si no la tiro.

Empecemos. Para poder convertir el fondo de una imagen, o un color de la misma en transparente, basta con ir al menú Imagen -> Modo -> Color indexado.

Si tienes capas vas a tener que acoplarlas para poder seguir adelante, y tras eso, te sale el menú de opciones de conversión.

Tras aceptar, nos vamos al menú Archivo -> Exportar -> Exportar a Gif89a… y seleccionamos con el cuentagotas el color que queremos sea transparente antes de guardar.

Como ejemplo os dejo el gif que he hecho para linkar la traducción del blog al inglés.