Archivo de la categoría "diseño web"

22 de Junio de 2010

Launchlist es una aplicación que nos permite revisar de forma rápida los puntos más importantes que debemos chequear en una web antes de su lanzamiento.

Es una lista que nos facilita la tarea de revisión haciendo que no olvidemos ningún detalle.

Tan fácil como indicar con un sí o un no en cada elemento de la lista, permitíendonos además añadir nuevos items y enviar el informe al responsable del proyecto.

launchlist

Archivado en : diseño web, recursos, web |
25 de Marzo de 2010

Pero qué bien quedan las tarjetas con golpe en seco cuando están bien planteadas. Este recurso combinado con un papel con fibra de algodón y un buen diseño puede dar lugar a resultados muy atractivos.

Una pega: estos papeles toleran muy mal el roce, por lo que tenemos que pensar en su vida una vez salen de nuestro tarjetero a recorrer mundo. Una buena medida para minimizar su envejecimiento, podría ser hacer los cantos redondeados para que por lo menos estos no se abran y ensucien.

Todo esto es muy bonito pero por supuesto troqueles, golpes en seco y papeles especiales encarecen los presupuestos de imprenta. Para poder plantear un diseño así hace falta un cliente dispuesto a invertir en diseño con un producto que se preste y pueda beneficiar de cuidar su imagen en esta dirección.

Estos ejemplos combinan dos golpes en seco, uno aplicado en positivo y otro en negativo:

tarje2

tarje1

Este ejemplo, probalemente más económico porque sólo lleva impresión a una tinta y golpe en seco en negativo, es muy elegante:

tarje3

Y un par de ejemplos con cantos redondeados:

tarje4

tarje5

Vía Vandelay Design

1 de Marzo de 2010

Os dejamos a continuación una recopilación de ejemplos para el diseño de newsletters:news-example-01

news-example-02

news-example-03

news-example-04

news-example-05

news-example-06

news-example-071

news-example-08

news-example-09

news-example-10

news-example-11

Archivado en : diseño web, recursos |
26 de Febrero de 2010

Hemos cubierto ya algunos de los grandes capítulos en la construcción de una newsletter; diseño, factores técnicos…
Pero ahora una vez realizado en envío, es el momento de medir los resultados de la campaña y comprobar si hemos alcanzado los objetivos que nos marcamos en anteriores fases.

Deberemos analizar indicadores tales como:
- Tasa de apertura: ¿Cuántas personas que recibieron el correo lo abrieron?
- Tasa de click: ¿Cuántas hicieron click sobre algún enlace?
- Reenvío: si nuestra newsletter contaba con la función “enviar a un amigo”, ¿cuántas personas la emplearon?
- Cancelación de suscripción: ¿Qué número de personas han cancelado su suscripción?
- Tasa de conversión: ¿Cuántas personas tras leer la información realizaron una compra/acción?

Archivado en : diseño web, recursos |
25 de Febrero de 2010

Aunque es difícil encontrar una única fuente que nos facilite todo lo que debemos saber y necesitamos para diseñar nuestras newsletters, si contamos con una gran cantidad de recursos online.

Dave Greiner tiene una lista bastante interesante con sugerencias técnicas y trucos que vale la pena visitar y ver en su totalidad. Aquí os dejamos algunos destacados:

-   Usar tablas para la estructura, en lugar de CSS.
-   Las tablas anidadas son más fiables que el padding y el margin.
-   No utilizar imágenes PNG, porque Lotus Notes 6 y 7 no las muestran.
-   Establezca explícitamente un margen para los párrafos, los valores por defecto varían mucho.

Plantillas HTML y galerías de diseño:

- Free templates from Campaign Monitor

-   Themeforest templates

-   Free templates from MailChimp

- Campaign Monitor gallery of great designs

- SpamMeltdown email gallery

-   Beautiful Email Newsletters Gallery

- Inspirational Newsletter Designs: Flickr Set

Artículos interesantes de Campaign Monitor

- Guide to CSS rendering in email clients

- Does video work in email?

- Which email clients block images?

- Can I use a form in my email?

Herramientas para testar nuestras newsletters:

-   Litmus email testing

- Campaign Monitor design and spam testing

-   MailChimp’s Inbox Inspector

Otros:

-   42 HTML Email Design Resources: Un resumen de con los mejores recursos de diseño aplicado a clients de correo electrónico, que abarca visiones generales, normas, plantillas, checklists, herramientas de diseño y galerías entre otros.

Archivado en : diseño web, recursos |
24 de Febrero de 2010

Maquetar para clientes de correo es regresar al pasado y a la utilización de tablas. También es necesario definir los estilos CSS en línea, añadiéndolos a cada uno de los elementos.
Pero tampoco nos desesperemos, porque hay algunos servicios online que nos pueden ayudar con este proceso.
- Premailer
- The Automatic Inliner CSS tool: para los estilos
- Inline Styler: para convertir las reglas de estilo en estilos de línea.
Para una buena experiencia es conveniente además, incluir siempre una versión en texto plano, ya que algunas personas pueden tener su sistema bloqueado no pudiendo ver la vista HTML o simplemente su cliente de correo no lo permite por estar demasiado anticuado.
Ofrecer esta alternativa dará al usuario la posibilidad de leer el comunicado sean cuales sean las características de su cliente de correo.

Os dejamos un ejemplo de esta práctica:

texto-plano

Otro punto a tener en cuenta es la visualización de las imágenes.

Si utilizas Outlook o Gmail habrás visto en más de una ocasión que las imágenes no se muestran directamente en el mensaje sino que los lectores tienen que hacer clic para que estas se descarguen y muestren.

Os dejamos un par de tablas que resumen como tratan los clientes de correo tanto web como desktop el bloqueo de imágenes:

image-blocking-desktopmail

image-blocking-webmail

Finalmente os dejamos algunas ideas:

- Evitar las imágenes en el contenido relevante, como titulares, enlaces o llamadas a la acción, ya que si el lector no tiene activas las imágenes ese contenido aparecerá en blanco.

- Añadir un enlace a la versión web del boletín, de esta manera si su gestor no le permite la visualización correcta podrá hacerlo directamente desde la web.

-    Utilizar el atributo alt para que los usuario de gmail tengan un mejor experiencia.

-    Especificar la altura y anchura de las imágenes para asegurarse de que los marcadores de posición no las saquen del diseño.

- Realiza una prueba de envío con las imágenes inhabilitadas antes de enviarlo para chequear que el mensaje es comprensible.

¿Qué otros aspectos tenéis en cuenta en a la hora de maquetar newsletters?


Archivado en : diseño web, recursos |
23 de Febrero de 2010

Buen trabajo de Good.is y Chris Weller, donde ponen de manifiesto el poder de las redes sociales.

Estos son algunos de los puntos más relevantes:

- 83% de los usuarios que compran, comparten su experiencia en internet.

- 116 millones de OTROS usuarios leen esas experiencias.

- 83 millones de usuarios generaron reviews en el 2008.

- 93% de los norteamericanos realizan research antes de comprar online.

- 84% dijo que confían en una review que leen online como crítica de producto.

- 28% de los que realizan reviews en sitios de compra, necesitan el reconocimiento de los usuarios de su red.

- 50% de las personas que participan en una red social tienen en cuenta la información que se comparte en redes antes de tomar una decisión de compra.

- Estos últimos, confían hasta 3 veces más en lo que dicen amigos, antes que lo que les dice una publicidad.

    Las empresas deben perder el miedo a que la marca esten en manos de los usuarios, por eso es tan importante estar donde tus clientes están.


    Archivado en : General, diseño web, video, web |
    18 de Febrero de 2010

    Céntrate en lo relevante.

    Comentábamos en artículos anteriores que el lector juega un papel fundamental dentro de la construcción de la newsletter.

    Es cierto que cada vez que realizamos una comunicación somos conscientes de que podríamos enviarla a toda nuestra lista de contactos, pero que el usuario acceda a recibir información de nuestra parte no significa que quiera ser bombardeado por un sinfín de descuentos, promociones, etc.

    ¿Entonces qué hacemos? Una idea sería, organizar nuestra base de datos por ítems de interés. Identifiquemos la información de relevante para un determinado grupo y hagámosle llegar eso.

    Además ahora mismo las ISPs y los proveedores de correo dan mayor valor a su definición de spam, por lo que es fundamental centrarnos en lo relevante.

    Archivado en : diseño web, recursos |
    17 de Febrero de 2010

    Respeta al lector.

    La bandeja de entrada del correo electrónico es hoy en día un lugar atestado de comunicados, un espacio ruidoso, muy ruidoso.

    Y es necesario ser realista, un usuario tipo no estará esperando nuestros comunicados con expectación.

    Por ello es importante que cuando enviemos nuestro email, nos aseguremos de que no vamos a hacer perder el tiempo o la atención de nadie.

    ¿Cómo? Siendo relevantes y yendo al grano, en lugar de enterrar la información bajo una montaña de saludos y encabezados con fotos divertidas…averiguando por qué alguien querría nuestra información en su buzón de correo y ajustando el mensaje y la forma a ello.

    A continuación podéis ver un buen ejemplo de esto.

    Se trata de una campaña de 37signals en la que anuncian Haystack. Podemos ver como desde primera instancia nos aclaran que es Haystack, si necesidad de investigar dentro de la información.

    Claro y conciso, si estás interesado seguirás leyendo.

    ejemplo_newsletter

    Archivado en : diseño web, recursos |
    16 de Febrero de 2010

    Las newsletter son una realidad que inunda nuestros buzones de correo.

    Es por ello que queremos dar comienzo a una serie de post relacionados con el tema, donde pretendemos compartir nuestros conocimientos sobre planificación, diseño y construcción de newsletters en html.

    Primero destaquemos los puntos clave en la construcción de este tipo de campañas:

    - Respeto al lector. No hagas perder el tiempo ni atención de nadie.
    - Céntrate en lo relevante.
    - Diseña con un objetivo definido (así podrás comprobar que funciona).
    - Haz sencillo para el lector anular la suscripción.
    - Maqueta como si fuera 1999 (literalmente) y usa las CSS en línea.
    - Incluye siempre una versión en texto sin formato.
    - No asumas que las imágenes se pueden ver.
    - Respeta la ley.
    - Realiza una prueba antes de realizar el envío definitivo.

    newsletter

    Archivado en : diseño web, recursos, tendencias |
    Copyright © 2009 Se ha ido ya mamá? CSS | XHTML