Desarrollos web en dispositivos móviles

Sep-Oct, 2013  |  Tendencias

Del Adaptive al Responsive web design

Actualmente, el cliente da por hecho que toda empresa cuenta con una página de internet en la que espera encontrar la razón de ser de la compañía, sus ventajas competitivas, información técnica de los productos y/o servicios que ofrecen, formas de contacto, imágenes, etcétera. Lo anterior, con la confianza de aclarar con pocos clics cualquier duda y así tomar una decisión de compra. Por ese motivo, no contar con una no es opción, al contrario, hay que pensar en las características con las que debe cumplir para alcanzar el nivel que requiere el mercado. Actualmente, no basta con contar con un sitio, sino que hay que considerar factores estratégicos; uno de los más importantes que debe tomarse en cuenta es que la página sea visible en dispositivos móviles, sobre todo en teléfonos inteligentes, porque, tan sólo en México, el 41% de los 40.9 millones de internautas se conectan por medio de ellos (Figura 1).



Figura 1. Dispositivos con los que se conectan a internet los mexicanos.
Fuente: IAB México, Interactive Advertising Bureau. Estudio de Consumo de internautas en México 2013.


Por ello, en Tu Interfaz de Negocios, ofreceremos los elementos para apoyarte en la resolución de cómo adecuar una página de internet a dispositivos móviles, porque hay diversas opciones, y por el momento, no todos los proveedores tendrán la posibilidad de ofrecerte cualquiera de ellas, ya que es un tema relativamente nuevo en el mundo, ya que los conceptos formales surgieron en 2010.

En caso de que no cuentes con una página, primero considera tu presencia en dispositivos móviles; posteriormente, en computadoras portátiles; finalmente, en las de escritorio. Es decir, la información que se desarrolle debe pensarse, primero, para el diseño y distribución de los elementos en una resolución para teléfonos inteligentes o tabletas, considerando que se tiene menor espacio.

Respecto al diseño de páginas de internet para dispositivos móviles, existen las siguientes corrientes: Adaptive web design y Responsive web design, ambas, opciones adecuadas aunque responden a necesidades diferentes dependiendo del mercado al que va dirigida. Estos conceptos han sido objeto de discusión y análisis en diversos foros de expertos desde hace algún tiempo, sobre todo el de Adaptive web design; sin embargo, fue Ethan Marcotte, diseñador y desarrollador web, quien en 2010 impulsó y explicó el de Responsive web design, interesándose, principalmente, en la combinación entre un buen diseño y un código limpio que aunque ya se vislumbraba esta necesidad, es hasta ahora que se han conjuntado diversos elementos de conocimiento y tecnología para responder profesional e integralmente a ella.

Visibilidad móvil

Aunado a esas dos corrientes, se cuenta con una tercera opción que es la que básicamente deberían tener ya todas las páginas de internet: la Visibilidad móvil, la cual se refiere a aquella que garantiza que todos sus elementos se visualicen correctamente en cualquier dispositivo móvil, independientemente de si se acopla específicamente a la resolución de la pantalla o no. Cuenta con programación y herramientas que permiten la lectura en los navegadores y sistemas operativos más comunes. Por ejemplo, si algún elemento está montado en flash, herramienta de animación que no es visible para todos los navegadores y sistemas operativos, definitivamente recomendamos rediseñarla.

Si ya contamos con una página, puede optimizarse adecuando su programación de tal forma que los elementos sean visibles en cualquier dispositivo, para lo que se tendrán que evitar lenguajes y herramientas de diseño no leídas universalmente o dar dos opciones al servidor, una para dispositivos móviles y otra para computadoras de escritorio y laptops. Por ejemplo, si el logotipo está animado, es muy probable que no se visualice en dispositivos móviles, lo que ocasiona que la página pierda completamente la identidad, sin embargo, se le puede dar la indicación al servidor de que en tales casos muestre el logotipo en imagen, así no se sacrifica el diseño, porque en las computadoras el logotipo sí se moverá. Incluso, si se muestra un mapa de ubicación de las sucursales de una empresa, cuando el usuario lo consulta desde un teléfono inteligente con geolocalización, se mostrará la sucursal más cercana a él mejorando la experiencia del usuario. Finalmente, esto dependerá de las necesidades del negocio, de las del mercado y de las recomendaciones y conocimientos del proveedor; sin embargo, como no se adapta a las resoluciones bajas de un dispositivo móvil, es factible que el usuario recurra constantemente a aumentar las de su navegador para visualizar el texto cómodamente.

Adaptive web design

Este tipo de desarrollo implica contar con una página de internet exclusiva para dispositivos móviles, es decir, elegir el dispositivo y el sistema operativo en el que nos interesa se visualice, ya sea Android, iOS, Windows Phone 8 u otros. Con esta elección, el diseño se realizará con base en la resolución requerida.

El Adaptive web design se asemeja a la Visibilidad móvil debido a que todos sus elementos pueden verse en dispositivos móviles, aunque en este caso el diseñador se asegura de que aquellos se observen a buen tamaño respecto a la resolución que se escogió, por lo que contarás con dos páginas de internet, siendo el servidor el que decidirá cuál mostrar de acuerdo al dispositivo que se utiliza; así, se ofrece a los clientes la información adecuada sin sacrificar diseño ni visibilidad, sin embargo, hay que tomar en cuenta que si se opta por una resolución pequeña, digamos para un teléfono inteligente; en una resolución mayor como la de una tableta, tendremos grandes espacios en blanco.

Responsive web design

Es un desarrollo de internet, que gracias a su programación, se adapta a todo tipo de resolución de cualquier navegador actual y pantalla; también se adecúa a la visualización vertical u horizontal. Con él se garantiza al cliente una experiencia agradable en visibilidad y navegabilidad. El tamaño de las imágenes, el de los botones de menús y el de las ligas, será adecuado para observarlas en pantallas pequeñas considerando que son táctiles.

Este tipo de diseño es como si se contara con una página para cada resolución de pantalla, y a pesar de que la resolución no siempre es proporcional al tamaño de la pantalla, podemos decir que una página de internet en Responsive web design se adapta a cualquiera, así se trate de un teléfono inteligente, una tableta o de una computadora de escritorio. Para ello, se programa de acuerdo a patrones de movimiento ya preestablecidos, de los cuales se puede elegir el más conveniente para mostrar la información de la empresa (Figura 2).



Figura 2. Patrones del Responsive web design.
Fuente: Design Shack y LukeW.


El Responsive web design está elaborado en HTML 5, lenguaje que desde 2004 se ha desarrollado con el objetivo de que los navegadores (Internet Explorer de Microsoft, Firefox de Mozilla, Chrome de Google, Safari de Mac, entre otros) interpreten el código de una manera idéntica y muestren lo mismo al internauta, lo que actualmente no sucede, pues las páginas pierden forma o diseño al leerlas en un navegador para el que no se diseñaron. El único inconveniente de esa programación es que Internet Explorer, uno de los navegadores más empleados en el mundo, no lo lee correctamente en sus versiones 8 y menores, es hasta la versión 9 que incorporó los parámetros universales de interpretación del HTML 5. Aún cuando desde 2012, Google Chrome superó a Internet Explorer en usuarios en México y en el mundo (Figura 3) , existe un gran número de personas que usan el navegador que ya se encuentra predeterminado en el sistema operativo, usualmente el Explorer de Microsoft, que por diversas fallas disminuye su número de usuarios, aumentando así los de Chrome y Firefox. Tomando en cuenta que la liberación del HTML 5 se anunció oficialmente en diciembre de 2012, todavía hay mucho por descubrir y seguramente la interpretación y visibilidad de las páginas mejorará por parte de los navegadores en los próximos años.



Figura 3. Distribución geográfica de uso de los navegadores, donde se rellena el país con el color del navegador más usado en el mismo.
Fuente: StatCounter.


Toma de decisión

Será necesario realizar un análisis de la programación de una página de internet y de la distribución del diseño, para tener claro si los elementos se hacen muy pequeños en un dispositivo móvil, cuáles no son visibles y si hay manera de programarlos correctamente, con lo que se decidirá el costo-beneficio conveniente para el mercado y la inversión que se realizará.

Para elegir cómo presentarla idóneamente en dispositivos móviles, primero se analizará el mercado al que van dirigidos los productos y/o servicios de la compañía, es decir, conocer la situación tecnológica y de comunicación de los compradores: si se cuenta con una computadora para uso individual o colectivo, si es de escritorio o portátil y cuál es el espacio de trabajo, si el mercado es nacional o internacional, si los países a los que se enfoca son o no de primer mundo. Todo, para tener claridad en las necesidades y hábitos de compra del cliente.

Posteriormente, se examinará la visibilidad, lectura, programación e información de la página de internet. Mejor dicho, que los elementos de la misma se vean correctamente en los dispositivos móviles, que el tamaño de los elementos y del texto sea adecuado y legible. La información siempre deberá optimizarse, siendo lo más concreta posible y útil para el mercado. Otro punto importante es saber qué tan compatible es el lenguaje de la página con los diferentes navegadores; aunado a la indexación natural básica que debe tener en los buscadores. Este análisis es conveniente que se haga con el apoyo del proveedor.

Así, dependiendo del mercado y del estado de la página de internet actual, se podrá tomar la decisión de qué hacer:

Adecuar la programación o visibilidad móvil. Viable cuando ya se tiene página de internet, cuando los cambios que requiere son pequeños y el mercado no tiene gran demanda de uso de dispositivos móviles. La inversión va de acuerdo al análisis y a las herramientas o lenguajes que se deban usar para la adaptación.

Hacer una página de internet exclusiva para dispositivos móviles o adaptive web design. Alternativa cuando el mercado ya tiene más demanda de navegar en dispositivos móviles y la información es tanta que lo mejor es resumirla, para que el internauta encuentre rápidamente las características del producto.

Tener una sola página de internet para todos los dispositivos o responsive web design. Para las empresas cuyo mercado demanda la navegación constante a través de dispositivos móviles para desempeñar sus labores. La inversión es más alta por el tipo de programación, lo que se compensa considerando que es como tener una página para cada resolución de pantalla.

Beneficiarse con una página de internet es una estrategia en el proceso de incorporación a un mercado cada vez más competitivo, en el que se busca ir a la par del mismo, mostrando madurez en cuestiones tecnológicas y el alcance que podría tener la exposición de nuestros productos en prácticamente cualquier plataforma móvil.


Deja un comentario

Todos los comentarios pasan por un proceso de validación antes de ser publicados.


Deseo recibir información