Com os usuários da Web usando cada vez mais dispositivos móveis para navegar em sites da Web e aplicativos, Web designers e desenvolvedores precisam ter certeza de que suas criações olhar tão bom e funciona tão bem em dispositivos móveis como em computadores de mesa tradicionais. Proeminente designer de Luke Wroblewski defende criação de "Mobile First", ao invés de como um adendo ao projeto para desktops. Se você design para dispositivos móveis como alvo principal ou como um extra legal, você pode usar o poder do CSS para garantir que o mesmo conteúdo pode ser acessado em todas as plataformas de hardware, desde telefones celulares a telas de alta resolução wide-screen.
Esta abordagem é conhecida como "Web design responsivo". Algumas de suas estratégias incluem:
- Layout líquido ou fluido: Definição de todas as larguras de contêineres em termos de percentagem do navegador visor, de modo que eles se expandem e contraem como a janela do navegador muda de tamanho.
- Media queries: Invocando as folhas de estilo diferentes de acordo com as capacidades da tela que está sendo usado, como tamanho, resolução, formato e profundidade de cor.
- Imagens fluidas: Definir imagens para ocupar, no máximo, a largura máxima da tela.
Recursos
Overviews
- Responsive Web design, by Ethan Marcotte
- Beginner's guide to responsive Web design, by Rick Petit
- Responsive Web design: What it is and how to use it, by Kayla Knight
- Multi-device Web design: an evolution, by Luke Wroblewski
Techniques
- 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
Tools
- Responsive Design View in Firefox