
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:
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

Landing Page móvil vista desde un navegador de escritorio

Wireframe de las páginas de la landing. Se eliminaron algunos pasos
Procesos simples y sencillos, que es lo que los móviles piden
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
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 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:

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/
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
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:
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