En este artículo podrás ver argumentos con ejemplos reales de porque tienes que cambiar el diseño de tu tienda online cada cierto tiempo. Un ecommerce es un negocio, no es una página para que solo vean tus amigos o tus clientes offline y te digan que bonita es. Es para captar nuevos clientes, fidelizarlos y vender.

Ejemplos de tiendas online que han modificado su diseño en estos últimos 3 años

Podrás ver como han variado los ecommerce de las siguientes empresas en estos tres años, como han ido modificando su negocio, porque al final el cambio de diseño es debido a un cambio de estrategia empresarial. Una empresa no debe de tener siempre los mismos objetivos, por eso la tienda online tiene que ir orientada a conseguir esos fines e ir evolucionando con la empresa.

Muroexe

En el 2017 Muroexe enseñaba más su logo, estaba potenciando su marca. Sus productos están orientados a jóvenes profesionales pero sobretodo hombres. Zapatillas cómodas para llevar al trabajo.

En el 2020 siguen con esa misma filosofía de comodidad pero ya ampliado a un catálogo más amplio de productos (textil, accesorios) y con una colección para hombre y otra para mujer. Han reestructurado sus categorías y ya no se muestran como nombres de colecciones sino que han dejado un menú sencillo con Hombre, Mujer, Textil, Accesorios y Outlet. Han añadido chat, opiniones (también de medios de prensa) y fotos de instagram.

Solamente con los cambios efectuados en la tienda online se puede ver como ha ido evolucionando la empresa. Su esencia no ha desaparecido sino ha ido evolucionando con nuevos productos que siguen el mismo estilo minimalista y de calidad con un mejor soporte online.

Material Escolar

MaterialEscolar.es es una tienda online que en el año 2007 tenía un menú con tantas categorías que no le cabían y ocupaban dos líneas. Enseñaba la papelería online más vendida, las novedades, la más vista y la recomendada. Muchos productos y muchos apartados, incluso en el lateral derecho.

En el 2020 es una tienda online que va más al grano. Entienden que la página de inicio solo es un paso previo para llegar al producto que buscan. Por lo tanto, desaparece el menú, dan la opción de búsqueda por marcas y enseñan las categorías más buscadas. Respecto al 2017, solo muestran 4 productos más vendidos, ningún producto más.

Cuando la tienda online tiene miles de productos, la mejor opción no es mostrar todos los que se puedan en la página de inicio, al final se satura esa página con tanta información. La mejor opción es mostrar las categorías y allí ya mostrar los productos. Otra cosa es eliminar el menú principal, han pasado de tener dos líneas de menú a eliminarlo por completo, ahí arriesgando. Yo pondría un menú hamburguesa, discreto o un menú en el footer, pero nunca prescindiría de él. Si lo hacen será que lo tienen estudiado y habrán visto por medio de mapas de calor que podrían prescindir de él (eso espero).

NutriTienda

NutriTienda es el ejemplo perfecto de una tienda online poco trabajada a un diseño cuidado y optimizado para vender. Por algo está entre las 1000 tiendas que más venden en España según el ranking realizado por el Observatorio de E-commerce y Transformación Digital.

Aspectos a tener en cuenta para mejorar y optimizar tu tienda online

Has podido ver en los ejemplos anteriores lo que han evolucionado las tiendas online, que cada vez más se orientan al usuario, no es buscar un diseño bonito, sino optimizar el ecommerce hacia el visitante. A continuación podrás ver mejoras que puedes hacer en tu tienda online para convertir más y así vender más.

Móvil

Porque el consumo de contenidos ha cambiado, por ejemplo, hace 3 años se empezaba a usar el movil para acceder a internet pero hoy en día es imprescidible que tu página esté diseñada para entorno movil y tablet. Sino estarás perdiendo ventas.

Ya no solo tiene que estar diseñada para movil sino que tiene que ser fácil y sencillo para el usuario, hemos avanzado un pasito más y cada día más los diseñadores tenemos que trabajar más y mejor en estos dispositivos.

Según el VII Estudio Anual de eCommerce en España 2020 ya son más de 20 millones de españoles entre los 16 y 70 años los que compran online, lo que supone casi un 70% del total de la población de esta franja. De estos el 94% se conecta por móvil y el 93% por PC. El ordenador va perdiendo peso como dispositivo de compra online a favor del móvil y tablet. Los menores de 45 años son de móvil y los mayores de esa edad de ordenador.

Cada año hay nuevos informes con nuevas estadísticas y los hábitos de compra van cambiando, por eso es importante estar al día y hacer cambios orientados a tu público objetivo.

La tecnología evoluciona, ¿tú tienda online no evoluciona?

Internet no funciona como un negocio físico, es todo mucho más rápido. Los hábitos de compra, la forma de compra… Cada año se están incorporando nuevos usuarios con móvil. La venta online tiene la ventaja de que puedes llegar a todo el mundo, pero como desventaja tienes que adaptarte rápido y estar continuamente innovando. Tu objetivo tampoco tiene que ser llegar a todo el mundo sino a tu público.

En internet no existe el prestigio, el que esté más arriba de buscadores es el que se lleva el pastel. Eso no quiere decir que no puedas fidelizar parte de tus clientes, que repitan compra y que una marca reconocida vende, pero no sola, ¿no ves anuncios de esas marcas? eso significa que invierten en publicidad. Puedes pensar, yo soy una tienda pequeñita, no tengo presupuesto para invertir en publicidad. No tengo presupuesto para cambiar el diseño cada poco. Deja la palabra no tengo por yo voy. Si quieres vender en internet tienes que invertir como si fuera una tienda física.

Pero ten en cuenta que si en un negocio de barrio tienes competencia, a nivel internet el pastel es más grande pero también tienes mucha más competencia. No quieras pretender tener una tienda desde hace 3 años y olvidarte de ella, vende sola? en un local fisico vende solo?

Tu tienda online tiene que ir evolucionando igual que tu negocio.

Conoce a tus visitantes

Hoy día, además de Analytics puedes disponer de mapas de calor (heatmaps) , por ejemplo Hotjar donde se puede ir viendo por donde navega el usuario y así corregir y optimizar aspectos de nuestra tienda online. Vemos donde no avanzan, partes donde no van… mediante esta herramienta es importante ir optimizando la página porque cada sector es un mundo y así conocer lo que prefieren tus visitantes. Recuerda que tus visitantes son tus futuros clientes, por eso te interesa conocer que productos prefieren, donde tienen más dificultades de navegar por la página, donde pulsan más…

Conclusión

Una tienda online tiene que ir cambiando con el paso de los años, por un lado avanzar igual que crece el negocio, por otro lado, optimizarse según las nuevas tecnologías y, por último, saber quien es tu cliente online.  Un ecommerce puede ser rentable o no serlo, de ti depende.

La entrada ¿Por qué tienes que cambiar el diseño de tu tienda online de hace 3 años? aparece primero en García Ferro.

En este artículo me voy a centrar en como puedes comprobar si tus plugins de wordpress están ralentizando tu web. Y esto se puede comprobar, como  no, con otro plugin, el P3 Performance Profiler.

Consigue una mejor experiencia de usuario

Si tu página web va rápido, se traducirá en una mejor experiencia de usuario. ¿Quién quiere conseguir que entren los visitantes y al momento se vayan? No tendría sentido. Lo lógico es que una vez que entren, miren la página y que se queden lo máximo posible. Hay que ponérselo fácil.

Antes instalaba todos los plugins que me hacían falta para conseguir un diseño chulo, con muchas funcionalidades, pero ahora no. Escojo más los plugins, si instalo uno pesado es porque me va a compensar mucho en prestaciones, sino no me merece la pena.

¿Cómo funciona P3 Performance Profiler?

El primer paso es instalarlo desde el directorio de plugins de WordPress. Como todos los plugins que están en ese directorio, es gratis.

Después solo tienes que ir a tu panel de administración de WordPress en Herramientas -> P3 Plugin Profiler. Verás una pantalla similar a esta.

El siguiente paso es pulsar en Start Scan y comenzar el escaneo de los plugins que tenemos intalados.

Una vez completado el escaneo tenemos una pantalla similar a ésta:

Los datos son bastante malos, los plugins tardan en cargar 3 segundos y medio, es muchísimo. Vemos que se lleva el gato al agua el AcessPress Social Share.

Este es el culpable:

Es el plugin que utilizo para compartir los artículos en las redes sociales. Esta claro que tengo que buscar otro, este pesa demasiado.

Lo desactivo y vuelvo a hacer el escaneo.

Ha cambiado la cosa, ha bajado considerablemente el tiempo de carga.

Si desactivo plugins prescindibles consigo bajar un poco este tiempo.

Ahora sería el momento de valorar si plugins como el W3 Total Cache y el WordPress SEO me interesan. En este caso, prefiero asumir ese tiempo de carga porque con el W3 Total Cache la web va más rápido (90/100 en ordenadores según PageSpeed de Google) y el WordPress SEO me permite optimizar la página para los buscadores. Son dos de mis plugins imprescindibles.

Aparte de eso muestra otras muchas gráficas como:

Detailed Breakdown

Puedes ver de una manera global lo que más consume de tu web y la línea amarilla indica el tiempo de carga total de tu sitio.

Simple Timeline

Se puede ver que hay algún plugin que está disparando la carga.

Detailed Timeline

Veo que el plugin Contact Form 7 está disparando el tiempo, tengo que valorar cambiarlo por otro. Si consigo que no ralentice tanto, mejoraré la velocidad de la web. Ya tengo próxima tarea

Advanced Metrics

adfasd

El tiempo de carga de esta página web está en 1.66 segundos, que no está mal, pero como se ve en este plugin se puede mejorar. Un dato muy interesante que viene en este apartado es el de Theme Load Time, con este dato podrás controlar si lo que tienes que optimizar es el tema y no tanto los plugins o bien, ambas cosas.

Otro dato importante que viene aquí es el de la Memoria usada, en este caso 18 visitas han usado 79.76 MB de Memoria. ¿Y si en mi hosting tuviera contratada una memoria muy justita?

En resumen

El plugin P3 Plugin Profiler nos va a ayudar mucho a optimizar nuestro sitio de wordpress y aunque se centra en los plugins, podemos deducir por los datos que nos muestra si el problema lo tenemos con el tema o tenemos poca memoria contratada para las visitas de nuestra web.

¿Sueles utilizar este plugin para optimizar tu wordpress?

La entrada Como saber si tus plugins de WordPress están ralentizando tu web aparece primero en García Ferro.

Imagénes no optimizadas

Muchas páginas web tienen muchas imágenes y a un tamaño muy superior al que se ven. Otras veces el tamaño es el correcto pero no están reducidas de calidad. Recordemos que en internet no es necesario tener una calidad óptima para que se vean bien.

Si tu página web está diseñada en WordPress tienes el plugin de Smush.it que te reducirá las imágenes automáticamente al subirlas a la página web. Es un plugin gratuito para imágenes inferiores a 1MB (no se te ocurra subir imágenes más grandes).

Mucho Javascript

Le añadimos funcionalidades a la página web, y más y más. Visualmente es una web muy bonita, con muchos efectos pero, ¿cuanto tarda en cargar? ¿Merece la pena? Con esto no quiero decir que no se le pueda insertar ningún javascript ni ningún efecto, sino que como todo en esta vida, con ‘sentidiño’.

En wordpress la tendencia es instalar demasiados plugins y algunos ‘comen’ muchos recursos.

No utilizar el almacenamiento caché

Si nuestras páginas no utilizan el almacenamiento caché del navegador, cada vez que nuestros visitantes vean la págian web necesitarán volver a descargar todos los recursos, lo que conlleva incrementar el tiempo de carga.

Normalmente nuestros visitantes no vendrán únicamente una vez a nuestra página web sino que la gran mayoría regresará, por lo que es conveniente activar la caché.

En wordpress hay plugins de caché que funcionan muy bien en este aspecto. Algunos de los que utilizo son:

• WP Super Cache
• W3 Total Cache

Normalmente utilizo el segundo pero en algunas páginas web que no es compatible suelo ir al primero. Cualquiera de ellos está bien.

En prestashop en la parte de administración hay opciones de configuración para activar la cache. El tiempo de carga de la página será bastante mejor si se activa.

Herramientas online para comprobar la velocidad de tu página web

Estas son algunas de las causas por las que tu página web puede ser lenta, pero lo ideal es que mires en tu caso concreto los problemas que puede tener la web. Hay herramientas online que te ayudarán con esta tarea:

• PageSpeed Insights: es un servicio de Google, donde te indica que elementos debes de corregir para aumentar la velocidad de tu página web en versión móvil y para pc.
• Pingdom: también te indica aspectos a corregir en tu web. En opciones avanzadas puedes buscar por ubicación del servidor (muy útil si tus visitantes vienen de una zona concreta). Te dice el tiempo en segundos que tarda en mostrarse tu web al visitante.

Hay más herramientas similares a éstas, te pongo las que más utilizo.

Espero que este artículo te ayude a mejorar la velocidad de tu página web.

La entrada ¿Por qué tu página web es lenta? aparece primero en García Ferro.

Google ha creado una guía excelente donde cualquier desarrollador pueda crear sitios adaptados para móviles, no pretendo hacer una copia y pega de esa guía (lo cual sería una tontería por mi parte) sino que pretendo complementarla en lo referente a las imágenes. El propósito de este artículo no es otro que fomentar buenas prácticas con imágenes para móviles.

1.- Conocer las imágenes que más pesan en nuestra página web

Con webpagetest podemos averiguar cuales son las imágenes que más tardan en cargar en el móvil. Al hacer la búsqueda de tu web tienes que elegir el móvil donde quieres hacer la comprobación.

Una vez hecho lo anterior, en detalles puedes ver las imágenes que hay que trabajar.  Por ejemplo en mi web serían las que están en la imagen:

Las que tendría que corregir sobretodo son las que se llaman devices1.png, devices2.png, devices4.jpg y 2.jpg. Están haciendo que tarde la web más en cargar.

2.- Optimizando esas imágenes para móviles

Es importante optimizar las imágenes en todos los dispositivos móviles, pues de ello dependerá el resultado final de tiempo de carga de la página web.  Pero si eso es importante, mas aún es optimizarlo para móviles, para que no se muestren imágenes de gran tamaño y que no hacen falta para estos dispositivos.

Si hasta aquí estás de acuerdo, solo nos queda indicar como se hace para optimizar las imágenes.

Indicamos la etiqueta meta

Dentro del <head> de nuestra web indicamos:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Esto le dice al navegador móvil que es un sitio responsive y que no escale la imagen.

Código HTML

Antes de crear el HTML, tenemos que crear dos imágenes, la que se va a ver en los ordenadores y la que se va a ver en los móviles (con un ancho máximo de 375px). Una vez hecho esto, vamos al HTML:

<style>
    @media (min-width:376px) {
        .miimagen {
            background-image: url("desktop.png");
            width: 700px;
            height: 550px;
        }
    }
    @media (max-width:375px) {
        .miimagen {
            background-image: url("mobile.png");
            width: 350px;
            height: 130px;
        }
    }
</style>
<div class="miimagen"></div>

No se trata de crear el código para dos imágenes y ocultarla o no según el dispositivo. No cometas el error de crear el código de esta manera:

<style> 
    @media (min-width:376px) {
        .mobile_image {
            display: none;
        }
        .desktop_image {
            display: inline;
        }
    }
    @media (max-width:375px) {
        .mobile_image {
            display: inline;
        }
        .desktop_image {
            display: none;
        }
    }
</style> 
<img src="mobile.png" class="mobile_image" />
<img src="desktop.png" class="desktop_image" />

Es una mala práctica porque las dos imágenes serán descargadas, por lo que no conseguirás reducir el peso de la página.

¿Te ha parecido útil el artículo? Anímate y comenta.

La entrada Buenas prácticas con imágenes para móviles aparece primero en García Ferro.

¿Cuáles son las desventajas?

[accordion]
[accordion-title] Mala imagen [/accordion-title]
[accordion-body]
Que el visitante vea la página en un momento muy inicial y se quede con: «ya lo vi todo», «esta web no tiene nada». Lo que hay que intentar es un enganche para que los visitantes vuelvan. Pero esto pasa en cualquier web, sea nueva o tenga años.
[/accordion-body]
[accordion-title] Falta información [/accordion-title]
[accordion-body]
No muestras todo lo que puedes ofrecer. Puede ser que ofrezcas un servicio que no tienes insertado en la web o no detallado como debería. Riesgos que corres que tienes que asumir si haces lo mismo que yo.
[/accordion-body]
[/accordion]

¿Cuáles son las ventajas?

[accordion]
[accordion-title] Posicionamiento [/accordion-title]
[accordion-body]
Si la página está en internet cuanto antes, conseguiré que se posicione antes. Si espero a tenerla completamente acabada perdería visitantes que entrarían ahora. Si tienes una idea, hazlo.
[/accordion-body]
[accordion-title] Contenidos actualizados [/accordion-title]
[accordion-body]
La ventaja que tiene internet sobre cualquier medio impreso, es que podemos ir actualizando sobre la marcha. Así cualquier error tan pronto sea detectado se podrá corregir. Y no lo olvides, una página web con contenidos actualizados es muy importante para el posicionamiento.
[/accordion-body]

[accordion-title] Cambios en las secciones [/accordion-title]
[accordion-body]
Tengo claros los contenidos que me faltan por insertar, pero dependiendo de las visitas a las distintas secciones, puede que cambie de idea y me vaya por contenidos que vea que interesan más a mis visitantes. Ya se verá más adelante si mis contenidos iniciales coinciden con los de mis visitantes.
[/accordion-body]
[/accordion]

Lo que sí estoy totalmente segura es que ningún diseñador que ofrezca servicios puede estar sin página web. Cuando empecé en febrero a ser freelance, empecé a estar más presente en redes sociales… y en Google+ Jesús Pérez me escribió: No he visto ejemplos de tus diseños ¿tienes alguna página de portfolio?. En esos momentos respondes: No, está en construcción… Al tener trabajo estaba un poco dejando de lado la página web, pero desde aquella me lo tomé como prioritario. Si no tienes página web, no existes. No puedes presentarte como un profesional de diseño web, sin página web (que bien viene el dicho de: en casa del herrero, cuchillo de palo, jaja).

Lo mejor del asunto es que aún no tengo el portfolio insertado en mi web, pero será lo siguiente, lo prometo.

La entrada Porque lanzar una página web sin terminar aparece primero en García Ferro.