Diseño web responsivo

Revista Digital Universitaria

1 de enero 2013 • Volumen 14 Número 1 • ISSN: 1067-6079

DISEÑO WEB ADAPTATIVO O
RESPONSIVO

Esther Labrada Martínez y Cristina Salgado Ceballos

© Coordinación de Acervos Digitales. Dirección General de Cómputo y de
Tecnologías de Información y Comunicación -UNAM
Se autoriza la reproducción total o parcial de este artículo, siempre y cuando se cite lafuente completa y su dirección electrónica.

“Diseño Web Adaptativo o Responsivo ”
http://www.revista.unam.mx/vol.14/num1/art07/index.html

Diseño Web Adaptativo o Responsivo
Resumen
En este documento se hace una breve descripción de los antecedentes, características y beneficios
de la técnica del Diseño Web Adaptativo o Responsivo (Responsive Web Design1, en inglés). Su
importancia sedebe a que es un método de producción de sitios web, orientado a la adaptación
de los contenidos en las diferentes áreas de despliegue de los navegadores y a las formas de
interacción en dispositivos portátiles. Identifica algunas propiedades del medio en que se despliega
la información: tamaño, orientación, funcionalidad y características de interacción para determinar
el acomodo inmediato yautomatizado de los elementos; aprovechando las características
esenciales del dispositivo. Entre sus aspectos relevantes, se menciona la programación y el
diseño único de los contenidos, así como el apego a los principios de usabilidad en el sistema.

Palabras clave: Diseño Web Adaptativo o Responsivo; usabilidad; dispositivos; proceso de
modelado; consulta de medios; cuadrícula flexible.Responsive Web Design
Abstract
This paper provides a brief overview of the history, features and benefits of the technique
of Adaptive Web Design. Its importance is that it is a method of production sites, aimed at
adapting the content and forms of interaction on a mobile device. Identify some properties of
the medium in which information is displayed: screen size, orientation, functionalityand
features of interaction to determine the immediate accommodation and automated drawing
elements essential features of the device. Among relevant aspects mentioned programming and
the unique design of the content and attachment to the principles of usability in the system.

Keywords: Adaptive or Responsive Web Design; usability; devices; process modeling; media
queries; fluid grid.

1 Eltérmino responsive, en inglés, se refiere a aquello que es capaz de reaccionar frente a lo que le rodea, proporcionando una respuesta ajustada
a la situación. En español, el término se traduce como adaptativo, que se define como perteneciente o relativo a la adaptación o a la capacidad de
adaptación.

2

© Coordinación de Acervos Digitales. Dirección General de Cómputo y de
Tecnologías deInformación y Comunicación - UNAM
Se autoriza la reproducción total o parcial de este artículo, siempre y cuando se cite la fuente completa y su dirección electrónica.

Revista Digital Universitaria

1 de noviembre 2012 • Volumen 13 Número 1 • ISSN: 1067-60710

Introducción
En las últimas décadas, el crecimiento y expansión de sistemas móviles y tabletas ha impactado en
diversas áreas.Tal es el caso de la producción de sitios en Internet que busca métodos de innovación
con soluciones efectivas para presentar los contenidos en dispositivos portátiles, considerando su
diversificación y sus distintas formas de interacción.

Siendo la web un proveedor de información compleja y extensa, la idea de innovar para lo
nuevo se ha orientado a la creación del Diseño Web Adaptativo comouna solución a la presentación
del sitio en cualquier medio portátil.

Las posibilidades y beneficios de este método han sido aceptadas y adoptadas por una
gran mayoría de desarrolladores de páginas. Trabajar con proporciones en lugar de pixeles, en el
posicionamiento de los componentes del sitio, marca un cambio sustantivo para su despliegue en
áreas cambiantes o pantallas diversas....