Tienda Online: 9 puntos a tener en cuenta

Un día te levantas y te dices a ti mismo “si todo el mundo vende por internet ¿por qué yo no? es la hora de montar una tienda online”. Cada vez compramos más por internet, por lo tanto, es una oportunidad de negocio muy real. Vender nuestros productos por la red de redes, nunca había sido tan fácil. Tenemos multitud de sistemas y plataformas para vender nuestros productos. Nos montamos una página web tipo tienda, metemos nuestros productos y ya lo tenemos todo listo para vender… pero ¿esto es así?.

A la hora de montar una tienda online hay que tener una serie de cosas muy claras, si no queremos fracasar a las primeras de cambio. Una tienda online la podemos tener montada en unas horas utilizando gestores de contenido como WordPress con su plugin Woocommerce, utilizar la plataforma de tienda online Prestashop o Magento, otra plataforma de tienda online. Pero, si tu tienda física no la empiezas con el local ¿lo harías con tu tienda online?.

 

graficadver diseño web tienda online

 

Tienda online: 2 Preguntas fundamentales

 

Antes de ponernos con la plataforma que vamos a utilizar y el diseño de la tienda, me gusta responder a estas 2 cuestiones:

 

  • ¿Conozco a mi cliente objetivo? saber quien es mi cliente, quien es el destinatario de mis productos. Esto es igual que si montas una tienda física: tienes que conocerlo a la perfección para saber como llegar hasta él.
  • ¿Conozco a mi competencia? puede que mi competencia ya esta vendiendo online. Conocer como lo hace la competencia nos puede ayudar a saber como enfocar nuestra tienda, como podemos mejorar lo que hacen ellos, que podemos ofrecer que ellos no, etc.

 

Una vez respondemos a estas 2 preguntas, es la hora de dejar claros los aspectos básicos, lo que ofrecerá nuestra tienda online:

 

Donde queremos vender

 

¿Queremos vender solo en nuestro país o a todo el mundo? pensad en las aduanas, restricciones que tienen los países a ciertos productos e incluso en tu propio país te puedes encontrar con problemas a la hora de realizar envíos de ciertos productos.

 

Tipo de producto

 

¿Vendemos productos físicos o servicios? tenemos que tener muy en cuenta el tipo de producto que vendemos ya que así podremos determinar si necesitamos envío o no, que precio tendrá el envió, etc.

 

Características de los productos

 

¿Tenemos la información detallada de nuestro producto? descripción, fotos, características concretas, es algo fundamental para que nuestros clientes sepan lo que están comprando.

 

Formas de pago

 

Si vamos a usar TPV contratado con un banco, PayPal, contrareembolso, etc. Ahora mismo existen multitud de opciones a la hora de pagar y que el cliente agradece. Estudia las que hay y elige las que sean mejores para ti y tus clientes.

 

Plazo de las entregas

 

Un punto muy importante que puede decantar muchas ventas. Gestionar bien los plazos de entrega es fundamental y hay que tener claro cuanto tardará en llegar al cliente final nuestro producto. El plazo de entrega lo enlazamos con los el tipo de producto por temas de envío, peso, etc. No te comprometas con plazos que no puedas cumplir.

 

Devoluciones

 

Otra cosa a tener en cuenta es nuestra política de devoluciones. Hay que tenerla bien desarrollada y que los clientes puedan acceder a ella sin dificultad. Evita muchos problemas.

 

Una tienda online requiere que tengamos todos estos puntos claros, bien analizado todo y lo más detallado posible. Si no es así, las posibilidades de fracasar son altas. Es tedioso y aburrido, seguro que más de uno lo considera hasta complicado, pero es algo que hay que realizar antes de empezar con el desarrollo de la propia tienda.

 

graficadver diseño web tienda online

 

Por fin tengo mi tienda, pero ¿he terminado ya?

 

El trabajo en una tienda online no termina cuando tengo la web finiquitada. Necesita de una trabajo constante que incluye cosas como:

 

  • Gestionar pedidos: estos llegan a través de la web y hay que revisarlos para que no haya errores, proceder con la preparación y el envío del producto.
  • Incidencias: aquí entra todo tipo de problemas, desde envíos que no llegan, cuentas que no se activan correctamente, etc.
  • Pagos y devoluciones: revisar que los pedidos se han pagado y, sobre todo, saber como gestionar de manera correcta las devoluciones.
  • Actualizar nuestra tienda y promocionar: este es un trabajo duro, hay que estar muy pendiente del stock, añadir productos nuevos y detallarlos a la perfección, promocionar nuestra tienda mediante redes sociales, nuestro blog, etc.

 

Como veis una tienda online requiere de tener las cosas muy claras antes de empezar con el diseño de la propia tienda. Requiere de una importante planificación previa que mucha gente no tiene en cuenta y es el motivo por el que fracasan. Si lo haces bien podrás conseguir un negocio rentable y con la comodidad de poder gestionarlo desde cualquier sitio.

Guía para mejorar la velocidad de WordPress. Parte 1

Tener una web en WordPress no es solo añadirle contenido y ya está. Tu web tiene que estar bien optimizada. Y esto es una guerra que nunca termina. Cuando tenemos una web ya sea un blog, un portfolio o una tienda, siempre estamos buscando cosas nuevas que mejoren nuestra posición en internet. Esto tiene sus efectos positivos pero, ¿nos paramos a pensar como afecta a nuestra web en términos de carga?.

Como usuario, si una web tarda más de 2 segundos en cargar, lo más probable es que me haya ido a buscar lo que quería a otro sitio y probablemente no vuelva (fallo de experiencia de usuario). La velocidad es algo fundamental en una web no solo para los usuarios, también para Google. ¿Y esto es cierto? Pues sí, ya que Google posiciona mejor las webs que tienen una mejor velocidad de carga. Al usuario no le gusta esperar y Google siempre se adapta a ello mostrando webs más rápidas.

 

Herramientas para medir la velocidad web

 

Ahora te preguntarás, ¿Y como sé si mi web esta bien optimizada y carga a la velocidad de la luz? Pues es tan sencillo como utilizar una de las múltiples herramientas online. Aquí te recomendamos las siguientes:

Todas funcionan igual: insertas la url de tu web y le das al botón de analizar. Una vez ha terminado el proceso, te dará un calificación de la F a la A o de 0 a 100. Con esa calificación ya sabrás si tienes una web rápido o no. Pero la cosa no queda aquí, ya que estas herramientas proporcionan información adicional para mejorar tu web. Nosotros vamos a ver la información que nos da Google PageSpeed Insights.

Una vez introduzcas y rastrees tu web, PageSpeed Insights te ofrecerá 2 pestañas: una con la puntuación para móviles y otra para la versión de escritorio de tu web. Mediante un código de colores podemos saber las cosas que están mal (rojo) y hay que darles prioridad, las cosas que tenemos que mejorar (amarillo) y lo que esta bien en nuestra web (verde). En los móviles hay un extra que es la experiencia de usuario, que puntúa de la misma forma.

google pagespeed insights

Cuantas más reglas cumplamos y estemos en verde, mejor valoración tendremos. Lo interesante de Google PageSpeed Insights, es que nos dice exactamente lo que tenemos mal y como mejorarlo. Vamos a centrarnos en estos avisos y la forma de solucionarlos en WordPress.

 

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

 

Esta recomendación es, probablemente, la más común de todas. Hace referencia a la forma en la que se cargan los elementos de la web. Podríamos decir que Google es un poco caprichoso y, como siempre, da prioridad al contenido y que el resto de cosas se ejecuten al final de la web.

Si has desarrollado la web desde 0 o has añadido tu mismo el CSS  y el JavaScript, puede que este problema no lo tengas, pero si utilizas una plantilla (y no esta optimizada) seguramente tengas este problema. Es complicado de solucionar ya que depende mucho de la plantilla elegida y de los plugins que tengamos. Puedes usar un plugin como JavaScript to Footer  que mueve la carga de JavaScript al footer de la web, aún así, si tu web tiene mucha cosa probablemente se te desconfigure la misma, así que copia de seguridad y úsalo bajo tu propio riesgo.

 

Optimizar imágenes WordPress

 

Quizá sea lo mas sencillo de hacer y sin riesgo. Lo interesante es que PageSpeed Insights te ofrece un listado de imágenes que ocupan más de lo necesario y deberías optimizarlas.Para ello puedes hacer 2 cosas:

  • Descargar todas las imágenes que te recomienda PageSpeed Insights y optimizarlas mediante Photoshop o alguna herramienta similar. Luego las subimos de nuevo.
  • Utilizar un plugin (un clásico) como WP Smush o EWWW Image Optimizer que optimizan las imágenes nada más subirlas. También puedes optimizar las que ya hay subidas.

Esta primera opción es la mejor ya que siempre hay que limitar el uso de plugins.

 

Habilitar compresión

 

Esto consiste en comprimir los recursos de tu web con gzip, tecnología que tiene que estar habilitada en tu servidor. Puedes añadirlo mediante un plugin como WP Super Cache (hablaremos de el en otro momento) o añadir el siguiente código a tu archivo .htaccess

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

Recuerda haz una copia de seguridad del archivo .htaccess antes de tocar nada.

 

Minificar HTML, CSS y JavaScript

 

Esto nos dice que tenemos que compactar nuestros archivos HTML, CSS y JavaScript eliminando espacio innecesario, comentarios, etc. PageSpeed Insights te recomienda que archivos tienes que modificar y, lo mejor, es que te da la opción de descargar las versiones ya preparadas de dichos archivos.

google pagespeed insights

Con Google PageSpeed Insights podrás mejorar el rendimiento de tu web gracias a su información intuitiva y fácil de aplicar, además de que es una herramienta gratuita. De todos modos, no te vuelvas loco si no puedes aplicar todas las recomendaciones ya que algunas no dependen de tí.

En el próximo post veremos como configurar el plugin de caché WP Super Cache

Apps para todos

Si cuando empezaron a aparecer las páginas web alguien nos decía que todos íbamos a poder crearla nosotros mismos con unos clicks y un poco de gusto, pensaríamos: “este esta loco”. Para hacer una web necesitamos conocimientos de programación que no están al alcance de cualquiera (o sí). Ahora no saber de programación no es excusa para no tener una web (siempre y cuando la necesitemos).

Existen multitud de herramientas para desarrollar nuestra página web como pueden ser los programas de creación web del que disponen empresas como 1&1 o utilizar gestores de contenido como WordPress mediante plantillas, pasando por gestores de tiendas como Prestashop. Sin olvidarnos de las empresas que se dedican al desarrollo web (de algo tendremos que vivir). Las opciones son amplias y variadas, y el que no tiene web es porque no quiere o porque no la necesita para su negocio.

Pues con las Apps esta pasando algo similar. Mientras que, en un principio es complicado desarrollarlas sin conocimientos de programación, están emergiendo del mismo modo que en el desarrollo web, ciertas herramientas para que, sin conocimientos de programación, podamos tener nuestra propia app. Si que hay que destacar que si queremos un desarrollo complejo, al igual que el desarrollo web, es necesario dejarlo en manos de un profesional.

Partiendo de este punto, vamos a ver varias herramientas que nos resultaran muy útiles para poder crear nuestras propias apps.

 

1º Mobincube

mobincube apps diseño web

Un generador de aplicaciones muy completo. Puedes utilizar las plantillas predefinidas de la herramienta o ir diseñando la tuya paso a paso para un mayor grado de personalización. Es muy interesante el poder exportar la app tanto a iOS como Android e incluso Windows Phone. Cuenta con un servicio de monetización para gestionar nuestros ingresos mediante la publicidad.

 

2º Upplication

upplication apps diseño web

Si quieres crear tu app de manera sencilla e intuitiva, Upplication puede ser la mejor opción. Esta startup española te permite crear tu app y al mismo tiempo esta puede servirte como web, ya que podremos verla en un ordenador. El desarrollo se basa en plantillas y el usuario es el que va añadiendo las funcionalidades que necesita. Además nos permite añadir un catálogo de productos, con lo que podremos tener nuestra tienda configurada en una aplicación. Puedes probarla de manera gratuita durante 15 días.

 

3º GoodBarber

goodbarber apps diseño web

Esta herramienta esta creada por una empresa dedicada al desarollo de apps. Con este sistema puedes crear aplicaciones nativas para iOS y Android. Como bien dicen en su web, puedes crear tu app en 4 sencillos pasos, siendo la más importante la primera fase, la del diseño. Se basa en plantillas y puede vincularse con gestores de contenido como WordPress. Si quieres probarla, tiene una versión de prueba de 30 días.

 

4º The AppBuilder

appbuilder apps diseño web

Herramienta británica con la que se han creado más de 300.000 apps. El proceso de creación de las apps es bastante simple, pero a pesar de ello, presenta una gran cantidad de opciones a la hora de diseñar y crear tu app. Permite crear aplicaciones nativas para iOS, Android y Windows Phone.

 

5º AppPresser

apppresser apps diseño web

Si utilizas WordPress, esta puede será una herramienta muy útil a la hora de desarrollar tu app. Esta herramienta es un plugin para WordPress que nos permite convertir nuestra web en una app para iOS y Android. Es muy interesante para aquellos que lo quieren tener todo en una única plataforma.

 

Existen otras plataformas como AppArchitect, MIT App Inventor, AppMachine, etc. con las que desarrollar de manera sencilla nuestras apps. Ahora es cuestión de que cada uno escoja la que mejor se adapte a sus necesidades.

Tu WordPress te necesita: Plugins imprescindibles

Siempre he renegado un poco de los plugins de WordPress. ¿Por qué? Básicamente porque consideraba que pudiendo hacer tu mismo las cosas con un poquito de php, html y css, no es necesario recurrir a los plugins. Pero, cuando uno empieza a trabajar con WordPress, se da cuenta de que hay cosas que es mejor controlarlas mediante plugins. Nos hacen la vida más fácil, sencilla y son una herramienta imprescindible si queremos tener nuestra web o blog a punto. 

 

¿Muchos plugins o pocos y de calidad?

 

A la hora de trabajar con plugins es preferible tener pocos instalados, sobre todo porque hay que ver como afectan estos a la velocidad de carga de nuestra web. Cuantos más plugins, lo normal es que nuestra web necesite cargar un mayor número de archivos y viceversa, afectando esto a la velocidad de carga. De todos modos depende del tamaño de los plugins, ya que uno solo puede tener el tamaño de 5.

Yo recomiendo que utilicemos los plugins que de verdad necesitemos y que nos ayuden a controlar mejor nuestra web.

 

Los Imprescindibles de WordPress

 

WordPress SEO by YOAST

Plugins WordPress SEO by Yoast

La joya de la corona, imprescindible si tienes un blog. No es un plugin fácil de configurar por lo que tendrás que dedicarle tiempo. Tiene un montón de funcionalidades como optimización de imágenes, sitemap, etc. Para configurarlo correctamente te recomiendo esta guía de Victor Saldarriaga:

WordPress SEO by YOAST: Configurar correctamente parte 1

WordPress SEO by YOAST: Configurar correctamente parte 2

WordPress SEO by YOAST: Configurar correctamente parte 3

Si no tienes tiempo para configurarlo All in One SEO puede ser tu solución, más sencillo de configurar pero con menos opciones.

Descargar WordPress SEO by YOAST

 

UpdraftPlus – Backup/Restore

Plugins WordPress UpdraftPlus

Otro plugin imprescindible si queremos tener segura nuestra web. Con este plugin podremos realizar copias de seguridad de toda nuestra web. ¿Por qué es importante? Siempre podemos tener problemas con un plugin que se instala mal, una mala actualización de Wordpres, un ataque externo, etc. Es muy sencillo de configurar y permite tanto hacer copias y guardarlas en tu servidor, como guardarlas en servicios en la nube como Dropbox.

Descargar UpdraftPlus

 

W3 Total Cache

Plugins WordPress W3 Total Cache

Probablemente sea el mejor plugin para gestionar la cache de nuestra web. Por si no lo sabes, la cache es una funcionalidad que hace que se guarden ciertos elementos de la web para que no tengan que volver a ser servidos, acelerando de esta forma la carga de nuestra web. Es un plugin complejo de utilizar y al que tendrás que dedicarle tiempo.

Guía de configuración de W3 Total Cache

Descargar W3 Total Cache

 

Google Sitemap

Plugins WordPress Google Sitemap

WordPress SEO by YOAST ya trae su propio gestor de sitemap, pero si no te aclaras, Google Sitemap es un plugin sencillo que te permitirá crear tu sitemap y tenerlo actualizado con un solo click. Complemento perfecto para Google Webmaster Tool.

Descargar Google Sitemap

 

WP Cookie Banner

Plugins WordPress WP Cookie Banner

¿Habeis visto ese popup que tienen todas las web hablando de las cookies? Seguro que si. WP Cookie Banner es un plugin que nos permite añadir un popup para explicar que hacemos con las cookies. Es sencillo de utilizar y tiene opciones muy diversas. Podemos escribir el texto que queramos y darle el estilo que mas concuerde con nuestra web. Recordad que hay que cumplir la ley.

Descargar WP Cookie Banner

 

Antispam Bee

Plugins WordPress Antispam Bee

Con este plugin bloquearas todo el spam de tu blog. Tiene unas sencillas opciones de configuración. Además añade en el dashboard una gráfica con la que ver todo el spam que está bloqueando.

Descargar Antispam Bee

 

Login LockDown

Plugins WordPress Login Lockdown

La seguridad en WordPress es fundamental sobre todo cuando tenemos una web con muchas visitas y susceptible de intentar ser tirada abajo de alguna forma. La función de este plugin es registar la IP, la fecha y la hora de los intentos fallidos de hace login en nuestra web. Si detecta varios intentos fallidos en un breve periodo de tiempo, bloquea el inicio de sesión. Un plugin sencillo de configurar que nos proporcionará seguridad extra.

Descargar Login LockDown

 

Contact Form 7

Plugins WordPress Contact Form 7

Muchos templates traen por defecto su página de contacto o un shortcode de contacto. Si lo que quieres es tener un formulario personalizado al 100% lo mejor es utilizar este plugin. Puedes crear los formularios que quieras y para hacerlos funcionar solo tendrás que utilizar el shortcode que generan. Fácil y sencillo.

Descargar Contact Form 7

 

9º Flare

Plugins WordPress Flare

Puedes recurrir a los clásicos iframes que ofrecen las diferentes redes sociales, pero si quieres tener un todo en uno, Flare es tu plugin. Muy sencillo de utilizar y nos permitirá añadir las redes sociales que queremos utilizar. Lo podremos colocar tanto al principio com al final de nuestros posts. Incluye la barra flotante que nos persigue mientras hacemos scroll. Lo dicho, todo en uno.

Descargar Flare

 

Estas son nuestras propuesta, ¿utilizais algún plugin en especial?.

Instalar WordPress en local para Mac

Imaginaos por un momento que estais en una clase de desarrollo web con WordPress y, salvo vosotros, nadie mas tiene una Mac. Lo mejor de todo viene cuando le preguntas al profesor y te dice que no tiene ni idea de instalar WordPress en local en un Mac. Por un caso similar, hace más o menos un año realice un videotutorial explicando paso por paso como instalar WordPress en local para Mac. Hoy recupero ese video que publiqué en su momento en mi web personal: manueladver.com

 

Instalar WordPress en local para Mac puede convertirse en una pesadilla muy grande si no sabes como hacerlo y, lo peor, es que hay pocos tutoriales que lo dejen completamente claro y, si buscamos videotutoriales, es aún peor (y lo digo por propia experiencia). Espero que este video os sirva de ayuda.

Pin It on Pinterest