Introdução ao web design responsivo: pseudoelementos, consultas de mídia e muito mais

Hoje em dia, seu site será visitado por uma grande variedade de dispositivos: desktops com monitores grandes, laptops de médio porte, tablets, smartphones e muito mais.

Para obter uma experiência de usuário ideal como engenheiro de front-end, seu site deve ajustar seu layout em resposta a esses dispositivos variados (ou seja, às suas resoluções e dimensões de tela variadas). O processo de responder à forma do dispositivo do usuário é chamado (você adivinhou) design responsivo da web (RWD).

Por que vale a pena estudar exemplos de web design responsivo e mudar seu foco para RWD? Alguns web designers, por exemplo, fazem do trabalho de sua vida garantir uma experiência de usuário estável em todos os navegadores, muitas vezes passando dias a fio resolvendo pequenos problemas com o Internet Explorer.

Esta é uma abordagem tola.

Mashable chamou 2013 de ano do web design responsivo. Por quê? Mais de 30% de seu tráfego vem de dispositivos móveis. Eles projetam que esse número pode chegar a 50% até o final do ano. Em toda a web em geral, 17,4% do tráfego da web veio de smartphones em 2013. Ao mesmo tempo, o uso do Internet Explorer, por exemplo, representa apenas 12% de todo o tráfego de navegadores , uma queda de cerca de 4% em relação ao mesmo período do ano passado (de acordo com para W3Schools). Se você está otimizando para um navegador específico, em vez da população global de smartphones, está perdendo a floresta para as árvores. E, em alguns casos, isso pode significar a diferença entre sucesso e fracasso – o design responsivo tem implicações nas taxas de conversão, SEO, taxas de rejeição e muito mais.

A abordagem de Web Design Responsivo

O que é comumente encoberto sobre o RWD é que não se trata apenas de ajustar a aparência de suas páginas da web; em vez disso, o foco deve ser adaptar logicamente seu site para uso em diferentes dispositivos. Por exemplo: usar o mouse não oferece a mesma experiência do usuário que, digamos, a tela sensível ao toque. Você não concorda? Seus layouts responsivos para dispositivos móveis e desktops devem refletir essas diferenças.

Ao mesmo tempo, você não quer reescrever completamente seu site para cada uma das dezenas de diferentes tamanhos de tela em que ele pode ser visualizado - essa abordagem é simplesmente inviável. Em vez disso, a solução é implementar elementos de design responsivos flexíveis que usam o mesmo código HTML para se ajustar ao tamanho da tela do usuário.

Do ponto de vista técnico, a solução está neste tutorial de design responsivo: usando consultas de mídia CSS, pseudo-elementos, layouts de grade de conjunto flexíveis e outras ferramentas para ajustar dinamicamente a uma determinada resolução.

Consultas de mídia em design responsivo

Os tipos de mídia apareceram pela primeira vez em HTML4 e CSS2.1, o que permitiu a colocação de CSS separado para tela e impressão. Desta forma, foi possível definir estilos separados para a exibição do computador de uma página em relação à sua impressão.

 <link rel="stylesheet" type="text/css" href="screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="print.css" media="print">

ou

 @media screen { * { background: silver } }

Em CSS3, você pode definir estilos dependendo da largura da página. Como a largura da página se correlaciona com o tamanho do dispositivo do usuário, esse recurso permite definir layouts diferentes para dispositivos diferentes. Observação: as consultas de mídia são suportadas por todos os principais navegadores.

Essa definição é possível através da configuração de propriedades básicas: max-width , device-width , orientation e color . Outras definições também são possíveis; mas neste caso, as coisas mais importantes a serem observadas são a resolução mínima (largura) e as configurações de orientação (paisagem vs. retrato).

O exemplo de CSS responsivo abaixo mostra o procedimento para iniciar um determinado arquivo CSS em relação à largura da página. Por exemplo, se 480px for a resolução máxima da tela do dispositivo atual, os estilos definidos em main_1.css serão aplicados.

 <link rel="stylesheet" media="screen and (max-device-width: 480px)" href="main_1.css" />

Também podemos definir estilos diferentes dentro da mesma folha de estilo CSS de forma que eles sejam utilizados apenas se certas restrições forem satisfeitas. Por exemplo, esta parte do nosso CSS responsivo só seria usada se o dispositivo atual tivesse uma largura acima de 480px:

 @media screen and (min-width: 480px) { div { float: left; background: red; } ....... }

“Zoom Inteligente”

Os navegadores móveis usam o chamado “zoom inteligente” para fornecer aos usuários uma experiência de leitura 'superior'. Basicamente, o zoom inteligente é usado para reduzir proporcionalmente o tamanho da página. Isso pode se manifestar de duas maneiras: (1) zoom iniciado pelo usuário (por exemplo, tocando duas vezes na tela do iPhone para ampliar o site atual) e (2) exibindo inicialmente uma versão ampliada de uma página da Web no carga.

Dado que podemos usar consultas de mídia responsivas para resolver qualquer um dos problemas nos quais o zoom inteligente pode ser direcionado, geralmente é desejável (ou mesmo necessário) desabilitar o zoom e garantir que o conteúdo da sua página sempre preencha o navegador:

 <meta name="viewport" content="width=device-width, initial-scale=1" />

Ao definir initial-scale como 1, controlamos o nível de zoom da página inicial (ou seja, a quantidade de zoom no carregamento da página). Se você projetou sua página da Web para ser responsiva, seu layout fluido e dinâmico deve preencher a tela do smartphone de maneira inteligente, sem exigir nenhum zoom inicial.

Além disso, podemos desabilitar completamente o zoom com user-scalable=false .

Larguras de página

Digamos que você queira fornecer três layouts de página responsivos diferentes: um para desktops, um para tablets (ou laptops) e outro para smartphones. Quais dimensões de página você deve segmentar como limites (por exemplo, 480px)?

Infelizmente, não há um padrão definido para as larguras de página a serem segmentadas, mas os seguintes exemplos de valores responsivos costumam ser usados:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1024px
• 1200px

No entanto, existem várias definições de largura diferentes. Por exemplo, 320 e superior tem cinco incrementos de consulta de mídia CSS3 padrão: 480, 600, 768, 992 e 1382px. Junto com o exemplo dado neste tutorial de desenvolvimento web responsivo, eu poderia enumerar pelo menos dez outras abordagens.

Com qualquer um desses conjuntos razoáveis ​​de incrementos, você pode segmentar a maioria dos dispositivos. Na prática, geralmente não há necessidade de lidar separadamente com todos os exemplos mencionados de largura de página - sete resoluções diferentes provavelmente são um exagero. Na minha experiência, 320px, 768px e 1200px são os mais usados; esses três valores devem ser suficientes para segmentar smartphones, tablets/laptops e desktops, respectivamente.

Pseudo-elementos

Com base em suas consultas de mídia responsivas do exemplo anterior, talvez você também queira mostrar ou ocultar determinadas informações programaticamente com base no tamanho do dispositivo do usuário. Felizmente, isso também pode ser feito com CSS puro, conforme descrito no tutorial abaixo.

Para começar, ocultar alguns elementos ( display: none; ) pode ser uma ótima solução quando se trata de reduzir o número de elementos na tela para um layout de smartphone, onde quase sempre há espaço insuficiente.

Mas além disso, você também pode ser criativo com pseudo-elementos CSS (seletores), por exemplo, :before e :after . Nota: mais uma vez, os pseudo-elementos são suportados por todos os principais navegadores.

Pseudoelementos são usados ​​para aplicar estilos específicos a partes específicas de um elemento HTML ou para selecionar um determinado subconjunto de elementos. Por exemplo, o pseudo-elemento :first-line permite definir estilos somente na primeira linha de um determinado seletor (por exemplo, p:first-line será aplicado à primeira linha de todos os p s). Da mesma forma, o pseudo-elemento a a:visited permitirá definir estilos a todos os s com links visitados anteriormente pelo usuário. Claramente, estes podem ser úteis.

Aqui está um exemplo simples de design responsivo no qual criamos três layouts diferentes para um botão de login, um para desktop, tablet e smartphone. No smartphone, teremos um ícone solitário, enquanto o tablet terá o mesmo ícone acompanhado de “Nome de usuário”. Por fim, para a área de trabalho, também adicionaremos uma breve mensagem de instrução (“Insira seu nome de usuário”).

 .username:after { content:"Insert your user name"; } @media screen and (max-width: 1024px) { .username:before { content:"User name"; } } @media screen and (max-width: 480px) { .username:before { content:""; } }

Usando apenas os pseudo-elementos :before e :after , obtemos o seguinte:

Para saber mais sobre a magia dos pseudo-elementos, Chris Coyier tem um bom artigo sobre CSS-Tricks.

Então, por onde devo começar?

Neste tutorial, estabelecemos alguns dos blocos de construção para o design da Web responsivo (ou seja, consultas de mídia e pseudoelementos) e apresentamos alguns exemplos de cada um. Para onde vamos daqui?

O primeiro passo que você deve tomar é organizar todos os elementos da sua página da web em vários tamanhos de tela.

Dê uma olhada na versão desktop do layout apresentado acima. Nesse caso, o conteúdo à esquerda (o retângulo verde) pode servir como uma espécie de menu principal. Mas quando os dispositivos com resolução mais baixa estão em uso (por exemplo, um tablet ou smartphone), pode fazer sentido que este menu principal seja exibido em largura total. Com consultas de mídia, você pode implementar esse comportamento da seguinte maneira:

 @media screen and (max-width: 1200px) { .menu { width: 100%; } } @media screen and (min-width: 1200px) { .menu { width: 30%; } }

Infelizmente, essa abordagem básica geralmente é insuficiente à medida que seu front-end cresce em complicação. Como a organização do conteúdo de um site geralmente difere significativamente entre as versões para dispositivos móveis e desktop, a experiência do usuário depende do uso não apenas de CSS responsivo, mas também de HTML e JavaScript.

Ao determinar layouts responsivos para diferentes dispositivos, vários elementos-chave são importantes. Ao contrário das versões desktop onde temos espaço suficiente para o conteúdo, o desenvolvimento de smartphones é mais exigente. Mais do que nunca, é necessário agrupar conteúdos específicos e definir hierarquicamente a importância das partes individuais.

Os vários usos do seu conteúdo também são importantes. Por exemplo, quando seu usuário tem um mouse, ele pode colocar o cursor acima de certos elementos para obter mais informações, para que você (como desenvolvedor web) possa deixar algumas informações a serem coletadas dessa maneira, mas essa não será a caso quando seu usuário estiver em um smartphone.

Além disso, se você deixar botões em seu site que são renderizados em smartphones como menores do que um dedo comum, você criará incerteza no uso e na sensação do seu site. Observe que na imagem acima, a visualização padrão da web (à esquerda) torna alguns elementos completamente inutilizáveis ​​quando visualizados em um dispositivo menor.

Esse comportamento também aumentará as chances de seu usuário cometer um erro, tornando sua experiência mais lenta. Na prática, isso pode se manifestar como menos visualizações de página, menos vendas e menos engajamento geral.

Outros elementos de design responsivos

Ao usar consultas de mídia, deve-se ter em mente o comportamento de todos os elementos da página, não apenas aqueles que estão sendo segmentados, especialmente ao usar grades fluidas, caso em que (ao contrário de dimensões fixas) a página será totalmente preenchida em qualquer dado momento, aumentando e diminuindo o tamanho do conteúdo proporcionalmente. Como as larguras são definidas em porcentagens, os elementos gráficos (ou seja, imagens) podem ficar distorcidos e mutilados sob um layout tão fluido. Para imagens, uma solução é a seguinte:

 img { max-width: 100% }

Outros elementos devem ser tratados de forma semelhante. Por exemplo, uma ótima solução para ícones no RWD é usar IconFonts.

Algumas palavras sobre sistemas de rede fluida

Quando discutimos o processo de adaptação completa do design, geralmente analisamos a experiência de visualização ideal (da perspectiva do usuário). Essa discussão deve incluir uso facilitado máximo, importância do elemento (com base nas regiões visíveis da página), leitura facilitada e navegação intuitiva. Entre essas categorias, um dos componentes mais importantes é o ajuste da largura do conteúdo . Por exemplo, os chamados sistemas de grade fluida possuem elementos definidos, ou seja, elementos baseados em larguras relativas como porcentagens da página geral. Dessa forma, todos os elementos do sistema de web design responsivo se ajustam automaticamente ao tamanho da página.

Embora esses sistemas de grade de fluidos estejam intimamente relacionados ao que discutimos aqui, eles são realmente uma entidade totalmente separada que exigiria um tutorial adicional para discutir em detalhes. Portanto, mencionarei apenas alguns dos principais frameworks que suportam esse comportamento: Bootstrap, Unsemantic e Brackets.

Conclusão

Até recentemente, a otimização de sites era um termo exclusivamente reservado para personalização de funcionalidades com base em diferentes navegadores da web. Juntamente com a inevitável luta com os diferentes padrões de navegadores que enfrentamos hoje, este termo agora pressupõe a adaptação a dispositivos e tamanhos de tela com design web responsivo. Para cortá-lo na web moderna, seu site deve saber não apenas quem o está visualizando, mas como .