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

¿Si al Responsive Design o no? Esa es la cuestión

Con la cantidad de smartphones y tablets que hay en el mercado y, sobre todo, las distintas resoluciones de los dispositivos, se ha vuelto más necesario que nunca desarrollar las webs pensando en todos estos dispositivos. ¿Y a esto como se le llama? Esto es el conocido como Responsive Design. Consiste en readaptar los elementos de la web al tamaño de la pantalla que estamos utilizando. Podríamos decir que consiste en hacer una web nueva, pero solo con CSS ya que el código HTML ya lo tenemos. Parece sencillo, pero existe un problema: no todo el contenido de una web se adapta bien a todos los tamaños de pantalla. Esto es algo que tenemos que tener muy claro.

Hay un obsesión tan grande con que se vea la web bien en todos los dispositivos que al final, por querer llegar a todo el mundo y con todo el contenido, se hacen auténticas chapuzas. Es necesario que nuestra web se vea en distintos dispositivos, pero hay que tener claro que es lo que vamos a poder mostrar para que quede bien. Hay que tener en cuenta que un tamaño de 1024px no es lo mismo que uno de 320px, por lo tanto no podremos ordenar las cosas igual y, probablemente, tendremos que eliminar contenido.

Hoy vamos a ver una serie de webs que nos permiten ver nuestro desarrollo en distintas resoluciones y, a partir de esto, adaptar la web.

Webs Responsive Design

 

smartphones

 

Responsinator

Esta web nos permite testear con la resolución de distintos dispositivos como iPhone 5, iPhone 6, Nexus 4, etc. El único fallo es no poder seleccionar el navegador que queremos utilizar.

 

Mobile Phone Emulator

Esta web tiene unas opciones muy interesantes como poder seleccionar las pulgadas de la pantalla, elegir entre distintos smartphones y tablets, así como distintos navegadores. Un test responsive muy completo.

 

Responsive Test

En esta web tenemos la posibilidad de poner los tamaños de pantalla a mano o si lo preferimos podemos seleccionar el dispositivo concreto en el que queramos ver nuestra web. Lo bueno de este test es que tiene una gran cantidad de dispositivos a elegir.

 

Chrome DevTools

Por último la forma más sencilla de poder ver el código fuente de la web y poder trabajar el responsive. Para abrir el DevTools con Mac solo tendremos que presionar Manzana+alt+I y en Windows usaremos CTRL+MAYUS+I. A la izquierda de la ventana que se nos abre hay un icono de un móvil, le damos y ya podremos empezar a ver nuestra web en distintos tamaños.

Perdón por molestarle

Buceando por la red en busca de una forma de hacer que un botón personalizado de Twitter se abriese como popup, encontré una noticia en la sección de tecnología de El País que me chocó: “El creador de los ‘pop-up’ pide perdón por su invento”. Si, el popup es un invento del que todos hemos echado pestes. Esos malditos popups que aparecen por todas las páginas y que molestan tanto la usabilidad de la web como la experiencia de usuario. Entiendo perfectamente que este hombre reniegue de su creación. Pero, no todo es malo.

El popup tiene su utilidad. Más haya de su intrusismo en nuestra navegación, básicamente como publicidad, hay formas interesantes de utilizar los popups. Ejemplos: botones que abren pequeñas ventanas con información sobre algo concreto, los botones de redes sociales que abren un popup para compartir contenido, un popup abierto al entrar en la web con alguna promoción, como ventana para suscribirte a la newsletter, etc. Estas son formas interesantes de utilizar los popups. No son molestas y pueden ser bastante eficaces.

Como los popup no son el mal, aquí te dejamos unos enlaces para que, si lo necesitas, puedas incluirlos en tu página web.

HypergURL

http://www.hypergurl.com/newwindow.html

Pop Up Window Generator Dynamic Drive

http://www.dynamicdrive.com/dynamicindex8/popwin.htm

Popup Toolkit

http://popup-toolkit.com/webmaster-tools/hover-ad-generator/

El código nos divierte como a enanos

Hace unos días encontré en la App Store una aplicación llamada Codeacademy con la que supuestamente podemos aprender a programar: un poco de JavaScript por aquí, un poquito de HTML, su dosis de CSS… y ya tenemos un programita o una web. Después de leerme un poco de lo que trata la aplicación (aquí toda la información) me la descargué y la probé. Tengo que decir que todo muy básico y muy intuitivo. Es una aplicación para aprender algunos conceptos básicos sobre la programación. Nada del otro mundo.

Lo realmente interesante está en su web: http://www.codecademy.com/. A través de esta, podemos aprender a programar de una forma sencilla y divertida, mediante una consola interactiva con la que programar y una serie de ejercicios prácticos para empezar desde cero. Codecademy propone desde el principio, tres ejercicios con los que aprender los conceptos más básicos de HTML, CSS y JavaScript.

· Web Personal: Con el primer ejercicio aprenderemos los conceptos básicos de la programación web con HTML y CSS. Muy sencillo e intuitivo.

· Anima tu Nombre: El segundo ejercicio nos permite desarrollar una pequeña animación con un poco de JavaScript.

· El Sistema Solar: En este último ejercicio aprenderemos, sobre todo, CSS. El objetivo es desarrollar el sistema solar con HTML y CSS.

A medida que avanzamos, vamos consiguiendo medallas o logros que podremos compartir, al igual que todos los ejercicios que completamos. Destacar que, a pesar de que también está en castellano (América Latina), la plataforma está en inglés y es como mejor están desarrollados los ejercicios (por una mala traducción al castellano en muchas cosas).

Codecademy es una buena forma de acercarse a la programación y aprender los conceptos básicos. ¿Por qué me parece interesante? Porque creo que en el mundo tecnológico en el que vivimos, en el que con un solo click podemos encontrar información sobre todo, aprender algo de programación para iniciar tu proyecto online es algo fundamental.

El Maravilloso Mundo del HTML5

No hace muchos años se puso muy de moda Flash y la mayoría de gente se subió a este carro para desarrollar webs. Era raro no ver una web desarrollada en Flash debido a que ofrecía un diseño visual espectacular. Por suerte (menos para todos los que se ganaban el pan haciendo webs en Flash) esa época ya pasó.

Quizás la caída de Flash se deba a la cruzada de algunas compañías o que los motores de búsqueda no indexan (no entienden, vamos) las webs desarrolladas con dicha tecnología. Pues bien, el tiempo ha pasado y ahora todas las cosas que antes se desarrollaban en Flash ahora se hacen con un poco de HTML5 y CSS3.

Hoy os presento una web que he encontrado, gracias a los amigos de Creativos Online, en la que podemos ver el potencial de HTML5. (Si no podéis verlo bien, os recomiendo que os bajéis la última versión del navegador que uséis).

Form Follows Function

¿Impresionante verdad? Pues esto es solo el comienzo.

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