Miguel Monreal (@monrealista) nos explica que es el responsive design en Zaragoza Activa en la Azucarera en Zaragoza en el Conversion Thursday.
El responsive design no es hacer todo más pequeño, sino que hay que adaptar/optimizar el sitio web, y para ello hay que priorizar y pensar en que es lo que los usarios de móviles necesitan, llegando a eliminar aquello que no sea necesario.
Y es que la web para móvil puede tener funcionalidades diferentes a la web normal ya que las necesidades del usuario no tienen porque se las mismas. Por ejemplo, la web de un cerrajero puede tener mucha información: puertas, cerraduras, servicios… En cambio la web móvil de un cerrajero, es algo que se busca cuando se tiene una emergencia, por lo que lo que busca el usuario es el teléfono o a lo mejor el precio del servicio.
Y es que no todas las webs tienen porque estar adaptadas, pero algunos sitios como un e-commerce si.
Y es que no tener la web adaptada puede que haga que el cliente se vaya a la competencia.
Cada año el número de usuarios de dispositivos móviles va en aumento, ya sean smartphones, tablets… y es una porción de mercado que no hay que dejar pasar por alto.
Existen 3 soluciones diferentes para conseguir un sitio web para móviles:
- Apps nativas
- Versiones móviles separadas de la principal
- Responsive web design
¿Cual elegir? ¿Cuál es la más correcta para cada caso?
Apps Nativas
- Son programas instalados en el dispositivo
- Se distribuyen por las Apps Stores
- Es un lenguaje especial para cada dispositivo
Existen 2 tipos de apps nativas: las puras y las adaptadas. Las primeras son las que se realizan en el lenguaje propio del dispositivo (Objective-C para IOS, Java para Android…) Las apps adaptadas se realizan en un lenguaje de programación (normalemente en HTML, CSS y Js) y se convierten al lenguaje propio de cada dispositivo, por ejemplo con el programa Phone Gap.
El inconveniente de estas últimas es que no tienen el rendimiento y la velocidad de una app pura, y sobre todo que las plataformas de distribución, sobre todo la de Apple, si no están bien hechas no las admiten y no las publican. Y es que para Apple una app debe cumplir una serie de estandares y dar una experiencia de usuario diferente.
Motivos para querer una app nativa
- Acceso al hardware, por ejemplo, la geolocalización, el acelerómetro…
- Rendimiento, po ejemplo apps para juegos o de bolsa….
- Por el modelo de negocio, muchas apps ofrecen una versión gratuita para que luego compres la de pago.
- Adaptación al usuario
- Y por imagen, una empresa grande tiene una imagen que mantener y si no tiene una app propia puede quedar mal.
Contras para querer una app nativa
Los costes que supone su desarrollo son elevados debido a la duplicidad de código, ya que hay que crear una app para cada dispositivo. Además requieren promoción (SEO para apps) ya que su ubicación en las app stores es lo más importante ya que si no está entre las primeras el usuario no se la va a descargar. Para ello necesitas conseguir comentarios, un elevado número de descargas, valoraciones positivas…
Además, si quieres hacer una app para un iphone/ipad, necesitas estar inscrito en un programa de pago como desarrollador oficial, y una vez realizada tienes que enviarla y que Apple te la apruebe.
Versión separada
Una versión separada consiste en realizar una web diferente para estos dispositivos. Normalmente las encontramos en subdominios tipo m.www.miweb.com, o en subdirectorios www.miweb.com/mobile. Son sitios “capados” para smartphones.
Se construyen mediante frameworks, con Jquery mobile, Lungo Js o HTML5 y CSS 3.
Motivos para querer una versión separada
- Existe una limitacion técnica. Por ejemplo, el El País, tiene semejante volumen de información que un smartphone debido al ancho de banda actual, no la puede descargar.
- Espera del rediseño, si tu web no está preparada, haces una diferente para los smartphones.
- Que la web para smatphones tiene una lógica totalmente distinta, como el caso exlicado al inicio de las cerrajerías.
- Es una versión “capada”, por lo que muchas veces vemos el enlace de ir a la web normal, por si el usuario quiere algunos de los servicios que el versión movil no está.
- Duplicidad del diseño
- Detección de los dispositivos
Contras para querer una versión separada
Responsive web design
Miguel Monreal nos recomienda leer el libro de Ethan Marcotte sobre el responsive design, donde explica que la base es dividir la pantalla es columnas, como lleva haciendo la prensa desde hace tiempo, y según el dispositivo ir adaptando el contenido al espacio.
La cuestión es ofrecer al usuario una experiencia enriquecedora desde cualquier dispositivo a través del diseño. Da igual cual sea el tamaño de la pantalla o el sistema operativo, y es que la web no son solo los ordenadores, ya sean de sobremesa o portátiles, sino los smartphones, las tablets, la Play Station, la televisión… ¿y quien sabe que más en un futuro?
Motivos para querer una app nativa
- No hay duplicidad del código, el código y la web es la misma, solo que mediante especificaciones decidimos que mostrar y como mostralo según el dispositivo.
- Por ello hay una misma experiencia de usuario, aunqu eso si, basada en un estudio de sus necesidades para cada caso.
- Consiste en adaptación, no en detección.
- Nos obliga a priorizar las tareas de usuario, preguntándonos que qué es lo importante para él.
Basado en esto último, hay una filosofía llamada “Mobile First” que se pregunta: ¿por qué no diseñar al revés? Es decir de micro a macro, de lo más importante a lo menos, pasar de lo más crítico del modelo de negocio e ir amplificándolo después.
Como comenta Monreal, no es lo mismo pasar de un piso de 60 metros cuadrados a uno de 200 que hacerlo al revés…
Casos de éxito
Avaibook
Hay que tener claro que hay gente que compra por el móvil y que eso va a ir a más. Avaibook es un motor de reservas de casas rurales y apartamentos de vacaciones que usan por ejemplo Top Rural o Rentalia.
Direct Seguros
Proriza las funciones de usuarios. Por ejemplo desde un ordenador o un ipad, lo importante además de ofrecer información, es que el usuario rellene el formulario pidiendo información, además de que vea el teléfono. En cambio desde un smarphone se prioriza que el usuario vea la información y llame, es decir se busca una interacción diferente con el usuario.
Wuachin
Wuachin es una aplicacación de Tv social. Tu ves la tele y puedes comentar el programa en directo, además de que monitoriza lo que se dice en las redes sociales y te añade.
En esta web el rey es el smartophone o el tablet, ya que la gente está viendo la tele desde el sofa y colabora desde ahí.
Inconvenientes del resposive design
- Hay que priorizar. A veces en según que empresas esto puede ser complicado.
- Lleva tiempo.
- Suele ser complicado sin realizar un rediseño.
Algunas ayudas
Initializr
Es una web que te permite bajarte una plantilla con algunos parámetros básicos.
Modernzr
La librería Moderzr nos ayuda a detectar capacidades de los dispositivos, no los dispositivos en si. Es decir, detecta que es compatible con la acción de llamar.
Caniuse
Web que te permite ver que opciones del HTML5 y CSS3 soportan los navegadores.
Select [ivzr]
Te ayuda a introducir HTML5 en versiones viejas de IE.
En resumen, impresionante charla de Miguel Monreal, y con ganas de no perderme su taller de desarrollo para móviles en el Congreso Web de Zaragoza.