Consultas de mídia baseadas em design
No início, as consultas de mídia específicas do dispositivo que usamos em nossos sites nos serviram muito bem porque precisávamos de uma solução de design responsivo rápido e sujo para acomodar o iPhone e smartphones de tamanho semelhante. Mas com a quantidade de dispositivos em constante expansão sendo lançada no mercado, é hora de repensar os pontos de interrupção comuns de design responsivo que estamos empregando em nossos projetos. Por quê?
Porque esta abordagem não é sustentável. Também temos que mudar os motivos subjacentes e os fatores motivadores por trás do motivo pelo qual estamos definindo nossos pontos de interrupção de design responsivo nesses pontos específicos. Discutirei a ideia de consultas de mídia baseadas em design (em oposição à maneira mais comum de basear nossas consultas de mídia em dispositivos móveis comuns).
Essa abordagem ao design responsivo da Web pode nos ajudar a tornar nossos sites o mais à prova de futuro e agnósticos de dispositivo quanto possível.
Por que nossas consultas de mídia precisam mudar
As consultas de mídia que estamos usando normalmente são baseadas nas dimensões da tela de dispositivos móveis atualmente populares. No início, quando a comunidade de web design começou a levar a sério o web design responsivo , os dispositivos móveis populares eram os smartphones iPhone e Android.
Então, para começar, as consultas de mídia para dispositivos móveis pareciam algo conceitualmente semelhante a isso:
/* iPhone e outros smartphones (retrato) */ @media screen and (max-device-width: 320px) { } /* iPhone e outros smartphones (landscape) */ @media screen and (max-device-width: 480px) { }
À medida que a tecnologia avançava a variedade de tamanhos e resoluções de tela se ampliou. Por isso, decidimos estender nossas consultas de mídia para esses novos dispositivos móveis. Para acomodar a nova safra de gadgets, as consultas de mídia agora seriam parecidas com isto:
/* iPhone e outros smartphones (retrato) */ @media screen and (max-device-width: 320px) { } /* iPhone e outros smartphones (landscape) */ @media screen and (max-device-width: 480px) { } /* iPad e outros tablets (retrato) */ @media screen and (max-device-width: 768px) { } /* iPad e outros tablets (landscape) */ @media screen and (max-device-width: 1024px) { } /* iPhone 5 (retrato) */ @media screen and (max-device-width: 568px) e (orientation: portrait) { } /* iPhone 5 (landscape) */ @media screen and (max- device-width: 568px) e (orientação: paisagem) { }
O Samsung Galaxy também é muito popular, então podemos adicioná-lo à nossa crescente coleção de consultas de mídia:
/* Samsung Galaxy (retrato) */ @media screen and (max-width: 385px) { } /* Samsung Galaxy (landscape) */ @media screen and (max-width: 690px) { } /* iPhone e outros smartphones (retrato) */ @media screen and (max-device-width: 320px) { } /* iPhone e outros smartphones (landscape) */ @media screen and (max-device-width: 480px) { } /* iPad e outros tablets (retrato) */ @media screen and (max-device-width: 768px) { } /* iPad e outros tablets (landscape) */ @media screen and (max-device-width: 1024px) { } /* iPhone 5 (retrato) */ @media screen and (max-device-width: 568px) e (orientation: portrait) { } /* iPhone 5 (landscape) */@media screen e (max-device-width: 568px) e (orientation: landscape) { }
E o Kindle?
Ou o iPad mini? Não se preocupe, há uma lista de consultas de mídia para Kindle (e outros dispositivos) e há uma lista de consultas de mídia específicas de produtos Apple para o iPad mini, iPhone 2G, etc. para nos ajudar a ampliar nossa coleção de consultas de mídia.
A razão para mostrar tudo isso é para ilustrar como essa abordagem de web design responsivo não funciona. Essa maneira de projetar sites contradiz um dos princípios-chave do design da web que precisamos sempre trabalhar: Não deve haver uma distinção forte entre Web Desktop e Web Móvel. E, idealmente, deve haver apenas uma Web universal. Ao definir nossas consultas de mídia com base nas dimensões de alguns dispositivos específicos, estamos criando efetivamente não apenas uma Web móvel separada , mas também uma Web para iPhone , uma Web para Android , uma Web para Blackberrye assim por diante. Essa abordagem de web design responsivo pode nos levar a um lugar onde estamos criando involuntariamente designs com base em decisões tomadas para nós pelas empresas que produzem esses dispositivos móveis, um cenário assustadoramente semelhante à Guerra dos Navegadores.
Para cada design responsivo que criamos, em vez de pedir uma lista de tamanhos de tela do Android ou quais são os pontos de interrupção populares de design responsivo no momento , deveríamos estar fazendo outra pergunta: quais devem ser os pontos de interrupção para esse design específico em que estou trabalhando? Para que nossos designs da Web sejam à prova de futuro, e talvez, mais importante, se a Web permanecer universal, nossas consultas de mídia precisam ser baseadas em nosso design da Web, não nos dispositivos móveis atualmente predominantes.
