Antes de implementarem um layout na prática, há algumas coisas básicas a serem esclarecidas. Primeiramente, vocês devem decidir qual tipo de layout querem usar. Em princípio, existem três possibilidades.
• Fixo
• Flexível
• Elástico
O CSS permite layouts com dimensões fixas ou flexíveis. Nos layouts fixos, geralmente trabalha-se com medidas em pixels. Por outro lado, os layouts flexíveis são baseados em valores percentuais. Ambas as variantes de layout têm suas vantagens e desvantagens.
Normalmente, layouts fixos são usados quando gráficos devem influenciar o layout. (Embora também haja exceções aqui com o uso de imagens de fundo CSS). Quando a posição precisa ser precisa dos elementos no layout, geralmente se opta pela posição fixa. Nesse tipo de layout, geralmente pelo menos a largura do layout é definida para um número específico de pixels. Essa largura geralmente visa resoluções de tela específicas.
A situação é diferente nos layouts flexíveis. Aqui, não se define uma largura fixa. O layout se adapta à largura da janela do navegador.
Para esses layouts, por exemplo, a largura é fornecida em valores percentuais. Se um usuário redimensionar a janela do navegador, o tamanho do layout também mudará.
Atualmente, graças às propriedades CSS modernas, existe outra variante de layout, chamada layout responsivo. Neste caso, o layout é ajustado de forma a parecer completamente diferente, por exemplo, em um smartphone comparado a um desktop. Aqui no PSD-Tutorials.de, foi utilizado um layout desse tipo. Quando a página é acessada em um desktop com uma janela de navegador "normal", a seguinte imagem é obtida.
Entretanto, se a janela for redimensionada, a disposição dos elementos na página web realmente se altera.
A criação de um layout responsivo demanda um esforço considerável. É necessário determinar o tamanho da tela do visitante e apresentar a ele um layout adequado. E esse layout adequado deve ser desenvolvido para diferentes tamanhos de tela. Por exemplo, um visitante que acessa seu site com um monitor grande verá um layout de três colunas. Por outro lado, se outro visitante acessar seu site com um smartphone, ele verá um layout de uma coluna.
**Vantagens e desvantagens das variantes**
Antes de implementarem um layout, vocês devem decidir qual das formas de layout mencionadas desejam usar. Gostaria de mostrar brevemente quais são as vantagens e desvantagens dos layouts fixos. Design patterns podem ser implementados de forma mais simples aqui. Se basearem em resoluções padrão faz com que dificilmente existam problemas de exibição do site. Os layouts são fáceis de explicar. (Essa vantagem é útil quando vocês, como desenvolvedores web, precisam explicar um layout a um cliente).
No entanto, os layouts fixos também possuem desvantagens. Devido às dimensões fixas, eles são inflexíveis, ou seja, não se adaptam a telas muito pequenas ou grandes. Muitas vezes há muito espaço desperdiçado. Eles apresentam algumas restrições em relação à acessibilidade.
Os layouts flexíveis também têm pontos fortes e fracos. Primeiro, as vantagens:
Os layouts se adaptam automaticamente ao tamanho da janela do navegador. Assim, os visitantes têm uma grande influência na exibição do site.
Mas também há desvantagens:
Vocês como desenvolvedores podem ter dificuldade em controlar os resultados. As diretrizes de layout são implementadas apenas parcialmente. O conteúdo da página deve ser ajustado de forma complexa. Em telas grandes, a exibição de textos curtos pode ficar "ruim", pois muitas vezes são exibidos em apenas uma linha. (No entanto, o CSS oferece propriedades adequadas para isso, como min-width).
Uma outra forma de layout representa um meio termo entre layouts fixos e flexíveis, os chamados layouts elásticos. A principal característica deles é a unidade de medida em. Recentemente, também a unidade de medida rem está se tornando mais comum. Ao contrário de em, rem é sempre baseado no elemento raiz, não no elemento pai.
Nesses layouts, a largura e a altura são flexíveis. O design da página escala proporcionalmente ao tamanho da janela do navegador. Essa forma de design é provavelmente a mais complexa na prática. Isso ocorre porque é necessário saber com muita precisão como os elementos vão se comportar em uma janela do navegador em mudança. Os layouts elásticos são usados principalmente em sites que oferecem muitas fotos e vídeos.
**Vantagens dos layouts elásticos:**
O espaço disponível é utilizado de forma ideal. O conteúdo é sempre exibido proporcionalmente o maior possível.
No entanto, os layouts elásticos também apresentam desvantagens:
O design desses layouts é muito complexo. A implementação não é de forma alguma fácil.
Vocês devem então decidir qual das variantes mencionadas desejam usar. Se estiverem no começo do desenvolvimento HTML/CSS, eu recomendaria um layout fixo. Por outro lado, se já tiverem conhecimentos avançados em desenvolvimento web, é melhor trabalhar diretamente com layouts responsivos. Aqui estão do lado certo, independentemente do dispositivo pelo qual o site seja acessado.
