6

Responsive vs Publicación Dinámica vs Sitio Web Paralelo

15 Flares LinkedIn 15 Twitter 0 Google+ 0 Facebook 0 15 Flares ×

Llegados al punto de haber decidido implementar una versión móvil de nuestra web nos enfrentamos a las siguientes preguntas:

  • ¿Cómo lo hacemos?
  • ¿Qué tipo de diseño elegimos?
  • ¿En qué nos va a condicionar una u otra opción en el futuro?

Para ello debemos tener en cuenta las características del sitio Web, el sector de negocio y el comportamiento de la audiencia. No toda Web móvil debe tener las mismas características, al igual que cada avión debe tener su aerodinámica particular y sus motores adaptados. No se trata de solo de tener dos alas y un motor.

Para desarrollar una Web móvil tenemos tres opciones, que a continuación voy a analizar:

    1. Diseño Web adaptable o diseño responsive | http://inigonieto.com
    2. Publicación dinámica | http://11870.com/
    3. Sitio Web Paralelo | Marca, Toprural, Twitter…

 

1 – Diseño web adaptable o Responsive Web Design: Esta es una técnica de diseño web que permite adaptar la interfaz de una página al formato del dispositivo desde el cual está visualizándola el usuario.

Se trata de modificar el diseño de tu Web para implementar un diseño Web adaptable a través de media-queries en CSS. Probablemente conlleve un cambio de interfaz. Debemos tener claro que el contenido debe ser el mismo para todos los dispositivos. El contenido de menús es el mismo pero diferente….¿eh?, no te preocupes, te lo explico:
Una Web vista desde un pc tiene determinadas imágenes y menús que aparecen en cierta posición, pero esa Web vista a través de un smartphone si fuese responsive tendría los elementos dispuestos de otra manera dando menor relevancia a las imágenes y mayor al texto por ejemplo, pudiendo llegar a sacrificar ciertos elementos.

responsive-inigo-nieto

Ventajas:

  • No hay riesgo de duplicación de contenido ya que se utiliza una sola URL tanto para la versión móvil como de escritorio.
  • Es más fácil y barato de mantener la Web una vez creada, ya que solo hay que modificar el contenido y diseño una sola vez en la misma URL tanto para la versión móvil como la de escritorio.
  • Consolidación de popularidad, ya que al ser solo una URL tanto para la versión móvil como de escritorio se aprovecharán los enlaces creados para el proceso SEO tradicional para aumentar la popularidad también en los resultados móviles del buscador.
  • No hay necesidad de implementar redirecciones de la versión de escritorio a la móvil o viceversa, ya que se utiliza la misma URL para ambas.
  • El buscador tiene menos “trabajo” en el rastreo del contenido del sitio, ya que sólo tiene que rastrear una URL para cada página móvil y escritorio.

Inconvenientes:

  • Posible necesidad de rediseño, en caso que actualmente no se tenga ya un diseño Web adaptable. Esto puede facilitarse en caso que se tenga un CMS (gestor de contenidos) que permita implementarlo más rápidamente.
  • Contenido móvil menos diferenciado, ya que se muestra el mismo contenido tanto para usuarios móviles como de escritorio, cuya diferencia es solo el formato.
  • Experiencia de usuario menos enfocada y optimizada al móvil, ya que es la misma página y contenido reformateado, lo cual conlleva restricciones en las modificaciones a hacerse de cara al usuario móvil.

 

2 – Publicación dinámica: En este método tenemos una sola URL, pero ofrecemos distintos contenidos dependiendo del agente de usuario detectado, se identifica este, y si es de pc o móvil se le muestra un contenido  u otro.  Al elegir esta modalidad debemos configurar el servidor para que responda con un HTML distinto, pero en la misma URL, dependiendo del tipo de agente de usuario que solicite la página.

publicacion-dinamica-inigo-nieto

Ventajas:

  • Una URL para ambas versiones, tanto la móvil como la de escritorio, por lo tanto no hay duplicidad de contenido.
  • Consolidación de popularidad al existir una sola única URL por página.
  • Más flexibilidad de diferenciación de contenido móvil, al mostrarse un HTML distinto al de la versión de escritorio, a pesar de hacerse en la misma URL, por lo cual el contenido puede ser, por ejemplo, totalmente geolocalizado.
  • Mejor usabilidad móvil, al poder personalizar y optimizar totalmente la interfaz al formato de los dispositivos móviles.

Inconvenientes: 

  • Mayor complejidad técnica, sobre todo con la identificación de agente de usuario y servir contenido distinto en relación al mismo.
  • Mayor esfuerzo y coste en mantenimiento, ya que realmente serán dos HTMLs y dos piezas de contenido por página, aunque finalmente se muestre únicamente a través de una URL.

 

3 – Sitio Web paralelo: La última opción para desarrollar una Web móvil es crear una estructura de URLs paralela a la de la Web de escritorio, pero bajo un subdominio “m” (que ha sido poco a poco adoptado como el estándar). Y, en caso de no ser factible, bajo un subdirectorio /m/ que replique la estructura orientada a escritorio, pero con un diseño, contenido y organización con formato orientado a móvil.

Esta alternativa es sugerida cuando no se puede implementar un diseño web adaptable o la publicación dinámica. Aunque aparentemente es más directa de implementar, fuerza a duplicar contenido y generar más trabajo al buscador para identificar el contenido móvil al mostrarse en distintas URLs.

web-paralela-inigo-nieto

A tener en cuenta el hecho de que se tienen todas las URLs duplicadas, desde el SEO es un punto muy muy negativo. La realidad en cuanto al posicionamiento es que se cruzan las URLs, es decir, a pesar de estar en el pc corremos el riesgo de que aparezca la URL del móvil. Si un usuario entra desde el móvil al sitio web tradicional, habría que redireccionarle mediante una 301 indicándole que ahora el contenido que busca está en m.miwebpersonal.com.

A nivel de SEO y a nivel técnico conlleva cierta complejidad que debe ser tenida en cuenta. Se ha de tratar ambos sitios Web a la vez. Se ha de trabajar por duplicado todo el contenido, si introducimos un producto/noticia, debemos hacerlo en ambos sitios. En la Web de Marca personalmente he visto en la home distintos contenidos desde un móvil y desde un pc. Una buena  solución a esto es tener un CMS que muestre la versión móvil desde un “m.” pero trabajar todo el contenido desde un backoffice único.

Lo más normal es duplicar todo el contenido, pero si hay categorías que no quiero introducir en la versión “m.” debo decidir si permitirle al usuario ver la URL en modo “tradicional” como en el pc, o redireccionarle a una categoría o página parecida en la versión “m.” que yo fijo.

 

Ventajas:

  • Es un desarrollo más directo y menos complejo, ya que las URLs móviles son independientes y están totalmente enfocadas al usuario móvil.
  • Da más flexibilidad de diferenciación de contenido móvil, ya que las URLs son independientes y pueden mostrar información distinta y orientada al usuario móvil.
  • Mejor usabilidad móvil, debido a que la interfaz de la versión móvil puede ser completamente orientado a este tipo de usuario ya que estará únicamente orientada a esta audiencia.

Inconvenientes:

  • Existe un riesgo de duplicación de contenido al duplicar la estructura de URLs, una orientada al móvil y otra a escritorio. Sobre todo al no incluirse ciertas etiquetas e implementarse las redirecciones que se comentarán posteriormente.
  • División de fuerza de popularidad entre las páginas (al existir dos URLs por cada pieza de contenido, una orientada a móvil y otra a escritorio) y por lo tanto, requiere un mayor esfuerzo en link building para ambas versiones.
  •  Mayor esfuerzo y coste en mantenimiento del sitio, ya que al desarrollarse en URLs independientes los cambios y actualizaciones serán adicionales a los que ya se hacen para la versión de escritorio del sitio.

 

Y para finalizar os dejo una imagen que resume muy bien cada método

tipos-web-movil-inigo-nietoY como siempre, que paséis un bien día!!

 

15 Flares LinkedIn 15 Twitter 0 Google+ 0 Facebook 0 15 Flares ×

6 Comments

  1. Muy bueno el contenido, bien explicado cada uno con sus ventajas e inconvenientes.

    • Muchas gracias Helios!
      Si tienes cualquier duda, pregunta o sugerencia, me encantará debatirla contigo.
      Saludos.

  2. Perfecta la explicación!! Me queda una duda… La “Adaptable” es la que recomienda Google, por lo tanto… ¿Es mejor para el SEO la “Adaptable” que la “Dinámica”? Por un lado recomienda la adaptable por su sencillez al rastrear, pero por otro lado si miramos en lo que se suele basar el SEO… con la dinámica podemos hacer un contenido más optimizado (por ejemplo en velocidad) e incluir funciones como la de llamada. Espero tu respuesta y gracias!!

    • Hola Jahel!

      No sé si habrás leído esto alguna vez…..pero se me acaba de borrar una respuesta larga y muy currada…axdfgjav!! jkawxdfjk!!
      Al lío.

      Me decanto por la dinámica, ofrece mucha más personalización a nivel de usabilidad en diferentes dispositivos a la vez que la optimización se ve mejorada en los dispositivos móviles puesto que las imágenes las adaptamos a las resoluciones de estos y por lo tanto pesan menos. Además como bien dices, podemos incluir un CTA para llamar que desencadene una llamada a un número predeterminado…y si esto lo unimos a la geolocalización, en un negocio del tipo Telepizza, lo petas, seguro.

      Problema? sí, y gordo. Aparte de que implica una mayor complejidad técnica y mayores conocimientos, conlleva más trabajo, lo que es más dinero. Todo depende del proyecto al que te quieras enfrentar o de los requisitos del cliente.
      Depende también del tipo de página, no es lo mismo un ecommerce de 1.000 páginas que vende tornillos rosca chapa, que una web de 10 páginas que vende motores para aviación (inventada total). La inversión de tiempo y dinero en cada una de ellas no es comparable y mucho menos si nos paramos a ver el beneficio por unidad vendida.

      Espero haberte ayudado y solucionado tus dudas.
      Por cierto, muchas gracias por comentar, se agradece :)

      Un saludo!
      Íñigo

      • Muchisimas gracias Iñigo!! La verdad es que me es muy útil!! Tenía muchas dudas y no sabía por que decantarme, ahora ya lo tengo claro, haré una dinámica.

        Gracias nuevamente y felicidades por tu blog!

        Un saludo!!

        • Muchas gracias a ti Jahel.

          Me alegro de haberte resuelto las dudas y haber sido de ayuda.
          Gracias por comentar y por preguntar, si tienes cualquier otra duda ya sabes, pregunta y si puedo te responderé :)

          Un saludo!
          Íñigo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *