El iPad me ha destrozado la vida

Mi vida es mucho peor desde que tengo un iPad. De repente, mi blog parecía viejo y obsoleto, pero lo peor no fue eso, sino descubrir que a base de parchear y modificar el diseño responsive original de Otogami, lo habíamos roto:

responsive-en-otogami

Ni siquiera puedo excusarme diciendo que fue una sorpresa. Lo cierto es que más de una persona me había advertido de que el blog se leía terriblemente mal en los móviles, pero siempre encontrábamos una tarea más importante o prioritaria -una excusa- para no remangarnos y ponernos a arreglar la web con soplete y martillo. Al fin y al cabo, muchos desarrolladores seguimos pensando que las tablets no son más que una pijada, una moda pasajera que usan cuatro personas. Estamos equivocados.

No ha sido hasta que he sufrido el dolor en mis propias carnes, hasta convertirme en usuario de iPad, cuando he tomado consciencia de que la realidad que esconden las cifras: en mi blog, apenas el 7,5% de las visitas se realizan desde smartphones y tabletas. Sin embargo, en Otogami el 30% de las visitas proceden de dispositivos móviles y, un tercio de las mismas, desde un iPad.

Mejoras vs. Featuritis

Que 30 de cada 100 de nuestros usuarios experimenten un Otogami como el de la foto que hay en este artículo hace que mi cara arda de vergüenza.

El 30% de las visitas de Otogami proceden de dispositivos móviles.

En realidad, el iPad no me ha destrozado la vida, sólo mis planificaciones. Cuando lo compré para tener una segunda pantalla donde poder ver métricas de la web en tiempo real, tenía remordimientos por haber gastado 400€ de la compañía en algo así. Ahora creo que es una de las mejores inversiones que he hecho. No sólo porque es un magnifico dispositivo que uso CADA día, sino porque ha sido una fantástica cura de humildad. Hoy en día, desarrollar una web que, sencillamente, “funcione bien” es más complicado de lo que parece ¿Para que pensar en complicadas y sofisticadas nuevas funcionalidades si aún tenemos trabajo por delante para cerrar como Dios manda las que ya tenemos?

Hacer que este blog se vea bien en mi iPad sólo ha costado una tarde de sábado. Conseguir que Otogami se vea bien en cualquier resolución costará mucho más. En realidad, el iPad no ha destrozado mi vida, sólo mi ego.

  • Rastreador

    En mi caso el 36% de visitas de mi tienda online vienen desde tablet/movil y un 28% de las ventas se realizan desde estos dispositivos móviles. Como para no tenerlos en cuenta.

    • ¡Muchas gracias Rastreador! Ojalá más y más gente comparta esos datos para que le demos la importancia que merecen a según que resoluciones…

  • David, sólo decirte que vengo desde la Bonilista y que me alegra ver la decisión que has tomado con respecto al blog. Lo de “tomarse menos en serio” es el mejor consejo que puedes recibir para realmente quitarte la venda y pensar que compartir tus pensamientos o ideas es algo totalmente positivo y no necesariamente tienen que ser contenidos tan pulidos. Siempre he pensado que así se ve más a la “persona” que hay detrás, con sus fallos, su capacidad de rectificar y su evolución natural. Yo lo hacía así cuando estaba a tope con mi rinconcito y creo que es la mejor decisión que pude tomar. Estoy seguro que será positivo también para tus proyectos awesómicos 🙂

    Encantado estaré de poder leer más por aquí.

  • Carlos

    ¡Hola David!
    Recuerda que el usuario medio ya usa la tableta en lugar de eso tan complicado que es el ordenador. También te comento (por experiencia propia) que cosas que veía bien con el iPhone y con el iPad no aparecían luego bien en Android…. :S, así que sí, échale un vistazo también a las Galaxy Tab o a un móvil Android y usa su navegador de serie, nada de Chrome, Opera ni nada de eso.
    Gracias por escribir!

    • Me has dejado con el culo torcido ¿El navegador por defecto de Android NO es Chrome? O_______O

      • Carlos

        Eeeem no XD, existe Chrome para Android, pero es distinto… Te lo digo por experiencia propia (tuve que rehacer un responsive por el p*** navegador)

  • Pingback: “Hacer un Fred Wilson” | nekotek()

  • isocano

    En mis tiendas online ( hawkersco.com, misshamptons.com y gafasknockaround.com) el tráfico móvil muchas veces es casi del 50% y no suele bajar del 40%. Principalmente se debe a que atrapamos la mayoría del tráfico desde Facebook.

    En concreto:

    Hawkers: Desktop: 52% – Mobile 41% – Tablet 6% (no he puesto los decimales)

    Miss Hamptons: Desktop: 49% – Mobile 44% – Tablet 6%

    Gafas Knockaround: Mobile 51% – Desktop 38% – Tablet 10%

    Por añadir otro dato en hawkersco.com en cuanto a navegador el ganador sin duda es Chrome con un 42%, después Safari con el 15%, Android 12%, Safari (in-app) 11%, Firefox 10%, IE 5,9% y el resto otros navegadores.

    En las otras webs los porcentajes son muy parecidos.

    • ¿Y el porcentaje de ventas coincide con el de dispositivos o has apreciado más conversión en unos que en otros? ¡Gracias por compartir!

      • isocano

        Hay más conversión en escritorio. La hipótesis que más fuerza tiene en la oficina es que todavía mucha gente navega en el móvil pero no compra hasta llegar a casa, ya sea por comodidad en el proceso, como el no tener la tarjeta a mano y similares.

  • Hola David,

    Acabas de poner el dedo en la llaga. Al menos una de las que más pupa me hacen como diseñador web en estos últimos tiempos.

    Cada vez hay más dispositivos externos al ordenador, no sólo los móviles y los tablets, sino que incluso las consolas y las teles. Buenos hasta la neveras y pronto los coches, las gafas… etc.

    Y no no es una moda pasajera, es una tendencia imparable.

    ¿Porque digo que a me hace mucha pupa? Pues porque es un problema al que hasta ahora no le he dado una solución correcta. Pensé haber dado con la solución definitiva al empezar a usar frameworks como Bootstrap y Foundation. Pero no. Son herramientas magníficas con las que abordar mucho mejor el problema responsive. Pero no son la panacea que lo cure todo.

    Casi siempre ocurre que dejas un site “acabado” (mentira, porque un site nunca está acabado) y ves que has podido pulir los detallitos responsive en los tablets y los móviles.
    Pero luego llegan los inevitables e interminables, cambios, modificaciones añadidos de última hora, siempre con prisas. Y aquí viene el problema.

    Entre que casi nunca se dedica el tiempo necesario a una revisión responsive y que tengo que reconozerlo, a mi me da una pereza tremenda (a los diseñadores nos encanta empezar proyectos, pero corregir bugs), pues corregimos, lo vemos en nuestro Chrome y cruzamos los dedos porque nada se haya roto y todo siga viéndose correctamente.

    ¿Solución a todo esto? Pues a mi solo se me ocurre una. Renunciar a hacer webs como hasta ahora y tratar de hacerlas mucho más simples. Entregar los contenidos con el “Mínimo Diseño Viable”. Y de este modo hacer sites tipo “one web”como leí hace algún tiempo en A List Apart. Es decir webs que estemos casi seguros que se adaptan a cualquier formato y en cualquier navegador.
    Desde luego es algo que yo me he planteado intentar a partir de ahora. Y gracias tu post David, me reafirmo en ello y veo lo necesario que es. Muchas gracias… 😉

    • ¿No tenéis los diseñadores una herramienta que os permita revisar la web en n navegadores distintos con n resoluciones? Juraría que vi algo parecido y valía pasta, MUCHA pasta, pero si me dedicara a ello profesionalmente lo pagaría con gusto…

      • Rastreador

        Con http://prism.mobiforge.com/ puedes tener una aproximación bastante buena.

      • Emilio

        Firefox en sus herramientas para desarrolladores incluye una vista de diseño adaptable que permite visualizar cualquier pagina en distintas resoluciones. A mi me ha servido en distintos proyectos para previsualizar las vistas móviles, aunque siempre me gusta confirmar en otros dispositivos una vez definidos los estilos.

        • En mi experiencia esto no funciona. Porque aunque redimensiones la vista cada navegador renderiza de su padre y de su madre. Aún en desktop, a veces hay diferencias entre Chrome, Firefox y Safari, por no decir en IE, que a pesar de que cada vez es más estándar y funciona mejor renderiza muy distinto entre IE10 e IE11 por ejemplo.

      • Luis Calvo

        Si quieres testar un diseño responsive, lo mejor es usar los propios dispositivos y, sobretodo, usando los navegadores que traen por defecto. Los que curramos en esto, lo primero que hacemos es instalamos el firefox o el chrome en nuestros móviles, pero el común de los mortales usa el navegador que ya viene instalado. Probar tu web responsive en un chrome emulando un iOS7 no garantiza que se vea igual en un iPad.

      • Creo que te refieres a esto: http://www.browserstack.com/

        Yo lo usé en modo demo hace un tiempo y no me convenció demasiado porque me devolvía una serie de screenshots y eso no es muy interactivo para debuggear. Ahora creo que ha mejorado y renderiza como si fueran los navegadores nativos o algo así. Tengo que darle otra oportunidad y si merece la pena pagaremos sin problema.

        Por ahora lo que hago es testar en las máquinas reales que tengo, Mac (Chrome, Firefox y Safari), Windows 7 (IE11 y el IE9 e IE10 por medio de IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage). iPad 2, Galaxy Tab 3 y en móviles iPhone 4 y Galaxy. Todo esto lo hago a la vez en tiempo real gracias Mixture.io (de pago) que viene con esta feature entre otras muchas: http://www.youtube.com/watch?v=ER-la4wunyo

        Pero bueno, aún así y todo lleva un curro de la leche, no te evita volver a hacerlo cada vez que cambias algo o añades algo (y eso no siempre se hace) y tampoco te garantiza como se comportará en otras plataformas.

        Por eso habría que ir buscando una forma de “hacer” web si tanta floritura, mucho más simple, de modo que estés tentando menos a la suerte. Esto es más fácil decirlo que hacerlo, pero habrá que intentarlo. 🙂

  • Pit

    Un placer leerle, “Fred”. 😉 . La verdad que la enorme variedad de dispositivos esta haciendo muy complicado “cuadrarlas responsivamente”: tiempo, mucho tiempo… y sobre todo, parece que nunca acabas…. y no solo eso. Ante cualquier modificación + o – sustancial tiemblas en lo que puede afectar a la “responsividad”.

  • Pingback: Cómo echar a perder un negocio online de la manera más tonta - Blanco y en Botella()