Si bien hace solo un par de años los smartphone y luego las tablets comenzaban a aparecer, y comenzaban a despegar las conexiones a Internet a través de estos dispositivos, hoy en día es cada vez más común estar navegando en Internet a través de alguno de ellos.

En mi familia mis hermanos, ambos de la Gen Y, mis sobrinos de la Gen Z, incluso mis papás, ambos ya sobre los 65 años poseen al menos un Smartphone o Tablet, en muchos casos reemplazando un computador de escritorio.

El reemplazo del  computador por estos dispositivos móviles hace necesario el tener un sitio web que sean optimizado para una excelente visualización en las diferentes pantallas que utilizamos hoy en día, y sus diferentes resoluciones.

Por otra parte, Google le está dando una gran prioridad a sitios web que se encuentran optimizados para móviles, ha creado documentación a modo de recomendaciones para el uso y la existencia de contenido optimizado para las diferentes pantallas que hoy en día estamos utilizando.

Se a visto que, y cada vez más, Google comienza a priorizar los resultados con contenidos optimizados para el dispositivo donde se realizó la búsqueda; es más, en Google PageSpeed Insights, la opción por defecto del resultado del test es la Móvil y no el Ordenador, en donde se pueden observar recomendaciones que mejorar la velocidad de carga y la propia interfaz de usuario.

Diseño Web Móvil

Para lograr la existencia de un sitio optimizado para Smartphones existen tres métodos, cada uno con ventajas y desventajas que hay que ponderar para elegir la mejor para determinado sitio web, no para todos se puede aplicar la misma solución, pero incluso a estas tres opciones y dependiendo los objetivos y las circunstancias de cada página se puede realizar una aplicación específica para Smartphone donde brindar los contenidos del sitio web.

Las opciones o métodos para tener un Diseño web móvil son Diseño Responsivo, Publicación Dinámica o Sitio Móvil Independiente.

Diseño Responsivo

El diseño responsivo tiene grandes ventajas, permite que con la misma URL y el mismo HTML, el sitio web pueda verse optimizado en diferentes dispositivos, lo que permite que Google pueda rastrear e indexar fácilmente el contenido de él mismo. Las diferencias están dadas por la capa de estilo (CSS) la cual conforma la capa de diseño de un sitio web.

El diseño responsivo utiliza los media queries, propiedad incorporada en un comienzo en CSS 2.1, pero no es hasta los cambios realizados en CSS3, cuando es posible generar cambios en los estilos de los diferentes elementos del sitio web, creando diseños diferenciados entre limites de resolución, dependiendo de la resolución de pantalla de cada dispositivo y no solamente del tipo de dispositivo, pantalla, impresión, lector de pantalla, entre otros.

<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px)” href=”shetland.css” />
<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 480px) and (resolution: 163dpi)” href=”shetland.css” />

Debido a la fluidez del uso del Diseño Responsivo, es habitual la utilización de de grillas fluidas, lo que permite “ir pasando” entre los diferentes puntos de corte, de una manera suave, adaptando el diseño web a las distintas resoluciones intermedias, sin la utilización de diferentes grillas para cada sección de resoluciones entre cada punto de corte. Unsemantic, es una de ellas, que a su vez es la sucesora de la grilla 960gs, con un manejo e implementación muy similar.

Otro punto a considerar, junto al Diseño Responsivo y las Grillas Fluidas, es el Mobile First o el Diseño partiendo de los dispositivos móviles; la web ha de ser usable, funcional y atractiva en smartphones, sean de 4 a 5 pulgadas, luego ir escalando y agregando funcionalidad para los diferentes dispositivos con resoluciones mayores.

Un punto problemático a considerar, son los tamaños de las imágenes, las cuales muchas veces se escalan, disminuyendo su tamaño con css, pero esto genera la descarga, por parte del visitante móvil, de un archivo mucho más grande de lo que requiere, por el contrario, si posee un dispositivo con Retina Display, es necesario una imagen de una resolución mayor; para esto se puede echar mano a algunas librerías en javascript, así como también la utilización de imágenes vectoriales en el formato SVG.

Si necesitas ayuda para la creación de tu sitio web o blog, especialmente pensando en que se vea bien en todos los dispositivos actuales puedes pasarte por el sitio web de mi agencia, LoaMKT, con gusto te podremos ayudar.

Publicación Dinámica

A través de la misma URL se muestran distintos HTML y CSS, cada uno orientado a un determinado dispositivo. Esta forma de entregar los contenidos tiene una gran ventaja con respecto a la anterior, el tamaño del sitio para dispositivos móviles no es el mismo que para otros dispositivos, esto gracias a que no es necesario transmitir todo el soporte para las demás resoluciones / dispositivos, como es el caso del diseño responsivo.

Una gran ventaja de esta forma de diseño web está dada por la separación del diseño y contenido para los distintos dispositivos, esto conlleva que el peso del sitio y por ende su velocidad está orientada para cada dispositivo, siendo en móviles mucho más ligero y rápido, a su vez los objetivos del sitio para móviles puede ser distinto que para escritorio, el usuario móvil no siempre requiere la misma información que un usuario que accede al sitio web desde su computador o Tablet.

Por el contrario una desventaja producida por la misma razón que las ventajas señaladas es la complejización de realizar actualizaciones en las diferentes versiones de los sitios web, aumentando el tiempo en realizar los cambios y por consiguiente la posibilidad de generar errores en dichas actualizaciones. También he de señalar que hay que tener un gran cuidado en las técnicas de detección del user-agents, la cual siempre esta propensa a una detección errada, ya sea por un listado desactualizado o una búsqueda errónea de los user-agents específicos para móviles.

Para lograr una buen resultado en la indexación del sitio web móvil es recomendable la utilización de la cabecera Vary HTTP en la respuesta del servidor, así Googlebot podrá rastrear e indexar la versión móvil del sitio web.

Sitio Móvil Independiente

En esta tercera modalidad, en distintas URL se encuentran los sitios específicos de móviles y escritorio, siendo a su vez distintos entre ellos. Comparta con la anterior la ventaja de que la versión optimizada para celulares es liviana y más rápida que la versión de escritorio y a su vez la desventaja de la complejización de las actualizaciones futuras del contenido del sitio web.

Un problema no menor, es la posibilidad de que Google podrá considerar el contenido de la versión móvil o de la de escritorio como contenido duplicado al estar presente el mismo contenido en dos URL diferentes, para que esto no ocurra es recomendable utilizar el rel=”canonical”, en la versión móvil, y el rel=”alternate” en la versión de escritorio, así Google consideraría la versión de escritorio como la original y la versión móvil como una alternativa del mismo contenido, logrando que Google lo considere como una sola página, mostrando la que corresponde en la página de resultados de acuerdo al dispositivo donde se realizó la búsqueda.

Aplicación Específica para Móviles

Alejándonos un poco de lo que es la web en móviles, encontramos otra opción para compartir tus propio contenidos, que es la creación de una aplicación específica para cada dispositivo móvil, sean smartphone o tablets, vengan con iOS, Windos o Android.

Al ser aplicaciones especificas su distribución es mediante las Tiendas respectivas, de acuerdo al sistema de cada equipo móvil.

Esta opción es la más compleja, ya que requiere el desarrollo para cada plataforma; a su vez, no permite el aunar el trabajo de posicionamiento web con la versión de escritorio.

Palabras al Cierre

A través de estas opciones puedes llegar a quienes te visitan por dispositivos móviles, las tres primeras se incluyen en las estrategias de posicionamiento web, lo que permite que nuevos usuarios te puedan conocer.

Por otra parte, la última opción tiene una mayor orientación a quienes ya te conocen y visitan tu sitio web en dispositivos de escritorio, creando un nuevo punto de conexión, los dispositivos móviles.

Aplicas alguno de estos métodos en tu sitio web o blog, cuéntame cómo lo has hecho y cuál ha sido mejor para ti, la sección de comentarios y yo te esperamos.