9 princípios de design de web responsivo
Projetar interfaces apenas para desktop e mobile é passado, à medida que mais e mais dispositivos estão surgindo. Portanto, vamos esclarecer alguns princípios básicos de Design Responsivo para abraçar de vez o Design Líquido, em vez de combatê-lo.
Design Responsivo vs Adaptável
Pode parecer o mesmo, mas não é. Ambas as abordagens se complementam, por isso não há maneira certa ou errada de fazer. Deixe o conteúdo decidir (se você quer entender melhor as diferenças entre Design Responsivo, Adaptável e Líquido, leia esse post sobre o assunto).
O Fluxo
Como os tamanhos das telas tornam-se menores, o conteúdo começa a ocupar mais espaço vertical e alguma coisa vai ser empurrada para baixo, isso é chamado de "o fluxo". Pode ser complicado de entender se você está acostumado a projetar com pixels e pontos, mas faz todo o sentido quando você se acostumar com isso (se você quer entender melhor como trabalhar com porcentagens, leia esse post sobre o assunto).
Unidades Relativas
A tela pode ser um desktop, tela do celular ou outra qualquer. A densidade de pixels também podem variar, por isso precisamos de unidades que são flexíveis e trabalham em todos os lugares. É aí que entra as unidades relativas, como as porcentagens. Assim, fazer algo 50% maior significa que esta irá ter metade da tela (ou da janela de exibição, que é o tamanho da janela de navegador aberto).
Breakpoints
Os breakpoints permitem que o layout mude em pontos pré-definidos, ou seja, ele pode ter três colunas em um desktop, mas apenas uma coluna em um dispositivo móvel. A maioria das propriedades CSS pode ser alterada a partir de um breakpoint para o outro. Normalmente, onde você define um breakpoint vai depender do seu conteúdo. Se uma frase está quebrada pode ser necessário adicionar um breakpoint. Mas tome cuidado cuidado porque quando usados em excesso ele pode se tornar confuso e é difícil entender o que está influenciando o quêno código.
Max e Min-Width
Às vezes, é ótimo que o conteúdo ocupe toda a largura de uma tela, como em um dispositivo móvel, mas com o mesmo conteúdo em uma tela de TV, por exemplo, faz menos sentido. É por isso que os valores Max. e Mín. ajudam nessa hora. Por exemplo, ter uma largura de 100% ( width: 100%;) e uma largura máxima de 1000px (max-width: 1000px;) significa que o conteúdo vai encher a tela, mas não passar de 1000px. Ou seja, em dispositivos com resolução menor que 1000px o conteúdo irá preencher toda a tela, quando a resolução de tela passar desse valor, o conteúdo terá uma largura fixa de 1000px.
Objetos Filhos
Lembra a posição relativa ( position: relative;)? Ter um monte de elementos soltos no seu código, um dependo do outro, se torna difícil de controlar, portanto, elementos agrupados em um único recipiente (wrap) mantém tudo mais compreensível, limpo e arrumado. Este é o lugar onde as unidades estáticas como pixels podem ajudar. Elas são úteis para o conteúdo que você não quer que escale conforme o tamanho da tela, como logos e botões.
Mobile ou Desktop First
Tecnicamente não há muita diferença se um projeto é iniciado a partir de uma tela menor (mobile first) ou uma maior (desktop first). No entanto, se você começa com mobile first terá mais limitações e terá que tomar mais decisões. Algumas vezes as pessoas começam a partir das duas opções de uma só vez, então realmente, veja o que funciona melhor para você e para o seu conteúdo.
WebFonts vs Fontes do Sistema
Quer ter um visual legal com uma Futura ou Didot em seu site? Use WebFonts! Embora eles pareçam deslumbrantes, lembre-se que cada estilo (light, normal, bold, ...) e família de fonte será baixada e quanto mais fontes e estilos você tiver, mais tempo vai demorar para carregar sua página (algumas fontes podem ser bem pesadas). Fontes do Sistema, por outro lado, são muito mais rápidas de carregar ( exceto quando o usuário não tem aquela fonte localmente, então ele vai acabar vendo uma fonte do sistema).
Imagens Bitmap vs Vetores
Será que o seu ícone tem muitos detalhes e alguns efeitos aplicados? Se sim, utilize um bitmap. Se não, considere o uso de uma imagem vetorial. Para bitmaps use um JPG., PNG. ou GIF., para vetores a melhor escolha seria um SVG ou uma fonte ícone. Cada um tem algumas vantagens e algumas desvantagens. Se escolher usar uma imagem, tenha em mente o seu tamanho (nenhuma imagem deve ir ao ar sem otimização). Vetores, por outro lado, muitas vezes tem um peso menor, mas alguns navegadores mais antigos não suportam o formato SVG. Além disso, se ele tem muitas curvas, pode acabar se tornando mais pesado do que um bitmap, então escolha sabiamente.
Veja mais conteúdos como esses gratuitamente com mais qualidade em meu blog acesse: https://rf.curto.dev/blog-tabnews-ads