Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Consultas de Elemento: o Futuro do Web Design Responsivo

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Consultas de mídia (media queries) são parte vital do web design moderno, mas nem sempre são perfeitas. Nesse artigo, veremos a ideia das "consultas de elemento" (element queries), cuja muitos dizem ser o futuro do web design responsivo.

No Começo

O artigo de Ethan sobre Web Design Responsivo mudou a forma como criamos sites, para sempre. O artigo inspirou e foi adotado rapidamente por vários designers e desenvolvedores web. Abordagens como "Primeiro Mobile", "Primeiro Desktop" e "Device Agnostic" surgiram, padrões de design foram criados; novos padrões, como o elemento <picture>, introduzidos; e, agora, temos incontáveis framewokrs que facilitam o desenvolvimento responsivo de um site.

Não construímos sites para resolução, navegador ou aparelho específico. Ao invés disso, construímos de forma que sejam agradáveis em qualquer dispositivo e resolução. Fazemos através das consultas de mídia–e do elemento meta viewport.

Consultas de Mídia

Consultas de mídia são projetadas para permitir modelar regras de estilo para um ambiente específico. Um dos usos mais comuns delas é alterar o estilo em um determinado alcance da largura da tela. O código abaixo, por exemplo, esconde a barra lateral se o site for acessado numa tela de até 720px de largura.

Consultas de mídia evoluíram junto aos aparelhos e ganharam diversas funcionalidades, como orientação e resolução. O exemplo abaixo mostra o uso de uma dessas funcionalidades para servir uma imagem maior em telas de alta-resolução.

Consultas de mídia tornaram-se um componente de coesão ao criar experiências responsivas. Aprenda tudo isso lendo artigos, tutoriais e dicas sobre como lidar com elas em nossos tutoriais anterioes no Tuts+, bem como por toda a internet.

Porém...

Consultas de mídia não são respota para todas as situações do web design responsivo, na verdade, não foi pensada para isso.

Hoje, há uma gama muito grande de aparelhos no mercado, com vários tamanhos e atributos, diminuindo a distância entre "mobile" e "desktop" (estou de olho em vocês, "notebooks híbridos"). Por isso, manter a estética de um website, uma ótima experiência de usuário e performance, nunca foi tão difícil.

No Google IO 2015, Google permitiu que desenvolvedores checassem seus sites em mais de 100 aparelhos diferentes.

E ao adicionar coisas como propagandas, tabelas e conteúdo legado tudo junto, a situação fica muito pior. Logo você se deparará com o lado "não tão bom" das consultas de mídia.

Consultas de Mídia: O "Não tão Bom"

Considere o exemplo a seguir. Temos um componente UI que mostra o perfil de um membro da equipe. Queremos usar esse mesmo componente em vários outros lugares do nosso site. Esse exemplo mostra como nossa UI se apresenta em 780px.

Na página "perfil do usuário", colocamos o avatar na esquerda e o nome de usuário e a biografia à direta.

Perfil do usuário na página "usuário".

Na página "equipe" do site, contudo, o layout muda: o avatar agora está no topo e o usuário e a biografia vem logo abaixo. O tamanho da fonte também é um pouco menor.

Perfil do usuário na página "equipe".

Essa situação pode ser resolvida com consultas de mídia. Podemos, por exemplo, escrever o CSS dessa forma:

É ajustável, desde que adicionemos classes identificatórias: .user-profile e .user-profile-card.

Contudo, também impede que nossa UI seja um componente reutilizável; uma UI que possa ser usada em qualquer lugar do site, adaptando-se aos arredores.

Nesse exemplo, queremos que o layout do nosso componente se adapte quando envolto por um container pequeno, ao invés de se apertar pela largura do navegador. Assim, ao invés de depender da largura do navegador para alterar o layout, por que não o fazer a nível de elemento?

Consultas de Elemento (Container)

A ideia por trás das consultas de elementos (element queries) surgiu no começo de 2012, alguns anos depois que o Web Design Responsivo tornou-se a principal metodologia. Infelizmente, não houve razões convincentes para torná-las padrão da web naquele momento–o mundo ainda estava se acostumando a ser bonitinho de novo.

Comunidades web começaram suas próprias iniciativas. RICG (Responsive Issue Community Group), o grupo que iniciou o elemento <picture>, adicionou as consultas de elementos à lista de problemas deles, enquanto outros desenvolveram uma biblioteca JavaScript, a EQVSS, para emular a funcionalidade.

Consulta de elementos assemelham-se às consultas de mídia mas observam o tamanho dos elementos em relação à largura do navegador. Isso permite construir sistemas UI modulares e com código DRY. Usando o exemplo, poderíamos reescrever os estilos do nosso componente com EQCSS, dessa forma:

Aqui, não nos importamos com a largura do navegador. Como podemos ver, enquanto a UI for 480px ou mais larga, mostraremos .avatar e .bio um do lado do outro. Quando a UI fica menor que 480px, .avatar e .bio empilham-se e o conteúdo se alinha centralmente.

Resumindo

Deixando claro: de forma alguma usar as consultas de mídia é errado! Consultas de mídia são maravilhosas e percebemos isso em vários dos sites construídos hoje. Consultas de mídia e de elementos podem co-existir. Contudo, há inúmeros cenários que usar consultas de elementos faria mais sentido que as de mídia.

Infelizmente, consultas de elemento ainda tem um longo caminho antes de ser um padrão web. Nossa esperança reside nas boas pessoas do RICG.

Enquanto esperamos, podemos explorar o potencial das consultas de elementos através da biblioteca JavaScript EQCSS. E é isso que faremos no próximo tutorial. Fique de olho!

Leitura Complementar

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.