Por meio de um exemplo do mundo real, vamos ver como a configuração de consultas de mídia com base em dispositivos específicos pode falhar. Para ter um web design responsivo, o site da minha empresa, Compass Design, foi originalmente construído usando três media queries:
/* iPad (retrato) */ @media screen and (max-width: 760px) {
} /* Smartphones (paisagem) */ @media screen e (max-width: 480px) { } /* Smartphones (portrait) */ @media screen and (max-width: 320px) { } Essas media queries foram definidas algumas anos atrás, quando a grande maioria das pessoas que usavam dispositivos móveis usavam um iPhone 4 ou similar (320x480px) ou um iPad (760x1024px).
E, nesses dispositivos, o web design funcionou bem. O layout da área de trabalho é bastante padrão, um menu de navegação horizontal com uma barra lateral à direita do conteúdo. O layout projetado para tablets é mais incomum. O layout do menu de navegação muda para caber todo o seu conteúdo no espaço disponível para tablets na orientação retrato. E o layout destinado a smartphones também é diferente, desta vez com um link para o menu de navegação que é movido responsivamente para a parte inferior da página.
“Meu design responsivo parou de funcionar!”
Desde o momento em que o site foi projetado, a gama de dispositivos usados para acessá-lo cresceu muito rapidamente.
Por exemplo:
- O iPhone 5 tem 568px de largura no modo paisagem
- Muitos smartphones Android têm telas grandes (como o Samsung Galaxy, que tem 380x685px)
- Tablets menores foram lançados desde a época em que meu site foi projetado originalmente, tablets com tela de 7” e não de 10” (embora alguns deles, como o iPad mini, ainda funcionem como se tivessem as mesmas dimensões de pixel que seus contrapartes maiores)
Vamos dar uma olhada no site do iPhone 5. Como o iPhone 5 é mais largo que 480px no modo paisagem, o smartphone está usando o layout projetado para tablets, que renderiza um menu de navegação quebrado.
Isso demonstra o ponto que estou tentando fazer: Usar dispositivos como guia para a capacidade de resposta do nosso web design não funciona. Especialmente não funciona se nos preocupamos em tornar nosso trabalho à prova de futuro. À medida que o número de dispositivos continua a crescer, será impossível prever em que nossos projetos serão vistos.
E não só é impossível prever quais novos dispositivos entrarão no mercado, como deveria ser desnecessário fazê-lo de qualquer maneira quando se trata de nossos designs da web. O que precisamos fazer é identificar os pontos em que nosso design da web para de funcionar da maneira que queremos e, em seguida, definir nossos pontos de interrupção responsivos lá.