Categoría: Comunicación y estratégia

Comunicación y estratégia Email Marketing

Diseño de Email 3- Imágenes

Autor de la entrada Por Continua Comunicación
Fecha de la entrada 17 agosto, 2016
2 comentarios en Diseño de Email 3- Imágenes

Como en la mayoría de las aplicaciones publicitarias, que un newsletter sea atractivo puede depender mucho de las imágenes que acompañan al contenido.

Actualmente, por cuestiones de seguridad, muchos de los clientes de correo cuentan con múltiples restricciones para la correcta visualización de imágenes dentro de los emails, muchas veces el usuario tiene que permitir que se vean, o indicar que desea verlos, pero para usuarios de email menos familiarizados con la opción podrían pasarla por alto, por lo que hay que tratar de que, independientemente de la configuración del usuario, podamos hacerles llegar la información de manera adecuada, siguiendo los tips que te presentaremos a continuación.

Al finalizar ésta guía podrás optimizar la visualización de las imágenes en los diferentes servidores de correo y tener opciones para las diferentes restricciones que éstos tienen para las imágenes.Esta guía es para usuarios de nivel: básico e intermedio

• Animaciones

Para enviar imágenes animadas el único formato soportado por los servidores de correos es el «.gif», (aunque en Outlook desde la versión 2007 no se verá la animación, sino que se mostrará el primer frame de esta), ya que Outlook detiene los archivos con formato «.gif», por seguridad, así que al insertar una imagen animada en ese formato, trata de que el primer cuadro o frame de la animación tenga el contenido suficiente para que el usuario sepa de que se trata, por si alguno de tus usuarios utiliza Outlook.

• Imágenes para Retina

La optimización de las imágenes para monitores high DPI o retina es algo relativamente nuevo, estos monitores tienen el doble de pixeles que su contraparte, por ello, para evitar que nuestras imágenes se vean borrosas en estos dispositivos necesitamos crear nuestras imágenes al doble de tamaño del que las necesitamos pero en el código de inserción de imagen indicar el tamaño correcto, ejem:

Para un boletín necesitamos un cabezal con el logo de 600x150px; pero para solucionar la cuestión del monitor Retina y evitar que se vea borroso, lo exportaremos a 1200x300px pero colocaremos las dimensiones necesarias en la etiqueta IMG:

<img alt="Logo" src="logo@2x.png" width="600" height="150" style="display: block; border: 0px;" border="0">

Esto puede hacer que tus imágenes y boletín en general incremente su peso, por lo que tienes 2 opciones para optimizar tus imágenes:

Para la primera opción, necesitas crear tus imágenes cuatro veces el tamaño que las necesites, luego en Photoshop exporta para web y selecciona la calidad más baja al momento de guardar.
La segunda manera es mantener tus imágenes al doble de tamaño del que las necesitas y usar alguna aplicación para darles compresión como JPEGMini, Tinypng, Compressor.

• Optimizar las imágenes

La recomendación siempre es que tus imágenes sean lo más ligeras posibles, entre menos kilobytes (Kb) mejor. Para esto, si utilizas Photoshop o Fireworks al optimizar una imagen selecciona máximo una calidad del 75% para imágenes de tamaño regular (de 600px * 600px por ejemplo) o hasta el 65% en imágenes muy grandes.

Cuando la imagen es algo muy importante para tu comunicado, podrías utilizar menos optimización, así su calidad mejorará, pero ten en cuenta que no es recomendable enviar imágenes con un peso superior a 250kb, si usas muchas imágenes en tu comunicado, el peso combinado de todas ellas no debe exceder los 300kb.

Si no utilizas Photoshop, puedes usar herramientas en linea como tinypng o webresizer para reducir el tamaño de tus imágenes.

• Atributos “alt” y “title”

Son muy útiles para cuando los usuarios reciben los newsletters y no muestran las imágenes a la primera, sino que es necesario descargarlas, pero si alguien no quiere/puede descargarlas, utilizando los atributos «alt» y «title» podremos darle una referencia de lo que se trata la imagen.

También puedes combinar los estilos CSS con el contenido del atributo «alt» de la imagen, creando un texto alternativo con un poco más de estilo, para lograrlo, únicamente añade el atributo «style» dentro de la etiqueta <img> con el formato que deseas.

• Etiquetas para poner imágenes de fondo

Muchas veces, para hacer más rico el contenido o añadir textura y profundidad, queremos utilizar un pattern o una imagen de fondo en alguna de las celdas, o en todo el comunicado, pero cuando hacemos las pruebas únicamente se ve en algunos servidores de correo, o por ejemplo un software instalado en nuestro equipo (Outlook o Mail en sus versiones más antiguas) no los muestra correctamente.

Para solucionarlo, en la etiqueta <td> o <table> que necesitamos que tenga el fondo vamos a utilizar el atributo de «background», donde insertaremos la imagen de fondo y, con el afán de prevenir, también utilizaremos la propiedad de css «background» dentro del atributo style que pondremos dentro de <td>, <table> o incluso aplica para ponerlo en el fondo general del archivo, en la etiqueta <body>. En ambas opciones pon lo que sea necesario para que se repita o no, quede fijo etc… con las propiedades css de posición, y siempre utiliza un color de fondo (para prevenir que no se vea blanco u otro color si el servidor de correo no está mostrando la imagen).

Ejemplo:

<td style=”background:url(http://www.dominio.com/fondo.jpg) top center repeat #f9fdfa;” background=” http://www.dominio.com/fondo.jpg” bgcolor=”#f9fdfa” valign=”top” width=”105“>

• Rutas absolutas de imágenes

Incorrecto:

<img src=”miimagen.jpg” width=”100” height=”100” style=”display:block;” />

Correcto:

<img src=”http://www.dominio.com/ubicacion/miimagen.jpg” width=”100” height=”100” style=”display:block;” />

• Imágenes sin espacios en blanco

Para las imágenes, es muy importante siempre utilizar, dentro del atributo «style» , la propiedad «display» con el parámetro «block» . Ya que Gmail y Hotmail siempre añaden un margen alrededor de las imágenes, también es importante definir los márgenes y el padding en ceros. Así podremos utilizar imágenes una junto a otra y que no se vea una separación:

• Crear carpetas para las imágenes

Es importante crear carpetas para almacenar las imágenes de cada newsletter, a fin de no crear conflictos con los nombres de las imágenes, por ejemplo si subimos el newsletter A, que tiene una imagen que se llama «top.jpg» con cierto diseño, y después subimos el newsletter B, con una imagen del mismo nombre «top.jpg» pero con otro diseño y en la misma ubicación, la imagen del newsletter A, será reemplazada con la del último y se perderá.

• Newsletters hechos solo con imágenes

Para envíos de promoción o novedades, normalmente se utilizan newsletters basados casi en su totalidad en imágenes.
Las empresas que desarrollan campañas muy gráficas prefieren utilizar este tipo de envíos, el inconveniente es que cuando el usuario tiene desactivadas las imágenes, el newsletter se verá en secciones o cajas vacías, por lo que es muy importante añadir una liga al newsletter en línea.

Sin embargo la proporción ideal es un 80% texto y un 20% imágenes, para tener un tamaño máximo recomendado de 80kb en tu boletín.

Una de las claves en Email Marketing, es no centrar el diseño de la pieza en las imágenes, ya que muchos agentes no permiten la visualización de ellas por default. A esto hay que sumarle que si estas son demasiado pesadas, tardarán más tiempo en descargarse y, ¿sabes qué? solo tienes 4 segundos para impactar a tu usuario antes de que abandone tu Email.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.

A continuación algunos links que seguramente te servirán para mejorar el uso de los estilos CSS de tus newsletters:

Etiquetas clientes, comunicación, Correos, CSS, desarrolladores, desarrollo Web, Diseño, DiseñoWeb, email, empresas, fotográfias, imágenes

Comunicación y estratégia Email Marketing

Diseño de Email 2-Estilos CSS

Autor de la entrada Por Continua Comunicación
Fecha de la entrada 17 agosto, 2016
No hay comentarios en Diseño de Email 2-Estilos CSS

Por medio de los CSS podemos lograr que nuestros comunicados tengan un diseño y estilos definidos de acuerdo a la imagen que queremos transmitir. Sin embargo, trabajar con estilos css en nuestros newsletters requiere una programación distinta a la de un sitio web.

Los clientes de correo, por seguridad interpretan los estilos de maneras distintas, o en algunas ocasiones, pueden llegar a omitirlo, dependiendo donde estén declarados nuestros estilos, como aprendimos en el Capítulo I de nuestra guía.

A continuación algunas recomendaciones para que enlistemos de manera correcta los estilos necesarios para que nuestro newsletter se visualice de manera adecuada con el diseño que hayamos creado para él, sin que le afecten las restricciones de los servidores de correo.

Al finalizar ésta guía podrás declarar de manera correcta los códigos de CSS para obtener un newsletter con estilos y diseños atractivos y que se muestren de manera correcta en cualquiera de los servidores de correo. Esta guía es para usuarios de nivel: básico e intermedio

• Usar CSS “inline”

Como lo vimos anteriormente, es muy importante no crear clases o insertar hojas de estilo creando links a las mismas.
Lo que se debe de hacer es utilizar el atributo «style» y enlistar dentro los estilos para dar formato a tu texto u objeto, debido a que los clientes de correo (sobretodo los principales, como Hotmail, Gmail y Yahoo) eliminan todo lo que exista entre la etiqueta <head> de html, de hecho Gmail elimina completamente los códigos entre etiquetas <style> de css que no sea inline, independientemente de donde se encuentre.
Si ya haz creado tu newsletter con los códigos definidos como clases, puedes utilizar una herramienta que te ayudará a «traducirlos» a código CSS inline: Inline Styler de Torchbox Apps.

Ejemplo CSS inline:

<p style="font-size: 13px; color= #333; ">texto aquí</p>

• Crear estilos CSS para cada objeto

Es importante que cada etiqueta u objeto tenga su propio CSS y evitar poner etiquetas encimadas o repetitivas, ya que algunos clientes de correo tomarán la primera etiqueta y otros la última.

Un buena práctica para programar más rápido sin tener que insertar CSS inline etiqueta por etiqueta es crear clases en el HEAD, estas servirán para previsualizar nuestro diseño, una vez que estemos seguros podemos usar herramientas para traducir esas clases en código inline para nuestra versión final, una de estas es inliner.cm.

Incorrecto:

<span style=”color: #333333;”>Texto general que va en gris</span> <span style=”color: #ff6600;”>contenido en naranja</span><span style=”color: #333333;”>continuación del texto en gris</span>

Correcto:

<span style=”color: #333333;”>Texto general que va en gris<span style=”color: #ff6600;”>contenido en naranja</span> continuación del texto en gris</span>

• Utilizar tipografías estándar

Las únicas tipografías que se verán correctamente en cualquier navegador o cliente de correo son las denominadas estándar.

Si se utiliza alguna otra, (por ejemplo, copiando desde Word un texto con formato o utilizando el @fontface de css) corremos el riesgo de que se nuestro newsletter se distorcione cuando se reciba en otra computadora donde no se tenga instalada esa tipografía, ya que el servidor de correo la reemplazará por defecto, por cualquier otra parecida, pero dentro de las estándar.

• Evitar el uso de headers <h1>, <h2>, etc., sin estilos.

A pesar de que los headers nos sirven para dar mayor o menor importancia, Gmail elimina los tamaños que tienen por defecto, por eso es importante que a pesar de utilizar un header le creemos sus propios estilos dentro del atributo «style», sobre todo en cuanto al tamaño de texto, por ejemplo:

<h2 style=”font-size: 18px; color: #ff0000;”>Header rojo de 18 pixeles</h2>

Los sitios donde tus usuarios revisan su correo electrónico seguramente deberá tener hojas de estilo definidas, por ejemplo Hotmail, Yahoo o Gmail, y generalmente establecen estilos para las etiquetas headers.
Por ejemplo si utilizas textos en <h1>, lo más probable es que Hotmail los muestre de color azul, porque su hoja de estilo así lo tiene establecido.

Así, forzaremos en Gmail a que el header sea de tamaño 18.

• Alineación de las celdas y textos

Si una celda tiene como alineación «center» y el texto del contenido no tiene el atributo «align» ni la propiedad de alineación en el atributo «style», se centrará completamente:

<td align="center" width="200" >
 <p>contenido<p>
 </td>

Si el texto tiene la alineación con la propiedad de alineación dentro del atributo «style», por ejemplo, a la derecha, la primera línea estará alineada al centro pero lo demás, a la derecha:

<td align="center" width="200" >
 <p style=”text-align: right;”>contenido<p>
 </td>

Para que el texto esté a la derecha completamente, sin importar la alineación que tenga la celda, es necesario que se utilicen ambos, en algunos servidores con que se utilice el atributo «align» (verde) es suficiente, pero para prevenir, también se recomienda que se utilice la propiedad «text-align» (naranja) de css inline:

<td align="center" width="200" >
   <p align=”right” style=”text-align: right;”>contenido<p>
 </td>

• Utilizar códigos de color en Hexadecimal (6 caracteres)

Algunas veces funciona poner “color: #333” para obtener, en este caso, el color #333333 (en hexadecimal), pero para los newsletters es mejor prevenir y colocar el código de color completo, por que si no es así algunos servidores de correo pueden interpretar el campo como vacío o inexistente y poner algún otro color por default.

• Utilizar la etiqueta <span>

Para insertar un párrafo de texto dentro de tu comunicado, es preferible utilizar la etiqueta <span> definiéndole sus estilos, que la etiqueta <p> ya que ésta última tiene márgenes establecidos por defecto, y puede crearnos espacios arriba o abajo del texto que no son necesarios.
Sin embargo la etiqueta <span> nos servirá para darle estilos a nuestro texto y definir márgenes únicamente cuando sea necesario, también ambas etiquetas se pueden combinar, por ejemplo:

<p style=”color: #333333;”>Éste es un párrafo de texto donde resaltaremos <span style=”color: #ff6600;”>algunas palabras en color naranja</span> y mantendremos márgenes con los siguientes o anteriores párrafos</p>

TIP

Gracias a ciertas herramientas, como caniuse.com, podrás saber qué propiedades del CSS son funcionales en diferentes versiones de navegador. En este sentido, también puedes utilizar Litmus para poder previsualizar tus piezas de Email en diferentes clientes de correo.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.

A continuación algunos links que seguramente te servirán para mejorar el uso de los estilos CSS de tus newsletters:

Etiquetas clientes, comunicación, Correos, CSS, desarrolladores, desarrollo Web, Diseño, DiseñoWeb, email, empresas

Comunicación y estratégia Email Marketing

Diseño de Email 1- Diagramación

Autor de la entrada Por Continua Comunicación
Fecha de la entrada 17 agosto, 2016
No hay comentarios en Diseño de Email 1- Diagramación

La base para crear un comunicado que se vea correctamente en cualquier navegador o cliente de correo es sin duda una correcta programación del HTML del comunicado.

A continuación algunas recomendaciones para que el código de tu newsletter ayude a evitar que sea catalogado como SPAM y asegurarte que la información se comunique tal y como requieres, independientemente de las variables con las que te puedes encontrar a la hora del envío, como el navegador, el cliente de correo, entre otros.

Al finalizar ésta guía podrás aplicar distintas técnicas para obtener un boletín mejor diseñado desde su base, que es la maquetación. Esta guía es para usuarios de nivel: intermedio y superior

• Lenguajes de programación

La base para diseñar comunicados que se enviarán a través de email es utilizar html básico y css inline.

Si insertas por ejemplo código entre etiquetas <script> tu correo podrá ser altamente considerado como SPAM, lo mismo sucede con Flash (swf), por lo que te recomendamos no usarlos.

• Diagramar con tablas

Desafortunadamente, nada de <div> en el código.

El HTML que utilices debe ser lo más sencillo posible evitando scripts, estilos, efectos, formularios, etc.Los programas de email(Outlook, Lotus, Thunderbird, Apple Mail, Gmail, Hotmail, Yahoo, etc…) renderizan de manera óptima las etiquetas <table>, a diferencia de las etiquetas <div> con propiedades de alineación, que generalmente se utilizan para programar un sitio web, por lo tanto debemos crear diseños y programación en base a tablas.

Cuando creas una estructura con tablas debes de asegurarte de definir anchos en cada una de las celdas donde lo requieras, así como el ancho general de tu tabla, además puedes obtener mejores resultados en cuanto a diseño al utilizar tablas anidadas, así el riesgo de que tu email se vea descuadrado o incorrecto en la mayoría de los programas de email, disminuirá considerablemente.

Un ejemplo básico de una estructura con tablas podría ser el siguiente:

<table>
 <tr>
 <td>Cabecera</td>
 </tr>
 <tr>
 <td>Texto con contenido (el cual puede ser otra tabla)</td>
 </tr>
 <tr>
 <td>Pie</td>
 </tr>
 </table>

• Estilos CSS inline

La utilización de estilos CSS te ayudarán a que tu comunicado se muestre de manera apropiada y además con un buen diseño. Para utilizarlos de manera correcta es muy importante no crear clases dentro del código o insertar hojas de estilo creando links a éstas.
Lo que se debe de hacer es utilizar el atributo “style” dentro de cada etiqueta de HTML y enlistar dentro los estilos para dar formato a tu texto u objeto, esto debido a que los servidores de correo (sobretodo los principales como Hotmail, Gmail y Yahoo) eliminan todo lo que exista entre la etiqueta <head> del html, de hecho Gmail elimina todo el código <style> de css que no sea inline, independientemente de donde se encuentre.

Ejemplo:

<p style="font-size: 13px; color= #333;>texto aquí</p>

Cabe mencionar que el uso del CSS está limitado, algunas propiedades como background-image, margin, float y padding no suelen funcionar correctamente por lo que debemos evitarlas.

TIPS

Fijaremos el ancho en las celdas, no en las tablas.
Siempre que se pueda, evitaremos jugar con márgenes y espacios interiores, sustituyéndolos por la anidación de tablas.
A la hora de determinar el color, utilizar la propiedad de la tabla <td bgcolor=”#ff3322″> en vez de usar el CSS
Evita espacios en blanco en las celdas
La propiedad font para CSS funciona correctamente en la mayoría de los casos así que podrás utilizarla pero siempre usando los métodos completos y no los abreviados.
Ej: p {font:bold 1em/1.2em georgia,times,serif;} / p {font-weight: bold;font-size: 1em;line-height: 1.2em;font-family: georgia,times,serif;}

• Siempre utilizar la unidad pixel

En los anchos de tablas, medidas de las imágenes, medidas de la tipografía, separación de renglones, etc. Para obligar a los servidores a renderizar del tamaño que queremos nuestros objetos.

Cuando deseas optimizar tu newsletter para que sea visto de manera correcta en móviles, deberás seguir otros estándares, que veremos en otra edición.

• No utilizar el cellpadding en <table>

Para crear un margen interior en las celdas de una tabla es preferible utilizar el atributo «style» con la propiedad “padding”, ya que al utilizar bordes junto con el atributo cellpading, pueden crearse espacios de más, por lo tanto es importante que en <table> el atributo cellpadding esté en ceros:

     <table cellpadding="0">

Y que la propiedad padding esté dentro de style en la etiqueta de la celda:

     <td style="padding: 5px;">contenido</td>

Además esto te permitirá tener un mejor control de las medidas en cada celda de tu comunicado.

• No poner contenido importante en <head>

Como estilos o etiquetas, ya que en Gmail y Hotmail se elimina todo el contenido entre <head> y </head>, sin embargo, en la versión en línea si es recomendable utilizarlo, por ejemplo, para que contenga el título de la página o palabras claves, por ello si vas a usar clases es necesario que dupliques el código CSS: debes insertarlo tanto en el <head> como en el <body>.

• No usar caracteres especiales en el nombre de las imágenes

Evitar el uso de ñ, espacios en blanco, acentos, :, ¨, etc…, incluso evitar los puntos en los nombres de archivo o carpetas, el único punto que debe haber es el que separa la extensión del nombre de archivo:

Por ejemplo:

Incorrecto: mi.foto del.menú.jpg

Correcto: mi_foto_del_menu.jpg

Los clientes de correo lo toman como un error y dividen las rutas a estos archivos, por lo tanto, no los encontrarán y no se mostrarán las imágenes en tu comunicado.

Recuerda agregar el atributo ALT en tus imágenes, si el programa de correo o webmail bloquea las imágenes (la mayoría lo hacen por defecto), se podrá leer una pequeña descripción de esa imagen.

• Tabla principal al 100%

Una buena práctica para centrar los newsletters y “expandir” el fondo del comunicado al 100% de la pantalla que lo contenga, es insertar una tabla principal que tenga como ancho el 100% y la propiedad de alineación en centrado, en el ejemplo a continuación, la tabla principal está en verde y el interior, o contenido, en rojo:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td align="center" width="100%" >contenido</td>
 </tr>
 <tr>
 <td align="center” width="100%”>
 <table width="600" border="0" cellspacing="0" cellpadding="0">  
 <tr>
 <td width="300" >contenido</td>
                 <td width="300" >contenido</td>
              </tr>
              <tr>
                  <td width="300" >contenido</td>
                  <td width="300" >contenido</td>
              </tr>
           </table>
       </td>
    </tr>
    <tr>
        <td align="center" width="100%" >contenido</td>
    </tr>
 </table>

Con ese código obtendrás algo como ésto:

Donde el fondo azul se mostrará al 100% independientemente del tamaño de pantalla, mientras que la información (la tabla verde) se mantendrá siempre al centro y con un tamaño fijo.

• Usar máximo 600px como ancho del diseño

Muchos de los clientes de correo no despliegan tu email a pantalla completa, sino a través de un panel de pre-visualización que posee un ancho de 600px aproximadamente.

También debes tener en cuenta que, las imágenes que poseen un ancho mayor tienen más probabilidades de ser consideradas Spam. Es importante que respetes esa medida, para que tus newsletters puedan ser visualizados correctamente.

• Definir anchos en tablas

Utilizar siempre el atributo “width” con una medida en pixeles, el alto no siempre es necesario ya que puede variar con el contenido.

• Definir ancho y alto en imágenes

Nunca dejar vacíos los atributos “width” y “height” en una imagen, habrá algunos servidores de correos, los más antiguos, que no la muestren si se omiten (los toma como 0).

• Evita resultados inesperados con tus imágenes.

Cuando utilizas imágenes partidas o una imagen, al lado de otra, con una estructura de tabla, es necesario que cada imagen tenga el estilo “display:block”, clientes de correo como Gmail, generan automáticamente un espacio blanco, no deseado, entre las imágenes, desarmando el diseño de nuestro boletín.

• En los TD (celdas de la tabla) utilizar tanto los atributos de la etiqueta, como estilos en CSS

Aunque se repita la declaración, será más seguro que se vea en distintos clientes de correo electrónico.

Seguiremos actualizándote en esta lista de buenas prácticas para que tus campañas sean cada vez más efectivas.

A continuación algunos links que seguramente te servirán para mejorar el diseño de tus newsletters:

Etiquetas clientes, comunicación, Correos, desarrolladores, desarrollo Web, Diseño, DiseñoWeb, email, empresas

Comunicación y estratégia Email Marketing

Diseño de Email – Introducción

Autor de la entrada Por Continua Comunicación
Fecha de la entrada 1 agosto, 2016
No hay comentarios en Diseño de Email – Introducción

Hoy en día el diseño de emails ha evolucionado y se ha vuelto más complejo en estructura y funcionalidad, esto sumado a la gran cantidad de clientes de correo disponibles en el mercado, hacen que mostrar el mensaje de la misma manera para todos los usuarios sea un verdadero desafío.

Por ello nos hemos dado a la tarea de crear una serie de 6 artículos relacionados con la planeación, diseño, programación y optimización de emails, que tienen como objetivo brindarte las bases y herramientas para enfrentar el reto.

Cabe mencionar que no es la «guía absoluta», si no más bien una serie de recomendaciones y anotaciones que hemos recopilado en base a nuestra experiencia, añadiendo las ultimas tendencias en el tema y que creemos que pueden ser de gran ayuda si te encuentras perdido en este mar de información.

La guía está explicada de manera sencilla; sin embargo algo de conocimientos en programación HTML y CSS no te vendría mal.

A continuación te colocamos los accesos a cada uno de los pasos de esta guía:

Comunicación y estratégia

Las Marcas en la época de los Medios Sociales

Autor de la entrada Por Soporte Continua
Fecha de la entrada 25 mayo, 2016
No hay comentarios en Las Marcas en la época de los Medios Sociales

Artículo escrito por Carlos F. Gonzalez

Branding in the Age of Social Media En su número de Marzo 2016, Harvard Business Review presenta un artículo sobre Branding en la Época de los Medios Sociales por el especialista en Branding Cultural Douglas Holt.

El siguiente es un extracto editado del mismo.

BRANDING IN THE AGE OF SOCIAL MEDIA

Bajo la creencia que el “marketing de contenidos” va a generar grandes beneficios, y a pesar de enormes inversiones en la creación de estrategias, videos, memes y distintas configuraciones de mensajes, son muy pocas las marcas que han generado un interés real por parte de los consumidores en línea.

Seguir leyendo

Comunicación y estratégia

Análisis del Comportamiento en Línea 360º — ComScore LatinoAmérica

Autor de la entrada Por carlos
Fecha de la entrada 15 agosto, 2012
No hay comentarios en Análisis del Comportamiento en Línea 360º — ComScore LatinoAmérica

El pasado martes 7 de Agosto, la empresa ComScore (Líder mundial en medición digital) presentó su estudio «Análisis del Comportamiento en Línea 360º» basado en un panel mundial de 2 millones de usuarios de internet.

La siguiente es una síntesis de dicho estudio y algunas aportaciones de nuestra propia opinión.

Datos relevantes sobre la población On-Line:

1. Latino América creció un 12% del 2011 a 2012, llegando a 134 millones de usuarios (la zona que más crece, pero también el que menos usuarios tiene (134 millones)

2. La mayor cantidad de usuarios de internet está en la zona Asia-Pacífico: 613 millones

3. En Latino América, 3 de cada 5 usuarios tiene menos de 35 años, es sin duda un mercado dominado por los jóvenes

DESTINO

– Google es el sitio más visitado, Facebook el sitio en donde más tiempo pasan los usuarios de internet en México

– El crecimiento de las redes sociales en lo que va del 2012 es prácticamente del doble al de Internet (88% vs 147%)

– México es el 5o mercado que más tiempo pasa en Facebook en el mundo (8,7 horas al mes con 90% de penetración)

– Redes Sociales con más crecimiento en México: Facebook, LinkedIn, Tumblr. (Twitter 2a más usada pero con menor crecimiento a las mencionadas)

– El Video On-Line tiene una penetración en México del 86% de usuarios en Internet

ENTRETENIMIENTO Y VIDEO ON-LINE

México es uno de los países líderes en consumo de entretenimiento en línea, con una penetración del 97.5% y 3.8 Horas al mes en promedio, siendo los sitios de música, videos y películas los que más visitantes generan.

– El sitio más popular en México de entretenimiento es YouTube con un 76% de penetración en la audiencia con un promedio de consumo de 3.63 horas mensuales.

– El consumo en México de video en línea es también de llamar la atención, con un promedio de 157 videos por usuario, ¿tendrá esto que ver con la mala programación de la televisión local?, ¿o tiene que ver más con creatividad en la red?

NOTICIAS E INFORMACIÓN

México esta en el promedio latinoamericano en penetración para el consumo de noticias e información en línea con 97,3%, este dato se vio beneficiado por el interés despertado por las elecciones del pasado mes de Julio. Las noticias más leídas son aquellas de interés en general, y los diarios en línea, la política apenas la sigue un pobre 6.8% de manera regular, así como el clima un 9.3% (muy bajo)

Un dato relevante en relación a la divulgación de noticias, es que el alcance de los blogs es de un 81,7%, en relación a un 58% global (aunque para LA es del 85,9%), es posible que la lectura de este dato es que ante la concentración de poder y parcialidad de los medios tradicionales, los usuarios de internet buscan alternativas de información a través de personas que van adquiriendo su confianza, o que gozan de un prestigio.

COMPRAS EN LÍNEA

México esta aún debajo de la media del alcance de los sitios de retail (68,8% de penetración en México vs 72,6% en el mundo —Brasil tiene 91,3%—), y más lejos si tomamos en cuenta los minutos consumidos por visitante, los sectores con mejores resultados de alcance en ventas en línea —por orden descendente— Hardware, Software, Electrónica

Muy por debajo de su comparativo global: Vestuario, Entradas a espectáculos, Libros, Departamentales.

Los Sitios de viaje se categorizan de manera independiente, pero su alcance también es bajo aún, teniendo México un 26,7% vs 31% de LA y 38% a nivel global.

Las oportunidades del comercio en línea están ahí para quién sepa y las quiera aprovechar.

INTERNET COMO MEDIO DE COMUNICACIÓN

El medio más exitoso de comunicación a través de internet sigue siendo el Email Marketing (nuestra solución favorita es por supuesto GraphicMail) con un 97,3% de penetración utilizando Web Email, a pesar de esta penetración sin embargo, los minutos consumidos por usuario son aún bajos (36,1 vs 60,6 global). La participación de mercado para clientes de email la domina ampliamente Hotmail (casi 16 millones de usuarios)

BUSQUEDAS EN LÍNEA

Los mexicanos somos grandes buscadores de contenido en línea, con 172,2 búsquedas por usuario, el promedio mundial es de 117,3, esto le da relevancia alta a los motores de búsqueda como elementos de difusión de contenidos. La penetración de los buscadores es del 100% de la población de internet, y Google acapara el 90,5% de la participación de estas búsquedas.

DISPOSITIVOS MÓVILES

México es líder en LA en el tráfico de dispositivos móviles con un 4,6% de penetración (navegación en internet a través de dispositivos). El sistema operativo con mayor penetración es iOS (Mac) con 60% seguido por Android 23%, y dominan los móviles como dispositivos de uso, pero las tabletas crecen rápidamente y ya tienen un 30% de participación en las visitas desde dispositivos móviles.

PRINCIPALES TENDENCIAS DIGITALES 2012 PROPUESTAS POR COMSCORE:

1. Lo Social define el consumo

2. Juegos Olímpicos 2012

3. Compras Online afectarán al flujo de visitas a establecimientos tradicionales en retail

4. Fijarse en el omnívoro digital

5. Noticias – Política y Redes Sociales

ALGUNAS CONCLUSIONES:

Aunque el crecimiento de usuarios de internet continua siendo de 2 dígitos, y pareciera que hemos llegado a un nivel de maduración, la realidad es que apenas son un poco más de 30 millones de usuarios activos los que hay en México en Internet, y que el nivel de penetración del comercio electrónico sigue siendo muy pobre, así como el tiempo de visitas en sitios de compra. Internet para los mexicanos es, hasta ahora, sobretodo una herramienta de entretenimiento y comunicación social, solo hay que repasar los datos de vista de videos, o de involucramiento en redes sociales para corroborar lo dicho. La comunicación vía Email continua siendo fundamental, así como el uso de motores de búsqueda para un posicionamiento web de jerarquía.

Algo de tomar muy en cuenta también es que en México la población que navega en internet es sin duda joven (El 62% de los usuarios esta entre los 15 y los 34 años), esto nos da una idea del tipo de oportunidades que se presentan en la red tanto en términos de comunicación, como de oportunidades comerciales.

Relevante sin duda es lo que está sucediendo en los dispositivos móviles, en donde el crecimiento de la navegación a través de teléfonos inteligentes y tabletas crece de manera importante y tiene mayor trascendencia en como usamos internet en México. Las empresas deben de asegurarse que están preparadas en su comunicación para este tipo de dispositivos, y que sus sitios, páginas de aterrizaje, emails se muestran correctamente en dispositivos móviles, y también invertir en innovar en transacciones a través de estos dispositivos móviles (integrando aplicaciones como la de PayPal móvil por ejemplo); para mayor ejemplo (muy emblemático por cierto) tenemos que en los recientes juegos olímpicos de Londres 2012, la mitad de los streams (video en línea) vistos tanto en Reino Unido como en los Estados Unidos fue a través de dispositivos móviles, esto combinado con más de 150 millones de tweets que se generaron durante la justa nos habla del poderío de comunicación a través del móvil. Aquí la diferencia entre México y el resto del mundo es notable, en México solamente un 17% de las búsquedas se realizaron a través de dispositivos móviles, esto comparado con un 47% de los EU o 41% de Puerto Rico nos muestra lo lejos que estamos en penetración de un sistema accesible de banda ancha móvil.

Fuente: ComScore Latinoamérica

Fuente secundaria: BrandChannel, PaidContent

Comunicación y estratégia

La mercadotecnia social en el caso de Donari

Autor de la entrada Por carlos
Fecha de la entrada 11 junio, 2012
1 comentario en La mercadotecnia social en el caso de Donari

Comunicación y estratégia Diseño web Email Marketing Redes Sociales

Evolución Continua

Autor de la entrada Por carlos
Fecha de la entrada 7 junio, 2012
No hay comentarios en Evolución Continua

En 2006 iniciamos a dar servicios de mercadotecnia digital como agencia. Lo primero que hicimos fue buscar aliados para el diseño y programación de sitios en internet, así como soluciones para procesos de negocios de manera digital.

Fue así como iniciamos a conceptualizar, diseñar y desarrollar sitios y estrategias de comunicación en el mundo digital. Desde que iniciamos, hemos mantenido integrado a un equipo de trabajo profesional, creativo, y también disgregado, nuestro equipo de trabajo está básicamente en áreas de trabajo separadas, trabajando por proyectos según los requerimientos del mismo. El hecho de contar con colaboradores de distintos países, nos permite enriquecer nuestras propuestas, y conocer lo que sucede, de primera mano, en otras partes del mundo.

Nuestra red de programadores y diseñadores:

En el 2006, cuando iniciamos operaciones, México contaba con aproximadamente 12 Millones de personas con acceso a internet, actualmente México tiene 62.4 millones de usuarios conectados (datos de AMIPCI), y el mundo digital va creciendo, y además sofisticándose la manera en la que lo utilizamos, el medio digital ahora es preponderantemente móvil, y tiende a acompañarnos a donde vayamos, y en los dispositivos que utilicemos, desde un refrigerador, la bicicleta, el auto, por nombrar algunos. El trabajar en proyectos de mercadotecnia digital nos implica una actualización permanente en sistemas de comunicación, de compartición de documentos y archivos, de ideas y creatividad, y de lenguajes de programación. La evolución es continua:

Además de adaptarnos como empresa a las nuevas circunstancias, buscamos también mantener nuestro portafolio de servicios en un marco de innovación, y lo mismo aplica para nuestra propia imagen, por eso hemos evolucionado el diseño de nuestro logotipo, así como de nuestro sitio web, y enfocando nuestro portafolio de servicios a la mercadotecnia digital, ofreciendo mejores servicios y soluciones a nuestros clientes.

Elementos de nueva actualización:

– Redefinición de aplicación de colores

– Separación de elementos tipográficos para una lectura más fácil

– Cambio de tipografía a “mercadotecnia interactiva”