El diseño web adaptativo (AWD) promueve la creación de múltiples versiones de una página web para que se adapte mejor al dispositivo del usuario, en contraposición a una única página estática que se carga (y se ve) igual en todos los dispositivos o a una única página que reordena y redimensiona el contenido en función del dispositivo/tamaño de pantalla/navegador del usuario.
Esto describe más a menudo el uso de una versión móvil y otra de escritorio de una página (o, en la mayoría de los casos, de todo el sitio), cualquiera de las cuales se recupera en función del agente de usuario definido en la petición HTTP GET, lo que se conoce como servicio dinámico. El diseño web adaptativo fue una de las primeras estrategias para optimizar un sitio para la legibilidad móvil, la práctica más común implicaba el uso de un sitio web completamente separado para móvil y escritorio, con los dispositivos móviles a menudo redirigidos a la versión móvil del sitio servido en un subdominio (a menudo el subdominio de tercer nivel, denotado “m”; por ejemplo, http://m.website.com/; y/o parámetros de URL como &app=m&persist_app=1 utilizados en YouTube). En la actualidad, el uso de dos sitios estáticos separados para la visualización en móviles y en ordenadores de sobremesa se está eliminando en gran medida, utilizándose en su lugar scripts del lado del servidor para servir páginas generadas dinámicamente o para decidir dinámicamente qué versión de una página estática se va a servir, aunque todavía puede observarse con frecuencia el uso de sitios independientes para móviles y para ordenadores de sobremesa. Aunque muchos sitios web emplean técnicas de diseño web adaptable o responsivo, ambas no se excluyen mutuamente, y las mejores prácticas para lograr el contenido más universalmente legible emplean una combinación de las dos técnicas para soportar un espectro completo de hardware y software[2].
Hoja de ruta de las aplicaciones web en el móvil >Adaptación a los dispositivosDiciembre 2018Los dispositivos móviles no solo difieren mucho de los ordenadores tradicionales, sino que también tienen muchas variaciones entre ellos, en cuanto al tamaño de la pantalla, la resolución, el tipo de teclado, las capacidades de grabación de medios, etc. La interfaz de usuario debe adaptarse al dispositivo del usuario para ofrecer una buena experiencia de uso y, dada la heterogeneidad de los dispositivos disponibles en el mercado, la adaptación estática, en la que se mantiene por separado un número restringido de interfaces de usuario que coinciden con las principales clases de dispositivos, no es una opción viable. En su lugar, los desarrolladores web deben crear diseños responsivos, en los que la interfaz de usuario se ajusta automáticamente al dispositivo del usuario.
Las unidades CSS relativas a la ventana gráfica vw, vh, vmin y vmax representan un porcentaje de las dimensiones de la ventana gráfica actual y permiten a los desarrolladores diseñar diseños que se adaptan automáticamente a los cambios en las dimensiones de la ventana gráfica.
El Responsive Images Community Group (RICG) desarrolló una extensión de HTML, conocida como elemento de imagen, que permite a los autores definir qué imagen cargar en función de las capacidades del dispositivo y/o de otras características de los medios.
Son muchos los factores que intervienen en el diseño de una aplicación o un sitio web: la experiencia, la interfaz, la paleta de colores… lo que sea. Pero, ¿te has preguntado alguna vez la intención que hay detrás del diseño? Para nuestra asistente creativa y de diseño, Lindsay Silverman, la capacidad es algo en lo que ha pensado a menudo. Al tener una hermana con necesidades especiales, ha estado constantemente buscando opciones de adaptación en el mundo del diseño. Sentía que faltaba algo y, de repente, un día, hizo clic: Siempre me he inspirado en mi hermana y me ha fascinado su capacidad para adaptarse a una aplicación en el iPad o el iTouch más rápidamente que cualquier otra cosa. Al tener problemas de destreza, siempre nos ha resultado difícil a mi familia y a mí encontrar ropa que pueda ponerse ella misma. Así que pensé, ¿por qué no combinar las dos cosas?” Y así nació Adaptiv. Adaptiv (¿entiendes el juego de palabras?) es una aplicación móvil que ofrece opciones de moda para personas con discapacidad. Incluye una gran variedad de categorías, desde ropa casual hasta natación o accesorios y ropa médica. Puedes buscar marcas dentro de la aplicación, y ésta está diseñada pensando en la capacidad.
Uno de los temas más candentes en los círculos de desarrolladores web este año es la accesibilidad de los sitios web en varios dispositivos distintos de las pantallas estándar de los ordenadores de sobremesa o portátiles. Aunque el tema no es nuevo, ha adquirido un enfoque relativamente nuevo con respecto a cómo abordar las oportunidades que se presentan.
Dado que los dispositivos móviles, las tabletas y otros aparatos similares están ganando terreno más rápido de lo que la mayoría puede seguir, a las partes interesadas de las organizaciones les corresponde abordar las cuestiones relativas a las interacciones de los usuarios y la aceptación de sus sitios web en los últimos artilugios diminutos. Ah, y no hay que olvidar otros dispositivos que adquieren pantallas habilitadas para la web, como frigoríficos, lavadoras y otros electrodomésticos de uso cotidiano.
A los usuarios que acceden a sus sitios web a través de sus dispositivos móviles u otras pantallas les da igual el método que utilice, siempre y cuando puedan navegar eficazmente por su sitio web en el dispositivo que estén utilizando. Por esta razón, los dos métodos descritos en este artículo han sido concebidos para que los desarrolladores web afronten el reto, y aunque los métodos de diseño responsivo (RWD) y adaptativo (AWD) abordan el problema de la representación de los sitios web en los dispositivos móviles, existen sutiles diferencias entre ellos que intentaré explicar.