Universidad ORT Uruguay

Facultad de Ingeniería

Diseño web adaptable en el

desarrollo de Web Móvil

Entregado como requisito para la aprobación del Taller Artículo Técnico

Bernardo García – 158668

Docente: Gerardo Matturro

2013

Abstract

Debido al gran aumento de dispositivos móviles en el mundo, y el uso que los

usuarios le dan, es de gran importancia desarrol ar estrategias para que los sitios

web sean adaptables para cada uno de el os, 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

desarrol o de sitios web accesibles desde cualquier dispositivo.

2

Índice

!

1.#Introducción#.................................................................................................................................#4!

2.#Por#qué#es#necesario#una#web#para#dispositivos#móvil#.................................................#4!

2.1#La#actualidad#en#números#...............................................................................................................#4!

2.2#Los#desafíos#..........................................................................................................................................#5!

2.3#Recomendaciones#..............................................................................................................................#6!

3.#Las#principales#soluciones#......................................................................................................#6!

4.#Por#qué#usar#Diseño#Web#Adaptable#...................................................................................#8!

4.1#Ventajas#.................................................................................................................................................#8!

4.2#Desventajas#..........................................................................................................................................#9!

5.#Conclusiones#................................................................................................................................#9!

Bibliografía#.....................................................................................................................................#10!

3

1. Introducción

Desde hace algunos años el uso de dispositivos móviles ha aumentado

vertiginosamente y ya no solo sirven para hacer l amadas. Actualmente los

individuos lo l evan 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 semana [1]. 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 l evar 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 desarrol o 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 desarrol o 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 l evar 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 desarrol o de web móvil, detal ando 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

utilizan [2].

En 2011, el estudio de eMarketer reflejó que 237.2 mil ones de personas en el

mundo utilizaban teléfonos móviles, de los cuales 90.1 mil ones de los usuarios

tenían un Smartphones [3].

4

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éfono

[4], incluso el 39% admitió que l eva su Smartphone al baño [1].

Hoy en día los teléfonos ya no sólo sirven para hacer l amadas: el 62% de los

usuarios con Smartphone de Estados Unidos se han conectado a Internet todos los

días en la última semana [4], y el 81% de las personas del mundo se conectan a

Internet al menos una vez a la semana [1]. 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ísicas [5].

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

competencia [6].

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 existen [7], 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 el os. 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

5

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:

1. Pensar la idea, y qué información considero relevante

2. Pensar las piezas que quiero usar para transmitir la información

3. 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) son [9]:

• 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 el os.

• 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 pantal a.

• 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 web [10].

Ellos son:

6

• 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 aquel os

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 l evar mucho tiempo y ser muy costoso.

• Adaptar la página: basado en los estándares de W3C (Word Wide Web), se

desarrol an 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 sencil a, 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

sencil a de aplicar en el desarrol o 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 contenido [11].

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.

7

4. Por qué usar Diseño Web Adaptable

Según el análisis en la sección 2, la tendencia es el desarrol o de sitios web

accesibles para distintos dispositivos. Esto nos l eva 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 desarrol adores, 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 ellos [12].

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 detal e el diseño del entorno a la lectura del usuario [11].

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 el as, 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ía[11]. “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 sencil o 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 l egar a la vista optimizada para móviles, lo cual

reduce el tiempo de carga de la página [14].

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ón

[15].

8

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

sencil a 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

innecesariamente[16]. 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 sencil a. 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 sencil a 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 desarrol ar todo

desde cero.

Por lo tanto, podemos concluir que es indispensable que se desarrol en sitios web

que sean accesibles desde cualquier dispositivo y que la mejor solución para

implementarlos es usar el diseño web adaptable.

9

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

[2] Think with Google. "Facts & Stats". (2012) [Online]. Disponible:

http://www.thinkwithgoogle.com/insights/facts/media-platform/

[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

[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

[5] Think with Google. "The Mobile Movement". (2011) [Online]. Disponible:

http://www.thinkwithgoogle.com/insights/library/studies/the-mobile-movement/

[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

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

[8] Wroblewski, L. "An Event Apart: Adaptive Web Content". (2012) [Online].

Disponible: http://www.lukew.com/ff/entry.asp?1658

[9] Mobilize your site now. "Ventajas de adaptarse al móvil". (2013) [Online].

Disponible: http://www.howtogomo.com/es/d/ventajas-movil

[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.

[11] Marcotte, E. Responsive web design. New York: A Book Apart, 2011.

[12] Google Developers. "Building Mobile-Optimized Websites". (2012) [Online].

Disponible: https://developers.google.com/webmasters/smartphone-sites/?hl=es

[13] Smashing Magazine. "Preparing Websites For The Unexpected". (2013)

[Online]. Disponible:

http://mobile.smashingmagazine.com/2013/01/14/preparing-websites-for-the-

10

unexpected/

[14] Google Developers. "Building Mobile-Optimized Websites (Details)". (2012)

[Online]. Disponible: https://developers.google.com/webmasters/smartphone-

sites/details

[15] A list apart. "Responsive Web Design". (2010) [Online]. Disponible:

http://alistapart.com/article/responsive-web-design

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

11