Diseño web adaptable («responsive»), una característica fundamental de tu página web

Antes de la masificación de los smartphones, casi la totalidad de búsquedas se hacía desde la computadora personal. Sin embargo hoy día la situación ha cambiado radicalmente. En google por ejemplo más del 55% acceden a través de sus dispositivos móviles y en España el año pasado el 92% de las personas accedió a internet por medio de su teléfono.

Al igual que en el mundo físico, los clientes llegarán a nuestra tienda virtual en la medida que el espacio sea acogedor, accesible y llamativo. Lo contrario ocurre si no contamos con las instalaciones adecuadas.

Precisamente “No contar con instalaciones adecuadas” puede convertirse en un gran problema para tu página web. Tal vez esa sea la razón por la que no has alcanzado el número de visitas que esperabas.

Pero no hay que perder la calma… para cada problema existe una solución, y el diseño web adaptable o también llamado «responsive» ha llegado para facilitar la vida a cibernautas y emprendedores.

Diseño web adaptable

Casi con seguridad en algún momento hemos llegado a una página que no logramos visualizar completamente desde nuestro teléfono. Algunos funciones aparecían cortadas o simplemente no estaban allí. Evitar este tipo de situaciones embarazosas es el objetivo principal del diseño web adaptable.

También conocido como diseño responsive o adaptativo no es más que la técnica que permite a un portal web ser visualizado correctamente desde cualquier dispositivo, ya sea tablets, móviles, computadoras portátiles, PC´s y cualquier otro con capacidad de navegación.

Funcionamiento

El diseño web adaptable es posible gracias a las “media queries” que son una serie de órdenes que indican al documento HTML cómo deben comportarse en diferentes resoluciones de pantalla.

Para explicarlo de una manera sencilla, haremos la analogía con una revista la cual contiene columnas. Entonces, bajo los parámetros del diseño responsive, si una web a resolución de PC (1028×768 px) tiene 5 columnas, para una tableta (800×600 píxeles) necesitaría sólo 4, y en el caso de un teléfono inteligente las columnas usadas podrían ser 3. El diseño web adaptable debe fluir acoplándose al tamaño de los gráficos y las estructuras de cada sitio web considerando además la disposición vertical u horizontal en la que se ven los contenidos.

¿Por qué es importante contar con un diseño web adaptable?

No incorporar esa funcionalidad es prácticamente dar un portazo en la cara a nuestros clientes. No es una exageración, si nuestros visitantes no pueden acceder porque encuentran obstáculos, difícilmente regresarán y probablemente acabarán en la competencia.

Otra razón poderosa para contar con un diseño responsive es el posicionamiento en google debido a que nuestro ranking, entre otras cosas, depende de la “calidad” del sitio, siendo la -accesibilidad- un elemento que se tiene muy en cuenta por parte del navegador.

No hay duda que las anteriores son dos poderosas razones para que actualices tu web de inmediato. Cada día que pasa es uno o más clientes que pierdes.

Ventajas del diseño web adaptable

• Mejora el SEO, lo cual significa mayor tráfico y buen posicionamiento en navegadores como Google
• Adaptabilidad a todo tipo de dispositivos móviles permitiendo una navegabilidad óptima y sin complicaciones.
• Reduce costos al evitar que se deban crear sitios por separado.
• Con una sola URL y versión HTML / CSS se cubren todas las resoluciones de pantalla probables.
• Soporte para todo tipo de navegadores.
• Mejora de la experiencia del usuario.
• Facilita que los enlaces compartidos en redes sociales puedan ser visualizados desde cualquier dispositivo.

Si no cuento con un diseño web adaptable ¿cómo puedo hacer la transición?

El primer paso es tener claridad sobre si tu página web cuenta con un diseño responsive o no. Si no tienes certeza es necesario hacer la comprobación. Para esto, la mejor opción es el verificador de sitios web mobile friendly de Google.

Una alternativa para incorporar un diseño web adaptable es hacerlo de manera autónoma. Para ello se deben  tener conocimientos básicos en HTML y CSS.

Existe una manera más sencilla que consiste en el uso de plugins y plantillas que facilitan esa tarea de manera automatizada.

Sin embargo, la mejor opción para tu negocio o empresa, sin duda alguna, es recurrir a los servicios de un experto quien se encargará de hacer la transición de manera profesional y respondiendo a tus necesidades. Aunque los costos suelen ser bajos, esta decisión dependerá de tu presupuesto.

Origen del diseño web adaptable

Una de las primeras discusiones formales al respecto se dió en el World Wide Web Consortium (W3C) en julio de 2008. En esta reunión se detalló un apartado sobre Mobile Web Best Practices bajo el subtítulo «One Web».​ Esta recomendación fue hecha específicamente para dispositivos móviles, en el contexto de One Web, aunque engloba no solo la experiencia de navegación en dispositivos móviles sino también en máquinas de mayor resolución de pantalla.

Cabe recordar que el concepto de One Web se refiere a la idea de construir una ‘Web para Todos’ (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

Hubo un precursor de este movimiento y fue la comunidad WHATWG formada en el año 2004 y conformada por Apple, la Fundación Mozilla y el Software Opera, quienes desarrollaron el HTML5 cuya primera versión fue lanzada años después. La novedad de este lenguaje fue la incorporación de herramientas que permitían generar contenidos adaptables a todo tipo de dispositivos.