5 formas de adaptar tu web a dispositivos móviles

5 formas de adaptar una web a dispositivos móviles

Una web que se adapte a cualquier tipo de dispositivo se está convirtiendo en un aspecto imprescindible para poder ofrecer al usuario una experiencia de navegación óptima, además de ser un factor obligatorio si queremos que nuestra web se posicione en los puestos más altos del buscador de Google.

Un buen motivo por el cual un negocio online debería tener una web adaptada a smartphones o tablets, lo encontramos en el continuo crecimiento del mobile commerce.

Según afirma la consultora en investigación de mercados GFK, el número de compradores a través de smartphones ha crecido un 75% en el último semestre de 2014, y se ha producido un aumento del 24% de los internautas que llevan a cabo compras online, especialmente en usuarios de smartphones y tablets, quienes de manera conjunta, han crecido un 61%.

Segunda Oleada del Observatorio eCommerce

 

5 formas de adaptar una web a dispositivos móviles

 

1. Crear diferentes versiones

 

Diseñar una versión móvil sería la primera alternativa de las empresas que ya disponen de una web no adaptada a dispositivos móviles.

Una página web estándar suele estar formada por un fichero de extensión .html que alberga el contenido del sitio, y un fichero de extensión .css que alberga el estilo de presentación.

En una versión móvil es necesario crear al menos un fichero .css ajustando los parámetros necesarios para que la web se pueda visualizar correctamente desde estos dispositivos.

Pero normalmente, junto con el rediseño del fichero .css se ha de realizar un trabajo de análisis de contenidos y una reorganización completa del contenido a mostrar en esta nueva versión.

En las versiones para móvil se suele utilizar un diseño muy simple y de fácil navegación, donde se prioriza el contenido que no sea excesivo e incluya fuentes con un buen tamaño, legibles y con grandes botones para pantallas táctiles, minimizando también la necesidad de escribir.

Que se muestre una versión u otra al escribir la url dependerá del sistema, que detecta si el usuario está navegando desde un dispositivo móvil, portátil o de sobremesa, mostrándole así la versión adaptada al tamaño y formato de navegación correspondiente.

Es importante tener en cuenta que al disponer de dos versiones diferentes de la web, el mantenimiento y posicionamiento se ha de realizar por separado, pero de esta manera tenemos la ventaja de poder utilizar diferentes palabras clave para cada una de las versiones.

Un ejemplo de herramienta para crear la versión móvil de tu web, ya sea desde cero o a partir de una web ya creada, es DudaMobile.

 

2. Crear una web responsive

 

La manera perfecta de evitar tener dos webs, y así reducir costes, tiempo de desarrollo y mantenimiento, o facilitar el trabajo de optimización para los buscadores (SEO), es el diseño responsive o adaptativo.

Una web responsive se puede adaptar a una gran variedad de pantallas y dispositivos, al contrario de una versión móvil que normalmente está diseñada para una medida en concreto.

En la web responsive la información en forma de bloques gráficos se muestra en función de las dimensiones de la pantalla, a medida que el espacio horizontal se reduce, estos bloques se van redimensionando y colocando verticalmente, adaptándose al ancho de cada dispositivo.

Web responsive

Web responsive

Actualmente, la mayoría de plantillas ya disponen del diseño responsive como una de sus propiedades, así que antes de descargar o comprar una, deberíamos fijarnos en este aspecto.

Si ya dispones de una web desarrollada con WordPress, es instalar un plugin, el cual adaptará la web automáticamente, como por ejemplo los plugins WPTouch o WordPress Mobile Pack.

 

3. Crear una aplicación nativa

 

Las aplicaciones nativas (app), a diferencia de una web, permiten aprovechar al máximo las prestaciones integradas en los dispositivos móviles (hardware), como el geoposicionamiento (GPS), sensores de movimiento (acelerómetros), captura de fotos, vídeo y audio, brújula, calendario,… además de disponer de la opción de envío de notificaciones Push, muy útil para mantener al usuario informado.

Otro aspecto interesante es que las apps nativas es que permiten la sincronización y descarga de datos en modo local, haciendo posible que el usuario pueda acceder al contenido de la aplicación sin conexión a Internet o cuando ésta sea débil, pero también es posible que algunas de sus funciones precisen de Internet.

En el caso de un ecommerce, las apps facilitan el modo de pago, ya que el usuario al haber comprado una aplicación en el market place, ha tenido que crear una cuenta y registrar su medio de pago, datos que quedan almacenados en el dispositivo móvil, y de esta manera no tiene que volver a facilitar los datos de su tarjeta de crédito al confirmar la transacción.

Apps

Apps

La descarga de una app puede suponer un problema para el usuario, por tener que reducir, el cada vez más escaso, espacio en su smartphone o tablet, o por tener que actualizarla manualmente cuando la app lo requiera, desde el market place correspondiente (app store, google play,…)

Pero uno de los principales inconvenientes de las apps nativas son sus costes de desarrollo y actualización, ya que se ha de crear y mantener una app para cada sistema operativo, mínimo para iOS y Android.

Y por ejemplo, en el caso de las aplicaciones para iOS, estas deben superar un riguroso proceso de revisión previo a la publicación, tanto de la versión inicial como de las actualizaciones posteriores, que puede durar varias semanas, y en el caso de generar ingresos, tener que compartir hasta el 30% de los mismos.

Si estás buscando una herramienta para crear apps, como.com puede ser una opción.

 

4. Crear una webapp

 

Una webapp como ya se intuye por el nombre, es una mezcla entre web móvil y aplicación nativa.

Son páginas escritas en HTML, CSS o Javascript y se accede a ellas a través de la URL en el navegador del dispositivo, pero su diseño recuerda al de las aplicaciones.

Son como una web pero con aspecto de app.

La ventaja de las webapps es que no dependen de los market places, por lo que no tienen que pasar por procesos de revisión o compartir ingresos, ni tener que crear varias versiones compatibles con cada sistema operativo.

Pero también están limitadas al acceso del hardware del dispositivo, requieren de conexión a Internet y de un mayor esfuerzo de promoción y visibilidad, al no encontrarse dentro de los market places (ASO).

Una app nativa es una opción más completa que una webapp, pero también notablemente más cara.

 

5. Crear una aplicación híbrida

 

Una aplicación híbrida es una mezcla de app nativa y de webapp. Consiste en una aplicación nativa en la que determinadas secciones muestran contenido web cargado desde un servidor externo. De esta manera podemos utilizar las diferentes opciones del hardware del dispositivo y los canales de distribución de las apps nativas, y también tomar lo bueno de la web, facilidad e inmediatez para actualizar el contenido.

Un ejemplo de aplicación híbrida es Instagram, donde se utiliza la parte de app nativa para tomar y editar fotografías, y la parte web para mostrarlas en el perfil. Por este motivo, lo podemos usar para fotografiar y editar sin conexión a Internet, pero no podremos subir la fotografía hasta recuperar la conexión.

Un ejemplo de herramienta para crear este tipo de aplicación es PhoneGap.

 

 

Decidirse por una opción u otra, dependerá de varios aspectos, entre ellos el coste, la necesidad de usar sensores del dispositivo, poder llegar al máximo de dispositivos posibles, etc.

Si el dinero no es un problema y te gustaría tener el máximo de funciones, puedes hacer como Facebook, que dispone de una webapp y de una aplicación nativa compatible con varios sistemas operativos.

En el siguiente vídeo podemos ver una comparación de ambas versiones, en diferentes dispositivos.

 

 

Por último y como curiosidad, te dejo este enlace donde podrás comprobar cómo se visualiza tu web desde cualquier dispositivo, simplemente tienes que escribir tu URL en el espacio indicado y escoger el dispositivo que desees: Screenfly

Etiquetas

Deja un comentario

Tu dirección de correo no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

top

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies