Hoy en día es muy normal cuando un cliente quiere un nuevo sitio web, crearlo pensado en el diseño responsive y orientado a móviles. Ya que hay numerosos artículos y estudios que nos muestran cuanto crece continuamente el mercado en dispositivos móviles en celulares y tablets, solo basta con hacer pequeña búsqueda en Google para darnos cuenta.
Existen muchas marcas de teléfonos móviles y tablets y todos ellos con distintas resoluciones de pantalla y resulta un tanto complicado adaptar un sitio web que luzca perfecto en todos ellos. Muy recientemente a surgido una tendencia llamada Mobile First debido al explosivo aumento de móviles en el mercado, que consiste en diseñar un sitio web pensando en móviles primero y después la versión para escritorio. En lugar de mostrarles datos y estadísticas sobre esta tendencia mejor los invito a ver el siguiente vídeo de los chicos de mejorando.la que lo explican mejor que yo.
Ahora con este concepto de Mobile first en mente, quiero mostrarles como seria la mejor manera de adaptar un sitio web basados en datos reales con Google Analytics. Lo siguiente que voy a explicar solo podría ser aplicable en sitios web que ya existen de los cuales podríamos tomar sus datos de visitas de sus usuarios. No podríamos hacer esto con sitios nuevos por que no tenemos datos de visitas pero con el tiempo podemos adaptar sus diseños de interfaz con la misma técnica una vez que tengamos sus datos de visitas.
Ahora para comenzar vamos a imaginarnos que tenemos un cliente que quiere renovar su sitio web y el cliente ha escuchado esto de responsive design y desde un inicio nos dice :
"Oye quiero que mi sitio web sea responsive, he escuchado que de esta manera las personas pueden ver mi sitio web desde cualquier dispositivo"
Entonces lo que primero que tenemos que hacer antes de ponernos a programar como locos un diseño de interfaz es obtener datos importantes que nos permitan guiarnos sobre el tipo de diseño que vamos a crear , a que tipos de teléfonos esta orientado, marcas, sistema operativo y resoluciones de pantalla.
Para obtener estos datos podemos pedirle a nuestro cliente que nos de acceso a su cuenta de Google Analytics para verlo por nosotros mismos. Si el cliente no cuenta con una cuenta de estas pues tocara a nosotros crearle una e insertarla en su sitio web para recolectar este tipo de datos.
Si no sabes como crear una cuenta Google Analytics solo basta que pongas en google "como crear una google analytics" y tendrás muchos links donde te dicen como hacerlo, ademas que Google te guía paso a paso en la creación de una cuenta y como debes de agregarlo a un sitio web.
Ahora supongamos que tenemos nuestros datos Google Analytics listos, para los ejemplos siguientes ejemplos usare capturas de pantalla de los datos de visitas de mi blog, ok comencemos.
¿ Este sitio web realmente necesita un diseño responsive ? ¿ Que tantas visitas recibe de moviles como para justificar este diseño ?
Para responder esta pregunta tenemos que ver el reporte que se encuentra en Publico > Movil > Vision General .
En este reporte podemos ver cuantas visitas recibe el sitio web en escritorio, teléfonos y tablets. Este reporte nos dice realmente si nuestro sitio web esta siendo visitado por medio de móviles y si merece la pena rediseñar el sitio web. En el ejemplo que he puesto puede verse claramente que este sitio web es mayormente visitado por desktops, por lo cual seria una muy mala idea gastar dinero por ahora en un rediseño enfocado en moviles.
¿ En que marcas de móviles debo de enfocar mis esfuerzos en la creación del diseño de mi sitio web ?
En la sección Publico > Movil > Dispositivos , en este reporte podemos ver las marcas de los dispositivos móviles que visitan el sitio web, de esta manera podemos enfocar nuestros esfuerzos de diseño y programación basándonos en estos modelos. Aunque deberías de tratar de abarcar todos los modelos posibles , siempre es bueno tener como meta los de nuestros propios visitantes.
En el ejemplo podemos ver que tenemos que enfocar nuestro diseño mas en iphone y motorola , así que podríamos buscar las resoluciones de pantallas de estos dispositivos y hacer los cambios necesarios basados en esas dimensiones.
¿ Cuales son las resoluciones de pantallas en la que debo enfocarme para mi diseño ?
En la sección Publico > Movil > Dispositivos existe una opción arriba a la derecha que nos permite saber cuales son las resoluciones de pantalla de nuestros visitantes, de esta manera podremos enfocar nuestro trabajo en mejorar nuestra web en esas resoluciones.
¿ Que navegadores son los que tengo que soportar en mi sitio web ?
En la sección Publico > Tecnología > Navegadores y SO , podemos ver los tipos de navegadores que nuestros visitantes usan para ver nuestro sitio web, asi podemos saber si los usuarios podrán ver todas las características de nuestro sitio sin problemas o mejorar la compatibilidad en caso de que sea necesario. Tambien arriba a la tenemos una opcion para ver los Sistemas operativos de nuestros visitantes.
Con este tipo de datos a nuestra disposición podemos abordar de mejor manera los problemas de diseño y programación de sitios web de nuestros clientes y no estar programando a lo loco. Hay muchas otras buenas cosas en Google Analytics que yo no he comentado aquí y que también ignoro pero con estos básicos reportes sera suficiente para ayudarnos en nuestro trabajo.
link : http://www.smashingmagazine.com/2014/03/03/how-to-use-analytics-to-build-a-smarter-mobile-website/
¿ Este sitio web realmente necesita un diseño responsive ? ¿ Que tantas visitas recibe de moviles como para justificar este diseño ?
Para responder esta pregunta tenemos que ver el reporte que se encuentra en Publico > Movil > Vision General .
En este reporte podemos ver cuantas visitas recibe el sitio web en escritorio, teléfonos y tablets. Este reporte nos dice realmente si nuestro sitio web esta siendo visitado por medio de móviles y si merece la pena rediseñar el sitio web. En el ejemplo que he puesto puede verse claramente que este sitio web es mayormente visitado por desktops, por lo cual seria una muy mala idea gastar dinero por ahora en un rediseño enfocado en moviles.
¿ En que marcas de móviles debo de enfocar mis esfuerzos en la creación del diseño de mi sitio web ?
En la sección Publico > Movil > Dispositivos , en este reporte podemos ver las marcas de los dispositivos móviles que visitan el sitio web, de esta manera podemos enfocar nuestros esfuerzos de diseño y programación basándonos en estos modelos. Aunque deberías de tratar de abarcar todos los modelos posibles , siempre es bueno tener como meta los de nuestros propios visitantes.
En el ejemplo podemos ver que tenemos que enfocar nuestro diseño mas en iphone y motorola , así que podríamos buscar las resoluciones de pantallas de estos dispositivos y hacer los cambios necesarios basados en esas dimensiones.
¿ Cuales son las resoluciones de pantallas en la que debo enfocarme para mi diseño ?
En la sección Publico > Movil > Dispositivos existe una opción arriba a la derecha que nos permite saber cuales son las resoluciones de pantalla de nuestros visitantes, de esta manera podremos enfocar nuestro trabajo en mejorar nuestra web en esas resoluciones.
¿ Que navegadores son los que tengo que soportar en mi sitio web ?
En la sección Publico > Tecnología > Navegadores y SO , podemos ver los tipos de navegadores que nuestros visitantes usan para ver nuestro sitio web, asi podemos saber si los usuarios podrán ver todas las características de nuestro sitio sin problemas o mejorar la compatibilidad en caso de que sea necesario. Tambien arriba a la tenemos una opcion para ver los Sistemas operativos de nuestros visitantes.
Con este tipo de datos a nuestra disposición podemos abordar de mejor manera los problemas de diseño y programación de sitios web de nuestros clientes y no estar programando a lo loco. Hay muchas otras buenas cosas en Google Analytics que yo no he comentado aquí y que también ignoro pero con estos básicos reportes sera suficiente para ayudarnos en nuestro trabajo.
link : http://www.smashingmagazine.com/2014/03/03/how-to-use-analytics-to-build-a-smarter-mobile-website/
No hay comentarios:
Publicar un comentario