Una hoja de trucos para el diseño móvil: diseño receptivo, servicio dinámico y sitios móviles

Actualización del editor (julio de 2015): en abril de 2015, Google realizó una actualización anunciada previamente del algoritmo que clasifica los resultados de búsqueda móvil. La compatibilidad móvil de un sitio web es una señal de clasificación confirmada para las clasificaciones de búsqueda móvil. Toma nota y haz que tu sitio web sea compatible con dispositivos móviles con la ayuda del siguiente artículo.

Todos hemos escuchado las estadísticas: 2014 es el año en que más personas acceden a Internet desde un teléfono inteligente que desde una computadora o computadora portátil. El diseño móvil es el futuro. No desea que su sitio se quede atrás, pero ¿cómo se programa exactamente para esta Internet cada vez más móvil? Hay tres opciones principales, cada una con sus propias ventajas e inconvenientes. En esta publicación, desglosaré sus opciones de preparación para dispositivos móviles, brindándole los pros y los contras de cada una para ayudarlo a elegir el mejor camino a seguir para su sitio web y su estrategia de SEO.

Opción 1: Diseño responsivo

El diseño receptivo determina la resolución de la pantalla en la que se ve una página mediante consultas de medios, luego ajusta el tamaño y el diseño de la página de manera adecuada. Google ha declarado que prefiere el diseño web receptivo, lo que lo convierte en el peso pesado de esta discusión.

Ventajas :

1. Solo hay una versión de cada página. La misma página se adapta al tipo de dispositivo que la muestra (en lugar de detectar el tipo de dispositivo y luego mostrar contenido diferente en función de eso). Tener el mismo HTML y URL en todos los dispositivos simplifica el mantenimiento de su sitio.
2. El diseño receptivo no se basa en la detección de agentes de usuario, como lo hacen las otras dos opciones. La detección de agente de usuario (es decir, detectar qué navegador o dispositivo está solicitando una página web) no es mala en sí misma, pero no es perfecta, y si hay una falla en el proceso, los usuarios pueden recibir la versión incorrecta de su sitio. Además, esto evita que las arañas de los motores de búsqueda tengan que rastrear su sitio como varios agentes de usuario diferentes, lo que significa que se rastrea una mayor parte de su sitio.
3. Responsive generalmente se carga más rápido en los navegadores. Debido a que todos los dispositivos obtienen el mismo contenido, no hay ningún proceso de redirección posible de detección de agente de usuario de solicitud. Y cualquiera que alguna vez haya tenido hambre y haya buscado un buen restaurante en su teléfono inteligente sabe que la velocidad cuenta.

Contras:

1. Puede ser un proceso largo e intensivo para rediseñar un sitio existente. Por lo tanto, si tiene un sitio grande, cambiar a responsivo puede no ser la mejor opción.
2. Dependiendo del diseño de su sitio, puede ser demasiado difícil meter los contenidos en una pantalla móvil. Sitios como NYTimes.com mantienen sitios móviles separados porque es más fácil dividir el contenido que ponerlo en una sola página.
3. Los elementos de navegación no siempre cambian de tamaño bien; Los elementos de desplazamiento no funcionan en absoluto en una pantalla táctil. Por lo tanto, ser receptivo puede significar cambiar su navegación.
4. Ha habido casos en los que las páginas receptivas con muchas imágenes se cargaron más lentamente con un diseño receptivo. Debo enfatizar que esto no es la norma, pero ha sucedido.

Si opta por un diseño receptivo, tenga en cuenta que querrá optimizar sus imágenes y probar su sitio en varios navegadores y dispositivos (o usar un buen emulador de agente de usuario) antes de publicarlo.

Opción 2: servicio dinámico

A veces denominado "olfateo" de agente de usuario, el servicio dinámico se puede realizar de dos maneras y es complicado de implementar. De hecho, Google describe algunos errores comunes que se cometen con el servicio dinámico. Lo que hace esta técnica es detectar el agente de usuario de un visitante (es decir, qué dispositivo está usando para ver su sitio) y luego lo redirige al nivel del servidor . Una forma de implementar la publicación dinámica es el redireccionamiento unidireccional , en el que los enlaces a un sitio se dirigen de forma predeterminada al sitio de escritorio, pero los dispositivos móviles se redireccionan desde el sitio de escritorio al sitio móvil.

El segundo tipo, el redireccionamiento bidireccional , tiene código tanto en el sitio de escritorio como en el móvil, lo que garantiza que cualquier visitante, independientemente del dispositivo, reciba el contenido adecuado. (Estas piezas de código a veces se denominan etiquetas de panel de control). La implementación significa colocar una etiqueta rel=”alternate” en el escritorio, apuntando al sitio móvil; y, en el sitio móvil, colocar una etiqueta rel=”canonical” que apunte al sitio de escritorio.

Ventajas:

1. Debido a que la redirección se realiza a nivel de servidor, solo necesita una URL por página.
2. El servicio dinámico también funciona bien para los teléfonos básicos . Según lo define PCMag.com, un teléfono con funciones es un "teléfono celular que contiene un conjunto fijo de funciones más allá de las llamadas de voz y los mensajes de texto, pero no es tan extenso como un teléfono inteligente". Por ejemplo, los teléfonos con funciones normalmente no pueden descargar aplicaciones, pero suelen tener cierta capacidad de navegación web. Según Google, la mayor diferencia es que los teléfonos con funciones no pueden procesar CSS, por lo que no pueden manejar muy bien el diseño receptivo. Por lo tanto, es importante conocer a su audiencia y qué tipo de dispositivos móviles están utilizando.
3. Si desea tener un conjunto separado de palabras clave específicamente para sus usuarios de dispositivos móviles, entonces esta opción le permitirá hacerlo, ya que los usuarios de dispositivos móviles y de escritorio ven HTML distinto. (Search Engine Land tiene un excelente artículo que analiza las palabras clave específicas para dispositivos móviles).

Contras:

1. La redirección dinámica duplica el trabajo de mantenimiento de su sitio porque configura un sitio separado para dispositivos móviles, con un conjunto separado de HTML indexado que requiere un proyecto de SEO separado.
2. La lista necesaria de cadenas de agentes de usuario también requiere un mantenimiento constante, ya que se deben agregar nuevas cadenas cada vez que se lanza un nuevo dispositivo móvil.
3. Por último, tenga en cuenta que deberá usar un encabezado "Vary HTTP-User Agents" si su sitio ofrece contenido de forma dinámica. El encabezado ayuda a que el contenido se sirva correctamente y ayuda a los motores a almacenarlo correctamente. Google tiene detalles sobre cómo agregar este encabezado.

Opción 3: un sitio móvil

Esta opción, como su nombre lo indica, implica la creación de un dominio separado específicamente para usuarios móviles. Los ejemplos más comunes son m.domain.com o mobile.domain.com . Es una opción popular para los grandes minoristas; Bridget Randolph señala que "el 73 % de los sitios web clasificados en los 100 000 sitios principales de Quantcast usaron redireccionamientos de URL a una URL específica para dispositivos móviles". Al igual que el servicio dinámico, esta técnica implica desarrollar contenido específicamente para los visitantes que utilizan un dispositivo móvil; sin embargo, las URL de un sitio móvil independiente son distintas, por lo que no hay redirección a nivel de servidor.

Ventajas:

1. Para sitios más grandes con recuentos de páginas de cientos de miles o millones, implementar un diseño receptivo puede ser simplemente demasiado trabajo. Un sitio móvil le permite personalizar la experiencia de su usuario y construir lentamente una experiencia móvil única.
2. Al igual que el servicio dinámico, un sitio móvil es mejor para teléfonos básicos que un diseño receptivo. Según la demografía de su sitio, es posible que este no sea un criterio; pero para algunas empresas, es una consideración importante.

Contras :

1. Su sitio móvil no se beneficiará de ningún perfil de vínculo de retroceso positivo que haya creado su sitio de escritorio (a menos que implemente redireccionamientos bidireccionales). Entonces, si está buscando que sus usuarios móviles lo encuentren en la búsqueda orgánica, esto puede ser un verdadero revés.
2. Su sitio móvil requerirá un trabajo adicional de SEO. Deberá enviar un mapa del sitio XML por separado a Google y Bing Webmaster Tools. Además, las pantallas más pequeñas significan SERP más pequeños, por lo que es posible que deba editar sus metaetiquetas. Las metaetiquetas específicas para dispositivos móviles deben ser más cortas que las de un sitio de escritorio.

Como puede ver, el contenido se ha reformateado y reducido drásticamente para que sea legible en un dispositivo móvil.

Al revisar toda esta información para tomar la decisión correcta para su sitio, no olvide preguntarse cuántos de sus visitantes usan dispositivos móviles para acceder al sitio. Revisa tus analíticas. Si el porcentaje total de tráfico móvil es inferior al cinco por ciento, probablemente pueda esperar para implementar el diseño móvil. Por ahora. Si las predicciones son correctas, entonces el uso de dispositivos móviles seguirá reclamando más y más tráfico de Internet.

Para obtener información sobre cómo optimizar sus páginas para velocidad y SEO móvil, recomendamos comenzar con estos recursos:

• La lista de verificación de diseño y SEO móvil todo en uno
• 7 prácticas recomendadas de navegación optimizada para dispositivos móviles
• Guía de SEO: SEO móvil y optimización de UX
• Optimización de imágenes: lo n.º 1 que puede hacer para mejorar la experiencia de usuario móvil
• Guía móvil para webmasters de Google Developers