Diseño web adaptable

Con los usuarios de la web usando cada vez más dispositivos móviles para navegar sitios web y aplicaciones, los diseñadores y desarrolladores web necesitan asegurarse que sus creaciones se vean y funcionen bien tanto en dispositivos móviles como en equipos tradicionales de escritorio. El prominente diseñador Luke Wroblewski recomienda diseñar "primero para móviles", en lugar de hacerlo como idea tardía al diseño para escritorio. Ya sea que el diseño para móviles sea el objetivo primario o un bonito extra, puede usar el poder de CSS para asegurarse que el mismo contenido puede accederse a través de todas las plataformas de hardware, desde teléfonos móviles a pantallas panorámicas de alta resolución.

Este enfoque es conocido como "diseño web adaptable". Algunas de sus estrategias incluyen:

  • Diseño líquido o fluido: Definir todos los anchos de los contenedores en términos de porcentajes de la vista del navegador, así pueden expandirse y contraerse cuando la ventana del navegador cambie de tamaño.
  • Consultas de medios: Invocar hojas de estilo diferente basándose en las capacidades de la pantalla usada, como tamaño, resolución, relación de aspecto y profundidad de color.
  • Imágenes fluidas: Hacer que las imágenes ocupen mayormente el máximo ancho de la pantalla.

Recursos

Overviews

Técnicas

Herramientas

Ejemplos

Etiquetas y colaboradores del documento

 Colaboradores en esta página: StripTM, maedca, MPoli
 Última actualización por: StripTM,