Esenciales para crear una web móvil con Drupal

drupal-logo Mobile Drupal fue un blog que comencé a seguir porque a pesar de que no uso Drupal ofrece buenos consejos acerca de desarrollo web móvil, aunque por supuesto su punto fuerte es el desarrollo de web móvil para Drupal.

El mes pasado presentaron durante el Drupal Camp en Colorado (EEUU) los puntos esenciales para crear sitios web para móviles en Drupal, aquí una traducción y resumen de los puntos más interesantes, por supuesto al final esta la presentación completa por si no queres perderte nada.

Problemas y dificultades

Fragmentación de móviles

  • Millones de móviles diferentes
  • Diferentes sistemas operativos
  • Diferentes capacidades
    • Resolución, soporte de javascript, css, xhtml, video, etc

Usabilidad: Crear una experiencia fácil y divertida

  • El contenido debe ser fácil de encontrarse
  • Reducir el scroll (no usar scroll horizontal)
  • Hacer enlaces faciles de usar (no demasiado pequeños)
  • Usar una forma de navegación sencilla que sea fácil de encontrar.

Optimización de la descarga

  • Las conexiones de internet no siempre son optimas (entre 50kb/s – 1.8 Mbit/s)
  • No permitas que tu visitante espere, no lo hagas descargar contenido que él no va a usar.

Brindar contenido relevante para los usuarios móviles

  • Entiende qué es lo que ellos buscan (piensa y planea bien)
  • No es fácil (especialmente para el cliente)

Acerca del diseño

  • No márgenes ajustados
  • No floats
  • No grandes fuentes
  • Reduce el uso de tablas (o reduce el número de columnas)
  • Haz un bloque de enlaces para ver, como
    • Comentarios recientes
    • Temas más recientes del foro
  • Elimina el bloque de contenido de la portada
  • Cambia el bloque de inicio de sesión (login) por un enlace.
  • La navegación usando combobox (dropdown list) funciona bien.
  • Elimina “Quién esta en línea” (no es relevante)
  • Tu puedes hacer cosas atractivas para iPhone, Android, etc.

Sobre los módulos móviles para Drupal

[Aclaración: Las extensiones en Drupal son llamadas módulos]

  • Muchos intentos en la comunidad (de Drupal)
  • Los módulos están enfocados en
    • Ofrecer temas móviles (por ejemplo iUI, mobile theme, etc)
    • Cambio automático de temas
    • Pagos a través del móvil
  • No hay muchos ejemplos
  • No ofrecen estrategias a largo plazo
  • Un vistazo a los módulos móviles para Drupal en An overview of Mobile modules for Drupal

Algunos módulos móviles para Drupal

  • Mobile Tools
  • Siruna
  • WURFL
  • Planeados (por el autor):
    • Modulo de redimensionamiento de imágenes
    • Solución para convertir vídeo (basado en Media Mover)
    • Ofrecer más temas móviles

4 pasos para el desarrollo de web móvil en Drupal

Luego la presentación se enfoca cada uno de los cuatro pasos para desarrollar para web móvil en Drupal:

  1. Detección del dispositivo (Móvil, PC de escritorio, PSP, etc)
  2. Switching, o Cambio (para asegurarte de que el visitante tenga la mejor versión del sitio web)
  3. Funcionalidad + Contenido (Que la funcionalidad y el contenido sean relevantes para el dispositivo)
  4. Theming, o el diseño del tema (diagramación, tamaño de las imágenes, navegación, el uso de tablas, etc)

Podría adentrar un poco más al tema pero te recomiendo que mejor veas la presentación que amplia más estos cuatro pasos.

Artículo original: Slides presentation on Mobile Drupal @ drupal camp colorado

Recomendaciones de la semana 2009-07-20

Recomendaciones de la semana 2009-06-19

  • Si Tweetie fuera igual de rápido que TwitterFon y pudiera mostrar favoritos de otros twitters sería mi cliente favorito para iPhone/iTouch #
  • Cómo sincronizar un Nokia 5800 con Google Calendar http://tinyurl.com/mordvt (via @urruti) #
  • Tienes un teléfono #Nokia y no sabes donde conseguir programas? @arturogoga da buenas recomendaciones en este artículo http://tr.im/osVZ #
  • Evento #Android en #Barcelona el 27 de junio a partir de las 9h. Organizado por @androides http://bit.ly/pUGDV #
  • Otro evento móvil que vale la pena seguir: Mobile 2.0, 18 y 19 de Junio Más info en @mobile20 y #m20eu #
  • Diseñar la web móvil es más que solo adaptar al navegador. http://tr.im/oybn Algunos comentarios sobre el artículo de @Pablasso #webmovil #
  • La F1 ahora con app oficial para el iPhone. Puedes seguir la posición de los autos, banderas y demás en tiempo real :O http://tr.im/oCtq #
  • #iPhone OS 3.0 ya esta disponible para que lo descargues http://tr.im/oLai #
  • Probando la app de #Xing para iPhone/iPod Touch #
  • Desde cuando #Flickr Mobile muestra la opción "Photos taken nerby"? No la habia visto http://twitpic.com/7qpie #
  • #Tweetdeck para #iphone sorprende con la facilidad para manejar multiples cuentas de Twitter simultaneamente 😀 #
  • El lanzamiento de la #Acer One con #Android más que parecerme algo innovador o útil me parece otra estrategia mas de marketing #
  • Hoy termina el evento @mobile20, pueden seguirlo de cerca con la etiqueta #m20eu #
  • RTT @mobile20: Una app muy divertida: Last Call. 'Mide' cuanto has bebido y sabe cuando debes llamar a un taxi o a un abogado 🙂 #m20eu #
  • Un genial tutorial para comenzar con Objective C 2.0 http://tr.im/p46m (en) Prefiero las webapps pero este tutorial no tiene desperdicio #
  • Who has the biggest brain? lanza app gratuita para #iPhone http://tr.im/p4aV (también disponible para #Android) #

Diseñar la web móvil es más que solo adaptar al navegador

iPhone Transit Planner por illustir (cc-by)

iPhone Transit Planner por illustir (cc-by)

Esta semana pude leer un artículo en el blog de Pablasso llamado ¿Cómo debe ser el Internet para móviles? que es acerca de cómo WAP y WAP2 han quedado obsoletos con la llegada del iPhone de parte de Apple, y como él acertadamente menciona, ahora no hay tantas limitaciones de memoria o software como antes. Hasta aquí puedo darle la razón, con Apple y Android soportando HTML5 ¿quién quiere usar WAP?

Por otro lado termina el artículo con un par de comentarios en los que no estoy de acuerdo, vamos por partes:

Pablasso: En mi mundo ideal los móviles deberían de adaptarse a mostrar los contenidos lo más fielmente posible, y si no tienen la pantalla adecuada, entonces proveer aplicaciones para obtener esos contenidos por otros medios, como puede ser RSS

Es un error grave pensar que la web debe ser igual todo el tiempo y en todo lugar, especialmente  en el campo de los móviles.

Web móvil va más allá de adaptar al navegador, importan las capacidades del dispositivo así como también importa el contexto (lugar, hora, tarea, etc) en donde recibe la información, y para apoyar esto citó a la guía breve de web móvil de la W3C:

W3C: Es importante tener en cuenta que existen grandes diferencias entre usuarios móviles y usuarios fijos, como son los diferentes tipos de contenido que manejan, las capacidades de los dispositivos que utilizan (pantallas pequeñas) y el contexto en el cual el usuario recibe el contenido (por ejemplo, en el autobús).

Mostrar en el móvil exactamente lo mismo que en la PC no es siempre lo mejor, aunque también es cierto que un buen navegador, como Safari Mobile, puede ayudar mucho a navegar sobre esas webs no optimizadas para móviles y crear una mejor experiencia web que WAP o WAP2.

iPhone junto al iPod Touch son buenos dispositivos con un excelente navegador pero están muy lejos de competir contra una PC. En un día normal de navegación he llegado a bloquear Safari Mobile hasta 3 veces, no puedo cargar más de 2 webs “normales” (no adaptadas a móviles) y menos usar Flash.

De nuevo, la web móvil no es acerca de un navegador, hay que considera rendimiento (hardware), compatibilidad (software), velocidad de transferencia (conexión) y costo (de conexión, del móvil, etc.).

Pablasso: A menos que sea punto clave para tu negocio, yo no me preocuparía en ofrecer una versión web para móviles con navegadores inferiores al iPhone.

Tengo que aceptar estoy de acuerdo, si no es clave para tu negocio no debes preocuparte por desarrollarlo, porque para todo hay mercado y es bueno enfocarte en el tuyo. Por ejemplo, si el 90% de las visitas desde móviles provienen de iPhone ¿qué sentido tendría invertir tiempo y dinero en desarrollar una web WAP?

Sin embargo, no hay que olvidar que el enfoque de la web es lograr el mayor alcance posible, independientemente del medio, el dispositivo e incluso de limitaciones físicas. De allí la importancia de apegarse a estándares y no desarrollar solo para uno.

Más información sobre la web móvil

Recomendaciones de la semana 2009-06-12

Viernes de recomendaciones

Una vez más llegan las recomendaciones de la semana, buen  momento para explotar el viernes 😉

  • In South Korea, All of Life Is Mobile (Inglés). Aunque este artículode NY Times lo compartí al inicio de la semana en Twitter, quiero compartirlo de nuevo porque vale la pena leerlo. Es acerca de cómo el móvil se ha convertido en “la navaja suiza de la era digital” en países como Korea del Sur. Increible.
  • iCodeBlog (Inglés). Blog de programación para iPhone, es muy buena fuente de tutoriales y tips para el desarrollo de apps para iPhone. Actualiza regularmente (no satura tu bandeja) y el contenido es especial 🙂
  • MobileDrupal (Inglés). Otro blog bastante enfocado en desarrollo de sitios web junto con Drupal. Si trabajas con Drupal es muy buena referencia para iniciar con la web móvil.