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 alcançar uma experiência de usuário ideal como um engenheiro front-end , seu site deve ajustar o layout em resposta a esses dispositivos variados (ou seja, às suas várias resoluções e dimensões de tela). O processo de respondendo à forma do dispositivo do usuário é referido como (você adivinhou) web design responsivo (RWD).

Por que vale a pena estudar? web design responsivo exemplos e mudar seu foco para RWD? Alguns web designers, por exemplo, em vez disso, 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.

Alguns web designers passam dias a fio tratando de pequenos problemas com o Internet Explorer e deixam seus usuários móveis como visitantes de segunda mão. Esta é uma abordagem tola.

Mashable chamou 2013 de o 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 possa chegar a 50% até o final do ano. Na 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, responde por apenas 12% de todos navegador tráfego, queda de cerca de 4% em relação ao ano passado (de acordo com W3Schools ) Se você está otimizando para um navegador específico, em vez da população global de smartphones, está perdendo a floresta por causa das árvores. E, em alguns casos, isso pode significar a diferença entre o sucesso e o fracasso - o design responsivo tem implicações para taxas de conversão , SEO , taxas de rejeição , e mais.

A abordagem de design responsivo da Web

O que é comumente esquecido 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 tamanhos de tela diferentes em que ele pode ser visualizado - tal abordagem é simplesmente inviável. Em vez disso, a solução é implementar elementos de design responsivo e flexível 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ível 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 , que possibilitou 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.

@media screen { * { background: silver } }

ou

max-width

Dentro 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. Nota: consultas de mídia são suportadas por todos os principais navegadores .

Essa definição é possível por meio da configuração das propriedades básicas: device-width, orientation, color e @media screen and (min-width: 480px) { div { float: left; background: red; } ....... } . 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 x 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 é a resolução máxima da tela do dispositivo atual, os estilos definidos em main_1.css serão aplicados.

initial-scale

Também podemos definir estilos diferentes dentro da mesma folha de estilo CSS, de forma que eles só sejam utilizados 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:

user-scalable=false

“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, tocar duas vezes na tela do iPhone para aumentar o zoom no site atual) e (2) exibir inicialmente uma versão ampliada de uma página da web no carga.

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

display: none;

Definindo :before para 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, então seu layout fluido e dinâmico deve preencher a tela do smartphone de uma forma inteligente, sem exigir nenhum zoom inicial.

Além disso, podemos desativar o zoom completamente com :after.

Larguras da Página

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

Infelizmente, não há um padrão definido para as larguras de página a serem segmentadas, mas os seguintes exemplos de valores responsivos são frequentemente 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 1382 px. Junto com o exemplo fornecido 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 direcionar a maioria dos dispositivos. Na prática, geralmente não há necessidade de lidar separadamente com todos os exemplos mencionados de larguras de página - sete resoluções diferentes provavelmente é um exagero. Na minha experiência, 320px, 768px e 1200px são os mais comumente usados; esses três valores devem ser suficientes para a segmentação de smartphones, tablets / laptops e desktops, respectivamente.

Psuedo-Elements

Com base nas suas consultas de mídia responsivas do exemplo anterior, você também pode mostrar ou ocultar certas informações de maneira programática 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 (:first-line) 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 CSS pseudo-elementos (seletores), por exemplo, p:first-line e p. Nota: mais uma vez, pseudo-elementos são suportados por todos os principais navegadores .

Pseudo-elementos 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 a:visited O pseudoelemento permite definir estilos apenas na primeira linha de um determinado seletor (por exemplo, a será aplicado à primeira linha de todos os .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:''; } } s). Da mesma forma, o :before O pseudo-elemento permitirá que você defina estilos em todos os :after s com links previamente visitados pelo usuário. Claramente, eles podem ser úteis.

Aqui está um exemplo de design responsivo simples 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”. Finalmente, para a área de trabalho, também adicionaremos uma mensagem curta de instrução (“Insira seu nome de usuário”).

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

Usando apenas img { max-width: 100% } e

pseudo-elementos, alcançamos o seguinte:

Para saber mais sobre a magia dos elementos psuedo, Chris Coyier tem uma boa escrever em CSS-Tricks.

Então, por onde devo começar?

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

A primeira etapa que você deve realizar é 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) poderia servir como uma espécie de menu principal. Mas quando 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 as consultas de mídia, você pode implementar esse comportamento da seguinte maneira:

|_+_|

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

Ao determinar layouts responsivos para dispositivos diferentes, vários elementos-chave são importantes. Ao contrário das versões para 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.

Para um smartphone, é mais importante do que nunca 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 posicionar o cursor acima de certos elementos para obter mais informações, então você (como o desenvolvedor da web) pode deixar algumas informações para serem coletadas desta forma, mas isso não será caso quando o usuário está em um smartphone.

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

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

Outros elementos de design responsivo

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 direcionados, especialmente ao usar grades fluidas, caso em que (em oposição às dimensões fixas) a página será totalmente preenchida em qualquer dado momento, aumentando e diminuindo o tamanho do conteúdo proporcionalmente. Uma vez que as larguras são definidas em porcentagens, os elementos gráficos (ou seja, imagens) podem ser distorcidos e mutilados sob tal layout fluido. Para imagens, uma solução é a seguinte:

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

Algumas palavras sobre sistemas de rede de fluidos

Quando discutimos o processo de adaptação total do design, muitas vezes olhamos para a experiência de visualização ideal (da perspectiva do usuário). Tal discussão deve incluir o uso máximo facilitado, 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 é ajuste de largura de conteúdo . Por exemplo, os chamados sistemas de grade fluida possuem elementos definidos, isto é, elementos baseados em larguras relativas como porcentagens da página geral. Desta forma, todos os elementos do web design responsivo o sistema se ajusta automaticamente ao tamanho da página.

Embora esses sistemas de grade fluida estejam intimamente relacionados ao que estamos discutindo aqui, eles são realmente uma entidade totalmente separada que exigiria um tutorial adicional para discutir em detalhes. Portanto, vou apenas mencionar alguns frameworks principais que suportam esse comportamento: Bootstrap , Pouco semântico e Colchetes .

Conclusão

Até recentemente, a otimização de sites era um termo reservado exclusivamente para personalização de funcionalidades baseadas em diferentes navegadores da web. Junto com a batalha inevitável com os diferentes padrões de navegador que enfrentamos hoje, este termo agora pressupõe a adaptação a dispositivos e tamanhos de tela com web design responsivo. Para cortar na web moderna, seu site deve saber não apenas quem é vendo, mas Como .