Tiempo de lectura aprox: 2 minutos, 58 segundos
Uno de los temas más candentes en los círculos de desarrolladores web en 2021 es la accesibilidad de los sitios web en varios dispositivos distintos a las pantallas estándar de los ordenadores de sobremesa o portátiles. Aunque el tema no es nuevo, se ha adoptado un enfoque relativamente nuevo para abordar las oportunidades futuras.
Con los dispositivos móviles, las tabletas y otros aparatos similares ganando terreno más rápido de lo que la mayoría puede seguir, es necesario que las partes interesadas de las organizaciones resuelvan los problemas que incluyen las interacciones de los usuarios y la aceptación de sus sitios web en los últimos dispositivos pequeños. Ah, y no se olvide de otros dispositivos que adquieren pantallas habilitadas para Internet, como frigoríficos, lavadoras, electrodomésticos y otros aparatos de uso cotidiano.
A los usuarios que acceden a sus sitios web a través de sus dispositivos móviles u otras pantallas de visualización no les importa realmente el método que utilice, siempre que puedan navegar eficazmente por su sitio web en cualquier dispositivo que estén utilizando. Por esta razón, los dos métodos descritos en este artículo están diseñados para permitir a los desarrolladores web afrontar el reto, y aunque tanto el diseño responsivo (RWD) como el diseño adaptativo (AWD) resuelven el problema de la representación de los sitios web en el mobiliario de los dispositivos, existen sutiles diferencias entre ellos que trataré de explicar.
RWD (Responsive Web Design)
El término Responsive Web Design fue acuñado hace varios años por Ethan Marcotte y presentado por primera vez en su artículo A List Apart, «Responsive Web Design» y posteriormente en su libro A Book Apart – Responsive Web Design. A continuación se enumeran los puntos clave de RWD de Marcotte. En mi artículo sobre el tema, «Primeros pasos con el diseño web responsivo», describí cómo el diseño web responsivo comienza con la tarea principal de incorporar CSS3, la consulta multimedia, la regla @media y las cuadrículas fluidas que utilizan porcentajes para crear. Una base flexible. Estos puntos clave, junto con el uso de EM, imágenes flexibles, vídeo flexible y tipos fluidos, permiten que el sitio web responsivo adapte su diseño al dispositivo de visualización, al agente de usuario y al entorno.
La definición de un diseño web responsivo es que cambiará suavemente y responderá para adaptarse a cualquier tamaño de pantalla o dispositivo.
Aquí te dejamos un vídeo donde verás un poco más a fondo en qué consiste el diseño web responsive y como puedes implementarlo en tu web:
AWD (Adaptive Web Design)
El término Diseño Web Adaptativo fue acuñado por Aaron Gustafson, autor del libro del mismo título. En esencia, utiliza muchos de los componentes de la Mejora Progresiva (PE) para definir el conjunto de métodos de diseño que se centran en el usuario y no en el navegador. Al utilizar un conjunto predefinido de tamaños de diseño basado en el tamaño de la pantalla del dispositivo con CSS y JavaScript, el enfoque AWD se adapta al dispositivo detectado. En un artículo reciente, «Understanding Progressive Enhancement Techniques in Web Design», se describen las capas que componen el enfoque adaptativo.
Los tres niveles de mejora progresiva:
- Capa de contenido = marcado HTML semántico enriquecido
- Capa de presentación = CSS y estilo
- Capa de scripting del lado del cliente = comportamientos JavaScript o jQuery
En una entrevista de podcast, Aaron describe cómo se eligió el término; quería aclarar la ambigüedad entre su libro y el del Grupo Filament, «Designing with Progressive Enhancement«. Aaron continúa mencionando en el podcast:
«Así que intentamos pensar, ya sabes, qué significan exactamente todas estas cosas, y se trataba de crear experiencias ricas y adaptables que se ajustaran al dispositivo concreto con el que se trabajaba. Así que la forma en que veo la mejora progresiva es muy similar al diseño web adaptativo. Es esencialmente el mismo concepto. «
La definición condensada de un diseño adaptativo es que cambiará para ajustarse a un conjunto predeterminado de tamaños de pantalla y dispositivos.
Comparaciones y distinciones entre diseño web responsivo y el adaptativo
La mayor similitud entre los dos métodos es que ambos permiten ver los sitios web en dispositivos móviles y pantallas de diferentes tamaños, lo que ofrece a los visitantes una mejor experiencia de usuario móvil. La diferencia entre ambos métodos radica en la provisión de estructuras receptivas/adaptativas: RWD, que se basa en cuadrículas flexibles y fluidas, y AWD, que se basa en tamaños de pantalla predefinidos. Una distinción importante entre ambos es que el RWD puede requerir más código y estrategias de implementación con cuadrículas fluidas, CSS y bases flexibles, mientras que el AWD tiene un enfoque simplificado y por capas, que utiliza scripts para facilitar la adaptación a varios dispositivos y pantallas.
Algunos sostienen que los términos utilizados invitan a la confusión, en particular, responsive, y pueden no reflejar con exactitud lo que realmente sucede cuando un sitio web cambia su diseño en función del dispositivo móvil concreto que se utilice. Paul Gordon lo explica en su blog «Adaptive or Responsive Design».
Si necesitas ayuda con la versión adaptativa o responsive de tu página web, nuestra agencia web en Asturias puede ayudarte. Consúltanos sin compromiso.