Hasta hace no mucho tiempo, las aplicaciones de Facebook no eran accesibles desde dispositivos móviles a través de la versión web móvil de Facebook o de las distintas apps disponibles para los distintos sistemas operativos existentes. Tras la reciente Mobile Developer Conference de Facebook, donde la compañía presentó la versión móvil del Open Graph, un mejorado Facebook Login y otras mejoras para desarrolladores móviles, Facebook anunció también la compra de Parse, una plataforma de desarrollo en la nube que ayudará a simplificar el proceso de creación de aplicaciones multidispositivo. Todas estas novedades, junto con el lanzamiento de Facebook Home y de mejoras en las páginas de empresas para dispositivos móviles, parecen indicar que Facebook se ha propuesto hacer de una de sus hasta ahora debilidades una de sus mayores fortalezas: el ecosistema móvil.

A la hora de plantearse el desarrollo de aplicaciones móviles para Facebook debemos plantearnos las distintas posibilidades que nos ofrece la plataforma: desarrollar apps nativas para iOS y/o Android o desarrollar una aplicación utilizando la tecnología web. ¿Cuáles son las principales diferencias?

Aplicaciones móviles para Facebook nativas vs. web

Las aplicaciones móviles para Facebook nativas se integran perfectamente con nuestros dispositivos, pero suponen un esfuerzo multiplicado por tres, ya que debemos realizar como mínimo tres versiones de la aplicación si queremos que esta sea accesible para todos los usuarios: una para iOS, otra para Android y otra para ordenadores.

Sin duda, lo ideal es sería realizar una única aplicación para ahorrar el tiempo y los costes que supone mejorar y corregir bugs de las distintas versiones de nuestra aplicación móvil para Facebook. Gracias a la tecnología HTML5 y a los diseños responsive es posible unificar todas las aplicaciones en un único desarrollo.

¿Qué se necesita para desarrollar aplicaciones móviles para Facebook?

• De una cuenta en Facebook y formar parte de Facebook Developers.
• Hosting y dominio o bien trabajar desde un hosting y dominio local ;).
• Conocimientos sobre PHP, CSS, JavaScript/jQuery, HTML
• Saber sobre configuración de servidores HTTP/Apache y dominios.
• Descargar el SDK de Facebook para PHP y conocer el protocolo OAuth2.

¿Cómo se configura una aplicación móvil web para Facebook?

• Creamos una nueva aplicación desde Facebook Developers.

• Elegimos bien el App Namespace, pensando en el SEO y también en el buscador propio de Facebook, es decir, tratamos de allanar el terreno para hacerle una buena campaña de marketing a la aplicación. Seguramente os llevará un rato encontrar un nombre disponible, pero hay que tener paciencia :)

A la hora de editar la configuración de la aplicación, nos centraremos en tres puntos que son objetivo de este artículo:

• App on Facebook: Indicamos a Facebook que cargue nuestra aplicación web en un canvas de aplicación cuando un usuario seleccione nuestra aplicación desde Facebook. Este modo solo es accesible desde la versión completa.

• Mobile Web: Cuando el usuario entre a nuestra aplicación desde un dispositivo móvil, Facebook lo redirigirá automáticamente a la versión móvil. Por eso esta URL debe estar lista en nuestro servidor para responder.

• Sitio Web con Inicio de sesión en Facebook: Si vamos a requerir información del usuario por parte de Facebook es necesario poner en marcha el OAuth2. Una vez el usuario autorice los permisos, Facebook redireccionará a la URL que pongamos en este campo.

¡Y listo! Con estos tres puntos ya hemos definido una aplicación de Facebook accesible desde ordenadores y dispositivos móviles.

Como podéis observar, una aplicación web puede hacerse pasar por una app nativa, pero es muy importante recordar que esto requerirá una conexión de Internet y que los tiempos de carga pueden verse alterados. ;)

El código fuente de esta aplicación lo podéis encontrar aquí.

Podéis ver online y probar aplicaciones web como esta en la web de Facebook Developers.

¿Qué parámetros definen el éxito de una campaña? La consecución de los objetivos planteados con anterioridad es imprescindible, pero la creación de una acción que sigue a pies juntillas la línea del anunciante es un valor añadido. En la revolución digital en la que nos movemos olvidamos con frecuencia la magia de una acción, de que su resolución puede no depender solo de la creatividad y del desarrollo de una idea compleja. A veces, para que algo funcione, basta con un “menos es más”.

Siguiendo la línea minimalista y cálida que identifica al eCommerce de decoración e interiorismo MooiMaak, se desarrolló la acción “Gana con Mooimaak”, una campaña simple pero muy atractiva en la que se ponía de manifiesto la sinergia de dos canales tan poderosos  como pueden ser Facebook y la Blogosfera.

A través de una sencilla aplicación de Facebook los usuarios tenían la posibilidad de inscribirse en un sorteo en el que podían ganar un Sillón Futón de inspiración japonesa.

Para facilitar la difusión de la acción se contó con la ayuda de seis bloggers especializados en la temática de hogar y decoración. De esta forma se consiguió un grado mayor de afinidad de los perfiles de los participantes con la temática de MooiMaak, convirtiéndose pues en seguidores de calidad de la marca en Facebook.

A día de hoy es usual escuchar que los concursos en Facebook están acabados: que no producen los mismos efectos que conseguían en el pasado, que los usuarios han sido sobreimpactados… Sin embargo los datos son los datos, y en solo 10 días MooiMaak ha visto como su número de fans se duplicaba en Facebook, llegando a superar los 6000 seguidores y obteniendo cerca de 2000 participaciones.

Quizás sea cierto que los usuarios ya no participan de forma masiva en los distintos concursos en redes sociales: parece que se ha naturalizado el comportamiento de los “cazapremios” y la “burbuja” de los concursos ya no arrastra tanto a las masas como solía. Sin embargo, no podemos subestimar el atractivo de las marcas y la posibilidad de conectar con su cliente potencial, sea a través de sus atributos, de su producto o de la esencia de la marca en sí. Las personas quieren conectar con las marcas, el reto ahora es convertir vuestra marca en la suya.

Nuestra primera recomendación a la hora de diseñar un correo electrónico es hacer 2 bocetos: uno para web y otro para móvil. De esta manera ya tendremos claro desde el principio la forma en la que se adaptará la creatividad en cada dispositivo (ordenador, tablet, smartphone…) y tendremos claro como maquetarlo.

Teniendo esto en mente, os damos algunos consejillos. ¡Vamos allá!

• Keep it simple!
  La primera cosa a tener en cuenta, tanto en el diseño como en el código HTML es la simplicidad. Una columna mejor que dos; si podemos quitar información redundante, la quitamos; call to action bien claro y visible…

• Del cursor al dedo
  No olvidemos que no es lo mismo hacer clic con un cursor que con un dedo. Por ello, intentemos que los botones tengan un tamaño suficientemente grande como para poder ser tocados por un dedo. Nosotros recomendamos un alto de unos 45px.

• Lo importante, arriba
  Al tener la limitación de ancho, es muy probable que el e-mail se alargargue. Para evitar que el usuario no vea la información más importante, es mejor situarla al principio.

• Mediaqueries
  Las mediaqueries son una potente herramienta para adaptar nuestro contenido a los diferentes dispositivos. Además son muy fáciles de utilizar, solo tenemos que definirlos en la hoja de estilos y a partir de ahí jugar con los elementos.

• Flexibilidad
  Un diseño flexible combinado con los mediaqueries hará que nuestro diseño se adapte a cualquier dispositivo.

• Si lo necesitas, esconde el contenido no esencial
  Para las resoluciones de pantalla más pequeñas podemos aplicar una clase especial para que los elementos menos importantes se escondan.

• Hay cosas que no cambian
  Como siempre, debemos seguir utilizando tablas, no utilizar estilos en línea, no utilizar javascript… Vamos, lo que todos ya sabemos :)

• Después de todo…
  ¿Hay algo que no funciona? Revisa que tengas puesto el meta viewport en el <head> de tu HTML…

Finalmente, decir que con todas éstas medidas conseguiremos que un email responsive pero siempre estaremos supeditados a las limitaciones de algunos webmails… Incluso en algunos casos nos lo podrían enviar a SPAM :(. Conociendo los pros y contra, toca valorar si se prefiere que el email se vea de forma óptima en cualquier dispositivo; o si se prefiere asegurar la recepción al 100%, aunque luego la visualización en algunos dispositivos no sea la ideal… Ya lo dicen, “no se puede tener todo en ésta vida”! ;)

* Datos de apertura de una newsletter durante el mes de enero de 2013, suma de las aperturas en Blackberry, Mobile Safari y Android.