Diseño de sitios web adaptativos orientados a medios móviles

Según la empresa de análisis tecnológicos Gartner®, la más importante del mundo, estimaba que para el 2014 el mercado de tablets (tabletas) crecería un 130% en dos años y las ventas de PCs descienderían un 15% en el mismo plazo. Otros datos mostraban que para finales de 2014 habría 146 millones de dueños de smartphones (teléfonos inteligentes) en Latinoamérica y para 2017 unos 243 millones.

Más del 40% de las personas que acceden al Internet lo hacen desde este tipo de dispositivos.
El crecimiento es vertiginoso a nivel global, hoy en día cada vez mas usuarios navegan por la Web mientras están en movimiento.

¿Esto en que forma concierne a su proyecto de Internet y su diseño web?

La razón es simple y elocuente.
Los dispositivos móviles tienen pantallas de tamaño mucho mas pequeño que un PC de escritorio o Notebook y la navegación y exploración de las páginas web ocurre de forma distinta.

Para ofrecer al usuario una visión global de la página los medios de pantalla chica, achican el contenido de toda la página para que el usuario pueda ver todo el contenido de una sola vez acarreando problemas que dificultan la experiencia de usuario.

Aquí algunos ejemplos de problemáticas de no tener un diseño web responsive:

Los textos y fotos se ven muy pequeños y requieren de hacer zoom para agrandar o alejar constantemente para poder ver el contenido en un tamaño aceptable.
Para los usuarios de Smartphone representa una molestia en la lectura debido a que están obligados a desplazar las páginas numerosas veces o a hacer zoom para leer todo el contenido.

Los botones o links resultan muy pequeños y muchas veces se torna difícil poder seleccionar algo o se termina seleccionando otra cosa por error.
No todos los usuarios tienen los dedos del mismo tamaño, ni el mismo nivel de visión o precisión y verdaderamente muchas veces se hace frustrante navegar un sitio web.

No todos los dispositivos móviles tienen las mismas capacidades de procesamiento y rendimiento por lo que muchas veces recursos que funcionan apropiadamente en un PC no lo hacen de la misma forma en un dispositivo móvil.

El diseño web Adaptativo / Responsive como solución

El diseño web adaptativo o adaptable es una técnica de diseño y desarrollo web la que mediante el uso de media-queries en la hoja de estilo CSS, consigue adaptar el diseño del sitio web o proyecto a las características del medio móvil del usuario para que este obtenga la mejor experiencia de navegación.

Nuestra completa solución en diseño web responsive aborda la mayoría de las resoluciones de celulares, smartphones y tabletas, no solamente las de uso más común en los dispositivos mas difundidos. Las resoluciones previstas son:

320, 375, 360, 384, 480, 533, 568, 600, 640, 720, 768, 800, 960, 980 y 1024 píxels de ancho.

Beneficios de contar con una web de diseño adaptativo orientado a medios móviles

Mejora la experiencia de navegación del usuario

Esta tecnología también conocida como (CSS Media Queries for Responsive Web Design) permite conseguir sitios adaptables mejorando la usabilidad y la conversión (éxito que su proyecto obtiene de cada visita).

Se han hecho estudios que demuestran que cuando se aprovecha toda la pantalla del visitante presentando los contenidos en función del tamaño de esta y haciendo énfasis en que sean cómodos y accesibles aumenta la retención de usuarios sustantivamente así como la conversión.

Así mismo existe una técnica que permite entregar versiones HD de las imágenes en función de las posibilidades del dispositivo. Una imagen 72 dpi que normalmente se utiliza para una versión escritorio no obtiene un efecto visual de calidad en un dispositivo como un ipad retina por ej.
Un dispositivo que tiene densidad de píxel x2 x3 requiere de entregar imágenes acorde a la resolución para que el usuario pueda verla con todo el detalle posible en su dispositivo.

Visibilidad desde distintos dispositivos móviles y menor costo

La técnica habitual para que los usuarios pudieran acceder a una web desde un dispositivo distinto a una PC, era redireccionando a un sitio web específico alternativo (ej. movil.suempresa.com, ipad.suempresa.com)

En definitiva se trataba de versiones alternativas del proyecto orientadas a las versiones mas comunes de dispositivos móviles.
Esto anterior solo desde el punto de vista de mantenimiento, testeo y costes de desarrollo lo hace muy superior ya que se trata de tener varias páginas distintas que manejan la misma información.

Por el contrario, el diseño web adaptativo permite que el sitio web o proyecto pueda visualizarse en dispositivos móviles adaptándose a cada uno sin inconvenientes.
Es la hoja de estilos la que hará que el sitio cambie su forma y distribución, desde el punto de vista de etiquetado y programación el proyecto será el mismo.

Posicionamiento web (SEO)

Mediante la antigua técnica mencionada en el punto anterior (tener una versión paralela del proyecto orientada a móviles), se evita el incurrir en penalizaciones de Google u otros buscadores por poseer contenido duplicado.
Con el diseño adaptativo esto no ocurre ya que el proyecto es siempre el mismo sitio con el mismo punto de entrada y lo que hace este es cambiar su aspecto y distribución visual a cada tipo de pantalla.

Todas las acciones necesarias que se tomarán para posicionar una web serán mucho más fructíferas al ser realizadas sobre un solo sitio web, que si se tuviera que hacer sobre varios.

Redes sociales

Las redes sociales se utilizan en gran medida desde dispositivos móviles.
Si un usuario comparte algo desde un PC y luego alguno de sus amigos/seguidores lo ve a través de un dispositivo móvil no va a percibir exactamente la misma experiencia que aquel que lo compartió.

Mediante el diseño web adaptativo es lo mismo desde que plataforma se comparta y desde dónde se visualice, siempre estará especialmente optimizado para cada medio.

Estadísticas de visitas

Al igual que pasa con SEO, tendremos todas las estadísticas por URL y por contenido exactas, sin tener que ir a ver otros subdominios o el temor a que las redirecciones hayan duplicado las visitas.
Esto hace que el seguimiento de las visitas sea mucho más eficiente y simple.

Mayor valor de su imagen de marca

Al contar con un sitio web adaptable y cómodo a cada tipo de dispositivo móvil y pantalla estamos aumentando valor a nuestra imagen de marca ya que la gente que visite su sitio web o proyecto, notará que se esta utilizando técnicas para mejorar la presentación y comodidad del contenido y asociará su marca con creatividad e innovación.

Además, cada día son más las empresas, entre ellas su competencia, que cambian sus diseños al plano adaptativo.

Google penaliza sitios sin diseño adaptativo (responsive)

Es tanta la importancia que le da google a sus usuarios en sus búsquedas, que penaliza aquellos sitios que no tienen diseño web adaptativo (responsive), lo que conlleva una mejor experiencia a los usuarios.
Aquellos sitios que no cuenten con esta tecnología, tendrán menos puntuación y posibilidades en las búsquedas mediante google.

Reflexiones sobre el diseño web adaptativo / responsive

El acceso desde dispositivos móviles ya es mayor que el acceso desde computadoras de escritorio.
Es hora de cambiar para adaptarse a la realidad.
El diseño adaptativo ofrece una solución elegante para adaptarse a los tiempos actuales donde los smartphones y tabletas ya son mas populares que el PC entre las plataformas informáticas.

Es tan real esto, que no hace falta mas que observar a la gente transitar en la ciudad para verlo con sus propios ojos.

Hoy por hoy, tener una correcta imagen 2.0, en éste caso una web adaptada a los diferentes dispositivos que hay en plaza es de vital importancia para competir y cumplir con los objetivos más importantes.

El diseño web adaptativo sin dudas es una solución eficaz para ofrecer al usuario una experiencia de navegación y lectura óptima y aunque implica un trabajo importante vale la pena por las numerosas ventajas que genera para un sitio web.

Adaptarse al presente es vital.
Nuestra empresa con todo gusto le hará una propuesta acorde.