comparte el articulo 

Tipos de configuración de sitios web para móviles

Actualizado el 03/08/2014 < > 0 Comentarios

Resumen: Existen tres tipos de configuración básicos para desarrollar sitios web para móviles, es necesario que conozcas los pros y los contras de cada uno de éstos antes de escoger una estrategia.

¿Estás pensando en desarrollar un sitio móvil para tu proyecto o negocio? Si es así, tenemos que decirte que estás en el camino correcto para promover tu negocio en diferentes niveles y de manera efectiva. Con esto vamos a asumir que el primer paso ha quedado totalmente resuelto, la decisión de emprender ha sido tomada y ahora es tiempo de ver algunos puntos importantes que te ayudarán a crear un excelente sitio web para móviles por cuenta propia.

Todo el mundo sabe lo importante que es tener sitios web para móviles optimizados, y cómo es que esto impacta en el futuro crecimiento de un proyecto. Cada vez son más los sitios y herramientas que van enfocando su atención en solucionar problemas para los usuarios que navegan a través de un equipo móvil. Es por esto, que los sitios se deben configurar con el objetivo de atraer dichas visitas.

Los motores de búsqueda más importantes de Internet, promueven el uso de tres configuraciones diferentes para atraer el tráfico móvil. Es por ello que tu sitio debe adaptarse a alguna de dichas configuraciones:

  • Sitios que proveen contenido de manera dinámica, con una sola URL que despliega el HTML y CSS dependiendo del agente de usuario.
  • Páginas web con diseño responsivo, las cuales proveen el mismo HTML tanto para dispositivos móviles como de escritorio, y mediante el uso de CSS cambian la página de acuerdo con el dispositivo.
  • Sitios con URLs móviles independientes, los cuales cuentan con una URL totalmente diferente, optimizada únicamente para móviles.

Generalmente cuando se hace uso de una URL independiente para un sitio móvil, se utiliza el prefijo “m.” antes del nombre del dominio. Esto no es obligatorio, puedes utilizar cualquier subdominio, subcarpeta (dominio.com/movil) o TLD (dominio.movil) que deseas, siempre y cuando se adapte a tus necesidades.

De las tres configuraciones que anteriormente expusimos, es el diseño responsivo la que cuenta con mayor aceptación, incluso teniendo el respaldo de Google. Sin embargo, cada configuración tiene sus pros y sus contras, y es lo que expondremos a detalle en las siguientes secciones.

Sitios web servidos dinámicamente

La detección del agente de usuario, se utiliza para servir diversos archivos CSS y HTML dependientes del agente que los está solicitando, siendo generalmente la versión de escritorio la configuración defecto del sitio. Los agentes de usuario son utilizados por el servidor para realizar la acción de detección, lo que puede conducir a errores si la lista de agentes no esta actualizada.

Debes tener en cuenta que la detección de agente de usuario puede llevar a la producción de errores, ya que la lista de agentes de usuario de smartphones debe de actualizarse tan pronto como un nuevo modelo de Smartphone sale al mercado, acción que puede resultar díficil de lograr hasta que el modelo es popular. Si esto no es posible mantener la lista actualizara, está destinada a volverse obsoleta eventualmente y perderíamos tráfico valioso.

Pros

  • No hay necesidad de redirección.
  • Sólo hay una URL.

Contras

  • Los motores de búsqueda requieren recorrer las páginas con diferentes agentes de usuario.
  • La redirección esta propensa a errores.

Sitios con diseño responsivo

Los CSS3 media queries son utilizados por el diseño web responsivo para identificar la capacidad del dispositivo, el ancho de la pantalla, la altura, la resolución o la orientación, y en base a esto re-estructurar el contenido del sitio.

Mediante el diseño responsivo, se pueden establecer propiedades y sentencias CSS especificas para dispositivos de distintos tamaños. Es recomendable poner este tipo de sección en la parte inferior del código CSS, de esa manera, cualquier regla establecida anteriormente para los navegadores de escritorio puede ser sobrescrita fácilmente. La orientación del dispositivo no afecta al estilo, si está configurando el ancho máximo.

En caso de querer ser más granular y menos específico a un sólo dispositivo, se puede establecer propiedades min-width y max-width con intervalos, y de esa manera poder llegar a diversos dispositivos.

Pros

  • Utiliza una única dirección URL, algo que es más fácil de compartir e interactuar.
  • No requiere usar agentes de usuario para redireccionar.
  • Los motores de búsqueda sólo necesitan hacer un crawling.

Contras

  • Menos diferenciación de contenido móvil.
  • Su implementación toma más tiempo y recursos técnicos.

URLs para móviles

Al utilizar este método, cada URL de escritorio tiene una URL equivalente, la cual sirve para mostrar el contenido optimizado para móviles. Se emplea la detección de agente de usuario para redirigir a los usuarios móviles que llegan a la versión de escritorio. Cada una de las versiones de escritorio viene con una etiqueta rel=”alternate” que apuntan a la versión móvil de la sección. Esto ayuda a los robots de los motores de búsqueda a entender la versión móvil y rastrearla.

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.dominio.com"/>

Este mismo atributo puede ser utilizado para establecer y apuntar a la versión de escritorio desde la versión móvil. En lugar de dar el valor “alternate” se debe utilizar “canonical”, de esa manera los motores de búsqueda podrán identificar los dos dominios como diferentes versiones de la misma página y se puede considerar como una sola entidad.

Pros

  • Fácil de implementar.
  • Mejor manejo de contenido exclusivo para móvil.

Contras

  • Desperdicio de recursos de crawling.
  • La redirección es propensa a errores.

Publicado el 04/08/2014, última actualización 03/08/2014.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras