Definición de Diseño Web Adaptable (Responsive)

Alsina Gonzàlez
Periodista esp. e investigador

Hace años, cuando la tecnología era la que era, uno solamente debía preocuparse que las cosas visuales que hacía (imágenes, juegos, interfaces de aplicaciones,…) se vieran bien en una pantalla que podía situarse alrededor de las 14 pulgadas de un monitor de computadora. Pero la evolución ha sido imparable, y actualmente disponemos de una multitud de dispositivos y formatos.

Esto ha conllevado que una interfaz de usuario o cualquier otro contenido tenga que lidiar no ya con diferentes tamaños de imagen, si no con dispositivos que se utilizan de forma distinta, y relaciones de aspecto que difieren notablemente.

La web, un avance que surgió en la década de los 90 y que, desde entonces, se ha vuelto imprescindible, ha sufrido también estos cambios en el escenario de plataformas desde la cual puede ser utilizada, y las entidades que gestionan los estándares de la web han tenido que elegir soluciones ingeniosas para facilitar la vida a los desarrolladores de interfaces web.

Una página web adaptable (también llamada responsive, adopción del vocablo inglés original) es aquella cuya interfaz se redimensiona de forma automática y sus elementos gráficos se recolocan para facilitar su visualización en cualquier tamaño de pantalla y relación de aspecto.

Pensemos un momento en la diversidad de formatos de pantalla que van desde un smartphone con pantalla de 5” y relación 18:9 que se lee en vertical hasta un televisor 16:9 de 40”, dejando entre medio una computadora o un tablet.

Hasta que se adoptaron medidas para que la interfaz gráfica de las páginas web se adaptara de forma automática a la pantalla en la cual se estaba visualizando, la “solución” consistía en prever todos los posibles formatos, y servir páginas distintas según conviniera. El problema eran aquellos formatos no previstos y los que deparaba de forma natural la evolución tecnológica.

Las herramientas para conseguir un diseño responsive, que se adaptara al formato de pantalla en el cual se estaba viendo la página web independientemente de cual fuera este formato y tamaño de pantalla, fueron fijadas por el W3C (World Wide Web Consortium).

Y la introducción de dicha tecnología fue posible gracias a la separación del contenido de las páginas de lo que era la presentación de dichos contenidos y el look&feel general de la página mediante los archivos de definición de estilo CSS.

Estos permiten modificar el aspecto de todo un sitio web (entendido este como conjunto de páginas) sin tener que tocar el código fuente de todos los archivos HTML, ya que se diferencia lo que son las definiciones del estilo y la presentación (contenidas en el archivo CSS) de los contenidos (que se encuentran en los archivos HTML).

Los elementos del diseño responsive han ido siendo discutidos e introducidos en los estándares de la web por el W3C desde finales de la primera década del siglo XXI.

Es a partir del lanzamiento del primer iPhone, en 2006, en que se desata la carrera para ajustar los sitios web de forma que puedan verse perfectamente tanto en navegadores de sobremesa y grandes pantallas, como en dispositivos móviles.

Fotos Fotolia: Alexey Shkitenkov / Bobb Klissourski

 
 
 
 
Por: Alsina Gonzàlez. Estudios en ingeniería informática en la Universitat de Girona, experiencia en numerosos medios tradicionales y digitales de tecnología, e investigador en temas de historia sobre el eje de la Segunda Guerra Mundial.

Trabajo publicado en: Nov., 2018.
Datos para citar en modelo APA: Gonzàlez, G. A. (noviembre, 2018). Definición de Diseño Web Adaptable (Responsive). Significado.com. Desde https://significado.com/diseno-web-adaptable-responsive/
 

Escriba un comentario

Contribuya con su comentario para sumar valor, corregir o debatir el tema.


Privacidad: a) sus datos no se compartirán con nadie; b) su email no será publicado; c) para evitar malos usos, todos los mensajes son moderados.
 
Índice
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z