O Hall da Fama do Web Design Hack

Nós web designers sempre fomos um grupo astuto. Se houver uma aparência ou funcionalidade específica que precisamos alcançar, geralmente podemos reunir uma solução. Esse é o caso mesmo quando não há um padrão ou ferramenta específica para nos guiar. É aqui que entra o conceito de hack de web design.

Hacks são métodos criativos, muitas vezes indiretos, para fazer um site parecer ou funcionar de uma determinada maneira. Às vezes, eles carregam uma conotação negativa. Por exemplo, layouts baseados em tabelas HTML foram legitimamente ridicularizados por não serem acessíveis aos leitores de tela. Mas nem todos os hacks são ruins.

Na verdade, eles são implantados a partir da necessidade de empurrar o envelope do que é possível. A web sempre teve suas limitações e os designers usaram hacks para tentar contorná-las.

Com isso, vamos dar uma olhada em alguns dos hacks de web design mais úteis e predominantes de anos passados, inspirados por uma discussão no Twitter com colegas designers. Embora eles não tenham necessariamente uma vela para os padrões que temos hoje, eles eram um hall da fama em seu próprio tempo.

Layouts: tabelas HTML e flutuadores CSS

Nossas primeiras seleções entrarão juntas neste hall da fama virtual. Embora seus respectivos picos de uso estivessem separados por anos, eles eram essencialmente usados ​​para realizar a mesma coisa: layouts de várias colunas.

Tabelas HTML

Antes do CSS entrar em cena, as primeiras páginas da web eram um assunto de coluna única. Não havia preenchimento ou margens e nenhuma maneira padrão de colocar o conteúdo em colunas horizontais. Ou seja, até que alguma alma empreendedora resolveu usar mesas para esse fim.

É claro que as tabelas HTML foram feitas para conter dados tabulares – não layouts de página. Mas eles eram, na verdade, uma maneira eficaz de fazer o trabalho até que o CSS aparecesse.

Flutuantes CSS

As tabelas tinham muitas desvantagens – os problemas de acessibilidade mencionados acima incluídos. Eles também eram lentos para renderizar no navegador. Então, quando os floats CSS foram introduzidos, eles foram vistos como um divisor de águas para os web designers.

Floats não eram marcação HTML e, portanto, eram mais acessíveis e podiam aumentar o desempenho. De repente, layouts de várias colunas eram possíveis através do CSS e podiam se adaptar melhor a coisas como o tamanho da tela.

No entanto, os carros alegóricos não nos levaram até a terra prometida. Se você quisesse que as colunas tivessem a mesma altura, um hack de clearfix adicional teria que ser implementado.

Cada um desses itens também é muito útil hoje quando usado para o propósito original. Mas para layouts, seus dias felizmente terminaram.

Espaçamento entre elementos: espaços sem quebra (   ) e espaçador.gif

Web designers orientados a detalhes muitas vezes procuraram maneiras de espaçar os elementos até o pixel exato. Novamente, isso não era tão fácil no passado. Assim, o espaço ininterrupto ( ) e spacer.gif foram usados ​​para obter mais controle sobre o espaçamento.

Espaço ininterrupto (   )

Quer bater um elemento horizontalmente, mas sem centralizá-lo ou alinhá-lo à direita? Adicionar alguns espaços sem quebra faria o truque.

No entanto, não era uma ciência tão exata. O tamanho real de cada espaço dependia da família da fonte e do tamanho da fonte. E mesmo levando em conta essas diferenças, esse hack ainda pode parecer diferente dependendo do navegador e do sistema operacional que um visitante estava usando.

Espaçador.gif

Esse hack de espaçamento mais preciso veio através da criação de uma imagem .GIF transparente (geralmente chamada de spacer.gif ) e da sua colocação em uma página. O aspecto interessante foi que, por ser uma imagem transparente, os designers podiam definir a altura e a largura para qualquer quantidade de pixels sem impactos negativos na aparência ou no desempenho.

CSS tornou esses dois hacks obsoletos. Mas você não sabe que o editor WordPress Gutenberg tem um bloco Spacer que faz praticamente a mesma coisa? Isso só mostra que a necessidade ainda existe.

Tipografia: Texto Baseado em Imagem

A necessidade para este era bastante simples. A web inicial era essencialmente limitada a fontes instaladas no sistema do usuário. É claro que os designers não tinham como saber todas as fontes às quais os usuários tinham acesso – além do básico, como Times New Roman, Georgia, Arial e Helvetica.

Com isso veio a terrível decisão de criar imagens cheias de texto no Photoshop. Embora isso permitisse o uso de praticamente qualquer fonte, isso prejudicava a acessibilidade. Além disso, usar uma imagem no lugar de uma tag de cabeçalho HTML também desequilibrou a semântica da página – potencialmente prejudicial ao SEO.

Cabeçalhos fixos e navegação: quadros

Os quadros HTML talvez estivessem à frente de seu tempo, já que muitas das tarefas para as quais os usávamos agora são feitas por meio de CSS e JavaScript.

O conceito era bastante simples. Cada “frame” individual dentro de um layout era na verdade sua própria página. Essa foi uma maneira fácil de separar um cabeçalho, rodapé ou navegação do restante do conteúdo do site. Fazer uma alteração na navegação, por exemplo, significava uma única alteração em um único arquivo. É semelhante ao que as inclusões do lado do servidor faziam, apenas com alguns outros benefícios de design incluídos.

O principal deles foi a capacidade de criar cabeçalhos e navegação “adesivos”. À medida que o usuário percorria o conteúdo, ele ainda podia navegar facilmente pelo site.

Essa técnica serviu ao seu propósito, mas estava longe de ser ideal. Não era muito adaptável em termos de diferentes tamanhos de tela e também não era tão bom para SEO. Houve também algumas preocupações de segurança sobre o carregamento potencial de um quadro de um URL nefasto.

Otimização de imagem: imagens fatiadas

Nos dias anteriores à ampla disponibilidade de banda larga, a otimização da imagem era vital. Mesmo uma imagem de 50kb pode sobrecarregar uma página em uma conexão lenta.

A gigante do software Adobe forneceu uma solução interessante. Com o software ImageReady, os designers podem dividir uma única imagem em qualquer número de partes menores. Cada fatia individual poderia então ser otimizada, teoricamente tornando-os rápidos para download.

Mas isso não é tudo. O software poderia então exportar as fatias para uma tabela HTML. A partir daí, você pode copiar e colar esse HTML em sua página.

O problema com esta técnica era duplo. Primeiro, o layout da tabela pode levar mais tempo para renderizar – potencialmente matando qualquer otimização que você tenha alcançado. Em segundo lugar, pode ser uma dor real para manter. Adicionar um item de navegação a um gráfico de cabeçalho grande, por exemplo, pode exigir que você comece novamente com um novo conjunto de fatias – exigindo, portanto, alterações no modelo.

Embora a otimização de imagem ainda seja importante, a banda larga, felizmente, nos permite um pouco mais de liberdade com arquivos grandes. Mesmo assim, as versões modernas do Photoshop ainda oferecem fatiamento de imagens e exportação de HTML.

Colocando o Internet Explorer: <!--[if IE]>

Até hoje, ainda não é incomum ouvir web designers (inclusive eu) amaldiçoar a existência obstinada do Internet Explorer. Seu legado continua vivo, em parte porque alguns usuários simplesmente não o abandonam.

Por causa disso, parece que estamos sempre invadindo as muitas peculiaridades e limitações proprietárias do IE. Por muitos anos, isso incluiu o uso de um comentário condicional para detectar usuários do IE e fornecer estilos alternativos.

Era um pouco versátil, pois você podia aplicar estilos a todas as versões do IE <!--[if IE]> , ou direcionar aqueles que usam versões mais antigas <!--[if lt IE 11]> . Você também pode usá-lo ao contrário, procurando por versões maiores ou iguais a uma versão específica <!--[if gte IE 10]> .

A Microsoft deve ter tido alguma simpatia pelos web designers, pois permitiu que esses comentários condicionais funcionassem no IE. Felizmente, o novo navegador Edge não exige esse absurdo.

Hacks de web design para lembrar

Os hacks do nosso hall da fama certamente não foram os únicos usados ​​pelos web designers. Há um número incontável de soluções alternativas que nos ajudaram a fazer o aparentemente impossível. Mas o que diferencia essa lista é seu uso massivo e, em alguns casos, o suporte de grandes corporações.

E talvez a melhor coisa que poderíamos dizer sobre eles é que eles funcionaram. Nós os usamos como um meio para um fim. Claro, eles podem ter sido mantidos juntos por fita adesiva desgastada, mas conseguir que esse design de mente elevada fosse realmente renderizado em um navegador parecia uma verdadeira conquista.

Melhor ainda é que eles ajudaram a pavimentar o caminho para o que a web é hoje. A maioria dos itens desta lista foi substituída por padrões HTML e CSS, que beneficiam a todos.