um layout flexível

Construir um layout responsivo a partir do design do smartphone, mobile first, é uma tarefa que exige atenção aos detalhes das unidades de medida, a estratégia do design entre outros pontos para ter uma aplicação responsiva.

Vamos a alguns pontos a termos atenção e depois a um passo a passo na construção desse tipo de layout adaptativo.

flexíveis

Grids flexíveis usam colunas para organizar o conteúdo. Usam larguras relativas ao invés das fixas para se adaptarem a largura da tela do usuário.

Layout fluido é sempre a melhor maneira de estar pronto para qualquer tipo de tamanho de tela e/ou orientação. Dessa forma pouco vai importar se o usuário está acessando o site por um smartphone ou por uma televisão de 42", o layout irá se adaptar à resolução do usuário.

O primeiro ponto para evitar possíveis erros de cálculos, use medidas como a porcentagem e deixe que o navegador faça os cálculos.

max e min width

Você pode usar max-* e min-* como limites aplicados a seus tamanhos relativos.

Sua principal função de se usar é para impedir que o layout aumente ou diminua de uma forma errada quando exibido em um dispositivo realmente grande ou pequeno.

Vamos ver alguns exemplos de uso, suponhamos que queremos um layout fluido com mais do que 768px de largura e menos de 1024px, então deveríamos usar da seguinte forma:

min-width: 768px;
max-width: 1024px;

Se quisermos que uma div com id=”main” não tenha menos do que 1000px quando visto em um desktop, podemos usar da seguinte forma:

@media screen and (min-width:
1024px) {
#main { min-width: 1000px; }
}

Esses pontos são essenciais na criação de web designers e desenvolvedores front-end onde poderão entender e aprofundar um pouco mais no estudo de responsive design.

A fundação pode ser construída através de um sistema de grid fluído ou na unha combinando medidas relativas e um pouquinho de matemática.

(quase) tudo é relativo

Para que o seu site possa se adaptar a múltiplos dispositivos será preciso colocar um pouco de lado os pixels. Pixels serão utilizados para definir alturas fixas e para definir, se for determinado no layout, um container inicial com uma largura máxima.

Para todo o resto, usaremos % e EM. Existem também algumas outras medidas responsivas super bacanas como REM, VW, VH e FR.

o EM

1 EM é correspondente ao valor de font-size, que, por padrão do browser é em média 16px. E isto é bacana para a gente por que é um tamanho dinâmico. Ou seja, vamos supor que o seu usuário possua alguma deficiência de visão e precise aumentar e diminuir o tamanho do texto… Como pixel é uma medida fixa é impossível fazer isto de maneira proporcional, sem distorções ou quebras no layout. Já o EM é super proporcional. É uma questão de usabilidade.

conversão de PX para EM

Como fazer contas em base 16 é meio chatinho podemos usar um truque de CSS para facilitar a conversão de pixels para EM.

Isto significa que alteramos o valor da fonte padrão de 16px para 10px. Desta forma, 12px passa a equivaler a 1.2em, 14px fica equivalente a 1.4em, etc.

Lembre-se que 1 EM é relativo ao font-size. Então uma vez que você altere este valor dentro de um article, por exemplo, todos os elementos filhos também serão alterados.

conversão de PX para %

Para construir a tal da fundação flexível é preciso seguir uma fórmula estrutural básica: objeto : contexto = resultado.

Vamos adiantar um pouquinho a prática e pensar no seguinte: temos uma div de largura 1128px. Dentro dela uma coluna com 264px de largura. A coluna é, portantom filha do container. Então vamos pegar o valor em px da coluna (objeto = 264px) e dividir pelo valor em pixel do elemento pai (contexto = 1128px). O resultado deu 0,23404255319149.

Agora basta andar duas casas para a esquerda com a virgula e acrescentar um ponto que temos o valor 23.404255319149. E esta é a correspondência da nossa coluna em porcentagem: 23.404255319149%. Este número é realmente grande e a tentação é grande para chamar de 23% e acabar com a história. Mas, se você arredondar, uma hora a soma vai quebrar. Computadores são bem mais exatos que a gente. Eles sabem lidar bem com matemática.

imagens adaptáveis

Já que vamos trabalhar com porcentagens precisamos garantir que as imagens não vão se distorcer, certo? Então podemos acrescentar o seguinte código CSS.

Isto significa que o tamanho final da imagem no browser nunca vai ultrapassar o tamanho original dela. Mas, para isto funcionar, é necessário sempre envelopar as imagens em um container. Pode ser um figure, uma div, enfim, vai dá sua escolha para aquele contexto.

consulta de media query

O terceiro e último passo da nossa revisão é consulta de mídia ou media queries.

Para isto basta utilizar a regrinha @media combinada com parâmetros como min-width, max-width, min-height, max-height, aspect ratio, etc. e operadores como and, only e not.

round bonus — viewport

Precisamos dizer para todos os dispositivos que a escala inicial do nosso layout é equivalente ao tamanho do dispositivo. Se não fizermos isto, alguns aparelhos móveis vão redimensionar o layout por conta própria e o design responsivo só vai funcionar no desktop! Para isto vamos manipular a metatag viewport. Cole isto no head do seu documento.

o HTML

Acredito ser mais fácil construir todo o HTML para depois desenvolver o CSS. Mas esta é uma preferência pessoal e não vou ficar aqui cagando regra.

Podemos dividir este HTML em cinco estruturas básicas.

– Uma div com a classe container envolvendo todo o layout;

– Um cabeçalho com a classe header;

– Uma div “hero” com a classe banner;

– Quatro blocos de texto e imagem com a classe coluna;

– Um rodapé com a classe footer.

Lembrando que pode ser usado os html semânticos.

border-box

Outro truque bacana de CSS para design responsivo é o box-sizing border box acompanhado do seletor *. Basicamente esta regra diz que todos os elementos agora levarão em conta apenas a largura e altura determinada, sem somar a este valor a borda e o padding. Ou seja, uma coisa a menos para nos preocuparmos.

adaptar o layout

Estes aparelhos podem ser divididos em alguns tamanhos médios de largura:

1024px — Tablets em modo paisagem;

768px — Tablets em modo retrato;

480px — Smartphones;

Mas estes valores não passam de chutes calculados. Existem dezenas de resoluções intermediárias. Aqui vai entrar o conceito de break-point, ou, ponto-de-quebra.

o conteúdo é o rei

Vamos então projetar um layout de uma página inicial de uma empresa fictícia que deve conter as seguintes informações:

  1. logotipo
  2. navegação
  3. banner apresentando produtos e serviços
  4. blocos com imagens e textos curtos
  5. créditos

resoluções

Existem dezenas de resoluções diferentes e, embora este seja o objetivo final, é bem difícil ter um layout que vai ficar perfeito a cada ponto de quebra. O ideal, portanto, é ter em mente quais são os formatos mais comuns e focalizar para que ao menos nestes estágios o design esteja funcionando perfeitamente. Considere portanto estas resoluções básicas:

  • 1200 pixels — Desktops com monitores widescreen.
  • 960 pixels — Tablets em formato paisagem e monitores antigos.
  • 768 pixels — Tablets em formato retrato.
  • 480 pixels — Smartphones em formato paisagem.
  • 320 pixels — Smartphones em formato retrato.

o mock-up

Hora de criar esta estrutura no seu programa gráfico favorito. Você pode montar o seu próprio grid utilizando linhas guias ou baixar um modelo pronto.

em evolução

Com o passar do tempo este fluxo de trabalho torna-se natural. Ao observar um layout você consegue mentalmente criar os pontos-de-quebra e algumas fases deste processo podem ser puladas.

Você pode, por exemplo, trabalhar com apenas dois formatos de wireframe: um para computadores/tablets e um para smartphones. Existem pessoas que preferem ainda queimar completamente estas etapas e desenvolver diretamente no CSS.

Cada um tem o seu modo de trabalho e nenhum é necessariamente melhor ou pior que o outro. Vale a pena testar diferentes abordagens até encontrar o que funciona melhor para você, sua equipe e seus clientes.

Até aqui abordamos o que precisamos estar atentos no desenvolvimento web que se adapte a diversos dispositivos.

Construir uma aplicação que se adapta

Agora, vamos colocar em ordem os pontos principais na construção de uma aplicação que se adapta nos principais tamanhos dos dispositivos.

Dica #1: mantenha sua viewport simples

Quando a meta tag viewport foi introduzida pela primeira vez, era de conhecimento geral que era preciso adicionar todos os tipos de valores para impedir que os usuários redimensionassem e tivessem um tamanho mínimo e máximo de tela. Acontece que fazer isso é realmente hostil aos visitantes.

Realmente só são necessárias 2 coisas: definir a largura para o dispositivo em que o site é exibido e verificar se a escala inicial é 1 (o que significa que 1 pixel em seu CSS é igual a um pixel independente de dispositivo):

1

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

Dica #2: mobile first

Muito provavelmente, você desenvolve sites em uma tela grande de laptop ou desktop e, geralmente, seu cliente está mais interessado no design de desktop de um site; portanto, pode parecer natural começar com o design do site de desktop e seguir a partir daí. Mas usar a técnica de mobile first é realmente mais fácil e resultará em menos código.

Geralmente, as views para dispositivos móveis são muito mais simples e, portanto, exigem menos CSS. Elas quase sempre têm apenas uma coluna e não possuem muitos firulas adicionais para as quais você tem espaço em telas maiores.

Se você desenvolve no modo desktop first, já terá todo esse estilo mais complexo para escrever e, muito provavelmente, terá que “desfazer” muita coisa em seus estilos. Então, você está escrevendo mais CSS e, se não está desfazendo todo o CSS com cuidado, acaba caindo em situações como overflowing, texto que não se comporta bem etc.

Com mobile first, você economiza um grande pedaço de CSS simplesmente não precisando escrever, tornando-o menor e mais simples de ser manutenido — além de efeitos colaterais benéficos, como seu projeto Web ficar mais rápido.

Dica #3: design a partir do conteúdo

Para determinar onde estarão seus breakpoints, você pode optar por usar valores como 320px, 375px, 768px e 1024px, todos mapeados para várias larguras reais de dispositivos. Mas quando novos dispositivos se tornam mais populares, seu design pode não parecer mais tão bom assim…

Uma dica geral para encontrar breakpoints específicos para determinado projeto é: comece a partir de telas pequenas (mobile first) e expanda até a coisa ficar ridiculamente feia e/ou sem usabilidade. Eis o ponto para adicionar um breakpoint.

Esse foco no conteúdo forçará você a pensar em projetos Web como inerentemente fluidos. Você não pode pensar em projetar apenas com larguras “pixel perfect” mente, simplesmente porque elas não existem!

Dica #4: use a unidade em para media queries

Com larguras de dispositivos específicas que não importam mais, você também deve alternar as larguras de breakpoints em pixels para larguras em ems.

Segundo a dica anterior, suas media queries devem ser baseadas no conteúdo, portanto, isso permitirá que seu projeto Web tenha uma ótima aparência mesmo para pessoas que alteraram os tamanhos padrão de font-size de seus navegadores.

O restante do design se ajustará adequadamente a isso e tornará seu site/app mais robusto.

Dica #5: min-width ou max-width, escolha um

Web design responsivo cria um sistema de desenvolvimento incrivelmente complexo. Quando as media queries usam ambos, min-width e max-width, ou mesmo combinações delas, você aumenta enormemente a complexidade e o raciocínio necessário para entender como tudo se encaixa, tornando as coisas ainda mais difíceis.

Se todas as suas media queries funcionarem “para cima” ou “para baixo”, você sempre saberá onde procurar quando o projeto Web não estiver se comportando como o esperado em um determinado tamanho. Além disso, o CSS nas novas media queries que você escreve nunca influenciará seus tamanhos anteriores.

Para ser coerente com as dicas mostradas anteriormente, especialmente quanto ao mobile first — e a experiência do dia-a-dia também ajuda a corroborar –, nossa dica é que escolha min-width — e não fique tão chateado se tiver que abrir 1 ou 2 exceções a esta regrinha.

Dica #6: evite tamanhos fixos

Acredite, nós sabemos: pode ser muito tentador usar dimensões fixas para elementos. Afinal, sua ferramenta favorita de layout/prototipagem provavelmente permite que você as copie com facilidade.

Mas, se você não tomar cuidado, elementos com larguras (ou margens) fixas podem facilmente quebrar seu layout e trazer problemas adicionais.

Tente estilizar os tamanhos dos elementos em relação ao “ambiente” em que se encontram. Use porcentagens ou unidades de viewport. Evite definir width e height, tentando usar suas contrapartes min- e max-.

E se você terminar com uma largura quebrando algo em algum lugar, uma max-width: 100% pode fazer maravilhas!

Dica #7: use tecnologias modernas para layout

Para expandir a regra anterior, tecnologias modernas de layout, como Flexbox e CSS Grid, são criados para serem inerentemente flexíveis e dimensionados de acordo com o ambiente.

Se você usar essas tecnologias modernas de layout, precisará de menos media queries para obter os mesmos resultados. Menos media queries significa menos razões para ficar pensando a respeito, além de seu código ficar mais curto para inicializar.

Temos diversos tutoriais e conteúdos diversos sobre Flexbox e CSS Grid aqui no blog, e materiais a respeito dessas tecnologias não faltam pelas webs à fora.

Dica #8: deixe espaço para as diferenças de renderização de texto

É tentador criar breakpoints no local em que ocorre uma quebra de linha desfavorável. Para obter aquele “pixel perfect” que o cliente faz tanta questao, claro. Mas sabemos que a Web não é pixel perfect, nem nunca foi.

Se seus breakpoints estiverem muito próximos das quebras de linha legíveis, tudo poderá funcionar bem em seu navegador, mas navegadores diferentes e sistemas operacionais diferentes têm maneiras diferentes de renderizar texto, o que significa que a linha de texto pode ter um pixel de largura maior ou menor e seu design pode quebrar.

Em vez disso, tente não deixar as media queries tão rígidas; deixe um pouco de espaço para que algumas coisas desapareçam alguns pixels antes de grandes mudanças no design.

Dica #9: decida no browser

Para seguir essas dicas, não faz sentido criar todos os seus breakpoints em uma ferramenta de design. Por outro lado, também é difícil projetar o site inteiro em um navegador (embora haja corajosos que façam isso). Então, qual pode ser o meio-termo feliz?

Crie seus designs em uma ferramenta de design, com algumas variantes responsivas aproximadas, mas mantenha a opção de quando mudar para outro design para quando você estiver realmente trabalhando no navegador.

A artboard do Sketch pode ter 750px de largura, mas se você estiver no navegador e o layout já fizer mais sentido em 44em (ou seja, 704 pixels), use 44em em seu CSS.

E se algum “criativo” reclamar de sua decisão, exigindo o mais alto rigo do pixel perfect, agora você já sabe como justificar sua decisão. De nada.

Responsive web design, desde o dia em que foi “criado” (descoberto seria mais adequado), trouxe consigo novos e variados desafios. Mas, como foi visto, há algumas dicas (ou regras?) que, se seguidas, podem deixar as coisas mais fáceis.

Perfomance

Mobile First também é ótimo para resolver o problema de sites responsives onde vários conteúdos são carregados sem necessidade e sem nunca serem usados.

Pensando no dispositivo móvel primeiramente, você evolui o site de forma a sempre acompanhar a perfomance no seu estágio inicial, então pense em otimizar usando técnicas como font-face para ícones, carregar interações tradicionais via Javascript somente quando necessário, dentre várias outras formas de se economizar carregamento da página.

Para escrever esse artigo, recortei diversos trechos das pesquisas que fiz para saber como fazer o meu site. Espero que tenha gostado. Deixe o seu aplauso e até o próximo artigo.

--

--

--

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
douglasabnovato

douglasabnovato

Developer Frontend Web — Javascript | ReactJS https://linktr.ee/douglasabnovato

More from Medium

Make a tabs web component in Lit using slots and css

HTML — Part-4

Let’s Implement Different Login Form Design with Zenbu UI

Masai Collaboration Project- HomeDepot Clone