Il Web Design Hack Hall of Fame

Noi web designer siamo sempre stati un gruppo furbo. Se c'è un aspetto o una funzionalità specifica che dobbiamo ottenere, di solito possiamo mettere insieme una soluzione. Questo è il caso anche quando non esiste uno standard o uno strumento specifico che ci guidi. È qui che entra in gioco il concetto di hack di web design.

Gli hack sono metodi creativi, spesso indiretti per far sembrare o funzionare un sito web in un certo modo. A volte, hanno una connotazione negativa. Ad esempio, i layout basati su tabelle HTML sono stati giustamente derisi in quanto non accessibili agli screen reader. Ma non tutti gli hack sono cattivi.

In effetti, sono schierati per la necessità di spingere la busta di ciò che è possibile. Il web ha sempre avuto i suoi limiti e i designer hanno usato degli hack per cercare di aggirarli.

Detto questo, diamo un'occhiata ad alcuni degli hack di web design più utili e diffusi degli anni passati, ispirati da una discussione su Twitter con altri designer. Anche se non necessariamente tengono una candela rispetto agli standard che abbiamo oggi, ai loro tempi erano hall of famer.

Layout: tabelle HTML e float CSS

Le nostre prime selezioni andranno insieme in questa hall of fame virtuale. Sebbene i rispettivi picchi di utilizzo fossero diversi anni di distanza, sono stati essenzialmente utilizzati per ottenere la stessa cosa: layout a più colonne.

Tabelle HTML

Prima che CSS arrivasse sulla scena, le prime pagine web erano un affare a colonna singola. Non c'era riempimento o margini e nessun modo standard per posizionare il contenuto in colonne orizzontali. Cioè, fino a quando un'anima intraprendente non ha deciso di utilizzare i tavoli per questo scopo.

Naturalmente, le tabelle HTML dovevano contenere dati tabulari, non layout di pagina. Ma in realtà erano un modo efficace per portare a termine il lavoro fino all'arrivo dei CSS.

CSS galleggia

Le tabelle presentavano molti inconvenienti, inclusi i suddetti problemi di accessibilità. Inoltre, erano lenti da visualizzare nel browser. Quindi, quando sono stati introdotti i float CSS, è stato visto come un punto di svolta per i web designer.

I float non erano markup HTML, quindi erano più accessibili e potevano aumentare le prestazioni. All'improvviso, i layout multicolonna erano possibili tramite CSS e potevano adattarsi meglio a cose come le dimensioni dello schermo.

Tuttavia, i carri non ci hanno portato fino alla terra promessa. Se volevi che le colonne fossero di uguale altezza, doveva essere implementato un ulteriore hack clearfix.

Ognuno di questi elementi è anche molto utile oggi se utilizzato per lo scopo originariamente previsto. Ma per i layout, i loro giorni sono fortunatamente finiti.

Spaziatura degli elementi: spazi non di interruzione (   ) e Spacer.gif

I web designer orientati ai dettagli hanno spesso cercato modi per distanziare gli elementi fino al pixel esatto. Ancora una volta, non era così facile ai tempi. Pertanto, lo spazio unificatore ( ) e spacer.gif sono stati utilizzati per ottenere un maggiore controllo sulla spaziatura.

Spazio riservato (   )

Vuoi urtare un elemento orizzontalmente, ma senza centrarlo o allinearlo a destra? L'aggiunta di alcuni spazi unificatori farebbe il trucco.

Tuttavia, non era una scienza così esatta. La dimensione effettiva di ogni spazio dipendeva dalla famiglia di caratteri e dalla dimensione del carattere. E anche tenendo conto di queste differenze, questo hack potrebbe comunque avere un aspetto diverso a seconda del browser e del sistema operativo utilizzato da un visitatore.

Spacer.gif

Questo hack di spaziatura più accurato è arrivato creando un'immagine .GIF trasparente (spesso denominata spacer.gif ) e inserendola in una pagina. L'aspetto pulito era che, poiché si tratta di un'immagine trasparente, i designer potevano impostare l'altezza e la larghezza su qualsiasi quantità di pixel senza impatti negativi sull'aspetto o sulle prestazioni.

CSS ha reso obsoleti entrambi questi hack. Ma non lo sapresti che l'editor Gutenberg di WordPress ha un blocco Spacer che fa più o meno la stessa cosa? Questo dimostra solo che il bisogno c'è ancora.

Tipografia: testo basato su immagini

La necessità di questo era piuttosto semplice. Il primo Web era essenzialmente limitato ai caratteri installati sul sistema dell'utente. Ovviamente, i designer non avevano modo di conoscere tutti i font a cui gli utenti avevano accesso, oltre a quelli di base come Times New Roman, Georgia, Arial e Helvetica.

Con ciò è arrivata la decisione terribile di creare immagini piene di testo in Photoshop. Sebbene ciò consentisse l'uso praticamente di qualsiasi tipo di carattere, a scapito dell'accessibilità. Inoltre, l'utilizzo di un'immagine al posto di un tag di intestazione HTML ha anche eliminato la semantica della pagina, potenzialmente dannoso per la SEO.

Intestazioni permanenti e navigazione: frame

I frame HTML erano forse in anticipo sui tempi, poiché molti dei compiti per i quali li usavamo una volta vengono ora eseguiti tramite CSS e JavaScript.

Il concetto era abbastanza semplice. Ogni singolo "frame" all'interno di un layout era in realtà la propria pagina. Questo è stato un modo semplice per separare un'intestazione, un piè di pagina o una navigazione dal resto del contenuto del sito. Apportare una modifica alla navigazione, ad esempio, significava una singola modifica in un unico file. È simile a ciò che includeva lato server, solo con alcuni altri vantaggi di progettazione inclusi.

Il principale tra questi era la capacità di creare intestazioni e navigazione "appiccicose". Mentre l'utente scorreva il contenuto, poteva comunque navigare facilmente nel sito.

Questa tecnica serviva al suo scopo, ma era tutt'altro che ideale. Non era molto adattabile in termini di diverse dimensioni dello schermo e nemmeno per la SEO. C'erano anche alcuni problemi di sicurezza sul potenziale caricamento di un frame da un URL nefasto.

Ottimizzazione dell'immagine: immagini a fette

Nei giorni precedenti l'ampia disponibilità della banda larga, l'ottimizzazione delle immagini era fondamentale. Anche un'immagine da 50 kb potrebbe appesantire una pagina su una connessione lenta.

Il gigante del software Adobe ha fornito una soluzione interessante. Con il loro software ImageReady, i designer possono suddividere una singola immagine in un numero qualsiasi di pezzi più piccoli. Ogni singola fetta potrebbe quindi essere ottimizzata, rendendola teoricamente veloce da scaricare.

Ma non è tutto. Il software potrebbe quindi esportare le fette in una tabella HTML. Da lì, puoi copiare e incollare quell'HTML nella tua pagina.

Il problema con questa tecnica era duplice. Innanzitutto, il rendering del layout della tabella potrebbe richiedere più tempo, potenzialmente uccidendo qualsiasi ottimizzazione ottenuta. In secondo luogo, potrebbe essere un vero problema da mantenere. L'aggiunta di un elemento di navigazione a un'intestazione grafica di grandi dimensioni, ad esempio, potrebbe richiedere di ricominciare da capo con un insieme completamente nuovo di sezioni, richiedendo quindi modifiche al modello.

Sebbene l'ottimizzazione delle immagini sia ancora importante, la banda larga per fortuna ci consente un po' più di margine di manovra con file di grandi dimensioni. Anche così, le versioni moderne di Photoshop offrono ancora il taglio delle immagini e l'esportazione HTML.

Placare Internet Explorer: <!--[if IE]>

Ancora oggi, non è raro sentire i web designer (me compreso) maledire l'esistenza ostinata di Internet Explorer. La sua eredità sopravvive, in parte perché alcuni utenti semplicemente non la rinunceranno.

Per questo motivo, sembra che per sempre ci stiamo aggirando per le molte stranezze e limitazioni proprietarie di IE. Per molti anni, ciò ha incluso l'utilizzo di un commento condizionale per rilevare gli utenti di IE e fornire stili alternativi.

Era in qualche modo versatile in quanto potevi applicare gli stili a tutte le versioni di IE <!--[if IE]> o scegliere come target quelle che utilizzano versioni precedenti <!--[if lt IE 11]> . Potresti anche usarlo al contrario, cercando versioni maggiori o uguali a una versione specifica <!--[if gte IE 10]> .

Microsoft deve aver avuto una certa simpatia per i web designer, poiché ha consentito a questi commenti condizionali di funzionare in IE. Per fortuna, il loro nuovo browser Edge non richiede queste sciocchezze.

Hack di web design da ricordare

Gli hack nella nostra hall of fame non sono stati certamente gli unici utilizzati dai web designer. Ci sono un numero incalcolabile di soluzioni alternative che ci hanno aiutato a fare l'apparentemente impossibile. Ma ciò che distingue questo elenco è il loro utilizzo massiccio e, in alcuni casi, il supporto delle principali società.

E forse la cosa migliore che possiamo dire di loro è che hanno funzionato. Li abbiamo usati come mezzo per raggiungere un fine. Certo, potrebbero essere stati tenuti insieme dal nastro adesivo sfilacciato, ma ottenere quel design di alta mentalità da renderizzare effettivamente in un browser è stato un vero risultato.

Ancora meglio è che hanno contribuito a spianare la strada a ciò che il web è oggi. La maggior parte degli elementi di questo elenco sono stati sostituiti da standard HTML e CSS, a vantaggio di tutti.