Como adotar a abordagem correta para o design responsivo da web

Fiz uma pesquisa no Twitter há algum tempo e os resultados me surpreenderam.

Não só esperava que os resultados fossem o contrário, Eu pensei que o mobile-first receberia pelo menos 80% dos votos.

Nas respostas, algumas pessoas explicaram por que escrevem primeiro na área de trabalho. Os temas gerais desses motivos:

• Isso é tudo o que o designer forneceu
• Foi assim que a equipe deles funcionou
• Eles aprenderam CSS escrevendo apenas para desktop, então isso parecia a progressão natural
• Clientes querem ver a versão desktop

O que é mobile-first

Mobile-first é quando começamos por escrevendo nosso CSS para dispositivos móveis e, em seguida, use consultas de mídia para adicionar estilo para tamanhos de tela maiores.

Em geral, isso significa que as consultas de mídia usam um min-width. Estamos usando consultas de mídia para adicionar ou substituir estilos para um ponto de interrupção definido e maior, como neste exemplo:

.sales-points {  padding: 3em 0;}@media (min-width: 600px) {  .sales-points {    display: flex;    justify-content: space-between;  }}

Nesse exemplo, para telas pequenas, estamos simplesmente aplicando algum preenchimento. Supondo que esta seção do site tenha filhos, transformamos esses filhos em colunas com uma largura mínima de 600px.

Então, quando a viewport é 600px ou maior, teremos colunas. O resto do tempo, as coisas se acumulam.

Como você provavelmente adivinhou, uma abordagem de desktop primeiro é o contrário. Nosso CSS é escrito para telas grandes e, em seguida, usamos consultas de mídia para fazer alterações em tamanhos menores, geralmente usando max-width consultas de mídia.

Por que o mobile-first é mais fácil

Os sites respondem naturalmente antes mesmo de escrevermos uma única linha de CSS.

Se você remover o CSS de qualquer página da Internet, mesmo em algum site criado para um tamanho de tela muito específico em 2001, agora você terá um site responsivo e compatível com dispositivos móveis!

Os estilos de área de trabalho tendem a ser mais complexos

Quando criamos estilo para a área de trabalho primeiro, adicionamos larguras, colunas e movemos as coisas. Estamos adicionando complexidade. Estamos fazendo isso por um bom motivo, pois temos mais imóveis para trabalhar.

Não apenas queremos tirar proveito disso para tornar as coisas mais interessantes, mas se não tornássemos as coisas mais complexas em telas maiores, as coisas não pareceriam muito boas. Mesmo se você tiver um muito site simples, você não deseja que o texto se estenda de um lado para o outro.

Veja como seria um artigo aqui no FCC News se o texto fosse de um lado para o outro.

Todos podemos concordar que você nunca leu algo assim, sim? Eu literalmente tenho que mover minha cabeça um pouco da esquerda para a direita para ler uma linha completa na minha tela. É terrível.

Os layouts para celular tendem a ser muito simples, facilitando o início

Para todas as pessoas que me responderam dizendo que seus clientes preferiam ver a versão para desktop ou que recebiam apenas composições de desktop por seus designers, eu diria que ainda é mais fácil começar primeiro pelo celular.

Para muitos sites, depois de configurar sua tipografia, você fica 70% do caminho. Coisas como:

• font-family
• font-size
• font-weight
• margin (nos seus elementos de texto)

Em seguida, você pode fazer um estilo de layout muito básico nos elementos do layout, como:

• padding
• background-color
• color
• e talvez alguns ajustes com margin

Nesse estágio, as coisas ficarão muito boas do ponto de vista do layout em telas pequenas. Isso significa que, sem escrever uma única consulta de mídia, você tem um site totalmente funcional no celular.

Se você estiver se sentindo particularmente preguiçoso ou tiver um site muito simples, poderá max-width no seu contêiner e termine com a coisa toda e nem precise se preocupar com uma consulta de mídia!

Na maioria das vezes, queremos melhorar o jogo em telas maiores, e é por isso que sinto que o celular é o caminho a percorrer. É a progressão natural para cima.

Comparando o celular primeiro ao computador

Abaixo está um CodePen que possui um muito layout simples montado usando uma abordagem de desktop primeiro e móvel primeiro.

Se você abrir a caneta e brincar com o tamanho da janela de exibição, verá que o resultado final é exatamente o mesmo.

Mas se o resultado final usando qualquer uma das abordagens é exatamente o mesmo, por que importa qual abordagem você adota?

O primeiro desktop pode levar ao código redundante

Na caneta acima, a abordagem de desktop primeiro usa o seguinte código:

/*  desktop-first */.desktop-first .sales-points {  display: flex;  justify-content: space-between;}.desktop-first .sales-point {  width: 30%;}@media (max-width: 600px) {  .desktop-first .sales-points {    display: block;  }  .desktop-first .sales-point {    width: 100%;  }}

Como você pode ver no CodePen, ele funciona perfeitamente bem, mas há um monte de código aqui que é redundante quando usamos uma abordagem para dispositivos móveis.

Observe como declaramos primeiro um display: flex apenas para colocá-lo de volta ao padrão display: block na consulta de mídia. Além disso, para nossas colunas, alteramos o width e, mais uma vez, volte ao padrão mais tarde.

A abordagem mobile-first tem muito menos código redundante. Como não havia estilo no texto ou nas cores do plano de fundo, não há estilo, exceto pelo que eu preciso nas minhas consultas de mídia!

/*  mobile-first */@media (min-width: 600px) {  .mobile-first .sales-points {    display: flex;    justify-content: space-between;  }  .mobile-first .sales-point {    width: 30%;  }}

Voltando aos padrões, deve haver uma bandeira vermelha

Percebo que algumas coisas são mais complexas do que isso (e chegaremos lá em breve), mas a maior parte do que me preocupa aqui é da perspectiva do layout.

Para o layout que criei acima, não escrevi uma linha de código para a abordagem do mobile-first. Eu apenas confiei em como o documento estava fluindo desde o início. Na abordagem da área de trabalho em primeiro lugar, eu tenho que lidar com ambos porque preciso redefinir as coisas de volta ao estado padrão.

O fato de eu estar redefinindo coisas como display e width para seu estado padrão, para mim, é uma bandeira vermelha. Isso significa que estou escrevendo algo que poderia ter sido evitado. Isso significa que estou perdendo meu tempo.

Algumas coisas não são tão simples

Alguns componentes parecem completamente diferentes em diferentes tamanhos de tela, como menus de navegação. Outras vezes, você tem estilos em dispositivos móveis que precisam ser substituídos para computadores que acabam sendo redundantes.

No vídeo abaixo, eu me deparo com o problema exato em que eu precisava mover um elemento usando position: absolute para telas menores. Em vez de precisar posicioná-lo e, em seguida, redefinir a posição para o padrão em tamanhos de tela maiores, parecia uma escolha lógica para um max-width consulta de mídia.

Se você clicar em reproduzir no vídeo, ele deve começar exatamente onde eu resolvo esse problema, se você quiser vê-lo em ação (17:41, para o caso de ele não iniciar no local certo).

https://www.youtube.com/watch?v=_kF3k0vDMNA

Então, às vezes, há exceções, e não há nada de errado nisso. O que quero dizer aqui não é que devemos ser robôs que fazem as coisas de uma maneira. Há momentos em que diferentes abordagens fazem sentido, mas Eu gosto de acreditar que ter uma regra geral ajuda.

Então, da próxima vez que você estiver criando um site, mesmo se você tiver apenas um modelo de desktop, tente iniciar o celular primeiro. Não é preciso mais trabalho e, a longo prazo, aposto que você economizará uma tonelada de código redundante. É bem simples também!

1. Comece com a tipografia
2. Adicione cores e preenchimento
3. Coloque qualquer layout relacionado a um min-width consulta de mídia

Quando terminar seu layout, você não apenas terá eliminado a versão para desktop que seu cliente está ansioso para ver, mas estará 90% do caminho em seu celular também, sem sequer ter realmente pensado. sobre isso.

Você luta para tornar as coisas responsivas?

Tornar os sites responsivos é um tópico com o qual muitas pessoas me dizem que têm dificuldade. Ajudar, Eu criei um curso gratuito chamado Conquistando layouts responsivos. É um desafio de 21 dias, no qual abordaremos um tópico por semana, com cada um contribuindo para o que já aprendemos.

Percebo que estamos todos ocupados com crianças, família, trabalho e muito mais, então cada dia terá apenas 10 a 30 minutos de aulas, com 2-3 aulas por semana. No meio, você terá pequenos desafios para concluir, trabalhando até ficar confortável criando layouts responsivos.

O curso será lançado no dia 13 de abril e, por ser um curso de 21 dias, as portas se fecham nesse dia. Clique aqui para se inscrever para começar a conquistar layouts responsivos!

Se você estiver lendo isso após o fato, poderá se inscrever para a próxima vez que for lançado, mas ele não será aberto novamente por alguns meses.