Abstract
Debido al gran aumento de dispositivos móviles en el mundo, y el uso que los usuarios le dan, es de gran importancia desarrollar estrategias para que los sitios web sean adaptables para cada uno de ellos, incluso anticipándose a los dispositivos que aún no han salido al mercado.
Afrontar esta nueva realidad nos obliga a pensar primero en qué es lo que queremos transmitir para cada uno de los dispositivos y luego pensar en un diseño unificado, para que el usuario tenga una experiencia única sin importar desde que dispositivo accede.
Claramente, es importante encontrar una solución que nos ayude a enfrentar los desafíos teniendo en cuenta las principales recomendaciones estratégicas de los expertos y nos facilite su implementación.
En este artículo se analizan las ventajas de implementar un diseño web adaptable y se sugieren estrategias para contrarrestar las desventajas que se plantean. De esta forma, se entiende que esta estrategia de diseño es la mejor solución para el desarrollo de sitios web accesibles desde cualquier dispositivo.
Índice
- Introducción
- Por qué es necesario una web para dispositivos móvil
- Las principales soluciones
- Por qué usar Diseño Web Adaptable
- Conclusiones
- Bibliografía
1. Introducción
Desde hace algunos años el uso de dispositivos móviles ha aumentado vertiginosamente y ya no solo sirven para hacer llamadas. Actualmente los individuos lo llevan consigo casi la totalidad del tiempo. Los usuarios los utilizan con variados fines: para entretenimiento, manejo de información o compartir documentos entre otras cosas. Incluso el 81% de ellos se conecta a Internet al menos una vez a la semana1. Esto nos indica que cada vez es más necesario tener una buena presencia web y que el sitio genere una buena experiencia para todos los usuarios, ya sean para los que ingresan desde un escritorio o los que acceden desde un móvil, tanto desde un celular como de una Tablet.
En base a esto datos, es importante sentarse a planificar cuales van a ser nuestras estrategias a la hora de llevar a la web nuestros contenidos, productos tangibles o servicios. A su vez, es fundamental definir cómo vamos a implementar dichas estrategias.
El propósito de este artículo es evaluar la importancia del desarrollo de un sitio web que sea visible correctamente en los distintos dispositivos móviles y cómo el diseño web adaptable, o flexible, provee una solución adecuada para esta implementación. El diseño web adaptable es el enfoque que sugiere que tanto el desarrollo como el propio diseño deben responder al comportamiento del usuario y al tamaño de pantalla, la plataforma y la orientación. También tiene la intención de remarcar que la correcta visualización no es solo un problema de la tecnología, sino también es un problema de planificación de estrategias. Hay que pensar primero en el “qué”, el “por qué” y el “para qué” antes de decidir el “cómo”.
Este artículo está organizado de la siguiente manera. En la sección dos se presentan los datos estadísticos sobre la cantidad de dispositivos móviles que existen en la actualidad y sus diversos usos. También explica cuáles son los desafíos a la hora de pensar las estrategias para llevar a cabo un sitio web adecuado para los distintos dispositivos y cuáles son las recomendaciones más importantes a tener en cuenta. En la sección tres se exponen las principales soluciones que existen para poder implementar las estrategias planificadas. En la sección cuatro se presentan las razones por las cuales el diseño web adaptable puede ser la mejor opción para el desarrollo de web móvil, detallando las ventajas, desventajas y posibles mejoras de esta herramienta. Finalmente en la sección cinco se presentan las conclusiones.
2. Por qué es necesario una web para dispositivos móviles
2.1 La actualidad en números
En los últimos años, se han realizado un importante número de investigaciones vinculados a la cantidad de celulares que hay en el mundo y cómo los usuarios los utilizan2.
En 2011, el estudio de eMarketer reflejó que 237.2 millones de personas en el mundo utilizaban teléfonos móviles, de los cuales 90.1 millones de los usuarios tenían un Smartphones3.
Actualmente, los teléfonos inteligentes han adquirido una gran importancia en la vida diaria de los usuarios, a tal grado que el 80% nunca sale de su casa sin su teléfono4, incluso el 39% admitió que lleva su Smartphone al baño1.
Hoy en día los teléfonos ya no sólo sirven para hacer llamadas: el 62% de los usuarios con Smartphone de Estados Unidos se han conectado a Internet todos los días en la última semana4, y el 81% de las personas del mundo se conectan a Internet al menos una vez a la semana1. Incluso, el porcentaje de usuarios que realizan transacciones vía dispositivos móviles ha aumentado a un 53% quienes por lo menos han realizado una compra como resultado de una búsqueda en su Smartphone. A su vez, el 70% utiliza su dispositivo móvil mientras se encuentra comprando en las tiendas físicas5.
Según Compuware Corporation más del 80% de los usuarios web que acceden desde dispositivos móviles a una página web lo volverían a hacer con frecuencia si su experiencia ha sido rápida y confortable. El 71% de los usuarios mundiales de Internet móvil esperan que su experiencia en los sitios web sea tan ágil en sus teléfonos móviles como en los dispositivos de escritorio que utilizan en sus casas o trabajos. El mismo estudio también refleja que hasta el 57% de los usuarios que han accedido a sitios que no están adaptados para dispositivos móviles no recomendarían el comercio, incluso el 40% ha visitado el sitio web de la competencia6.
En contraposición a estos números sólo el 33% de las empresas tienen un sitio web móvil optimizado para los distintos dispositivos que existen7, lo cual nos hace preguntarnos qué es lo que está pasando y cómo queremos que sea la experiencia de nuestros clientes, o futuros clientes, cuando acceden a nuestro sitio web desde un dispositivo móvil.
Considerando esta información, es difícil no pensar en querer un sitio web que sea accesible desde los distintos dispositivos, ya que es muy probable que existan usuarios, clientes o futuros clientes, que deseen ingresar desde ellos. Antes de ponerse a pensar cómo lo vamos a hacer, ese necesario saber a que nos enfrentamos y qué tenemos que resolver para hacer frente a esta decisión.
2.2 Los desafíos
Si consideramos necesario la implementación de un sitio adaptable para todos los dispositivos móviles, el primer desafío que tenemos que afrontar es pensar nuestro sitio como una unidad, como un solo sitio, sin importar desde donde se acceda. No quiere decir que sea exactamente igual, sino que la experiencia sea única y la misma, tanto si ingresa desde una PC o desde un móvil. El usuario tiene que percibir que está en el mismo sitio. Hay que considerar que muchas de las personas que entran desde celulares también acceden desde computadoras de escritorio. Es fundamental proporcionar un diseño unificado.
Otro desafío significativo es maximizar la experiencia del usuario según sea el dispositivo desde el que ingresa. No se comporta igual una persona que entra desde un escritorio que uno que accede desde un móvil, su contexto, sus tiempos y sus intereses pueden ser distintos. Un ejemplo es que con los dispositivos que tienen un mouse conectado la navegación no es la misma que cuando se navega con el dedo en dispositivos touch, la experiencia cambia, incluso los usuarios de iOS y Android usan los dispositivos de forma diferente. Es difícil a veces combinar una experiencia máxima para el dispositivo y logra un diseño completamente unificado. Es importante entender cómo se utiliza cada uno de los dispositivos para facilitar el acceso a la información. Sobre este tema reflexiona Wroblewsk: “… La gente sigue pensando en cómo escribir para artículos que van a ser impresos. Comienzan con pensar en la impresión, y luego cómo meter eso en un sitio web, a continuación, cómo meter eso en un dispositivo móvil…”8.
También concluye que: “… No es un problema de la tecnología, es un problema de estrategia. Tenemos que explicarle a la gente cómo estos sistemas funcionan y por qué se deben tener en cuenta. Pensar en el ‘por qué’ antes de decidir que es ‘lo que’ hay que hacer…”8.
Por lo tanto, es importante seguir un esquema de trabajo:
- Pensar la idea, y qué información considero relevante
- Pensar las piezas que quiero usar para transmitir la información
- Pensar cuáles de estas piezas son más adecuadas para cada uno de los dispositivos y cuál es su distribución óptima.
2.3 Recomendaciones
Algunas de las recomendaciones que hace Google en su sitio web To go mo (Haz tu web móvil) son9:
- Los usuarios con dispositivos móviles suelen estar ocupados y aprovechan cualquier momento libre para realizar tareas online. Es importante proveer un diseño que permita cargar el sitio rápidamente y que facilite la lectura selectiva del contenido.
- Todos los usuarios usan los dedos al utilizar los dispositivos móviles, sobre todo los pulgares, es importante diseñarel sitio web para que sea cómodo navegar con ellos.
- Los sitios adaptados para móviles comunican el mensaje de la forma más cómoda posible para la vista a fin de facilitar su lectura.
- Lo ideal es que el sitio para móviles funcione en todos los dispositivos y en todas las orientaciones de pantalla.
- Un sitio para móviles de calidad se centra en el usuario, es decir, se diseña teniendo en cuenta su opinión. Preguntarle a los usuarios lo que desean en un sitio web para móviles es una muy buena política para que el diseño y la información satisfaga las necesidades de los clientes.
Estas recomendaciones nos hace darnos cuenta que claramente los usuarios de los dispositivos móviles no se comportan igual cuando acceden desde el escritorio, por ende no podemos brindarles la misma solución. Si bien la información es la misma, la interacción no lo es. Se necesita estudiar cómo vamos a hacer para transmitir nuestro contenido de la mejor manera y cómo vamos a solucionarlo para cada uno de los dispositivos.
3. Las principales soluciones
Para hacer frente a los desafíos, maximizar las recomendaciones y lograr una buena reputación con los usuarios de dispositivos móviles, sin descuidar los usuarios de escritorio, existen varias opciones diferentes para implementar sitios adaptables.
Stormer plantea tres tipos de soluciones para la adaptación de las páginas web10. Ellos son:
- Volver a escribir la página: esta solución implica reescribir cada una de las páginas para cada uno de los dispositivos. Se posee un sitio por cada dispositivo, lo cual permite optimizar la carga de las imágenes y que el diseño sea específico para cada dispositivo. Como gran desventaja tiene que un cambio impacta en cada uno de los sitios y hay que implementarlo en todos. Esta solución está basada en que cuando el usuario ingresa, el servidor detecta el dispositivo desde el cual entra y lo redirecciona al sitio adecuado. Por ejemplo, cuando se ingresa desde un celular a la página de Facebook lo redirecciona a m.facebook.com.
- Utilizar XML para transformar la página: esta solución sirve para aquellos sitios que se encuentra escritos en el estándar XHTML o directamente creados a partir de fuentes XML. Esta metodología permite que se muestre sólo lo qué se desea mostrar según el dispositivo mediante reglas que definen que información se muestra en cada caso. Como ventaja tiene que se maneja solo un archivo más y no todo un sitio para cada uno de los dispositivos. Sin embargo, si la diferencia entre sitios es muy grande, la administración de ese único archivo se hace más difícil. Esta solución está planteada para sitios con fuentes XML, lo cual hace que si nuestro sitio no las tiene tengamos que crearlas, y esto puede llevar mucho tiempo y ser muy costoso.
- Adaptar la página: basado en los estándares de W3C (Word Wide Web), se desarrollan distintos archivos de estilo para cada dispositivo. Se puede definir el tamaño de letra, si se ve o no, los colores, etc., sobre la misma página. Esto implica que no es necesario duplicar la información como en la primera solución, y los archivos a gestionar son más amigables que los de la solución XML. Aplicarlo a nuestro sitio es una tarea muy sencilla, tanto en aprenderlo como en implementarlo. En la solución se especifican qué estilos se van a cargar según el dispositivo detectado.
La tercera solución que plantea Stormer era el comienzo de lo que hoy se conoce como diseño web adaptable. Cumple básicamente con la misma idea de que el diseño se adapte mediante los estilos a los distintos dispositivos. Desde el 2006 hasta la fecha se ha avanzado bastante con esta solución y cada vez se hace más sencilla de aplicar en el desarrollo de las web para móviles. El estudio de Stormer se basa en la versión de CSS 2 (Cascading Style Sheets, Hoja de estilos anidadas) que era la que se encontraba vigente a esa fecha. En noviembre de 2011 fue publicada la versión 3 que refuerza el uso de media queries (consultas sobre el medio del cual se accede). En ella se creó un mecanismo de consulta multimedia extremadamente robusto para identificar no sólo los tipos de medios del cual se accede, sino que también inspecciona las características físicas de los dispositivos y navegadores que acceden a nuestro contenido11.
Otra opción existente es la de la creación de aplicaciones nativas para elmóvil. Un ejemplo es la aplicación de Facebook, donde no es necesario ingresar a un navegador web para acceder a la información. Esta es otra solución que no aplica al diseño web ya que es una decisión a nivel de comunicación que contiene otras implicancias y otros estudios.
4. Por qué usar Diseño Web Adaptable
Según el análisis en la sección 2, la tendencia es el desarrollo de sitios web accesibles para distintos dispositivos. Esto nos lleva a pensar cuáles de las soluciones posibles, planteadas en la sección anterior, es la mejor, o por lo menos cuál nos conviene más.
Google, en su sitio web para desarrolladores, les recomienda a los webmasters seguir las mejores prácticas de la industria en el diseño web adaptable. Hace referencia e hincapié en que el código HTML sea el mismo para todos los dispositivos y que sólo se utilice las media queries del CSS para decidir la mejor representación para cada uno de ellos12.
A continuación planteamos las ventajas y desventajas de esta solución y por qué deberíamos utilizarla.
4.1 Ventajas
Marcotte plantea que en base a su experiencia, las media queries son altamente destacables. Nos ayuda a ofrecer servicios condicionales de CSS basados en la capacidad del dispositivo que se encuentra visitando nuestro sitio, lo que nos permite adaptar con más detalle el diseño del entorno a la lectura del usuario11.
En su libro hace referencia a que una gran ventaja es que el diseño flexible está mejor preparado para los dispositivos que aún no se han puesto en marcha. Hace unos años mencionar “Tablet” podría significar iPad, pero ahora existe gran variedad de ellas, así como también dispositivos de siete pulgadas como el GalaxyTab. Incluso dispositivos como Kindle y Nook están obteniendo adeptos y aumentando la cantidad de navegadores desde dispositivos pequeños. Es muy difícil mantenerse al día con cada una de las diferentes resoluciones que entran al mercado. Una base flexible nos permite una visión separada de la focalización de resoluciones individuales y nos da un punto de vista más amplio que proporcione una mejor adaptación de nuestros diseños para dispositivos que ni siquiera imaginamos todavía11. “Los diseñadores puede hacer más que responder a los problemas de hoy. Se pueden anticipar al mañana”13. Esto nos facilita mucho más el trabajo que tener un sitio, o varios, implementados con la primera solución. Nos evita tener que crear un sitio para Smartphone, uno para Tablet, otro para Kindle, etc.
Otra ventaja de esta solución es que se utiliza una única URL, lo cual hace que les sea más sencillo a los usuarios la interacción, el compartir y enlazar el contenido. Una URL única ayuda a los algoritmos de Google a asignar las propiedades de indexación de la información. Esta mejora en la eficiencia de rastreo puede ayudar a indexar más contenido del sitio y así mantenerlo actualizado para optimizar las búsqueda de los usuarios y posicionarlo mejor en los resultados. Tampoco es necesaria la redirección para poder llegar a la vista optimizada para móviles, lo cual reduce el tiempo de carga de la página14.
En lugar de adaptar los distintos diseños de forma individual para cada uno de los dispositivos, podemos tratarlos como facetas de la misma experiencia. Ahora más que nunca, tenemos la necesidad de diseñar el trabajo para ser visto a lo largo de una gran cantidad de dispositivos diferentes. El diseño web adaptable nos ofrece un camino a seguir, lo cual nos permite diseñar para el flujo y reflujo de la información15.
Otra gran ventaja es que se puede implementar en un sitio existente sin que afecte la visión de escritorio. Con solo agregar un archivo con poca información ya se pueden empezar a ver los cambios. Esto hace que se pueda trabajar de forma sencilla e iterativa sobre la solución existente viendo los cambios al instante.
4.2 Desventajas
Una de las principales desventajas de esta solución es que mientras que el cambio de tamaño de una imagen para dispositivos móviles puede ser muy simple, si el tamaño de la imagen original está pensado para dispositivos de gran tamaño, podría aumentar significativamente el tiempo de descarga y ocupar espacio innecesariamente16. Una opción que se plantea para minimizar el tiempo de descarga en dispositivos móviles es resolver en el lado del servidor que imagen mostrar. Mediante la programación web, como en el lenguaje PHP, se puede consultar desde que tipo de dispositivos se está accediendo y de esta forma decidir qué imagen cargar. Si se está accediendo desde un dispositivo móvil se puede cargar una imagen más chica que si fuera desde un escritorio. Esto resuelve el problema de la carga, pero exige que existan dos versiones de las imágenes y que ocupe más espacio. Si la carga de contenido está prevista para esto, ya se puede establecer que cuando se suba una imagen se guarde una versión para móvil, lo cual facilita la carga de contenido para luego ser mostrado. Si bien ocupa espacio y duplica el contenido no es tan grave como enlentecer innecesariamente la carga del sitio desde un dispositivo móvil.
Otra desventaja es que muchas veces se esconde contenido a la hora de ser mostrado en un dispositivo móvil, que se imprime pero no se muestra. Esto también genera que el sitio demore más en cargar por datos que no se van a mostrar. Al igual que como se resuelve el tema de las imágenes, se puede resolver del lado del servidor haciendo las consultas necesarias y descargando sólo la información que se va a visualizar.
Resolver estas principales desventajas del lado del servidor agrega un poco más de complejidad a la solución, que por sí sola era sencilla. Es necesario evaluar el costo/beneficio de implementar la solución en el servidor, quizás el sitio carga más lento pero casi imperceptible para el usuario o no tan grave como para generarle una mala experiencia.
5. Conclusiones
De las opciones planteadas, el diseño web adaptable es la solución que probablemente se ajuste mejor a nuestras necesidades. Su implementación es la más sencilla de todas y puede aplicarse a cualquier sitio, sin importar en que lenguaje esté escrito. Las grandes compañías de internet como Google, recomiendan esta solución y la promueven como una buena práctica a seguir, además de las ventajas que ofrece a la hora de aparecer en los buscadores. Empezar a trabajar de forma iterativa con esta solución nos ayuda a ver de forma inmediata los cambios en nuestro sitio existente, sin tener que desarrollar todo desde cero.
Por lo tanto, podemos concluir que es indispensable que se desarrollen sitios web que sean accesibles desde cualquier dispositivo y que la mejor solución para implementarlos es usar el diseño web adaptable.
Bibliografía
| 1 | GoogleMobileAds. “The Mobile Movement: Understanding Smartphone Consumers”. (2011) [Online]. Disponible: http://www.youtube.com/watch?feature=player_embedded&v=CjUcq_E4I-s ↑Volver |
| 2 | Think with Google. “Facts & Stats”. (2012) [Online]. Disponible: http://www.thinkwithgoogle.com/insights/facts/media-platform/ ↑Volver |
| 3 | EMarketer. “Two in Five Mobile Owners Use Internet on the Go”. (2011) [Online]. Disponible: http://www.emarketer.com/Article/Two-Five-Mobile-Owners-Use-Internet-on-Go/1008553 ↑Volver |
| 4 | Our Mobile Planet. “Our Mobile Planet: United States. Understanding the Mobile Consumer”. (2012) [Online]. Disponible: http://services.google.com/fh/files/blogs/our_mobile_planet_us_en.pdf ↑Volver |
| 5 | Think with Google. “The Mobile Movement”. (2011) [Online]. Disponible: http://www.thinkwithgoogle.com/insights/library/studies/the-mobile-movement/ ↑Volver |
| 6 | Compuware. “What Users Want from Mobile”. (2011) [Online]. Disponible: http://e-commercefacts.com/research/2011/07/what-usrs-want-from-mobil/19986_WhatMobileUsersWant_Wp.pdf ↑Volver |
| 7 | Think with Google. “Global Insights on Smartphone Users & Mobile Marketers”. (2011) [Online]. Disponible: http://www.thinkwithgoogle.com/insights/library/studies/global-insights-smartphone-users-and-the-mobile-marketer/ ↑Volver |
| 8 | Wroblewski, L. “An Event Apart: Adaptive Web Content”. (2012) [Online]. Disponible: http://www.lukew.com/ff/entry.asp?1658 ↑Volver |
| 9 | Mobilize your site now. “Ventajas de adaptarse al móvil”. (2013) [Online]. Disponible: http://www.howtogomo.com/es/d/ventajas-movil ↑Volver |
| 10 | Stormer, H., “Exploring Solutions for a MobileWeb,” Proceedings of the 8th IEEE International Conference on E-Commerce Technology and the 3rd IEEE International Conference on Enterprise Computing, E-Commerce, and E-Services (CEC/EEE’06), pp. 75, junio 2006. ↑Volver |
| 11 | Marcotte, E. Responsive web design. New York: A Book Apart, 2011. ↑Volver |
| 12 | Google Developers. “Building Mobile-Optimized Websites”. (2012) [Online]. Disponible: https://developers.google.com/webmasters/smartphone-sites/?hl=es ↑Volver |
| 13 | Smashing Magazine. “Preparing Websites For The Unexpected”. (2013) [Online]. Disponible: http://mobile.smashingmagazine.com/2013/01/14/preparing-websites-for-the-unexpected/ ↑Volver |
| 14 | Google Developers. “Building Mobile-Optimized Websites (Details)”. (2012) [Online]. Disponible: https://developers.google.com/webmasters/smartphone-sites/details ↑Volver |
| 15 | A list apart. “Responsive Web Design”. (2010) [Online]. Disponible: http://alistapart.com/article/responsive-web-design ↑Volver |
| 16 | Smashing Magazine. “Responsive Web Design: What It Is and How To Use It”. (2011) [Online]. Disponible: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ ↑Volver |
archivoDescargar versión en PDF
