Desarrollo Web SEO

Lo que debes saber acerca del dise帽o responsivo馃摬

驴Qu茅 es dise帽o web adaptable / dise帽o responsivo?

La compatibilidad en m贸viles se traduce a la medida de qu茅 tan bien est茅 dise帽ado y optimizado un sitio web para cargarse -correctamente- en un dispositivo m贸vil, como un tel茅fono inteligente o una tableta.

En t茅rminos sencillos, es cuando tu sitio puede adaptarse perfectamente para caber en cualquier pantalla y, al mismo tiempo, permite a los usuarios consumir contenido, navegar por el sitio y lograr sus objetivos tan f谩cilmente como con la versi贸n de escritorio.聽La compatibilidad con dispositivos m贸viles se puede lograr de dos maneras (m谩s sobre ambas m谩s adelante):

    1. Uso de dise帽o web m贸vil adaptable.
    2. Crear un sitio web independiente (normalmente alojado en un subdominio m贸vil) optimizado para dispositivos m贸viles y redirigir a los usuarios m贸viles a ese sitio.

 

 

驴La compatibilidad con dispositivos m贸viles es importante para el SEO?

La compatibilidad con dispositivos m贸viles es MUY importante para el SEO. De hecho, es una se帽al de clasificaci贸n en los algoritmos de Google cuando detecta que un usuario est谩 buscando en un dispositivo m贸vil. Los sitios web que son compatibles con dispositivos m贸viles, en general, superar谩n a los sitios no compatibles con dispositivos m贸viles en los resultados de b煤squeda.

Por lo tanto, si tu sitio web se basa en el tr谩fico de usuarios m贸viles o se dirige a ellos, la compatibilidad con dispositivos m贸viles es vital para el SEO.

驴Qu茅 es un sitio web optimizado para dispositivos m贸viles?

Cuando creas un sitio web, hay 3 formas de dise帽arlo para que sea compatible con dispositivos m贸viles:

  • Dise帽o din谩mico:聽esta opci贸n implica la detecci贸n de agentes de usuario y la entrega de diferentes c贸digos HTML en funci贸n de si el usuario est谩 en un dispositivo m贸vil o de escritorio.聽El dise帽o din谩mico requiere que use el encabezado HTTP Vary para evitar que los servidores de almacenamiento en cach茅 proporcionen accidentalmente la versi贸n incorrecta.聽Esto tambi茅n indicar谩 a los agentes de usuario m贸viles de los motores de b煤squeda que accedan a la versi贸n de la p谩gina m贸vil.

  • Subdominio m贸vil:聽tambi茅n conocida como mDots, esta opci贸n implica una cantidad significativa de tiempo y recursos del desarrollador.聽Implica construir un sitio m贸vil completamente separado y alojarlo en un subdominio, generalmente algo como m.domain.com o mobile.domain.com.聽En general, Google es bastante bueno para descubrir la relaci贸n entre el contenido alojado en un subdominio m贸vil y en el sitio de escritorio.聽Sin embargo, nunca puedes estar 100% seguro cuando se trata de subdominios, por lo que debe incluir la etiqueta rel = 鈥漜anonical鈥 que apunta a la versi贸n de escritorio. Este m茅todo generalmente no se recomienda, especialmente para sitios web grandes y/o complicados.

  • Dise帽o receptivo:聽esta opci贸n no requiere mucho en t茅rminos de tiempo y recursos del desarrollador, ya que no requiere ning煤n cambio en su c贸digo actual m谩s que la adici贸n de una metaetiqueta.聽Crear un sitio receptivo es tan simple como agregar la聽metaetiqueta de la ventana gr谩fica en la secci贸n <head>.聽La ventana gr谩fica le dice a los navegadores que representen una p谩gina seg煤n el tama帽o de la pantalla.聽Una ventana gr谩fica receptiva se ve as铆:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Este es el m茅todo recomendado por Google para crear un sitio web optimizado para dispositivos m贸viles.聽

Un sitio optimizado para dispositivos m贸viles prioriza la experiencia del usuario m贸vil

Los usuarios no interact煤an con las p谩ginas en los dispositivos m贸viles de la misma manera que lo hacen en el escritorio.聽Por lo general, buscan lograr un objetivo de inmediato, ya sea ejecutar una transacci贸n, encontrar informaci贸n o buscar la ubicaci贸n f铆sica de una tienda.聽Por supuesto, esto suena como una optimizaci贸n b谩sica de la tasa de conversi贸n, y ciertamente se puede aplicar a las p谩ginas de destino de su escritorio.

Para mejorar la carga, visualizaci贸n y optimizaci贸n de tu sitio web. Te recomendamos algunas pautas:聽

    • Evita complementos como Flash, Java o Silverlight. La mayor铆a de los navegadores m贸viles no son compatibles con estas tecnolog铆as, por lo que no se cargar谩 para los usuarios m贸viles.

    • Haz que su tama帽o de fuente sea legible sin hacer zoom. Es decir, que tu fuente base sea de 16 p铆xeles. Luego, define los tama帽os de texto para los encabezados en relaci贸n con la fuente base. Qu茅date con un tipo de letra compatible con dispositivos m贸viles como Arial, Helvetica, Times / Times New Roman o Verdana.聽

    • Dise帽a pensando en las pantallas t谩ctiles. Esto significa hacer que los objetivos t谩ctiles sean lo suficientemente grandes y con suficiente relleno para evitar clics accidentales. Pocas cosas son m谩s frustrantes para los usuarios m贸viles que los enlaces y botones que son demasiado peque帽os o est谩n demasiado juntos para hacer clic.聽

    • Trata que la navegaci贸n sea simple y obvia: el 40% de los visitantes se聽ir谩n a un competidor si no pueden navegar f谩cilmente en un dispositivo m贸vil.

    • No agregues detalles innecesarios en la parte superior de la p谩gina, los usuarios que necesitan informaci贸n adicional se desplazar谩n hacia abajo o har谩n clic en una p谩gina secundaria.