Bulletproof Webdesign ist der Titel eines Buches von Dan Cederholm, das sich an Webdesigner und Entwickler richtet und mittlerweile als DAS Nachschlagewerk schlechthin für modernes Webdesign gilt. Es zeigt Best Practices für universell darstellbare Webseiten auf und schlägt entsprechende Entwurfsmuster und Richtlinien vor.
Schriftgrößenänderung über Schlüsselwörter, Prozentwerte und ems im CSS ermöglichen eine optimale Steuerung der Darstellung durch die Anwender – ohne Überraschungen. Modernere Browser erlauben es dem Anwender, Schriftgrößen auf einfache Art und Weise über browserspezifische Bedienelemente den eigenen individuellen Anforderungen anzupassen. Das ist nur für sehr alte gebrauchte Software noch nicht möglich. Als Webdesigner hat man keinerlei Möglichkeit, diese Schriftskalierung zu kontrollieren – man muss ein Layout erstellen, das bei Änderungen der Schriftgröße durch den Betrachter nicht auseinanderbricht (Bulletproof Webdesign). Der Internet Explorer etwa verweigert dem Nutzer die Skalierung, sobald auf einer Website absolute Angaben in Punkt oder Pixel angegeben werden. Schriftgrößen solltest Du – im Interesse des Benutzers beziehungsweise Auftraggebers – immer relativ angegeben, sonst lieferst Du kein Bulletproof Webdesign und der Kunde oder Anwender werden sich früher oder später beschweren.
In vielen aktuellen Browsern, darunter auch die beliebten Programme Internet Explorer, Opera und Firefox, steht dem Benutzer eine Zoom-Funktion zur Verfügung, die nicht nur Textelemente und weitere, von der Schriftgröße abhängige Elemente manipuliert, sondern sämtliche Bestandteile einer Webseite. Auf diese Art skalierte Bilder sehen leider sehr oft unscharf oder pixelig aus – allerdings bleibt das Layout in seiner Grundstruktur erhalten. Da sich aber bei Verwendung der Zoom-Funktion oft auch die gesamte Breite eines Layouts erhöht, mit dem Effekt, dass der Browser die allgemein ungeliebten horizontalen Scrollbars anzeigt, ist auch die Zoom-Funktion keine echte Lösung für Betrachter, die Wert auf ein großes Bild legen. Der Weg reiner Textskalierung wird auch künftig wichtig bleiben – und deren mögliche Auswirkungen sollten von Dir berücksichtigt werden, wenn ein Bulletproof Webdesign gefordert ist.
Viele Webanwendungen und Webseiten verfügen über horizontale Elemente, wie etwa Suchfelder, Breadcrumb-Leisten, Header Images, Login-Formulare, und Weitere. Content-Bereiche, etwa Elemente die einen aufgerufenen Blog-Artikel, bestehend aus Text und Medien, beinhalten, werden üblicherweise so entworfen, dass sich die Dimensionen des enthaltenden Elements den Erfordernissen vom Content anpassen, also quasi “mit dem Content mitwachsen”. Bulletproof Webdesign ist auch bei horizontalen Elementen (fast) ohne weiteres möglich, auch wenn dies derzeit noch recht selten umgesetzt wird. Häufig werden solche Elemente über Tabellenzellen gestaltet und mit Blind-GIFs “eingerückt” oder “abgerundet”. Unnötige Grafiken sollten jedoch vermieden werden, ein Nachteil des Tabellen-Designs ist, dass die Zellen bei einer Erhöhung des Schriftgrads über die Browser-Einstellungen umbrechen und schwer kontrollierbar werden.
Bulletproof Webdesign setzt auf Floats für gitterähnliche Anordnungen. Anstelle der Verwendung von Layouts auf Basis von Tabellen werden sogenannte floats empfohlen, um Seitenelemente gitterartig zu layouten. Hierbei werden statt der Zellen Container eingesetzt, die über deren CSS-Eigenschaft “float” positioniert werden.
Um für alle möglichen Darstellungsszenarien gewappnet zu sein, bedarf es einer klaren Trennung von Inhalt und Design für ein Bulletproof Webdesign, so dass Text auch dann lesbar ist, wenn Bilder nicht angezeigt werden oder das zur Webseite gehörige CSS File nicht geladen wird. In den meisten Browsern kann der Anwender veranlassen, dass Webseiten ohne CSS angezeigt werden. Über diesen Weg lässt sich leicht testen, ob die Struktur eines (X)HTML-Dokuments gut durchdacht ist. Es gibt zudem verschiedene Tools, um zu testen, ob sich eine Webseite auch ohne Bilder und CSS gut darstellen lässt.
Auch bei Tabellen solltest Du auf ein schlankes Markup achten, und möglichst viele der erforderlichen Formatierungsanweisungen über CSS umsetzen. Konkret bedeutet das, etwa anstelle der Angabe von Rahmen und Abstand über cellpadding und border im Tag die korrespondierenden CSS Attribute border und padding zu verwenden. PHP Entwicklung bei ProDoWeb muss man beim Bulletproof Webdesign unbedingt beachten, denn CSS und Design ist die eine Seite, auf der anderen braucht man guten Code der die Funktionalität liefert. Dafür gibt es diverse Experten, wenn man die Entwicklung nicht im eigenen Haus leisten kann.
