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
- Responsive Web design, por Ethan Marcotte
- Beginner's guide to responsive Web design, por Rick Petit
- Responsive Web design: What it is and how to use it, por Kayla Knight
- Multi-device Web design: an evolution, por Luke Wroblewski
Técnicas
- CSS media queries reference page
- CSS media queries and using available space, by Chris Coyier
- Liquid layouts the easy way, by Russ Weakley
- Fluid images, by Ethan Marcotte
- Designing for touch screen, by Chris Kemm
- Responsive Web Design Techniques, Tools and Design Strategies, by Smashing Editorial Team
Herramientas
- Vista de diseño adaptable en Firefox