Equilibrio entre diseño y desarrollo web: el éxito del e-commerce

El año 2018, cuando Google decidió por fin aplicar el Mobile First Index tras un año y medio de tests y pruebas, supuso una auténtica revolución para las empresas. A partir de ese momento, Google iba a basar sus resultados de búsqueda únicamente en la información que encontrara en la versión para móviles de las páginas web. Este nuevo método de indexación obligó a remodelar los portales web en su diseño y desarrollo para adaptarse no solo a los cambios del algoritmo de Google, sino también a los nuevos hábitos de consumo de los usuarios.

Según un estudio de IAB Spain, casi el 70% del tiempo que navegamos por Internet lo realizamos desde dispositivos móviles; 2 de cada 3 minutos que consultamos la red lo hacemos desde nuestro smartphone, por delante del ordenador o la tablet. La tendencia es imparable y el comercio online debe pensar desde su concepción, diseño y desarrollo del e-commerce en las pantallas móviles en primer lugar.

Unos consejos para empezar la transformación serían los siguientes:

Desarrollo y programación web: adapta tu página responsive

1. Usa patrones móviles. Hay que tener en cuenta en todo momento el tamaño de la pantalla y usar un patrón móvil para que la página no se sobrecargue. Es una manera de comprobar también la legibilidad de los contenidos en todos los formatos.
2. Calcula la carga de la página. Al transformar una web en responsive hay determinados elementos que pueden ralentizar la carga de la página en un dispositivo móvil respecto a su versión de escritorio. Hay que optimizar para no retrasar la carga con recursos innecesarios.
3. Simplifica. La versión de escritorio de una página web nos da mucha más libertad para jugar con el diseño y los efectos. Para la versión mobile debemos filtrar lo imprescindible y potenciar la claridad en la estructura, los contenidos y las apelaciones al consumidor.

El servicio de comercio electrónico / e-commerce necesita responder a las nuevas demandas de consumo de los usuarios para seguir siendo efectivo, y en este objetivo el diseño y desarrollo web juega un papel esencial.

Herramientas para desarrollo web

Google ayuda a los desarrolladores web a través de la herramienta Google Search Console, desde la que facilita advertencias y consejos sobre cómo mejorar el diseño web de manera que garantice un buen posicionamiento. Para empujar a los negocios a la filosofía Mobile Friendly, Google ha modificado el panel de Search Console para que se puedan controlar los errores tanto del site como de la versión móvil. Si abres la herramienta encontrarás en el panel de control dos pestañas: móvil y escritorio.

Googlebot, robot de búsqueda que utiliza este buscador, ha recibido las indicaciones pertinentes en su algoritmo para visualizar los sitios web como cualquier dispositivo, así que ya no solo se limita a leer el código fuente sino que también renderiza las páginas y consulta las hojas de estilo (CSS).

Con esta modificación, lo que ha pretendido Google es conseguir optimizar las opciones de búsqueda desde cualquier dispositivo, ya que está comprobado con Google Analytics y otras herramientas que, cada vez más, el incremento de usuarios con dispositivos móviles y tablets ha desbancado a los de resoluciones tradicionales.

Opciones de desarrollo web para un comercio electrónico

Existen varias opciones que se pueden plantear en el desarrollo web como solución para conseguir un diseño responsive para e-commerce. Estas serían las dos opciones principales:

• Alojar en un subdominio la versión para este tipo de dispositivos

Para entenderlo mejor, un ejemplo sería esto: http://m.nombredelaempresa.es. Esta no es la opción más recomendable, ya que nos obliga a gestionar dos sitios en vez de uno.

• Adaptar a través del desarrollo web el diseño para ambos dispositivos

Esto significa colocar proporciones relativas en vez de absolutas en las medidas de los diferentes contenedores, imágenes, etc. dentro del código fuente y CSS, según identifique el buscador desde el dispositivo que se esté utilizando. Todo esto además de adaptar las etiquetas HTML5 para que el buscador pueda identificar con mayor facilidad las distintas partes del site. Es importante elegir el mejor framework de desarrollo según las necesidades concretas de cada proyecto. De esta manera, solo utilizaremos una única URL y, por tanto, solo se tendrá que gestionar un sitio.

¿Qué ventajas se obtienen para e-commerce?

Al aplicar la segunda opción de diseño y programación web obtenemos ventajas, tanto para el usuario como para el buscador principal:

1. Simplificar las acciones que debes realizar para el posicionamiento del e-commerce.
2. Mejorar la usabilidad de la web. Y ahorrar a varios departamentos (SEO,Marketing) duplicar el tiempo y los esfuerzos necesarios para llevar a cabo sus acciones.
3. Para el buscador es mucho más cómodo indexar las páginas de una sola URL, ya que no tiene que pasar por varias versiones con el mismo contenido de una sola web.
4. Evitar posibles penalizaciones por duplicidad de contenido y contar con un mayor control de la estructura del site.

El estudio del comportamiento de los algoritmos de Google (en constante cambio, por otro lado) y las recomendaciones que el propio gigante tecnológico ha lanzado nos encaminan a la opción de adaptar a través del desarrollo web el diseño para todos los dispositivos, con páginas web a medida que alojen los e-commerce.

Aquí entra en juego la variable de autoridad: Google da ahora mismo mayor peso a la autoridad del dominio y de la página a la hora de posicionar, y un diseño responsive facilita esa consecución de autoridad al aglutinar todas las citas y enlaces externos en una página y no en dos.

Desde hace un tiempo, Google ha dejado de lado el page rank de las páginas para darle un mayor peso a estas variables de ‘autoridad de dominio’ y ‘autoridad de página’, que tienen que ver con la reputación y la citación de otras páginas a la nuestra. Existen distintas herramientas online y extensiones descargables para los navegadores principales con las que puedes consultar la autoridad de tus páginas: SemRush es un ejemplo. Tener en cuenta esta variable, revisarla y mejorarla también será útil para tu e-commerce.

Si lo que buscamos en un e-commerce es conseguir el mayor número de ventas posible a través de generar mayor tráfico orgánico, con estrategias de Inbound Marketing y el apoyo SEO/SEM, adoptar un diseño mobile friendly que responda a las prioridades de Google y los usuarios es igual de importante que el resto de tareas. El desarrollo web debe ir de la mano del diseño y complementarse para evitar una penalización, cuyo resultado puede ser una pérdida de posicionamiento que nos aleje de posibles clientes que se interesarían por nuestro producto si nos encontraran. Y no podemos dejar escapar ni una sola oportunidad.