El Responsive Design clave para tus Clientes y para el SEO por @JoaquinAlmansa

    Joaquín Almansa SáezHoy en día nuestros móviles son el escaparate más grande del mundo. En su pantalla se pueden mostrar todas las tiendas online.

    Si tienes una tienda online y analizas las visitas que te llegan, puedes ver que el porcentaje de visitas desde móviles y tablets crece cada vez más.

    Los datos son concluyentes. Revisando las estadísticas de algunas de mis webs: 10% del tráfico me llega de tabletas, un 20% de móviles y el 70% restante de sobremesas. Es decir un 30% de las visitas me llega desde dispositivos móviles.

    Pues bien, hay muchas webs que no se ven bien en móviles.

    ¿Se ve bien tu tienda online desde tu móvil? ¿No? Pues eso no es bueno: es como si un 30% de las personas que se paran delante de tu escaparate, en vez de ver productos vistosos y bien iluminados los viesen oscuros y desordenados, o simplemente no encontrasen la caja para poder pagar.

    Hoy día no tiene sentido una tienda online que no esté adaptada para dispositivos móviles. Pero las hay, y muchas. En parte es lógico pues muchas  tiendas se crearon hace unos años, cuando los móviles sólo servían para hablar por teléfono. Además, sucede que en muchos sectores no hay ninguna tienda preparada para móviles, con lo que todas son igual de “malas para los móviles” y al cliente no le queda otro remedio que conformarse.

    Ya sea porque vas a abrir una nueva tienda online, o vas a reformarla, son varias las alternativas que ofrece la teconología actual para que tu web sea amiga de los móviles.

    Pero antes de pasar a ver cada una de ellas, voy a hacerte una pregunta más. ¿Tiene sentido poner tu tienda en mitad del desierto? No, ¿verdad? No porque nadie pasa por allí. Interesa que tu tienda la vea mucha gente, y esto en España se consigue haciendo que tu web le guste a Google. En otras palabras, haciendo que tu web esté bien posicionada en los buscadores (SEO).

    Por tanto, la solución que busquemos para hacer tu web compatible con móviles deberá tener en cuenta el posicionamiento en buscadores.

    Ahora sí, vamos a ver algunas de estas alternativas:

    1. Crear una versión “mobile”
    2. Crear una “App”
    3. Diseño adaptativo: Responsive design

    Crear una versión “mobile”

    Esto consiste en tener dos versiones para tu web. El servidor se encargará de mostrar una u otra página dependiendo del ancho de pantalla de tu navegador.

    La ventaja de esta estrategia es que puedes tener una tienda muy bien adaptada a móviles. Los que nos dedicamos a la programación conocemos “jquery Mobile” y otras herramientas que nos permiten el desarrollo de este tipo de webs.

    El principal incoveniente es que ahora tenemos 2 versiones de una misma web, lo que nos obliga a dividir nuestros esfuerzos en SEO. Por ejemplo, sabemos que en el posicionamiento es fundamental conseguir enlaces que apunten hacia nuestra web, que ahora tendremos que repartir entre dos webs.

    Crear una “App”

    Con esta solución se pueden montar tiendas online que saquen todo el jugo al móvil de tu cliente. Podemos llegar a hacer algo que sea súper cómodo para nuestros clientes, que vaya muy rápido, que notifique las nuevas ofertas a nuestros clientes… todo un mundo de posibilidades.

    Pero esto sí que es totalmente contrario al SEO. A no ser que seas un gigante súper conocido como Amazon, a tus clientes no se les ocurrirá desacargar e instalar en su móvil la  “App” de tu tienda online. La decisión de compra normalmente empieza en Google, donde el cliente busca lo que quiere comprar, y en Google no se muestran “Apps” sino páginas web.

    Diseño adaptativo: responsive design

    ¿Y si te digo que puedes tener una única web y que esta web se adaptará automáticamente al ancho de la pantalla de tu navegador?

    Pero no estoy hablando de que simplemente se encogerá hasta encajar en el ancho de tu pantalla, sino de que se mostrarán unas secciones en vez de otras, o cambiará el tipo de letra para que sea más legible…

    Esto es el responsive design.

    Como programador, me encanta esta solución: supone tener una única versión de un sitio web. Como SEO también me encanta: todos los esfuerzos en la construcción de la red de enlaces van hacia una misma página web.

     

    Hace unos meses un nuevo cliente, y ahora buen amigo, me pidió mejorar el SEO de su tienda online, dedicada a la venta de castillos hinchables.

    Tras hablar con él, analizar su web y las de su competencia, vimos que la web necesitaba una reforma previa a las mejoras en SEO. Y fue aquí donde tuvimos que tomar la decisión de cómo adaptar la tienda online a los dispositivos móviles. ¿Adivináis qué solución elegimos? Seguro que sí. Os invito a entrar en esta web de venta de castillos hinchables, www.castilloshinchablessaltofeliz.com y comprobar cómo se visualiza perfectamente tanto en ordenadores de sobremesa como en dispositivos móviles.

    Una manera de simular esto desde vuestro sobremesa es ir estrechando la ventana de vuestro navegador y comprobar cómo la web automáticamente se va reajustando para adaptarse al ancho de la ventana. Las siguientes ilustraciones muestran cómo se ve la web con distintos anchos de pantalla. Podéis hacer click sobre las imágenes para verlas en tamaño real.

    Responsive design: Web a pantalla ancha Responsive design: web pantalla estrecha

    La primera imagen muestra la web tal como se visualiza en un ordenador de sobremesa. Vemos que hay un menú lateral a la izquierda con las categorías que ofrece la tienda online.

    La segunda imagen muestra cómo se ve en un móvil. El menú lateral desaparece y se transforma en un menú desplegable de modo que se aprovecha mejor el ancho de la pantalla para mostrar los productos y sus descripciones.

    Espero que os haya despejado algunas dudas a la hora de crear o reformar vuestra tienda online. Os animo a preguntar cuanto queráis y a dejar comentarios.

    Bibliografía

    Si sois programadores y estáis interesados en reponsive os recomiendo este libro:

    Responsive web desing, de Ethan Marcotte

    No hay comentarios