Die Hall of Fame des Webdesign-Hacks

Wir Webdesigner waren schon immer ein schlauer Haufen. Wenn wir ein bestimmtes Aussehen oder eine bestimmte Funktionalität erreichen müssen, können wir normalerweise eine Lösung zusammenstellen. Das ist auch dann der Fall, wenn es keinen bestimmten Standard oder kein bestimmtes Tool gibt, an dem wir uns orientieren können. Hier kommt das Konzept des Webdesign-Hacks ins Spiel.

Hacks sind kreative, oft umständliche Methoden, um eine Website auf eine bestimmte Weise aussehen oder funktionieren zu lassen. Manchmal haben sie eine negative Konnotation. Beispielsweise wurden tabellenbasierte HTML-Layouts zu Recht als nicht zugänglich für Screenreader verspottet. Aber nicht alle Hacks sind schlecht.

Tatsächlich werden sie aus der Notwendigkeit heraus eingesetzt, an die Grenzen des Möglichen zu gehen. Das Web hatte schon immer seine Grenzen und Designer haben versucht, sie mit Hacks zu umgehen.

Lassen Sie uns einen Blick auf einige der nützlichsten und am weitesten verbreiteten Webdesign-Hacks vergangener Jahre werfen, inspiriert von einer Twitter-Diskussion mit anderen Designern. Auch wenn sie den heutigen Standards nicht unbedingt das Wasser reichen, waren sie zu ihrer Zeit eine Ruhmeshalle.

Layouts: HTML-Tabellen und CSS-Floats

Unsere erste Auswahl wird gemeinsam in diese virtuelle Hall of Fame aufgenommen. Obwohl ihre jeweilige Spitzennutzung Jahre auseinander lag, wurden sie im Wesentlichen verwendet, um dasselbe zu erreichen: mehrspaltige Layouts.

HTML-Tabellen

Bevor CSS auf den Markt kam, waren frühe Webseiten eine einspaltige Angelegenheit. Es gab keine Auffüllung oder Ränder und keine Standardmethode zum Platzieren von Inhalten in horizontalen Spalten. Das heißt, bis eine unternehmungslustige Seele beschloss, Tabellen für diesen Zweck zu verwenden.

Natürlich sollten HTML-Tabellen tabellarische Daten enthalten – nicht Seitenlayouts. Aber sie waren tatsächlich ein effektiver Weg, um die Arbeit zu erledigen, bis CSS auftauchte.

CSS-Floats

Tabellen hatten viele Nachteile – einschließlich der oben genannten Barrierefreiheitsprobleme. Sie wurden auch im Browser langsam gerendert. Als CSS-Floats eingeführt wurden, wurde es als Wendepunkt für Webdesigner angesehen.

Floats waren kein HTML-Markup, daher waren sie besser zugänglich und konnten die Leistung steigern. Plötzlich waren mehrspaltige Layouts per CSS möglich und konnten sich besser an Dinge wie die Bildschirmgröße anpassen.

Die Schwimmer brachten uns jedoch nicht bis ins gelobte Land. Wenn Sie wollten, dass die Spalten gleich hoch sind, musste ein zusätzlicher Clearfix-Hack implementiert werden.

Jeder dieser Gegenstände ist auch heute noch sehr nützlich, wenn er für den ursprünglich beabsichtigten Zweck verwendet wird. Aber für Layouts sind ihre Tage zum Glück vorbei.

Elementabstand: Geschützte Leerzeichen (   ) und Spacer.gif

Detailorientierte Webdesigner haben oft nach Möglichkeiten gesucht, Elemente pixelgenau zu platzieren. Auch das war damals nicht so einfach. Daher wurden das geschützte Leerzeichen ( ) und spacer.gif verwendet, um mehr Kontrolle über die Abstände zu erhalten.

Geschütztes Leerzeichen (   )

Möchten Sie ein Element horizontal umstoßen, aber ohne es zu zentrieren oder rechts auszurichten? Das Hinzufügen einiger geschützter Leerzeichen würde ausreichen.

Es war jedoch keine so exakte Wissenschaft. Die tatsächliche Größe jedes Leerzeichens hing von der Schriftfamilie und der Schriftgröße ab. Und selbst wenn man diese Unterschiede berücksichtigt, könnte dieser Hack immer noch anders aussehen, je nachdem, welchen Browser und welches Betriebssystem ein Besucher verwendet.

Spacer.gif

Dieser genauere Spacing-Hack entstand durch das Erstellen eines transparenten .GIF-Bildes (oft als spacer.gif bezeichnet ) und dessen Platzierung auf einer Seite. Der nette Aspekt war, dass Designer, da es sich um ein transparentes Bild handelt, die Höhe und Breite auf eine beliebige Pixelzahl einstellen konnten, ohne dass das Aussehen oder die Leistung beeinträchtigt wurden.

CSS hat diese beiden Hacks obsolet gemacht. Aber wüssten Sie nicht, dass der WordPress Gutenberg-Editor einen Spacer-Block hat, der so ziemlich dasselbe macht? Es zeigt nur, dass der Bedarf noch da ist.

Typografie: Bildbasierter Text

Die Notwendigkeit für dieses war ziemlich einfach. Das frühe Web war im Wesentlichen auf Schriftarten beschränkt, die auf dem System des Benutzers installiert waren. Natürlich hatten Designer keine Möglichkeit, alle Schriftarten zu kennen, auf die Benutzer Zugriff hatten – abgesehen von den grundlegenden Schriftarten wie Times New Roman, Georgia, Arial und Helvetica.

Damit kam die irgendwie schreckliche Entscheidung, Bilder voller Text in Photoshop zu erstellen. Dies ermöglichte zwar die Verwendung praktisch aller Schriftarten, ging jedoch zu Lasten der Zugänglichkeit. Darüber hinaus warf die Verwendung eines Bildes anstelle eines HTML-Überschriften-Tags auch die Semantik der Seite ab – potenziell schädlicher für SEO.

Sticky Header und Navigation: Frames

HTML-Frames waren vielleicht ihrer Zeit voraus, da viele der Aufgaben, für die wir sie früher verwendet haben, jetzt durch CSS und JavaScript erledigt werden.

Das Konzept war ziemlich einfach. Jeder einzelne „Rahmen“ innerhalb eines Layouts war eigentlich eine eigene Seite. Dies war eine einfache Möglichkeit, eine Kopfzeile, Fußzeile oder Navigation vom restlichen Inhalt der Website zu trennen. Eine Änderung an der Navigation bedeutete beispielsweise eine einzige Änderung in einer einzigen Datei. Es ist ähnlich wie bei serverseitigen Includes, nur mit einigen anderen Designvorteilen.

Das Wichtigste unter ihnen war die Fähigkeit, „klebrige“ Kopfzeilen und Navigation zu erstellen. Während der Benutzer durch den Inhalt scrollte, konnte er immer noch leicht durch die Website navigieren.

Diese Technik erfüllte ihren Zweck, war aber alles andere als ideal. Es war nicht sehr anpassungsfähig in Bezug auf verschiedene Bildschirmgrößen und auch nicht so gut für SEO. Es gab auch einige Sicherheitsbedenken bezüglich des potenziellen Ladens eines Frames von einer schändlichen URL.

Bildoptimierung: Geschnittene Bilder

In den Tagen vor der weit verbreiteten Verfügbarkeit von Breitband war die Bildoptimierung von entscheidender Bedeutung. Selbst ein 50-KB-Bild kann bei einer langsamen Verbindung eine Seite belasten.

Der Softwareriese Adobe lieferte eine interessante Lösung. Mit ihrer ImageReady-Software konnten Designer ein einzelnes Bild in beliebig viele kleinere Teile zerlegen. Jeder einzelne Slice könnte dann optimiert werden, sodass sie theoretisch schnell heruntergeladen werden können.

Aber das ist nicht alles. Die Software könnte dann die Slices in eine HTML-Tabelle exportieren. Von dort aus könnten Sie diesen HTML-Code kopieren und in Ihre Seite einfügen.

Das Problem bei dieser Technik war zweifach. Erstens könnte das Rendern des Tabellenlayouts zusätzliche Zeit in Anspruch nehmen – was möglicherweise jede von Ihnen erzielte Optimierung zunichte macht. Zweitens könnte es ein echter Schmerz sein, es aufrechtzuerhalten. Das Hinzufügen eines Navigationselements zu einer großen Kopfgrafik kann beispielsweise erfordern, dass Sie mit einem ganz neuen Satz von Slices von vorne beginnen – und somit Vorlagenänderungen erfordern.

Während die Bildoptimierung immer noch wichtig ist, erlaubt uns Breitband glücklicherweise etwas mehr Spielraum bei großen Dateien. Trotzdem bieten moderne Versionen von Photoshop immer noch Bild-Slicing und HTML-Export.

Besänftigender Internet Explorer: <!--[if IE]>

Bis heute ist es nicht ungewöhnlich, dass Webdesigner (mich eingeschlossen) die Hartnäckigkeit des Internet Explorer verfluchen. Sein Vermächtnis lebt weiter, zum Teil, weil einige Benutzer es einfach nicht aufgeben wollen.

Aus diesem Grund scheint es für immer so, als würden wir uns durch die vielen proprietären Macken und Einschränkungen des IE hacken. Dazu gehörte viele Jahre lang die Verwendung eines bedingten Kommentars, um IE-Benutzer zu erkennen und alternative Stile bereitzustellen.

Es war etwas vielseitig, da Sie Stile auf alle Versionen von IE <!--[if IE]> anwenden oder auf diejenigen abzielen konnten, die ältere Versionen verwenden <!--[if lt IE 11]> . Sie können es auch umgekehrt verwenden und nach Versionen suchen, die größer oder gleich einer bestimmten Version sind <!--[if gte IE 10]> .

Microsoft muss ein gewisses Verständnis für Webdesigner gehabt haben, da es diese bedingten Kommentare ermöglichte, im IE zu funktionieren. Zum Glück erfordert ihr neuer Edge-Browser keinen solchen Unsinn.

Unvergessliche Webdesign-Hacks

Die Hacks in unserer Ruhmeshalle waren sicherlich nicht die einzigen, die von Webdesignern verwendet wurden. Es gibt unzählige Problemumgehungen, die uns geholfen haben, das scheinbar Unmögliche zu tun. Aber was diese Liste auszeichnet, ist ihre massive Nutzung und in einigen Fällen die Unterstützung durch große Unternehmen.

Und vielleicht ist das Beste, was wir über sie sagen können, dass sie funktioniert haben. Wir haben sie als Mittel zum Zweck benutzt. Sicher, sie wurden vielleicht durch ausfransendes Klebeband zusammengehalten, aber es fühlte sich wie eine echte Leistung an, dieses hochgesinnte Design tatsächlich in einem Browser zu rendern.

Noch besser ist, dass sie dazu beigetragen haben, den Weg für das zu ebnen, was das Internet heute ist. Die meisten Elemente auf dieser Liste wurden durch HTML- und CSS-Standards ersetzt, von denen alle profitieren.