Hoy en día el Internet y la tecnología han ido evolucionando constantemente y es algo que está al alcance de la mayoría de la población a nivel mundial, esto se logra través del uso de una amplia variedad de dispositivos, ya sea móviles o fijos con los que se puede tener una navegación multiplataforma y acceder a los diferentes sitios web existentes.

Esto ha venido a revolucionar el diseño de sitios web, es por eso que la técnica del Diseño Web responsivo, mejor conocido como Responsive Web Design (de acuerdo a su nombre en inglés) se ha convertido en la mejor de las herramientas para adaptarse a la nueva realidad virtual.

Al momento de acceder a los sitios web mediante los diferentes dispositivos que hoy existen (como son los teléfonos inteligentes, tabletas, computadoras u ordenadores de escritorio, laptops, proyectores de pantalla, libros electrónicos e incluso Smart TV) se abre una amplia gama de formatos, resoluciones y tamaños de pantallas para los cuales es necesario que el diseño de tu web se adapte a cada uno de ellos.

Lo anterior se lleva a cabo con la finalidad de que la persona que está detrás de cada una de estas pantallas tenga la mejor experiencia de usuario posible a la hora de navegar en tu sitio, entonces te preguntarás ¿Cómo se puede lograr esto? Comencemos por lo básico, definir qué es el Responsive Web Design.

Definición del Responsive Web Design

El RDW (Responsive Web Design) es una filosofía de diseño y desarrollo de interfaces que tiene como objetivo adecuar la apariencia que presentan las páginas web de acuerdo al tipo de dispositivo en que los sitios web son visitados.

Es la tecnología más utilizada en la actualidad, que propone que el contenido de tu web se adapte al entorno de cualquier tamaño de pantalla que exista mediante un único diseño, sin necesidad de tener una versión para cada dispositivo móvil o fijo, lo cual se logra a través de estructuras flexibles como son imágenes, videos y contenedores moldeables.

Imagina que tienes una funda elástica que puedes estirar para cubrir tanto tu celular como tu tablet o tu laptop, lo mismo que sucede con un diseño responsive.

El término Responsive Web Design se refiere, en su traducción más ajustada al español, a un diseño adaptativo o responsivo, ante lo cual adaptativo significa perteneciente o relativo a la adaptación o a la capacidad de adaptación.

Por su parte la palabra responsive o responsivo significa perteneciente o relativo a la respuesta y se refiere cuando un sistema tiene la característica de tener una reacción al medio que lo rodea, por ejemplo cuando entras a una tienda y automáticamente suena un timbre, ese es un sistema responsivo.

Una vez teniendo clara la definición del RDW, es importante distinguir entre un Adaptive Web Design (AWD) y un Responsive Web Design (RWD), a continuación te presento las diferencias entre uno y otro.

Diferencias entre el Adaptive Web Design (AWD) y el Responsive Web Design (RWD)

• El AWD usa un código de servidor o cliente para distinguir el dispositivo y adaptar el contenido de la web al formato de pantalla requerido, mediante hojas de estilo CSS; el RWD utiliza Media Queries con las que detecta a los dispositivos específicos brindando imágenes escalables que se irán ajustando a cada tipo de pantalla que se desee.
• En el AWD tu contenido puede no mostrarse totalmente en todas las pantallas ya que la información se preselecciona y se descargan solo los activos que se optimizan para los dispositivos móviles; el RWD en cambio, descarga todos los activos de la web sin importar el tipo de dispositivo, por lo que tu contenido será mostrado siempre en su totalidad.
• El AWD cuenta con diferentes plantillas para cada tipo de dispositivo, caso contrario el RWD maneja una sola plantilla que sirve para todo tipo de dispositivos existentes lo cual lo hace más sencillo y práctico.
• Por un lado el AWD emplea secuencias de comandos para llevar a cabo la adaptación a los dispositivos y tamaños de pantalla, para así distinguir el tipo de dispositivo y cambiar el comportamiento de la web; por el otro lado el RWD incluye todas las características que un navegador pueda necesitar.
• Cuando ya cuentas con tu web desarrollada puedes partir de ella para adaptarla a las plantillas de diseño del AWD, sin embargo si quieres contar con RWD tendrás que reconstruir tu web totalmente y eso generará un presupuesto elevado, pero será una sola inversión con grandes ventajas.
• Al llevar a cabo un proyecto de AWD necesitas conseguir programadores con bases sólidas en javascript y CSS para adaptar tu web, pero si quieres realizar un RWD tendrás una larga fase de diseño y testeo que te proporcionarán experiencias de usuario personalizadas para la mayor cantidad posible de dispositivos.
• La descarga del AWD es más rápida pues carga únicamente lo necesario para el dispositivo que lo requiere, por su parte el RWD descarga todos sus elementos necesarios para todos los dispositivos que se presenten.
• El AWD tiene buen rendimiento pues con su diseño adaptativo abarca una amplia cantidad de dispositivos a un costo menor y por su lado el RWD es ideal para marcas que inician desde cero.

La técnica de diseño responsive está consolidada como una de las grandes prácticas en la actualidad, proporcionando a los lectores la posibilidad de acceder a los contenidos de tu web con una experiencia de usuario lo más similar posible en cualquiera de los dispositivos disponibles.

Con lo ya mencionado nos queda claro que el responsive web design se trata de colocar los elementos de la web para redimensionarlos y así permitir la correcta visualización de acuerdo al ancho de los dispositivos móviles y los dispositivos de sobremesa.

¿Cómo surge la técnica del Responsive Web Design?

El diseño responsivo es una herramienta creada y difundida por el norteamericano Ethan Marcotte (en el año 2010), a partir de una serie de artículos publicados en “A List Apart” que es una línea especializada en diseño y en el desarrollo web los cuales extendería posteriormente en su libro “Responsive Web Design”.

La idea y propósito de un diseño web adaptable se discutieron y describieron con antelación en Julio de 2008 por el World Wide Web Consortium dentro de su recomendación “Mobile Web Best” con el subtítulo One Web, el cual engloba navegación tanto en dispositivos móviles como en dispositivos de sobremesa que cuentan con mayores resoluciones de pantalla.

Bajo este concepto surge la idea de crear una “Web para Todos” (Web for All), es decir, que el contenido que ofrece tu web esté disponible sea cual sea el medio que se utilice, por lo que será accesible en todos los dispositivos (Web on Everything) con excelente experiencias para los usuarios.

Desde entonces el concepto ha trascendido de tal forma que, desde el 21 de Abril del 2015, Google comunicó que se iniciaría a penalizar en el posicionamiento orgánico a los sitios que fueran no “responsive”, proporcionando inclusive un recurso para saber si la página web pasaba su validación.

Es así como en la actualidad el responsive web design se ha convertido en una de las mejores prácticas que van a garantizar al usuario tener excelentes experiencias de navegación, contando con un único canal mejorado que servirá para todos los tamaños de pantalla.

¿Cómo funciona el RWD?

Los dispositivos de navegación han ido evolucionando y con ellos la manera de crear los métodos por medio de los cuales van surgiendo páginas más fluidas que generan contenedores que abarcan todo el ancho de la ventana, en donde el sitio web se visualiza.

En la actualidad existen pantallas con gran cantidad de pixeles de ancho (desde 300 hasta 2,000 y fracción o más) por lo que se volvió necesario llevar a la web a dimensiones con incluso el doble de ancho que la de origen, para evitar que pueda verse distorsionada.

A raíz de esto surgen layouts (contenidos) mucho más fluidos, con un diseño de estructura flexible, por medio de las media queries de CSS3, en las cuales la palabra “query” equivale a pregunta, por lo que al aplicar dichas media queries a la hora en que se visualiza tu contenido, surge en automático la interrogativa: ¿qué dispositivo se está usando?

Es por eso que al utilizar las media queries es mucho más sencillo ajustar la anchura del sitio web a la pantalla que lo necesite (cuyas resoluciones van desde los 240 hasta los 1,200 pixeles), manejándose con porcentajes ajustados a los anchos de cada una de las pantallas existentes, en base a dispositivos específicos.

En lugar de crear una website para cada dispositivo que se va presentando, puedes hacer una sola página utilizando estos recursos que van a detectar el tipo de tecnología con sus respectivos elementos de ancho a la que accede el usuario, mostrando la versión optimizada que le corresponde con imágenes más ligeras, redistribución de columnas, entre otras características, según sea el caso.

Es así como el RWD se convierte en una web multiplataforma que va a cubrir todo tipo de resoluciones y por consecuencia va a satisfacer un mayor número de necesidades del público en potencia.

Todo esto además, lo puedes lograr con una sola versión de desarrollo de código en HTML y CSS, dentro de la cual se incluyen en la hoja de estilos, la serie de órdenes conocidas como media queries y de esta manera te será posible abarcar todas las resoluciones de las pantallas que se vayan presentando.

Puedes programar el documento de tu sitio en la actual edición HTML5 y CSS3, con el cual obtendrás una excelente experiencia ya que es una herramienta de fácil manejo, con nuevos elementos creativos y con la cual puedes ahorrarte el costo que te significaría desarrollar una app nativa para cada dispositivo en específico, obteniendo resultados uniformes en todas las plataformas.

Cuando introduces las media queries en tu hoja de estilos, tu web puede añadir consultas más especializadas tomando en cuenta los anchos de pantalla, alturas y capacidad de colores.

Con la implementación de los diseños adaptativos o responsivos, a través de un único desarrollo, se puede ir cambiando cualquier aspecto relacionado al estilo de tu web, ya que el responsive web design se maneja con porcentajes en las dimensiones de cada layout.

Con esto puedes evitar depender de un ancho fijo y te permite crear contenidos con elementos mucho más fluidos como son fuentes, imágenes y objetos multimedia que se van redimensionando y adaptando al espacio, formato y resolución de pantalla que se requiera.

En la actualidad el diseño responsive se ejecuta en una amplia gama de frameworks CSS como Bootstrap, foundation, bulma, que tiene una gran popularidad y ofrecen una gran cantidad de recursos al momento de diseñar el sitio.

A la hora de diseñar una Responsive Web se debe contar con las aptitudes, experiencia y conocimientos correctos, ya que de esto va a depender que se puedan evitar problemas de diseño, de navegación y por ende el grado de satisfacción del usuario será mayor.

En las líneas siguientes te presento una serie de problemas que podrían darse durante el desarrollo de tu web para que tengas en cuenta las posibles soluciones que puedes emplear.

Problemas que pueden presentarse en el Diseño Responsive y posibles soluciones:

Proporción del encabezado

• PROBLEMA: utilizar la misma proporción en pantallas grandes, como la de los ordenadores de sobremesa, que en pantallas pequeñas, como la de los teléfonos inteligentes ocasionará inconvenientes en cuestiones de diseño y usabilidad, ocasionando molestias y pérdida de tiempo a los usuarios.
• POSIBLE SOLUCIÓN: lo más adecuado es modificar manualmente los tamaños de los encabezados para anticiparse al mantenimiento de las proporciones automáticas.

Menús de tu Web

• PROBLEMA: Comúnmente los sitios web se habían diseñado para computadoras de escritorio o portátiles por lo que al trasladarse el contenido a pantallas de dispositivos móviles causó dificultades para acceder a los menús o para escribir en ellos.
• POSIBLE SOLUCIÓN: Ante esta problemática se sugiere cambiar los amplios menús de navegación (horizontales y verticales) por modelos más sencillos y prácticos, reescalando su tamaño y minimizando el menú a un ícono, así como ajustar la dimensión de los vínculos para ser oprimidos por el dedo cómodamente, pues los famosos clicks se han sustituido por pequeños toques del dedo como input.

Bases del Diseño de tu Web

• PROBLEMA: Usualmente los diseños de los sitios web se proyectaban basados en pixeles, ocupando cajas de un único tamaño que se distribuían en pantallas de ancho fijo.
• POSIBLE SOLUCIÓN: Con la implementación del responsive web design ahora basarás los diseños de tus páginas web en porcentajes en lugar de pixeles, con lo cual generarás ajustes en pantallas de ancho variable, midiendo los elementos agrupados por el porcentaje de la pantalla en la que se esté navegando.

Imágenes en pantallas de alta definición

• PROBLEMA: Al emplear en la iconografía imágenes en formato PNG, éstas suelen aparecer pixeleadas en una pantalla de alta definición, como la de los smatphones.
• POSIBLE SOLUCIÓN: Lo mejor en este caso es usar imágenes en formato SVG (Gráficos Vectoriales Redimensionables) cuyos vectores posibilitan el aumentar o disminuir el tamaño de la imagen sin alterar su calidad al visualizarla, además de tener un peso mucho menor en comparación a los formatos JPG o PNG.

Velocidad de las conexiones en dispositivos móviles

• PROBLEMA: Casi siempre los dispositivos móviles se conectan a internet a través de conexiones no muy estables y limitadas, lo cual hace lenta la carga del contenido de los sitios web.
• POSIBLE SOLUCIÓN: En este caso puedes optar por optimizar tu página, reduciendo archivos CSS y JS, así como cargando imágenes de tamaños diferentes, dependiendo del dispositivo. Otra opción que aplica aquí es el uso de CDN como el cloudflare.

Las columnas del contenido y sus bordes.

• PROBLEMA: Cuando el contenido de tu web aparece en formato de columnas, la propiedad CSS “border”, es decir el borde de la columna solo permite trabajar con pixeles.
• POSIBLE SOLUCIÓN: El responsive web design trabaja con anchos porcentuales lo cual favorece a que los elementos de los proyectos de diseño se vayan adaptando al tamaño de la pantalla en la que se esté mostrando, para esto será necesario habilitar un elemento HTML flexible para poder aplicar a la vez un ancho y un borde porcentual y a su vez utilizar un elemento box-shadow con el que los pixeles de los bordes sean simulados.

Animaciones desplegadas en los dispositivos móviles.

• PROBLEMA: Generalmente las animaciones tienen un funcionamiento más lento en los dispositivos móviles que en los dispositivos de sobremesa, como son las computadoras, debido a la menor capacidad de procesamiento.
• POSIBLE SOLUCIÓN: Las recomendaciones en este caso son propiciar que los procesos se generen más rápido con el empleo de mayor cantidad de código nativo, canjea las animaciones y transiciones de Javascript por las de CSS3 que son más rápidas, por último en lo que respecta al código Javascript utiliza más memoria y menos procesador.

Generando un diseño fluido: ancho de capas y div

La principal propuesta para que tu sitio web cuente con diseño mucho más fluido es deshaciéndote de los pixeles y los anchos fijos y predefinidos; esto se logra aplicando la proporcionalidad para que el ancho de las capas en las que se estructura tu web sea fluido y adaptable.

Es así como lograrás que en la visualización de tu página web, ya sea en un dispositivo pequeño o uno grande, los elementos mantengan el mismo tamaño y sean reorganizados, todo a proporción de su tamaño original.

Dichos elementos pueden ser:

• De ancho fijo: son los elementos (videos, imágenes u objetos) que desde su origen tienen un ancho fijo ya definido, que al insertarse en el código de la página habrá que definir dicho ancho como el máximo permitido para la resolución que se esté empleando y de esta manera no pasarse del elemento padre que lo rige.
• De ancho variable: para establecer este tipo de elementos seguiremos una fórmula básica que es determinar el ancho inicial del elemento en la página y dividirlo entre el ancho original.

Nunca debes perder de vista que vas a diseñar tu sitio web para personas, no para dispositivos, por lo que el principal propósito de utilizar el responsive web design será generar la más satisfactoria experiencia de navegación.

No olvides tomar en cuenta todos los tamaños de pantalla que el usuario podría visualizar según se vayan presentando, para que el diseño no se quede obsoleto con el paso del tiempo.

Ventajas de un Responsive Web Design

La optimización web es interminable pues día a día la tecnología de los dispositivos a través de los cuales se consultan los sitios web van avanzado y transformándose por lo que el diseño de tu página siempre debe estar a la vanguardia y utilizar el responsive web design es uno de los mejores caminos a tomar para este caso.

Ya una vez que conoces su definición, origen y funcionamiento quizá podría surgir en ti la pregunta ¿de qué me sirve todo esto? Pues bien a continuación te expongo las mejores ventajas que obtendrás al aplicar la herramienta del responsive web design.

• Con el responsive web design es posible cubrir todas las resoluciones de pantalla existentes en la actualidad, obteniendo así un sitio web optimizado para distintos dispositivos.
• Se mejora la experiencia de diferentes tipos de usuarios en un rango considerable, en comparación de los sitios web de ancho fijo, lo cual se deriva de la opinión que los lectores tienen de tu sitio y el uso que le dan.
• Se reducen los costos de creación y de inversión en mantenimiento, lo cual se logra al usar una sola plantilla para todas las plataformas con las que necesites trabajar y al hacer un cambio, en automático se hace en todas las versiones.
• Se comprimen los tiempos del desarrollo de tu web.
• Se evita el desarrollo de aplicaciones ad-hoc para cada sistema operativo móvil (como son iOS y Android).
• Se genera el ahorro de múltiples redirecciones e incluso de contenidos duplicados al aparecer una única URL de tu sitio web en los resultados de búsqueda, proporcionando un mejor posicionamiento web en los buscadores más destacados como es el caso de Google.
• Se evita también el caer en errores de los enlaces que comparten los usuarios en medios sociales como Facebook o Twitter, mejor conocidos como social links.
• Se mejora el SEO, favoreciendo el tráfico que generará tu web e incrementando el ranking de los buscadores móviles.
• Se logra aumentar la viralidad de tus contenidos, al ser compartidos más rápida y naturalmente en las aplicaciones sociales que tenga activas el usuario al momento de acceder a tu página web.
• Puedes optar por contratar un desarrollador o puedes generar la web tú mismo, por medio de propuestas en editores web, como Wix, los cuales funcionan a partir de plantillas que puedes personalizar y que están creadas en HTML5 y CSS3, de esta manera puedes re-colocar los elementos de tu web para que te sea posible adaptarla y optimizarla, según lo requieras.
• Al ser tan generalizado en la actualidad el responsive web design, varios desarrolladores han creado aplicaciones preconfiguradas, también llamadas frameworks, para evitar crear páginas web adaptativas partiendo desde cero, por ejemplo: Bootstrap (https://getbootstrap.com/), Spring, Laravel, Express, etc.
• Al llegar tu contenido a más usuarios, debido a que tu web se va a adaptar a cualquier tipo de dispositivo, tu marca será mejor posicionada e indiscutiblemente vas a potenciar tu marketing digital.
• En consecuencia al punto anterior, se obtiene un incremento en tus ventas online y si se cuenta con un e-commerce, logras transmitir aún más confianza a todos los tipos de usuarios que desees.
• Permite segmentar tu audiencia ya que tienes la posibilidad de saber qué dispositivos utilizan tus usuarios.
• Mejora la rapidez de la carga de tu página web y la mantiene a la vanguardia en lo que respecta a tecnología, dando beneficios adicionales frente a tu competencia.
• Al centrarse en el tamaño de la pantalla y no del dispositivo, tu web puede adaptarse a dispositivos actuales y lo más importante a dispositivos futuros, sin importar sus dimensiones.

Claro que no todo es miel sobre hojuelas y hay que tener en cuenta que siempre existirá la contraparte, por lo que también encontramos algunas desventajas al emplear el responsive web design como:

• El costo del desarrollo al inicio es superior que al de una web sin esta filosofía del diseño, pues presenta un mayor grado de dificultad técnica.
• Hay que ser cuidadoso en cual contenido se va a mostrar y cual no, dependiendo de la versión en la que se consulte.

Sin embargo, como salta a la vista, es mucho mayor el número de ventajas que el de las desventajas que hay al utilizar el responsive web design, por lo tanto no hay que dudar que es una buena opción.

En este contexto, hay ejemplos de portales web que ya han implementado el RWD y aprovechado toda la serie de ventajas que ofrece.

Uno de los primeros casos en prensa online que empleó un diseño responsive es el Boston Globe, marcando un precedente ante el cual otros medios de comunicación, como la revista Time y hasta el New York Time, pensaron en emplear esta técnica (para más información de este caso puedes consultar las páginas http://bid.ub.edu/es/31/gonzalez2.htm y http://www.bostonglobe.com/).

Definitivamente para que tu sitio web evolucione, no dudes en aprovechar los beneficios que ofrece establecer un diseño web responsive.

Concluyendo sobre el Responsive Web Design

Una vez que se ha profundizado sobre este tema, puedes notar que es posible desarrollar un proyecto con confianza para mejorar tu marca, al generar un diseño fluido de tu web para sistemas y dispositivos singulares, sin importar de qué tipo sean, ya que gracias al responsive web design tienes la oportunidad de crear las bases para que tu página se vaya adaptando a todo tipo de pantallas en las cuales tu contenido sea visitado.

En otras palabras, a través del responsive web design podrás ir a la par del crecimiento de las tecnologías y técnicas que irán avanzando con el tiempo, esto referente a la creación de contenidos en la web y a la generación de nuevos y mejorados sistemas y dispositivos digitales.

Es como esa “funda” que mencionamos en un inicio con la que puedes cubrir tu celular, tablet o laptop, la cual no dejará de ser lo suficientemente “elástica” o “adaptable” para cualquier aparato que adquieras en un futuro, de igual manera tus sitios web podrán irse visualizando en cualquier dispositivo que surja.

No hay duda de que el diseño responsive es la técnica más práctica y útil con la que puedes generar sitios web de buena calidad en cualquier medio.

Es una herramienta que ha venido a revolucionar el entorno de la navegación, la cual irá mejorando con el paso del tiempo y con la participación de todos los involucrados, desde los desarrolladores hasta los usuarios.

Ahora que ya conoces todo lo que necesitas saber sobre esta técnica no puedes dejar pasar la oportunidad de implementarla para tu sitio web, es clave que des este paso para que no dejes de avanzar en tu negocio.

Haz que tu sitio web se adapte a esta nueva realidad y de esta manera brindes una experiencia de usuario cada vez más satisfactoria. Es algo que ya está aquí, ya no es desconocido o inalcanzable, solo es cuestión de que te decidas.