Esta tradução está incompleta. Ajude atraduzir este artigo.
Como agradar todo mundo o tempo todo? Esta seção da documentação se aprofunda no tema de layouts para múltiplos navegadores (cross browser) e múltiplos dispositivos (cross device) para aplicativos Open Web, e fala de técnicas e ideias que cobrem a maioria das situações.
Criar um layout efetivo para sites e aplicativos modernos é desafiador. Por um lado seu trabalho está mais fácil: CSS tem hoje um suporte muito mais sólido e consistente para servir múltiplos navegadores e plataformas, então você não precisa mais recorrer a tantos hacks horríveis. Por outro lado, está mais difícil: há uma enorme quantidade de dispositivos capazes de acessar a web com variados navegadores, tamanhos de tela, resoluções, capacidade de processamento e contextos de uso (por exemplo, o dispositivo é portátil? Vai ter conexão de rede?).
E além disso tudo, agora temos plataformas como o Firefox OS, que permite a instalação de aplicativos open web.
- Introdução ao Design Responsivo
- Um aplicativo, múltiplas telas. Como fazer uma interface de usuário que funcione tão bem em um smartphone quanto em um desktop? Aprenda a criar designs e construir interfaces que mudam para se adequar à tela do usuário.
- As peças que formam o design responsivo
- Este guia discute as principais técnicas e tecnologias envolvidas na criação de aplicações responsivas, e traz também um exemplo completo.
- Design responsivo versus design adaptável
- Esses termos são frequentemente confundidos, então preparamos um guia para esclarecer as diferenças entre os dois.
- Mobile first
- Mobile first é a prática de se desenvolver sites de forma que o layout/configuração padrão seja voltado para dispositivos móveis. Layouts e recursos para navegadores de desktop são então adicionados como camadas além do padrão. Este guia traz algumas técnicas úteis no escopo do mobile first, como as media queries para mobile first.
- Flexible boxes (caixas flexíveis)
- O modelo de flexible boxes do CSS permite que você configure a interface de usuário do seu aplicativo para que o posicionamento e tamanho dos elementos sejam automaticamente ajustados de acordo com o tamanho e orientação do display.
Tools for app developers
Technology reference documentation
Getting help from the community
If you still aren't sure how to do what you're trying to get done, feel free to join the conversation!
- Consult the webapps forum:
- Ask your question on the Open Web Apps IRC channel: #openwebapps