Ir al Flickr de Pablo Angeletti
Sígueme en Twitter: twitter.com/angeletti
Mis favoritos en delicious.com/angelettiMi perfil en FacebookVideos y favoritos en YoutubeContactos Profesionales y currículum en linkedinSubscríbete al blog por RSS

Diseño de landing page móvil para UNICEF

Página de inicio de UNICEF SAHELNOW

Página de inicio de UNICEF SAHELNOW

La landing page para móviles fué un encargo de UNICEF España en que había que diseñar una sencilla landing para móviles a la que se se accedería desde unos códigos QR publicitados en los distintos eventos organizados por UNICEF. La landing page se puso en marcha en el evento Red Innova 2012 celebrado el 14 de Junio en Madrid.

El desarrollo se hizo en HTML5 y con la pasarela de pago de Paypal en modo móvil, minimizando los pasos a seguir por el usuarios para aumentar el número de acciones finalizadas.

El proceso lo componen 3 sencillos pasos:

  • Elección de la cantidad a donar mediante botones con cifras prefijadas o un campo para incluir la cifra.
  • Acción para empezar el proceso de pago en la web de PAYPAL.
  • Página de agradecimiento y posibilidad de suscripción a boletín de noticias de UNICEF.
  • Panel de control para control de donaciones y alta en newsletter.

Al acceder a la página para móviles desde un dispositivo de escritorio, se muestra el diseño encajado en  un marco gráfico simulando un teléfono móvil para que el diseño no desentone.

La landing page se puede visitar en la dirección: m.unicef.es/sahel

Botónes con cifras prefijadas o campo para indicar la cantidad a donar

Botónes con cifras prefijadas o campo para indicar la cantidad a donar

Landing Page móvil vista desde un navegador de escritorio

Landing Page móvil vista desde un navegador de escritorio

Wireframe de las páginas de la landing. Se eliminaron algunos pasos

Wireframe de las páginas de la landing. Se eliminaron algunos pasos

Procesos simples y sencillos, que es lo que los móviles piden

 

Hibridpublication. Visor de catálogos vía web compatible con dispostivos móviles: iPhone, iPads, Android…

Hay muchos servicios que permiten publicar tus pdfs para visualizarlos online con efecto “Flip Page”, pero la mayoría de ellos, al funcionar con Flash, no podremos usarlos desde un dispositivo móvil.

Una de las plataformas más completas y atractivas que he encontrado es Hibridpublication, ya sea por todas las opciones de gestión y flexibilidad de precios que ofrecen como lo más importante con el boom de los dispositivos móviles:  las publicaciones se puede ver en iPad, iPhone o Android. La descubrí de casualidad al hacer click en un email de Phonehouse y me sorprendió lo completa que es la plataforma (para que digan que los emails están muertos :)

La plataforma dispone de multitud de opciones: generación de QR para descarga directa, compartir en redes sociales, analítica de accesos, etc…

En  este enlace podéis ver un ejemplo de publicación y como se ve correctamente desde cualquier dispositivo: http://lib.hpublication.com/publication/demo/

No hay nada más inútil que un servicio que sirva para leer documentos y que a día de hoy no se pueda leer en un iPad, iPhone o teléfono Android. Incluso ISSUU, un veterano en este tipo de servicios, está preparando una versión compatible.

Podéis ver más información sobre el servicio y precios de  Hibridpublication en www.hpublication.com

Listado de recursos sobre Responsive Design

Otro buen recopilatorio de artículos sobre Responsive Design: tutoriales, herramientas, themes…

Responsive Web Design Resources For Absolute Beginners

En el blog de Janna Hagan encontraréis otros tutoriales interesantes sobre diseño web:

 

Mozilla Webmaker: Iniciativa de Mozilla para ayudar en el desarrollo web

Mozilla ha creado una iniciativa muy interesante: Mozilla Webmaker.

Con esta iniciativa, la fundación Mozilla busca ayudar a los desarrolladores con información sobre herramientas para el desarrollo (Popcorn, Hackasaurus..), tutoriales, documentación, templates, etc…

En la web webmaker.org encontraréis eventos organizados por la fundación o puedes crearlos tu mismo con la herramienta del portal para formar tus propias comunidades.

Me gusta mucho el planteamiento colaborativo de esta iniciativa. En la sección “Guías” puedes ver los tres tipos de eventos que plantean:

  • Kitchen Table. Formación más “informal”: 1-5 amigos, entre 15 minutos y una hora, en casa o una cafetería
  • Hack Jam. Convierte ideas en proyectos reales: 10-15 participantes, 1 o 2 días, en un espacio más amplio como una oficina, escuela, etc…
  • Pop Up. Crea una red en tu ciudad o grupo locales: 2-10 organizaciones, 20-50 participantes, medio día

 

Aunque no he utilizado ninguna de sus herramientas ni librerías, el potenciar los eventos offline de distintos niveles y el buen rollo que emana me gusta mucho.

Espero que tengan éxito y no quede en una iniciativa fallida

PD: Las acciones offline me recuerda el planteamiento de Richard Couture… un sitio físico donde intercambiar información. Por cierto, dejo aquí par a que no se me pierda su curso de C impartido en sus instalaciones de LinuxCabal ftp://ftp.linuxcabal.org/pub/Videos/CursoDelLenguaje_C_enLinuxCabal_AC/

Dos ejemplos para entender que es el Responsive Design

En la sección de proyectos de James Mellers se pueden encontrar estos dos ejemplos en los que podéis ver de forma muy clara cómo para que se puede la técnica de Responsive Design.

En “Responsive Illustration” puede ver el efecto que tiene sobre el diseño el cambio de tamaño de la pantalla. A medida que reduces el tamaño de la ventana, la ilustración va cambiando, ajustando el contenido al espacio disponible en la ventana del navegador:

http://www.thismanslife.co.uk/projects/lab/responsiveillustration/

Otro ejemplo de su carpeta de proyectos es “Responsive Layouts”, en que se puede ver como cambia la distribución de elementos cuando se usa la versión web o la versión optimizada para móviles. Para ver los cambios hay que hacer click en la versión “mobile” o “Desktop” que aparece arriba a la derecha:

http://www.thismanslife.co.uk/projects/lab/responsivewireframes/#desktop

El Responsive Design no se puede aplicar en todos los casos ya que los cambios de uso entre una versión de escritorio y la versión móvil no son solo cambios en el tamaño de pantalla. El cambio es mucho más profundo ya que el contexto cambia por completo el uso y forma de la herramienta: reestructuración de las secciones, cambios en la redacción de los textos, etc…

Otra información de interés: Diseñando para dispositivos móviles: Responsive Web Design y Hand per Device

35 ebooks gratis sobre diseño y desarrollo web

Cada vez hay que tener en cuenta más disciplinas a la hora de desarrollar una web (lenguajes, frameworks, css3, html5, responsible design, desarrollo móvil…), pero también disponemos de mucho más material gratuito para aprender y poder avanzar en cualquier disciplina por nuestra cuenta.

En tripwiremagazine han recopilado 35 ebooks gratis sobre diseño y desarrollo web  y que abarcan desde  creatividad, uso de tipografías hasta el gestión con CMS:

35 Useful and Free E-books for Web Designers

Otra web imprescindible es OpenLibra, sección de ebooks libres de EtnasSoft en la que también van recopilando todo el material libre sobre desarrollo y programación web: OpenLibra de EtnasSoft

Powered by Wordpress | +Pablo Angeletti
Performance Optimization WordPress Plugins by W3 EDGE