Hace no tanto tiempo, en los inicios de la Word Wide Web la única forma de acceder a un Sitio Web era a través de una computadora de escritorio, con monitores que hasta hoy aumentan de resolución y tamaño año tras año.

Ahora, podemos visitar toda clase de Sitios Web desde laptops, tabletas y celulares (smartphones), que a la inversa, han reducido los monitores a los cuales se debe adaptar nuestro diseño y contenido, lo que es llamado en inglés responsive design o responsive layout.

En un Sitio Web adaptable a dispositivos, la Hoja de Estilo en Cascada (CSS) que controla la apariencia del Sitio Web indica distintas medidas y atributos según el tamaño del ancho del navegador.

Interpretación de las páginas.

Para una mejor experiencia del usuario el diseño debe ser flexible al tamaño del monitor:

• A mayor tamaño: más contenido e imágenes de mayor tamaño.
• A menor tamaño: el contenido e imágenes reducen y se ajustan.

Recomendaciones para diseñar un Sitio Web adaptable a dispositivos móviles.

Para una buena experiencia de usuario (UX) y usabilidad, las consideraciones generales del comportamiento del Sitio Web (según la W3C) son:

• Consistencia en la dirección y la página Web:
  El visitante debe poder acceder con la misma dirección URI a exactamente la misma página Web en su computadora de escritorio y en cualquier dispositivo móvil aunque su contenido varíe ligeramente.
• Explotar las capacidades del dispositivo:
  Se debe mostrar el mismo contenido a través de todos los dispositivos, a la vez que se aprovechen las capacidades de dispositivos que pueden proveer mejoras sobre otros.
• Evitar implementaciones deficientes:
  Hay navegadores que no interpretarán el contenido de acuerdo a lo planificado y hay deficiencias en la implementación. Si un dispositivo es conocido por tener limitaciones particulares, el diseñador y/o desarrollador debe ajustarse a las Mejores Prácticas para evitar en la medida de lo posible, restringir su contenido solo a ciertos dispositivos.
• Pruebas:
  Al realizarse pruebas, se debe procurar utilizar el dispositivo real en la versión que se estima utilizará el mercado objetivo.
  De utilizarse un emulador, es preferible utilizar el de la empresa que lo manufactura.

Otras consideraciones son:

Navegación y enlaces:

• Permitir el acceso desde direcciones cortas.
• Barra de navegación superior de una sola línea.
• Estructura balanceada evitando el exceso de hiperenlaces.
• Navegación consistente agrupada y proveer un enlace hacia arriba (el principio de la página).
• Permitir el uso de las flechas del teclado.
• Identificación clara del destino de un hiperenlace.
• Evitar el uso de Image Maps a menos que se conozca que se soporte efectivamente por el dispositivo.
• Actualización, redireccion y apertura de ventanas nuevas:
  • No causar que se abran pop-ups, ventanas nuevas, ni el cambio de ventana sin informar previamente al usuario.
  • No auto-actualizar una ventana, sin proveer al usuario de una forma de detenerla.
  • No usar re-dirección automática a través del HTML, de ser necesaria implementarla mendiante  HTTP 3xx (como la redirección 301 o 302).
• Mantener el número de enlaces a recursos (Como CSS, imágenes, etc.) externos al mínimo.

Diseño de página y contenido:

• Evitar las barras de desplazamiento horizontales.
• Optimizar el peso de las imágenes y otros recursos.

Definiciones en la página:

• Evitar el uso de iFrames.
• Usar el elemento Table solo para tablas.
• Evitar el uso de texto imágenes para sustituir texto real (que puede ser seleccionado y copiado).

Datos introducidos por el usuario (formularios):

•  Minimizar el trabajo del usuario, especialmente la escritura mediante el teclado.
• Habilitar la navegación en el formulario mediante las flechas y números del teclado.