Evolución de la Web en el mundo móvil: Diseño Web Adaptable y Web Apps.

El modo en que nos relacionamos hoy con la tecnología es en gran medida debido a la revolución de las Apps, lo cual ha forzado una evolución de la web para adaptarse al ya, prácticamente consolidado entorno móvil.

Antes de que la acción de abrir en nuestro Smartphone la aplicación nativa de Twitter, Youtube, o la de nuestro periódico favorito, fuera una costumbre tan natural como encender la TV, el acceso a contenidos de internet se realizaba siempre desde un navegador web -entendemos como aplicación nativa esa que ha sido desarrollada de manera específica para ese sistema operativo-

Cada año vemos como, de manera casi exponencial, el nº de internautas aumenta debido a la penetración de los Smartphone y las Tablets. Según Morgan Stanley, las previsiones son que para 2015 de los 3.5 millones de usuarios de internet previstos, 1.9 lo hagan desde dispositivos móviles, superando por primera vez la proporción de usuarios de móvil a los de escritorio, en este mismo 2013.

Usuarios de internet

Imagen http://www.dotcominfoway.com

Con esta realidad, se ha desatado toda una revolución entre los webmaster para adaptar los contenidos de nuestros sites a este nuevo entorno, adaptando los contenidos mediante dos tendencias, que sin dejar de ser incompatibles entre sí, tienen características y propósitos distintos:

Diseño Web adaptable

O Responsive Web Design en inglés. Todo se inició con un artículo publicado en A List Apart allá por 2010.  Sin duda es la tendencia predominante que nos ha dejado 2012 y que marca un antes y un después en el desarrollo de proyectos Web.

En pocas palabras, se trata de una técnica que permite que un mismo diseño y contenido Web se adapte a las pantallas de los dispositivos desde los que podemos ver dicha Web, incluso dependiendo de la orientación de la pantalla, ya sean smartphones, tabletas, pantallas de ordenador e incluso la TV (otro día dedicaré un post a esto último).

¿Por qué debo adaptar mi web para que tenga un Diseño Adaptable?

Con los nuevos dispositivos, cada uno con diferentes resoluciones de pantalla que irrumpen en el mercado con regularidad, es fundamental que nuestro proyecto Web se adapte a ellos, de manera que el contenido sea líquido, ocupando todo el espacio disponible, y permitiendo así una correcta experiencia para el usuario, sin importar desde dónde se está accediendo.

Dispositivos Responsive Design

Fuente http://www.dotcominfoway.com

Y esto se consigue con una única URL, un único contenido, código HTML5 y consultas CSS3.

Las ventajas son evidentes:

Se consigue un ahorro en costes, no teniendo que hacer desarrollos paralelos para cada dispositivo.
Ahorro en tiempo, ya que solo hay que realizar las actualizaciones de contenido una única vez para todos los entornos.
Mejora el SEO. Google incluso recomienda este tipo de prácticas y las valora muy positivamente.
Mejor rendimiento.
Mayor soporte de navegadores.

En Captative, prácticamente desde mediados de 2011, todos los proyectos de diseño y desarrollo Web están basados en esta técnica.

Web Apps

Muy similar a lo anterior, encontramos esta otra tendencia, que siendo parecida en cuanto a la tecnología utilizada, comporta ciertas diferencias.

¿Pero realmente… qué es una Web App?

Básicamente se trata de una Web, totalmente adaptada a dispositivos móviles, que gracias a código HTML5, hojas de estilos CSS3 y Javascript puede tener la misma apariencia que una App nativa, pero accesible vía navegador y que no necesita ser instalada en el dispositivo.

La principal ventaja es su versatilidad, al no ser descargada desde los markets, no es necesaria su validación, y más importante aún, si tu Web App es de venta, te librarás de pagar comisiones a la AppStore, GooglePlay, etc. El diario británico Finantial Times sustituyó su App en el AppStore por una Web App por este mismo motivo.

Web App Finantial Times

fuente elmundo.es

En caso de actualización, el usuario no tiene que volver a descargar, al tratarse de contenido web.

Como puntos en contra, decir que para este tipo de aplicaciones no es posible acceder a funciones del terminal como la geolocalización, la cámara o el acelerómetro. Pero esto no es un problema si lo que buscamos por ejemplo es desarrollar una App de tipo hospitality para un evento, o una aplicación que facilita el acceso a contenidos, en la que si bien, el acceso a este tipo de funciones no es absolutamente imprescindible, los beneficios en cuanto a ahorro en costes y plazos de implementación son más que evidentes, si lo comparamos con lo que supone desarrollar una App nativa para cada una de las principales plataformas (iOs, Android, Windows Phone, etc.) validarla en cada uno de los markets, mantenimiento, etc…

En este sentido, y como prueba de las múltiples ventajas de este tipo de soluciones, en la pasada edición del Mobile World Congress ya hemos visto como la propuesta de Telefónica y Mozilla es Firefox OS, un sistema operativo basado en Web apps que, según el responsable de Mozilla para Europa,Tristan Ninot, está diseñado para que la web sea la alternativa a los muros cerrados de Apple y Google.

Si necesitas asesoramiento para elegir la opción más conveniente para tu proyecto, desde Captative estaremos encantados de ayudarte a dar forma a tu proyecto y a presupuestar tu aplicación.

Más información en www.captative.com

Síguenos en Twitter: @Captative

Manuel Vida.

7 thoughts on “Evolución de la Web en el mundo móvil: Diseño Web Adaptable y Web Apps.

  1. Pingback: Web App Vs App nativa? | Blog Captative

  2. Las web apps son más baratas que las apps nativas por que un solo desarrollo vale para cualquier sistema operativo… pero la Web App de Financial Times solo vale para iOS. Entonces deberían realizar otro desarrollo para hacer otra web app para Android… ¿dónde queda esa ventaja?

    • Una estupenda apreciación.

      En el caso de Finantial Times, efectivamente han desarrollado una web App totalmente enfocada a usuarios iOS, lo cual responde a más a una estrategia comercial de la compañía, que a una limitación de la web App en sí. Sin problema podían haberse dirigido a ambos universos con el mismo desarrollo (iOS y Android), pero como digo, parece ser que no es la estrategia deseada en este caso.

      ¿Crees que se han equivocado tomando esa vía?

      • No no, para nada, no se han equivocado. Pero escoger las web apps como solución por ser económicamente mejor que las aplicaciones nativas… pues no lo acabo de ver. Si al final haces una app tan a medida del SO como es Financial Times… no vas a ahorra mucho. Si esa misma solución funcionase para Android y/o Windows Phone entonces sí que sería interesante pero han hecho un desarrollo específico de Safari y perdieron la versatilidad que se le presupone a las web apps.

        • Esteban,

          absolutamente de acuerdo contigo en que si se desarrolla una web App de manera tan específica para un SO en concreto, no aprovechas el ahorro en costes que suponen este tipo de desarrollos. Lo recomendable en ese caso es siempre App nativa. Aunque si tu modelo de monetización está basado en subscripciones, el hecho de no pagar un 30%-40% de tus ventas al market, puede suponer una gran diferencia en la cuenta de resultados, y es en ese caso dónde Finantial Times ha encontrado una increíble solución al problema en el desarrollo de una web App…

          En cualquier caso está claro que estamos hablando de un caso bastante concreto, pero ¿crees que pueden seguirle a F.T. otras grandes compañías, en situaciones parecidas, que quieran huir de los markets para conseguir mejores beneficios?

          • Sin duda, aunque habría que ver si compensa perder esa publicidad que te puede ofrecer un Market ante las miles de visitas que tienen cada día.

  3. Pingback: Qué debe tener un ecommerce para alcanzar el éxitoBlog Captative | Blog Captative

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>