O GIF animado mostra o que acontece no Invidious quando reduzo a janela do navegador em alguns pixels.
O layout dos elementos na página muda completamente: o layout original de três colunas muda repentinamente para um layout de uma coluna, e a primeira coisa é o conteúdo daquela pequena coluna que estava localizada na borda esquerda e continha informações completamente sem importância.
Tenho certeza de que não sou o único que frequentemente me depara com isso. Pessoalmente, gosto quando as janelas do meu navegador são estreitas o suficiente, mas nos últimos dez anos, as páginas da web começaram a reagir a essa preferência como se eu quisesse uma versão móvel e funcionalmente simplificada da página. Há um grande problema aqui, e não apenas um.
Iluminação a gás espacial
Um dos conceitos fundamentais por trás do design do Macintosh, a primeira interface gráfica de usuário verdadeiramente centrada no cliente, é a ideia de organizar espacialmente as interações homem-máquina ao trabalhar com um computador. O usuário foi dispensado da necessidade de memorizar comandos de texto a fim de organizar os arquivos no disco, e deu a oportunidade de embaralhar os arquivos para que fosse visual e - aqui está, o insight - para lembrar sua posição, como se em espaço. O usuário pode se lembrar onde colocou o arquivo, e não é tão importante como o arquivo é chamado . É assim que nos lembramos onde colocamos a carteira, as chaves ou o documento importante.
Essa ideia de orientação espacial é fundamental para o design de qualquer interface de usuário e design da web em particular. Quando um usuário visita seu site repetidamente, ele gradualmente descobre como tudo funciona aqui. Quanto mais tempo você dedicar ao design de seu site, mais eficientemente os usuários poderão gerenciá-lo e mais eles gostarão de seu site. Você já se perguntou por que existem tantos escândalos de alto perfil na web relacionados ao redesenho? Aqui está sua resposta. Os usuários não gostam quando os esforços que colocam para dominar o site são riscados por capricho do designer, que o designer está simplesmente entediado com o site antigo.
Este é exatamente o problema que tenho com design responsivo. A maioria das implementações de design responsivo é essencialmente como redesenhar seu site sempre que o usuário redimensiona a janela. O exemplo mais flagrante desse tipo é quando uma barra de menu horizontal se transforma em vertical. Tudo o que o usuário conseguiu lembrar visualmente sobre a localização dos links no painel voa para o tubo! Achou que essa opção estava escondida aqui? Não, ela está aí!
Inconsistência entre sites
Mas mesmo que os usuários não gostem de design responsivo, não há como evitar isso. Muitos exemplos do chamado design responsivo são implementados usando consultas de mídia usando CSS - instruções essencialmente condicionais que dizem ao navegador para aplicar um conjunto de regras CSS quando certas condições são atendidas, por exemplo, se a largura da janela do navegador excede ou não exceder um número especificado de pixels ... O número exato neste caso é escolhido pelo web designer; conseqüentemente, dois web designers diferentes quase nunca escolhem a mesma largura.
Acho que todos concordarão que, em um PC desktop, preferimos visualizar a maioria das páginas da web em um layout de largura total. Existem exceções nas quais a versão reduzida da página é mais conveniente., mas são raros, se não isolados. Como regra, trabalhar com uma página da Web de largura total é muito mais agradável e fácil.
Para não ter que lidar com versões estreitas de páginas da web, o usuário deve ajustar a largura da janela do navegador por conta própria, garantindo que a página caiba na janela inteira. Mas, uma vez que dois web designers quase nunca especificam a mesma largura em suas consultas de mídia, é impossível para um usuário corresponder a uma largura de janela que é garantida para caber em uma versão completa de qualquer página da web, a menos que o usuário desista e esteja satisfeito modo de tela inteira ou uma janela excessivamente ampla. No entanto, é importante para o usuário não apenas ter acesso às versões completas das páginas da web, mas também manter muitas janelas no escopo de uma vez, e por isso a largura de uma janela individual deve ser limitada.
Parece que o usuário simplesmente não ajusta o tamanho da janela se ele chega em uma página da web que requer uma janela maior para ser visualizada. Afinal, era assim que o usuário tinha que agir antes do advento do design responsivo, quando era possível simplesmente alternar entre páginas da web com uma determinada largura fixa. Mas a realidade não é tão simples: em páginas não responsivas, é bastante claro se você precisa redimensionar a janela para caber na página inteira. E em uma página da Web responsiva, nada diz ao usuário: “Ei! A página inteira não caberá em uma janela como a sua agora. " Não há barra de rolagem ou recorte de conteúdo; na melhor das hipóteses (ou, suponho, pior) há um menu de hambúrguer ou alguma outra interface "móvel" estranha.
O que o usuário deve fazer?
Resta pensar que o usuário poderia resolver esse problema desativando o suporte para consultas de mídia no navegador. Se fosse assim tão simples! A raiz do problema é que é uma prática comum entre web designers atribuir um design de largura total a uma consulta de mídia e servir uma versão móvel por padrão . Ao desativar as consultas de mídia, obteremos o resultado oposto exato em tais páginas.
Seria mais racional forçar de alguma forma o navegador a dar a mesma largura definida pelo usuário para as folhas de estilo e scripts em todas as páginas da web. Isso é desejável, mesmo que apenas por motivos de privacidade.
A solução ideal é fornecer a capacidade de identificar uma consulta de mídia (se houver) que habilite a largura total do site e ativá-la, enquanto desativa todas as outras consultas de mídia relacionadas à seleção da largura da janela. Isso poderia ser feito como uma extensão do navegador usando JavaScript que analisa todas as consultas de mídia na folha de estilo, removendo-as seletivamente conforme necessário.
O que um web designer deve fazer?
Deixei esta seção para o final, pois é a mais importante. Tudo o que foi dito acima nos leva a uma conclusão simples: os web designers precisam pensar muito sobre como implementar o design responsivo .
É verdade que, em um nível superior, deve-se fazer a pergunta: qual é o significado geral de design responsivo. Definitivamente, este design é muito útil: os usuários modernos acessam a Internet de uma ampla variedade de dispositivos com diferentes larguras de tela, e esse problema é resolvido com a ajuda de um design responsivo. Mas talvez o problema com o design responsivo seja a generalização excessiva dessa solução. Ele é projetado para suportar todos os tamanhos de tela imagináveis, mas as telas são realmente tão diversas? Em vez disso, eles são, ao contrário, padronizados e subdivididos em poucas categorias facilmente identificáveis. Como estes:
- PC desktop / laptop
- O tablet
- Smartphone
Não seria muito mais conveniente para o usuário se o design do site fosse feito separadamente para cada um desses tamanhos de tela? Em seguida, o usuário pode passar um tempo aprendendo a interface do site, uma vez que pareceria consistente em todos os dispositivos do mesmo tipo.
Não acredito que estou dizendo isso, mas talvez seja melhor voltar a detectar o agente do usuário, de uma forma ou de outra:
let mobile = navigator.userAgent.match(/Mobi/); let ipad = navigator.userAgent.match(/iPad/); let android = navigator.userAgent.match(/Android/); if (mobile && !ipad) this is a phone else if (ipad || android) this is a tablet
O código acima pode estar incompleto, mas acho que cobre muitas coisas básicas. Apenas certifique-se de usar como padrão a versão do site para PC, já que nem todos os navegadores de PC suportam JavaScript de maneira uniforme, mas todos os smartphones e tablets sim.
Nossos servidores podem ser usados para desenvolvimento e hospedagem de sites.
Cadastre-se pelo link acima ou clicando no banner e ganhe 10% de desconto no primeiro mês de aluguel de um servidor de qualquer configuração!
