Cambios en el SEO de tu web para 2020

Cambios en el SEO de tu web para 2020

Google siempre ha pretendido que sus resultados de búsqueda vayan adaptándose a los patrones de comportamiento de sus usuarios, por eso la evolución de sus algoritmos es constante, estos son los últimos cambios que van a condicionar el buen posicionamiento de tu web. John Mueller experto SEO en Google, ha puesto recientemente patas arriba axiomas como la relevancia de las keywords en títulos. De todos estos cambios en el SEO de tu web para 2020, hablamos a continuación.

De todo lo que he leído últimamente, estos son los cambios más relevantes que he encontrado. Incluyo también la velocidad, conocida desde hace tiempo por todos, porque creo que hay que seguir insistiendo en este aspecto, ya que parece ser una asignatura pendiente. Las webs son cada vez más vistosas y la lucha entre el diseño y el peso es algo que como diseñadores nos da numerosos quebraderos de cabeza. Vamos al lío:

PNL

Google orienta ahora todo el contenido al PNL, de esta manera, Google será capaz de interpretar mejor lo que busca un usuario a través de la relación entre la palabra buscada y el resto de las palabras de la frase, no sólo a través de esa palabra como hacía hasta ahora.

¿Qué es la PNL?

El Procesamiento del Lenguaje Natural, es el proceso mediante el cual se analiza el texto de una web mediante relaciones entre las palabras que aparecen, para obtener una mayor comprensión del contenido. Para analizar este contenido, Google pone a disposición del usuario su plataforma Google Cloud

¿Cómo escribir para un correcto PNL?

  • Distancia entre la consulta y la solución: procuremos utilizar frases directas, sin muchos rodeos e intentando que la distancia en la frase o párrafo entre la consulta y la solución (respuesta) sea lo menor posible. Si por ejemplo la búsqueda es «distancia entre un enchufe y un grifo»:
    Solución 1: la [distancia entre un enchufe y un grifo] ha de ser lo suficientemente amplia como para poder evitar desafortunados accidentes. Esta distancia mínima se establece según normativa en [50cm].
    Solución 2: [la distancia entre un enchufe y un grifo] ha de ser superior a [50cm]. Esta distancia se establece según la normativa y está enfocada a evitar desafortunados accidentes.La solución 2 tiene una distancia mucho más corta entre la [consulta] y la [solución], por lo que será más fácil de encontrar para el motor de búsqueda.
  • Evita el relleno; en la redacción para PNL intenta ser claro y conciso, el relleno sólo va a causar problemas en el proceso de búsqueda. Ten cuidado de cómo usas el lenguaje, ya que estás escribiendo para una máquina… Si hablas de Juan, escribe siempre Juan, no escribas el pronombre «él», porque los motores de búsqueda no son tan inteligentes como para saber que te estás refiriendo a Juan.
  • Calidad de contenido: sigue siendo fundamental, contenidos de calidad y que respondan a las consultas de los usuarios.

BACKLINKS

Siguen siendo importantísimos, cuantos más tengas, mayor seguridad para Google de que tu contenido es de interés.

¿Qué son los backlinks?

  • Backlinks son los enlaces que apuntan a tu página desde otras páginas, es importante que estos enlaces sean naturales, y no generados artificialmente.
  • Cambios: Hasta ahora la calidad de la página que te apuntaba daba mayor importancia a ese backlink, según parece, ahora no es tan importante, aunque a mi parecer, siempre tendrá más peso un enlace desde una página mejor posicionada.

ACTUALIZAR CONTENIDOS ANTIGUOS

Nuestros sitios, en especial los blogs, son un contenedor de artículos en los que muchos de ellos pueden llegar a tener años, la actualización de estos artículos ya bien posicionados es importante a la hora de conseguir mayor relevancia de tu web.

VELOCIDAD

Insistimos, a Google no le gustan las páginas pesadas, optimiza al máximo el peso de tus páginas, css, scripts y sobre todo las imágenes. Especial relevancia tiene también tu web en móvil, cuida bien el peso para no ser castigado por Google. Una vez más, Google pone una herramienta para medir si tu web está optimizada en este aspecto, Pagespeed.

PALABRAS CLAVE EN LOS TÍTULOS

Hasta ahora, el uso de palabras clave, keywords,  en los títulos (h1, h2,…) era de la máxima importancia, esto unido a una url construida con esas mismas palabras daba un empujón enorme a tu web. Parece ser que los últimos cambios no van por ese camino. Recientemente, John Mueller experto SEO en Google, ha reconocido que utiliza esas palabras para conocer mejor el contenido de cada párrafo y poder así ordenarlo mejor en los resultados de búsqueda, pero que el uso de keywords en los encabezados no mejora el posicionamiento. Mueller explica que los encabezados deben utilizarse para contenidos de texto extensos, para poder interpretar mejor cada párrafo.
También afirma que si se estudian las páginas de SERP (resultados de Google), se puede ver que el uso de palabras clave en el título no es clave para esos resultados. El uso pues de estas palabras, debe enfocarse a ayudar a Google a comprender mejor los contenidos. Es decir, si te ayuda, es porque está entendiendo mejor el contenido, no por si solas.

Puedes ver el video de John Muller aquí

Seguiremos atentos a los nuevos cambios. Aquí tienes otros artículos relacionados con el SEO.

UX, diseñando un slider, ¿qué no debo hacer?

UX, diseñando un slider, ¿qué no debo hacer?

Cualquier interacción realizada por un usuario será siempre más efectiva cuanto más se aproxime a un aprendizaje ya obtenido. Por ejemplo, el desplazamiento vertical se basa en el aprendizaje que tenemos todos de llevar años leyendo, por eso este desplazamiento funciona en general, siempre mejor que el horizontal.

El desplazamiento horizontal es el más complejo, se utiliza rara vez por eso mismo, aunque para mostrar información se lleva utilizando hace mucho tiempo en forma de sliders. La complejidad radica en que el movimiento en una página resta valor a cualquier otro mensaje de la página porque atrae la mirada, además, resulta extraño que haya tenido tanto tiempo de vida, porque está probado por numerosos estudios UX, que tienen una tasa de clics verdaderamente ridícula para todo el espacio en página que consumen, llevándose casi todos los clics el primer elemento del carrusel.

Si os fijais en la página de Apple, hace tiempo que prescindieron de esta fórmula, muestran esos mismo contenidos uno debajo del otro, siendo el resultado mucho más eficaz.

Sin embargo, dado que es muy difícil convencer a un cliente de no ponerlo, aquí van unas pautas para que funcionen de la mejor manera:

  • No usar sólo el movimiento programado para acceder a cada diapositiva o banner, permitir que el usuario tenga la forma de controlar el slider accediendo al contenido que le interese. Lo ideal sería no dejar un movimiento programado, de tal modo que sea el propio usuario el que si está interesado en ver más ofertas sea él quien decida desplazarlas para verlas.
  • En caso de movimiento programado, los intervalos han de ser lo suficientemente lentos, para dar tiempo a leer todo el contenido y por supuesto que no suponga un mareo en la página. La velocidad más rápida recomendada es de 10 segundos.
  • El contenido de cada imagen ha de ser directo y breve, de tal modo que en ese tiempo al usuario le de tiempo de sobra para conocer todo el contenido.
  • Los controles manuales han de ser siempre visibles y no perderse sobre las imágenes.
  • El usuario tiene que conocer en todo momento la posición actual del slider, normalmente esto se muestra gráficamente con unos círculos huecos y uno macizo que indica el frame actual, es un sistema que de tanto verse ya se ha convertido en familiar y el usuario lo tiene perfectamente conocido, al igual que las flechas en ambos lados del slider.
  • La animación entre imagen e imagen es mejor si la hacemos horizontal, de ese modo estamos dejando claro a cualquier usuario, que se trata de una lista en la que van a ir apareciendo más imágenes.
  • Las animaciones han de ser sin fin, es decir, debemos evitar que después de llegar al último, regrese a toda velocidad al primero, eso produce estrés a la vista, es un movimiento muy brusco, por lo que después del último, mostraremos el primero con la misma velocidad que los anteriores.
  • Aunque personalmente hago que toda la imagen sea enlace, si es recomendable que exista un botón que sea perfectamente identificable con mensajes claros y cortos, como «Más información» o «Comprar ahora».
  • Hay que  tener muy presente, que la información que mostramos en desktop va a llevar más contenido que en móvil. Si simplemente lo escalamos, seguramente será tan pequeño que no se leerá, por eso es mejor optar por mostrar una versión especial para dispositivos móviles. Por este motivo, es casi más práctico crear los banners no como imágenes, si no como elementos HTML, de tal modo que cada elemento se escale y coloque en su lugar más óptimo.
  • Imágenes a medio mostrar. Si os fijáis en los sliders que tienen en Netflix, HBO… Veréis que las imágenes se cortan, tanto el primer como el último elemento cuando ya estamos hemos interactuado, y cortada la de la derecha en la primera pantalla, de este modo sin necesidad de flechas ni círculos, queda claro al usuario que hay más detrás, entenderá que es un carrusel desplazable e interactuará sobre él.

 

 

Genial formulario con CSS y jQuery !!!

Genial formulario con CSS y jQuery !!!

A la hora de diseñar un formulario, siempre tenemos que tener en cuenta que se trata de la parte más tediosa para un usuario, por eso mismo tenemos que facilitarte al máximo la tarea. Desde no pedir campos que no sean necesarios a intentar simplificar al máximo lo que pedimos, es decir, si le pido código postal ya me evito población y provincia porque lo puedo sacar internamente con ese código. Además de esto hay numerosos aspectos que veremos en mayor profundidad en otro post. Hoy vamos a ver cómo colocar los literales de los imput para que la experiencia sea más cómoda para el usuario y en particular un jQuery que además nos va a dar como resultado un formulario que además de usable va a sorprender a nuestros usuarios.

Tenemos varias opciones a la hora de colocar el nombre de cada imput.

NOMBRE EN LA MISMA FILA 
Podemos colocar el nombre delante de cada imput, a mi no me gusta esa solución, ya que cada nombre va a tener una longitud y eso va a provocar un desorden visual que repercutirá notablemente en la usabilidad del formulario. Además y más importante, el desplazamiento horizontal que tiene que hacer el usuario con la vista es mucho mayor que en los demás casos, dificultando mucho la usabilidad.

 

NOMBRE SOBRE EL IMPUT
La segunda opción y más generalizada, es colocar los nombres encima de la caja, nos permite hacer un diseño amigable y cumple perfectamente los estándares de usabilidad. Todo queda en un mismo bloque, nombre e imput.

 

NOMBRE DENTRO DEL IMPUT
La tercera opción es colocar los nombres dentro del imput, colocándolo como» value». Ahorras espacio vertical, es más elegante, pero tiene un problema, y es que una vez que pinchas dentro del imput el nombre desaparece, por lo que si no has estado atento, no sabes qué te está pidiendo el formulario. Existe la solución, mediante código, de hacer que vuelva a aparecer el nombre cuando pinchamos fuera de la caja. En este caso, es fundamental que el color del texto sea muy suave para que no parezca que está rellenado el imput.

 

CSS + JQUERY
Esta opción que os traigo hoy es una mezcla entre la segunda y la tercera. Visualmente no puede ser más limpio y además hace «algo» que sorprenderá al usuario y le hará ser más receptivo en la aburrida tarea que es siempre rellenar un formulario.
Esta opción te muestra dentro de la caja su nombre, al pinchar sobre la caja para rellenar el dato, el nombre «salta» y se coloca encima de la caja, de modo que siempre será visible en el formulario. Particularmente me parece muy original, divertido y usable 100%

Aquí os dejo esta opción funcionando y con la posibilidad de que podáis coger todo el código y usarlo en vuestro sitio.
Pincha dentro de cada imput para ver la animación.

See the Pen jqmLOw by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark

 

 

Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Tendencias Diseño Web 2020, Modo Oscuro «Dark Mode» y Minimalismo

Las tendencias de diseño web están en constante evolución. Las posibilidades técnicas ya no son un obstáculo, lo que invita a experimentar más y encontrar nuevas tendencias. Existen también tendencias que continuarán y que tomarán mayor peso como es el minimalismo y otras que se sumarán a la corriente popular como es el modo oscuro o «dark mode».

MODO OSCURO O DARK MODE

En 2018 tras un estudio, Google reconoce que el modo oscuro aumenta en un porcentaje muy alto el rendimiento de sus baterías, los colores predominantes que muestre nuestra pantalla influyen claramente en el consumo. En concreto, los colores azulados consumen más que los colores rojizos. Esta diferencia se acentúa más en el caso del blanco y el negro, el blanco es un color más brillante, consume mucho más que el negro, que es todo lo contrario.
Este estudio arrojó también que no en todos los móviles se producía el mismo ahorro, mucho más visible en los pixels y menor en los iPhone. En todo caso hablar de ahorro de batería ya es motivo suficiente como para que todas las apps más relevantes sacasen su modo nocturno y que todos corriésemos a instalar actualizaciones para disfrutar de la novedad.
Además al ahorro de batería se le suma el uso habitual de dispositivos de noche, en habitaciones poco o nada iluminadas en las que los blancos llega a hacer daño y el modo oscuro se convierte en un beneficio para la usabilidad.

Los diseños web en modo oscuro no solo se ven ultramodernos, sino que además impactan y son agradables a la vista. Los colores, fotos y elementos de diseño destacan más, usando colores oscuros.

Así pues, esto casi seguro de que una de las principales tendencias de 2020 será el diseño oscuro, centrado seguramente en el diseño de la interfaz de usuario, ofreciendo a los usuarios una opción para habilitar el tema oscuro.

 

DISEÑO MINIMALISTA

El minimalismo, a menudo se subestima o se malinterpreta, no se trata de reducir el diseño a su forma más aburrida, ni tampoco significa usar un fondo blanco, el minimalismo consiste en la simplicidad y énfasis del contenido. Se trata de llegar al usuario con el mínimo peso posible, pero con el suficiente para darle lo que está buscando, a veces será más y otras menos. Nuestro objetivo es darle la mejor experiencia utilizando la menor cantidad de recursos, esa es la esencia del minimalismo.

Evidentemente no es lo mismo diseñar la portada de un periódico digital que una landing para el lanzamiento de un producto, cada caso nos obligará a recurrir a un número diferente de recursos mínimos.

Uno de los beneficios del minimalismo es que crea un diseño elegante y muy atractivo para el usuario. La distracción disminuye y la conversión aumenta.

Los diseños web minimalistas utilizan los elementos de diseños indispensables y lo distribuyen sobre un fondo neutro (espacio negativo) que haga resaltar eso elementos. Debemos crear un equilibrio agradable pero además transmitir el mensaje. La web de Google ya fue hace años un perfecto ejemplo de este minimalismo. En este caso en particular, un espacio blanco que ocupa la mayor parte de la pantalla, hace resaltar lo verdaderamente importante, la caja del buscador. No necesita más, pero tampoco menos. Fijaos como además separa las demás enlaces externos a la búsqueda en los márgenes de la pantalla y en un tamaño de fuente pequeño y con poco peso.

El pantallazo que veis sobre este texto pertenece a boundarysupply.com y hace exactamente lo mismo, tiene los elementos indispensables para su misión, y el mensaje es claro, y si os fijáis el diseñador ha desplazado a la izquierda el texto, de ese modo compensa el peso que provoca la chica (hacia la derecha) sobre fondo casi negro, el resultado es perfecto. Los enlaces salen de la escena principal colocándose en los márgenes de la pantalla, sin demasiado peso pero siendo perfectamente visibles para el usuario.

Según otro informe de Google, los usuarios de un sitio web tardan 17 milisegundos en formar su opinión. Cuanto más simples son las imágenes, más atraen al usuario. Estas imágenes deben ser llamativas, originales y de alta calidad. Estas imágenes son efectivas utilizándolas como elemento principal o como espacio negativo.

Con menos texto en la página, las imágenes grandes se colocan en primer plano y representan el foco principal de la composición. Veréis que en ocasiones el espacio negativo es un video, pero siempre muy sutil, para que siga cumpliendo su misión de hacer resaltar a la imagen o texto que está en primer plano.

En fin, veremos a ver qué nos depara el futuro, ojalá nos sorprenda gratamente 😉

Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

Diseño de interfaz, menú hamburguesa. Animaciones gratis !!!

El menú hamburguesa es un botón que suele estar en la parte superior de la web, que muestra o esconde el menú en pantalla.
Lo que en un principio nace para la versión mobile, por la falta de espacio, se ha convertido en un recurso habitual también en los diseños desktop.

Tiene muchos detractores que alegan que ocultar accesos de contenidos perjudica la usabilidad, porque obliga al usuario a hacer un clic más, e incluso que es sólo un capricho de los diseñadores.

Personalmente, no puedo estar más en desacuerdo, os explico por qué.

Hace años quizás podría ser arriesgado, hoy en día cualquier usuario lo tiene perfectamente identificado, todos sabemos que ahí accionamos el menú.

En cuanto al hacer un clic más, creo que hay demasiado «gurú» que se ha aprendido un guión y ha dejado de lado el sentido común. La usabilidad efectivamente se ve favorecida cuantos menos clics necesites para acceder a un contenido, pero creo que tenemos que ver todo en conjunto y no pararnos en pequeños detalles.
En mis diseños siempre tengo en cuenta que el usuario haga los menos clics posibles para llegar al contenido que está buscando, pero tenemos que tener también en cuenta, que esta máxima de la usabilidad viene de cuando para pasar de una vista a otra tenías que cargar una nueva página, con una conexión lenta un solo clic podía suponer varios segundos de espera. Hoy podemos utilizar CSS por ejemplo para mostrar y ocultar ese menú, accediendo de forma instantánea a ese contenido. Así pues, no tengas miedo de lo que dice el «gurú», nadie se marchará de tu web por pulsar en la hamburguesa 😉

En cuanto a que el diseñador busca más la estética que la usabilidad, le pese a quien le pese, el diseño es fundamental sobre todo en la primera impresión, no hay nada más agobiante que una web con una barra repleta de enlaces, iconos de redes, banners,… Los espacios limpios también juegan un papel importantísimo en la usabilidad, una cabecera repleta de enlaces, produce más estrés que el tener que hacer un clic más para llegar a un contenido.
Al tener más espacio para mostrar los enlaces del menú, podemos distribuirlos de un modo que sean más legibles y más grandes que en un menú tradicional, ¿acaso el tamaño de letra no influye en la usabilidad?. Podemos meter textos grandes, acompañados de iconos, …. mil posibilidades que en una barra no es posible. Por supuesto que agradezco encontrarme un menú hamburguesa, incluso porque me apetece ver qué ha pensado el diseñador para sorprenderme.

Una vez acabado este alegato en favor de la hamburguesa, pasamos a animarlo, cosa que seguro que también leeréis por ahí que no es usable…

Aquí podéis ver varias muestras de animación. Simplemente copiad los códigos que necesitéis, es gratis 😉

See the Pen SVG Hamburger Menu Icon Animation Collection by Matthew Main (@matthewmain) on CodePen.dark


Pulsa en los menús para ver la animación.

Si no podéis verlo bien, seguid este enlace.

 

¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

¿Cómo hacer un sprite con CSS?. Animaciones para web, apps, juegos…

Un sprite es el resultado de juntar varios fotogramas para crear una animación.

En este ejemplo lo que hacemos es crear la animación con una única imagen.

He cogido una imagen de 400x400 px y la he dividido en 4 columnas y 4 filas de 100x100 px. En cada una de las celdas he colocado un frame de la animación, el orden, de izquierda a derecha y de arriba a abajo.

Esta es la imagen utilizada, con medidas 400x400px

Con la CSS, lo que hacemos es marcar un área visible, coincidente con el tamaño de cada frame (100x100px) e ir sustituyendo lo que aparece en ese área moviendo la imagen grande. El resultado es una animación perfecta.

Aquí puedes ver el resultado, copiar el código HTML y el CSS

See the Pen oxWwRV by Omar Benyakhlef Domnguez (@gloobs) on CodePen.dark

Pulsa en 0.25x para ver bien la imagen

El código moveSpritesheet 1s indica el tiempo en el que se tiene que desarrollar el loop, es decir a más tiempo la animación será más lenta y viceversa.

Como podéis ver, el código es mínimo, por lo tanto poco peso y carga rápida, lo ideal !!!