Ideas para elegir una plantilla de WooCommerce

Tweet about this on TwitterShare on Facebook0Share on Google+2Share on LinkedIn11

Imaginemos que un cliente solicita una tienda online dentro de su site y para ello escoge WooCommerce, coincida o no con nuestro criterio sobre si es el CMS más adecuado.

Para poder realizar un buen trabajo, la plantilla debería cumplir unos requisitos mínimos:

  • Que el diseño sea lo más parecido posible al diseño que queremos. Cuentos menos cambios se tengan que realizar, más tiempo ahorraremos
  • Que la navegación sea sencilla y se adapte a nuestras necesidades
  • Que sea responsive, rápida y tenga una buena estructura
  • Que sea segura

Si vamos a dedicar tiempo y esfuerzo a un proyecto web lo ideal es que usemos una plantilla segura, un CMS seguro y un servidor igualmente protegido. Ten cuidado con las plantillas gratuitas y pirateadas porque podrían contener código malicioso. Yo no me fiaría, por ejemplo, de una plantilla que alguien comparte “desinteresadamente” comentando que es “exactamente” igual que la original. Lo mejor es comprar una de pago o editar alguna de las plantillas que vienen por defecto, y así te ahorras problemas. De todas formas, nunca está de más pasarle algún plugin como Bulletproof Security o realizar comprobaciones con alguna herramienta online como Sucuri.

1- Creando un listado de plantillas para testear

Para este listado vamos a buscar únicamente en dos sites que venden plantillas de desarrolladores reconocidos. Como en esos sites hay gran variedad, y para elegir una podemos empezar  por seleccionar únicamente aquellas plantillas responsive que tengan una buena estructura. Así, reduciremos el listado de “candidatas” y podremos elegir con más seguridad.

A) Buscando en themeforest.com:

  • En el menú de la izquierda he seleccionado “WooCommerce”, y en el cuadro de búsqueda he escrito “responsive”. Si lo que buscamos son plantillas para restaurantes, podemos probar a buscar “responsive restaurant”, por ejemplo. También he cogido algunos resultados del listado que aparece por defecto al seleccionar la categoría WooCommerce.
  • Vamos abriendo las plantillas en nuevas pestañas y luego pulsamos “live preview”.
  • En algunos casos nos dan a escoger entre varios formatos de la misma plantilla. He seleccionado el formato por defecfto en todas (el primero que aparece).
  • Por último, eliminamos el banner superior pulsando “remove frame”. En la mayoría de los casos, nos redireccionan a una URL nueva.

B) Y si lo hacemos desde WooThemes, simplemente nos vamos a WooCommerce > Themes, en el menú superior, y vamos abriendo los que nos gusten en nuevas pestañas. También puedes utilizar el cuadro de búsqueda, tendiendo en cuenta que la categoría marcada sea WooCommerce. Y fíjate bien al abrir las demos porque aún teniendo marcada esa categoría te cuelan algunos temas que no son para WooCommerce.

El listado que he hecho solo tiene 27 plantillas. Si quieres más, puedes probar algunas búsquedas como:

  • allinurl:”demo2.woothemes.com/”
  • allinurl:”demo.roadthemes.com/WP/”
  • allinurl:”demo2.wp.noothemes.com/

A continuación, extrae las URLs con algún addon de Chrome (tipo Link Clump) y elimina los duplicados con Excel.

2- Analizando y reduciendo el listado de candidatas

Guardamos la lista en un fichero .txt insertando un dominio por línea. Hay varias formas de analizar estos listados. Por ejemplo, podemos pasarle la araña de las SEO Tools de Excel y realizar comprobaciones como:

  • Errores de validación HTML
  • Puntuación de Google PageSpeed (versión escritorio)
  • Utilización de h1/h2/h3
  • Codificación de la plantilla (como únicamente hay una plantilla que no es UTF-8 y no es responsive, no he incluido esta columna).
  • Algunos datos que pueden no afectar únicamente al diseño de la plantilla, como los tiempos de respuesta del servidor, los tamaños de pagina/texto/código y el número de palabras.

He añadido manualmente la columna “Mobile” para realizar comprobaciones manuales de si son responsive o no. Y también he revisado manualmente la columna “h1”. Sorprendentemente, hay varias plantillas que no usan h1: ni en texto ni en imágenes, ni teniendo el h1 creado pero vacío.

Ahora podemos ordenar los campos a nuestro gusto. Yo he usado el siguiente criterio de ordenación:

  • Que sean responsive
  • Que utilicen h1
  • Que puntúen bien en Google PageSpeed
  • Que la página ocupe poco espacio

Y también podemos colorear un poco las celdas para facilitar la visualización de los datos, quedando algo parecido a esto:

analisis plantillas woocommerce

Aquí tenéis el listado de plantillas en Excel, por si lo queréis descargar.

Si nos fijamos más en el tamaño de página que en la puntuación de PageSpeed, por ejemplo, podríamos escoger estas tres (de 27 analizadas, aunque hay más con puntuaciones parecidas):

  • http://demo2.woothemes.com/storefront/
  • http://wp.nootheme.com/fulgor/
  • http://template-demo.org/woo/WCM01/WCM010020/WP1/

Si alguna nos gusta visualmente y parece que cumplirá las funcionalidades requeridas sin necesidad de editar código o añadir plugins adicionales, podemos analizarla un poco mejor pasándole las SEO Tools a ese dominio (en lugar de un listado de dominio). Así podremos observar mejor las páginas y la estructura de esa plantilla.

En el esiguiente ejemplo he analizado la puntuación de Google PageSpeed y la utilización de h1/h2/h3 para el tema Fulgor. Como se puede observar al abrir el Excel, no todas las páginas de la plantilla ofrecen las mismas puntuaciones de velocidad. Y también podemos abrir cada una de las páginas de la plantilla para ver las diferentes opciones de diseño que ofrecen.

analisis plantilla woocommerce

Aquí tenéis este otro fichero de Excel por si lo queréis descargar. Tened en cuenta que al usar la versión gratuita de las SEO Tools el análisis está limitado a 50 URLs.

¿Qué os parecen estas ideas? ¿Añadirías algo a este “método” que me acabo de inventar?

Tweet about this on TwitterShare on Facebook0Share on Google+2Share on LinkedIn11

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *