 |
| Um guia sobre tipos de layout em web design |
Um dos aspectos mais variáveis do web design é a maneira como abordamos a largura e a altura em termos de medidas e flexibilidade. Por muitos anos, alternamos entre os benefícios e as armadilhas do uso de medidas fixas, elásticas e líquidas em uma busca para fornecer experiências de visualização ideais em situações altamente variadas, enquanto equilibramos nossa necessidade de controlar as coisas em nossas páginas da web. Mas, como Bob Dylan proclamou há muito tempo, "Os tempos, eles estão mudando", e com essas mudanças vêm uma variedade de novas maneiras de organizar as páginas do seu site e um panorama ainda mais variável de métodos para visualizar sites .
Neste artigo, examinaremos os tipos de layout da web - antigo, novo e futuro. Cada um desses designs de layout de página aprimorará facilmente a experiência do usuário do site . Exploraremos o assunto no contexto de que os sites estão sendo vistos de diversas maneiras, como por meio de telefones celulares, netbooks e dispositivos pessoais com tela de toque, como o iPad.
Sobre suas opções
Vamos definir nossos objetivos para esta exploração de tipos de layout:
Devemos examinar a variedade de opções que existem
Para cada tipo de layout, tentarei sugerir algumas situações em que eles são mais bem usados em
Os prós e contras de um tipo de layout em comparação com outros
Discutiremos 10 tipos de idéias de layout da web.Sobre suas opçõesEmbora a perfeição do pixel seja uma quimera, há mais nos layouts do que fixos, líquidos ou elásticos! A principal lição a ser aprendida com essas escolhas é pensar cuidadosamente sobre por que uma opção é adequada para uma situação específica e como sua escolha afetará seu público.
Vamos aprofundar, começando com layouts absolutos.
Layouts absolutos
Um dos métodos de medição menos comumente usados em web design é a medição absoluta (ou seja, polegadas, cm, mm e picas). Unidades absolutas e posicionamento são tradicionalmente encontrados na mídia impressa, que nativamente usa essas unidades de medida.
A conversão do formato de impressão para web pode ser vista em softwares de processamento de texto como o Microsoft Word, que ainda usa essas convenções ao formatar o texto e dimensionar as dimensões de um documento para torná-lo o mais próximo possível da impressão em papel. Layouts absolutos têm uso limitado em web designs.Layouts absolutosUm uso para layouts absolutos na web é para documentos PDF em que o conteúdo permanece estático.
Claro, só porque não é popular, não significa que não tenha seu lugar no bando de opções do web designer. Se você utiliza folhas de estilo para impressão - sim, as pessoas ainda imprimem páginas da web - as medidas absolutas de cm, mm, polegadas e pt podem ajudá-lo a preparar um layout de página para impressoras com mais precisão.
esquema relativo
O posicionamento relativo e os layouts se ajustam em tamanho, dependendo do tamanho da janela de visualização do navegador do usuário.Layouts absolutosA área dentro da borda vermelha é a janela de visualização do navegador. Você pode alterar o tamanho da janela de visualização redimensionando a janela.
Os tamanhos de monitor diferentes têm vários tamanhos máximos para a porta de visualização. Normalmente, esse tipo de layout depende de tudo funcionando a 100% da largura, seja uma tela pequena (como um netbook) ou um monitor widescreen de 24 polegadas. Isso significa que o layout será dimensionado de acordo com a situação do visualizador.
Layouts absolutosPoucos sites usam largura de 100%, mas funciona.
Layout Fixo
Normalmente considerado como um dos métodos menos flexíveis de layout de um web design, o uso de medições baseadas em pixels tem quase uma ressonância digital associada que se transfere para a indústria de impressão, em que o meio depende de medições fixas / estáticas. Esta unidade de medida é precisa e deixa pouca suposição sobre como um web design aparecerá em diferentes navegadores da web e se tornou excepcionalmente popular entre os sites que favorecem o controle e a previsibilidade em vez de otimizar o layout para a situação de visualização particular do público.Layouts absolutosUm layout de largura fixa é usado em Seis Revisões.
Todos nós sabemos que podem surgir problemas por ter que rolar em todas as direções, e a medição fixa de um layout baseado em px tem esse problema geral de espadas. Enquanto muitas pessoas procuram algum tipo de largura ideal para garantir a compatibilidade máxima, vale a pena mencionar que se você usar muitos elementos que exigem regras de layout fixas, como imagens de fundo não repetidas ou bordas com outros elementos não relativos, layouts de medição fixos podem fazer bem o trabalho e agir como a melhor solução geral.
Layout Elástico
Um dos métodos mais usados para definir o conteúdo de um projeto é usar a unidade de medida relativa em. Comumente referido como um design de layout elástico (devido à forma como ele se flexiona aumentando e diminuindo para atender às necessidades do conteúdo), ele mostrou uma grande apreciação na comunidade de design da web devido à sua capacidade de dimensionar o conteúdo, tamanhos de texto, e tal. Ao contrário das unidades fixas de medidas em que os elementos de unidade absoluta, como imagens, são mais adequados (devido à manutenção sem distorção), os layouts elásticos funcionam melhor quando o conteúdo flexível (como blocos de texto) ocupa o assento dianteiro.
Layouts absolutosPopular por sua natureza elástica, as medidas em são recomendadas para tamanhos de fonte. De todos os métodos listados, o tipo de layout elástico é o mais subserviente ao seu conteúdo, pois dá ao próprio conteúdo a posição de decisão sobre como o layout deve ser dimensionado. Diminuir o tamanho do texto nesse tipo de design reduzirá a largura ou a altura e aumentar o texto terá o efeito oposto.
Este atributo exclusivo permite que o layout seja redimensionado com base no conteúdo, e não nas necessidades do layout. Usar uma solução elástica é perfeito se você deseja que o layout seja determinado pelo conteúdo, mas pode haver problemas se o texto for dimensionado além da janela de visualização (causando rolagem horizontal indesejada).
Layout em escala
Um dos métodos mais recentes em CSS3 permite a manipulação da janela de visualização disponível em torno de certas orientações do dispositivo (ou seja, retrato e paisagem). Dependendo da forma como o dispositivo é segurado, o design tem o potencial de alterar seu layout visual (alterando a quantidade de espaço dada ao próprio conteúdo).
Ao contrário dos outros, este tipo de layout não depende de unidades de medida, mas sim de um tipo de layout específico. No entanto, essa noção não deve ser subestimada como forma de lidar com colunas complexas em telas pequenas.Layouts absolutos10 anos atrás, não teríamos considerado a orientação de uma tela.
Como os tempos mudaram! Os layouts em escala realmente brilham no mercado de smartphones, onde a tela pode ser girada ou movida com frequência (como o iPhone, por exemplo).Layout em escalaO iPhone ajusta a orientação de seus sites na hora.
Com esse espaço limitado disponível em dispositivos móveis de mão, você não pode apenas maximizar a maneira como seus pixels são alocados, mas também pode permitir que as pessoas escolham o método de sua preferência para visualizar as informações. Cada pessoa usará seu dispositivo móvel habilitado para web de uma maneira diferente e, ao permitir que seu design relacione seu conteúdo de uma forma transformadora dependendo da orientação, você pode maximizar a usabilidade de seu conteúdo.
Layout de líquido (ou fluido)
O método mais descontraído de fornecer um design de expansão ou contração dinamicamente usa a medida de unidade de porcentagem (%) sempre popular. Esse tipo de layout ganhou popularidade em massa porque é a forma definitiva de permitir o oposto total de um layout fixo, onde o conteúdo simplesmente ocupará qualquer espaço disponível.Layouts absolutosAs porcentagens requerem um cálculo cuidadoso, pois você não pode fornecer mais de 100% sem problemas!
As garantias limitadas que você mantém na janela de visualização que está sendo usada vão além das resoluções de tela (imagine seu site em uma tela de 6 polegadas versus uma tela de 100 polegadas, mesmo com apenas 80% de largura). Embora nem seja preciso dizer que um layout líquido é útil em quase todas as situações baseadas na web porque ele ajusta sua largura dependendo do tamanho da janela de visualização do usuário - então definitivamente vale a pena dar uma olhada.
Layout Equacionado
O próximo método de layout de conteúdo que veremos é o layout equacionado, que faz uso de uma nova função CSS chamada calc(consulte as especificações de cálculo do W3C ).Layouts absolutosQuando esse recurso de medição atingir os navegadores, um novo nível de controle existirá. Enquanto os layouts anteriores que cobrimos dependem de larguras ou alturas específicas fornecidas, um layout equacionado permite que você misture um valor fixo e relativo usando um cálculo como width: calc(50% - 200px).
Você já passou por uma situação em que desejou poder completar 100%, mas também levar em conta coisas como divs com bordas e elementos que têm larguras fixas (como uma imagem)? Se você for como eu, certamente é algo que já passou pela sua cabeça. A calcfunção CSS3, que ainda não foi amplamente adotada (mas faz parte das especificações CSS3), pode ser exatamente o que você está procurando.
Embora a função ainda não seja amplamente suportada pelos navegadores da web existentes, esta pode ser uma opção futura para a construção de layouts com uma camada adicional de flexibilidade.
Layout Fluido-Mín / Máx
Um problema comum que temos como designers é que sempre que a quantidade de espaço que temos se torna muito larga ou muito estreita (ou muito alta ou muito curta), o conteúdo relativamente medido e flexível que temos fica muito diluído ou muito comprimido (o que são más notícias). Usando larguras mínimas e máximas (ou alturas), você pode definir limites em quanto o design pode ser dimensionado para que você ainda possa ter flexibilidade - mas apenas até certo ponto. Em vez de abranger a janela de visualização como um layout líquido, esse tipo de layout flui apenas até onde é dito ('atta boy).
Layouts absolutosUm layout fluido / "gelatina" será dimensionado apenas para uma determinada largura ou altura fixa. Se há algo que causa problemas com layouts, somos nós fazendo suposições sobre a quantidade de espaço que teremos disponível para nossos elementos de design. Os benefícios da CSS min-width, max-width, min-heighte max-heightpropriedades são mais amplamente observado quando você quiser que o seu layout a ser confinado dentro de determinadas dimensões (como dentro de um projeto de largura fixa), mas não querem sofrer a ira de rolagem horizontal.
Por exemplo, se você quiser que sua largura de escala seja 100% para telas pequenas, mas apenas até, digamos, 1.500 px para que seu layout não fique muito largo para telas maiores, você pode usar um max-width:1500px. Como esse método de layout de uma página da web fornece uma rede de segurança na qual os navegadores podem confiar (com base nos valores mínimo e máximo fornecidos), você pode dar ao seu trabalho fixo um pouco de flexibilidade adicional.
Layout Condicional
Com o aumento de dispositivos como o iPhone, surgiu a necessidade de uma maneira de alterar os designs da web além dos layouts convencionais para garantir que os usuários de dispositivos móveis possam ter uma experiência otimizada. A capacidade de servir uma folha de estilo única com base no dispositivo ou largura e altura da janela de visualização (por meio de consultas de mídia do CSS3 ) dá origem a uma maneira ainda mais flexível e amigável de representar o conteúdo do seu site. Esse tipo de layout é algo que eu gostaria de chamar de “layout condicional”.Layout CondicionalO design acima usa consultas de mídia CSS3 para reduzir o design conforme necessário.
De todos os métodos de apresentação de informações que apareceram recentemente, este é de longe o mais promissor (assim que os problemas de compatibilidade do navegador forem resolvidos). A maioria dos designs de sites depende de uma única folha de estilo. O uso de consultas de mídia CSS3 (especialmente com experiências móveis e de desktop) pode trazer layouts condicionais para melhor atender ao agente do usuário.
A desvantagem disso é que significa que você precisará desenvolver e manter folhas de estilo para dispositivos específicos - da mesma forma que você, no passado, mantinha folhas de estilo específicas do IE.
Layout Híbrido
Claro, enquanto mencionamos todos esses tipos de layout, não podemos esquecer de mencionar o método de layout mais popular de todos - o layout híbrido praticamente se destaca pelo seu nome, pois o design acaba usando uma mistura de vários tipos de layout. Isso inclui misturar e combinar várias unidades e conceitos para garantir que o design da web se adapte à janela de visualização do navegador apenas quando ele precisa e ainda é capaz de reter um certo nível de controle sobre as partes de um site que precisam de estruturas mais fixas. Embora exija que você seja mais cuidadoso com seu trabalho, é possivelmente a maneira mais inteligente de projetar e desenvolver.
Layout HíbridoA maioria dos sites não se limita a um tipo de medição, eles hibridizam com base nas necessidades. A maioria dos sites usa um layout híbrido porque certas unidades de medida são úteis para certas situações. Embora muitas pessoas ainda se apeguem à ideia de que existe um método de layout perfeito esperando para ser encontrado, acho que o híbrido vai superar os problemas situacionais ao combinar o melhor de todos os mundos.
Talvez você possa acabar com um layout absoluto em sua folha de estilo de impressão, e talvez você possa ter larguras fixas usando um corpo líquido com conteúdo elástico e um controle de fluido para as bordas externas com suporte escalonado e flexível para certos dispositivos - as combinações são abundantes!
A figura maior
Obviamente, há muitas opções a serem consideradas ao fazer o layout de suas páginas da web e, portanto, faz sentido - tanto pragmaticamente quanto teoricamente - prestar muita atenção aos detalhes e ao escopo de qualquer projeto de design que você empreenda. O tipo de layout que você utiliza para produzir seu site é algo que merece tanta atenção quanto as fontes que você usa ou o tema de cores que você montou . Também é importante destacar que não existe uma maneira perfeita de lidar com todas as situações e, portanto, não existe um tipo que seja universalmente o melhor para todas as situações.
A figura maiorNão há maneira certa ou errada de projetar, mas uma reflexão cuidadosa pode melhorar algumas situações. O design é uma das habilidades mais fundamentais que qualquer profissional da web deve dominar. A forma como a Internet está sendo consumida está evoluindo rapidamente, com grandes disparidades tanto nos dispositivos que empregamos quanto nas ferramentas que utilizamos, e é por isso que o design da web é importante .
Há muito mais para se enfrentar do que boa usabilidade , acessibilidade , cópia para a web , contraste de cores e assim por diante. Um bom site deve atender a um número cada vez maior de necessidades e, portanto, a busca pelo layout perfeito se tornou uma espécie de busca do Santo Graal para web designers. Enquanto os tempos estão mudando (assim como as situações), escolher o layout certo agora deve ser feito de forma metódica.
Conteúdo Relacionado
O sistema de grade 960 mais fácil
Uma Breve Análise dos Layouts Baseados em Grade em Web Design
The Brads - Alinhamento no Design
Categorias relacionadas : Web Design e Desenvolvimento Web
