Mejora la velocidad de descarga de tu página web

Una parte muy importante en la experiencia de usuario y que hay que cuidar es la rapidez con la que se carga tu página web. Cada vez hay más conexiones con dispositivos móviles los cuales tienen, en determinados lugares, poca cobertura y hacen que la rapidez en mostrar la información sea un elemento clave para una buena experiencia. También es un elemento muy condicionante para una mejorar el posicionamiento en los buscadores.

Cuanto más rápido cargue tu web, mejor experiencia para el usuario y mejor posicionamiento.

Para analizar la velocidad de tu web la herramienta más destacada y que aconsejo es GTmetrix que te hace un reporte de velocidad muy interesante.

El cambio que más destacado y que te puede hacer diferente en relación a otras webs, en caso de que el contenido que tengas no se actualice muy a menudo, recomiendo esta pequeña actualización en el fichero .htaccess que te permitirá que los usuarios y buscadores cacheen las imágenes, css, js y htmls de tu site por lo que la carga se realizará mucho más rápida. Puedes ver todas las opciones de este código en este enlace.

En este caso hemos puesto que el contenido se suele actualizar mensualmente.

<IfModule mod_expires.c>

# Enable expirations
ExpiresActive On

# Default directive
ExpiresDefault “access plus 1 month”

</IfModule>

Saber cuando entra un pedido en la web de tu cliente

Muchas veces estás desbordado de clientes y no quieres tener que estar entrando en el panel de control de cada tienda o cms para saber cuantos contactos o pedidos tienen tus clientes al día. Para ello te recomiendo que te crees una alerta en Google Analytics para que te llegue al correo y así sepas tan rápido como tu cliente que ha habido una conversión, pedido o prospect. Lo que tienes que hacer es definir primero una conversión en Google Analytics, creo que todos sabemos como hacerlo, sino os dejo este enlace de un compañero y luego accedes a la página de Google Analytics:Administrador/Activos /Alertas personalizadas y pones esta configuración:

De esta forma podrás recibir diariamente si tu cliente ha tenido una conversión. También veo muy útil esta herramienta para que te avise si un día has tenido más de x visitas para avisar a tu cliente o para saber que acción se tomado para tener ese cambio positivo.

Los labels dentro de los inputs

En estos últimos años, después del auge de aplicaciones móviles, cada vez se está usando más el poner los labels dentro de los inputs para los formularios de validación.

Estos ejemplos los puedes ver en aplicaciones y webs tan importantes como facebook, evernote… :

evernote loginfacebook login

¿Por qué se ponen los labels dentros de estas cajas de texto?

Cuando diseñamos para aplicaciones móviles el espacio es algo muy privilegiado por lo que dejar un input vacio parace un espacio desaprovechado. Sobretodo estas cajas de texto deben ser bastante grandes, más de lo normal ya que van a tener interacción táctil. Si ponemos el label fuera del input esto nos hará tener que agrupar más los elementos y no habrá tantos márgenes o espacios vacios, Lukew, un gran conferenciante sobre mobile, es un gran defensor de este tipo de práctica.

Problemas de poner labels dentro de un input

Cuando el usuario quiere acceder a una zona privada de una web lo ideal es que visualmente vea los inputs vacios donde van a tener que introducir información, según puedes leer en UXmatters, este espacio está reservado para los usuarios.
También ocurre que cuando el usuario pulsa dentro del input el label desaparece y el usuario no recuerda si tiene que introducir un email o un nombre de usuario (esto me ha pasado a mí muchas veces), visualmente no encuentra ningún sitio donde diga que dato tiene que introducir y lo único que puede hacer es borrar la información que ha introducido en el input y visualizar de nuevo el label.
Entiendo que esta situación en móvil se realice ya que el espacio es muy preciado pero en un formulario de validación de una web, donde suele haber sitio, no veo sentido hacer esta práctica. También tenemos que tener en cuenta que en un móvil hay muchos factores del entorno que nos hacen distraernos, quien no consulta facebook mientras va andando, y si tienes que validarte, a veces no eres capaz de rellenar un formulario entero manteniendo la mirada fija en el móvil por lo que las distracciones externas no te hacen recordar que tipo de campo era si usuario o e-mail.

Continúa leyendo Los labels dentro de los inputs

Inspiración para diseños web, móvil y tablets

Listado de webs para inspiración a la hora de realizar cualquier proyecto online

Inspiración web:

Inspiración de colores:

Inspiración css y html, responsive, jquery:

Inspiración revista, fotografía, maquetación:

Blogs de lectura, diseño, ux, seo:

Inspiración móvil y tablets:

Conecta la RSS de tu blog con Facebook, twitter y otras redes sociales

Llevo bastante tiempo usando diferentes aplicaciones de facebook y de twitter para comunicar los blogs en los que colaboro con las redes sociales de forma automática hasta que por fin he conocido la web IFTTT (por cierto, muy buena la interacción y user interface de la web).

¿Qué es IFTTT? No queda muy claro, no? ….. pues simplemente significa: If this then that… es decir, si pasa esto haz lo otro, traduciendo para un community manager: si publico mi post en wordpress publícamelo automáticamente en facebook, twitter o donde quieras.

Puedes realizar toda las configuraciones que desees, por ejemplo:

  • Cuando alguien publica algo en mi muro de facebook que me llegue un e-mail
  • Cuando alguien hace un Retuit que me mande un email
  • Cuando publico algo en wordpress que me lo publique en facebook
  • y así  mucho más

Puedes conseguir muchas configuraciones que son muy útiles para automatizar la información que manejas en Internet.

También decir que no se puede conectar tu RSS de tu blog con Google Plus ya que Google no ha permitido que se haga estos automatismo. También me ha pasado con el perfil de empresa de Linkedin que tampoco me ha dejado conectarlo con la RSS de sus blog, una pena ya que al final hay que hacerlo manualmente. Si alguien encuentra una solución para estas redes sociales que deje un comentario!.

Presentación sobre Responsive Design en Camon

El 19 de Julio de 2012 di la charla sobre Responsive Design en el espacio tecnológico de Camon. En breve colgarán en el perfíl de Vimeo de Tucamon el vídeo que se grabó de la charla. De momento podéis ir viendo la presentación que he subido en Slideshare.

 

Si tenéis alguna duda cread un comentario en el mismo post.

Posicionar imágenes en google

A veces posicionar determinadas palabras claves en google es tarea muy complicada, principalmente por la competencia y el gran número de contenido que hay sobre esas palabras que queremos posicionar.

Una forma de obtener tráfico para estas palabras es posicionarte a través de Google Images.

Lo primer que tienes que hacer es usar las keywords que quieres posicionar en el nombre de la imagen, esto es muy importante, en el title de la imagen y en su alt. Por ejemplo: quiero posicionar la palabra perro: la imagen se debe llamar perro.jpg, (si quiero poner más palabras uso el guión medio, ejemplo: perro-fuerte.jpg), y para los atributos de la etiqueta img: title=”Perro” y alt=”Perro”, (el title y el alt pueden coincidir).

El formato de la imagen puede ser png, jpg, gif, lo más importante es que esté bien optimizada y no tenga un gran peso. Jpg es una buena opción. Recuerda que aunque optimices su peso siempre deberá de visualizarse sin que pierda calidad.

Otro sugerencia es evitar añadir texto dentro de las imágenes ya que google no posicionará tanto las imágenes acompañadas con frases o palabras.

También es recomendable crear un sitemap de las imágenes con la herramienta de Google Webmaster tool.

Otro consejo, es incluir las palabras claves que tiene nuestra imagen dentro la url de nuestra página, dentro de la etiqueta H1 de la página, dentro de los h2 y también dentro de la etiqueta strong.

¿Qué es el Knowledge Graph?

Google cada vez escucha más al usuario y un claro ejemplo es lo que presentó la semana pasada en su blog de novedades:Knowledge Graph

Google está aprendiendo a como actúan los usuarios cuando realizan sus búsquedas. Google pretende basar la experiencia que tiene un usuario para mostrar sus resultados, es decir, en el vídeo se ve claramente, pero intento explicarlo:

Un usuario busca la palabra “Leonardo da Vinci”, google le muestra un resultado y al lado le muestra las obras más destacadas de este pintor y otros pintores de la misma generación. Google empieza a cruzar datos entre los usuarios y se da cuenta que los usuarios que buscaron “Leonardo da Vinci” más tarde buscaron sus obras y otros pintores relacionados. De esta forma enriquece la búsqueda y facilita las necesidades del usuario.

Ver mi web en un móvil

Google ha sacado un nuevo servicio para adaptar tu página web a dispositivos móviles. Mensajes del tipo:

“2 de cada 3 personas usan su móvil como si fuera una linterna”
“las tendencias para el 2013 es que habrá más usuarios que se conecten a internet desde su móvil que desde un pc”
“En el 2010 las búsquedas por móvil sufrieron un crecimiento del 400%”

Bueno, todo esto quiere decir que tu web debería estar optimizada para poder ser visualizada de forma correcta desde un dispositivo móvil.
¿Qué quiere decir que tu móvil se vea de forma correcta en un dispositivo móvil?

– El texto de tu web se debería de leer sin tener que hacer zoom
– Los enlaces y botones deben ser fácilmente clikables con el dedo también sin hacer zoom.
– Las cajas de búsqueda y formularios deberán ser grandes para que el usuario acceda de forma correcta.
– Tu página tarda mucho en cargar desde un móvil?

Para poder contestar a estas preguntas puedes acceder a la web de Haz tu web móvil y probar el Test móvil de tu página web

Microdatos en mi tienda online

Para que tu producto salga destacado en el resultado de búsqueda de google y por lo tanto aumentar el número de visitas considerablemente y así tener más ventas, sólo tienes que introducir unos códigos llamados microdatas en los que los robots de google interpretarán de forma semántica y podrás conseguir este resultado.
Un ejemplo del código es, por ejemplo, para que la dirección de tu empresa salga en el resultado de búsqueda :

<div>
<span>L’Amourita Pizza</span>
Located at
<div>
<span>123 Main St</span>,
<span>Albuquerque</span>,
<span>NM</span>.
</div>

 

Puedes introducir estos microformatos cuando nuestra web trata sobre: recetas, reviews, productos en venta, direcciones de negocios, eventos y vídeos.
Puedes ver más información en .
Además de Microdata también puedes utilizar microformatos y RDFa. Encuentra más información en la guía de Google, mi consejo es usar microdatos ya que está muy vinculado con HTML5 como se puede ver en la web de HTML5rocks.

Resolución Ipad, iphone y dispositivos móviles más comunes

A la hora de crear diferentes diseños para web debemos tener claro las dimensiones en pixel de los nuevos dispositivos móviles que están en el mercado.
La mejor opción es usar media queri que te da la posibilidad de adaptar con css tus clases para abarcar las diferentes resoluciones.

 

Aquí están las resoluciones de los dispositivos más importantes:

Resulución Ipad: 1024×768
Resolución Ipad 2: 1024×768
Resolución Iphone: 320×480
Resolución Samsung Galaxy Ace: 320×480
Resolución Samsung Galaxy S II: 800×480
Resolución Nokia Lumia 800: 800×480