Imprescindibles en una tienda online

Si queremos que nuestra tienda sea un éxito no solo tenemos que limitarnos a tener un bonito diseño, precios competitivos y aparecer bien posicionados en google.

Tambien tenemos que ofrecer al visitante (y futuro cliente) ciertas informaciones imprescindibles así como posibilidades de interactuación:

 

Condiciones de uso, política de devoluciones… Todo esto ofrece al posible cliente la información sobre la tienda necesaria para que se sienta en un comercio REAL. A nadie le gusta comprar sin saber quién está detrás o dónde está la tienda en caso de tener que reclamar algo, por ejemplo.

 

Tener las tarifas de envío claras y visibles, para evitarle sorpresas desagradables al nuevo cliente. O según los rangos de precios/portes que se manejen incluso ofrecer portes incluidos. A nadie gusta meter en la cesta un producto de 6€ para luego descubrir que el envío cuesta otros 6€.

 

Posibilidad de contactar con algún responsable de la tienda. Es muy penoso querer preguntar algo sobre un producto y que no haya forma de comunicarse con quien puede aclarar nuestras dudas. Y mejor si ofrecemos varias vias, formulario de contacto, chat, teléfono de atención… cada negocio tiene su público y se deben escoger las vis más aduecuadas.

 

Buenas descripciones y buenas fotos de los productos. De poco sirve poner una foto de un, por ejemplo, sujetalibro muy bonito, si no ponemos qué tamaño tiene. Una descripción fantástica de un conjunto de mesa y sillas de jardín si ponemos una foto de mala calidad (pixelada, desenfocada…)

 

Comentarios de los productos. La mayoría de las tiendas virtuales tiene la posibilidad de permitir a los clientes de escribir una reseña o comentario acerca de los productos. Muchos clientes se fían más de lo que dicen otros clientes que de lo que dice la descripción. Pero no hagais trampas, si es el propio dueño de la tienda quien se dedica a pone los comentarios, se nota. Mejor animad a vuestros clientes a escribir una reseña aunténtica.

 

Ofercer pago online. Nada más frustante que realizar una compra y al terminarla descubrir que hay que hace el pago por transferencia al banco “fulanín” que casualmente no es el mismo que usamos nosotros. Tres días de demora extra, comisiones de transferencia, tener que realizar otra gestión ara el pago… muchas ventas se pierden por ahí. Da esa posibilidad si quieres, pero ofrece pago online, ya se a través del TPV virtual de tu banco o de Paypal.

 

 

Botón +1 Google

Google recientemente se ha apuntado a la moda de los botones para compartir contenido de forma “social”, que ya era hora, ya que la única forma que tenía la gran “G” para compartir era por medio de los bookmarks, iGoogle (que no sé si lo usará alguien) y poco más.

La idea (por cierto aun esta en fase de pruebas y puede que aún no aparezca) es que al llevar a cabo una búsqueda en Google nos parazcan junto a los resultados cuántos +1 ha obtenido esa web. Su influencia en el posicionamiento SEO de las páginas recomendadas aun es una incógnita.

Su implementación es realmente sencilla, solo tienes que copiar el código ofrecido por Google en tu página web.

 

Primero vamos a la página que provee Google http://www.google.com/webmasters/+1/button/ y escogemos el tamaño del boton y el idioma. Con esto se nos generará un código para que peguemos en la cabecera de nuestra web, entre las etiquetas <head> y </head>, o al menos antes de la etiqueta <body> y otro para el botón.

 

Por ejemplo, para el botón en español a tamaño medio (20px) este es el código de la cabecera

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es'}
</script>

 

Y este el del botón:

<g:plusone size="medium"></g:plusone>

el cual se pone en el lugar dónde queramos que aparezca.

 

Y quedaría algo así:

<!DOCTYPE>
<html>
<head>
<title>Página de pruebas</title>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'es'}
</script>
</head>
<body>
<h1>Esta es mi prueba de botón +1</h1>
<p>Un poquito de loren ipsum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</p>
<g:plusone size="medium"></g:plusone>
</body>
</html>

Demo

Crear textos rellenos de imagen

WebKit (Safari, Google Chrome, Epiphany, Midori y alguno que otro más) soportan una caracteristica de CSS 3 bastante llamativa llamada background-clip, la cual se puede utilizar para hacer algunos efectos bien majos.

 

Vamos allá. Vamos a usar una imagen que será visible a través del texto.

 

La Idea

h1 {
 color: white;  /* Fallback: si por lo que sea no funciona hay que darle un color al texto, no? */
 background: url() no-repeat;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

 

Ahí está, bien sencillo. Se establece un fondo para el elemento, se recorta y se establece que el color de relleno va a ser tranparente.

 

El Problema

Pues el gran problema es que esto solo funciona, como dijimos antes, con navegadores basados en webkit. Asi que, ¿qué ocurre si vemos la web en un navegador que no lo es?

Como puedes ver en el codigo de arriba, hemos declarado un color como color principal del texto. Este valor será invalidado por -webkit-text-fill-color en los navegadores que lo soporten, y en los que no, como tambien ignorarán -webkit-background-clip veremos la imagen realmente de fondo del texto (que estará en blanco, como definimos al principio)
Bueno, no es que sea lo mejor del mundo ¿verdad? Vamos a ver si lo podemos mejorar

 

Un “Falback” mejor

La herraienta definitiva para mejorar las degradaciones es Modernizr. Simplemente hay que incluir un pequeño Javascript en la página y añadir las clases al h1 de tu página indicando que el actual navegador es capaz de ello.

Aunque un no hay un test de esta caracteristica en Modernizr, pero por suerte hay un “hook” para ello.

 

<script src="modernizr-1.6.min.js"></script>
<script>
 Modernizr.addTest('backgroundclip',function(){
 var div = document.createElement('div');
 if ('backgroundClip' in div.style) return true;
 'Webkit Moz O ms Khtml'.replace(/([A-Za-z]*)/g,function(val){
 if (val+'BackgroundClip' in div.style) return true;
 });
 });
</script>

Ahora sabemos con certeza si el navegador con que estamos viendo la web soporta background-cpli o no, si lo hace, el tag h1 tendrá la clase backgroundclip, y si no, la no-backgroundclip. Así que ahora solo se aplicará el fondo si el navegador acepta background-clip.

 

.backgroundclip h1 {
 background: url(images/west.jpg) -100px -40px no-repeat;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
h1 {
 color: orangered;
}


 
Ver demo
 
Fuente: CSS-tricks
 

Generador de Sprites CSS – Spritemapper

Los sprites CSS son una gran idea para minimizar el numero de peticiones hechas al servidor web cuando se cargan imágenes, esa es la parte buena, la mala es que generar dicho sprite puede ser una tarea muy pesada y frustante si se trata de muchas imágenes.

 

Spritemapper es una herramienta para facilitar dicho proceso uniendo multiples imágenes en una sola y creando el CSS necesario para mostrar cada parte.

Visita virtual

Hoy traemos esta demo que se quedó un poco olvidada con el cambio de web.

Es una Visita Virtual a L’Escala donde podeis ver 4 distintos emplazamientos.

Visita Virtual