Macht Eure Designs kaputt!
Da ist das nun, das Design für die Webseite. Schön in RGB auf digitaler Leinwand, in Form einer PSD-, Sketch- oder ähnlichen Datei. Höchste Zeit, es mal so richtig zu strapazieren.
Warum? Darum: Dieses Design zeigt ein Best-Case-Szenario. Alle Textlängen sind angenehm gewählt, die Abläufe der Seiten wohl durchdacht und jedes Pixeltreppchen ist weichgezeichnet.
Das ist an diesem Punkt legitim, schließlich haben solche Designs auch die Aufgabe, sich selbst als Stellvertreter für das zukünftige „reale“ Werk zu verkaufen.
Und doch: so wird das fertige Produkt niemals aussehen. Zu viele Umstände, welche die Designidee variieren und verzerren, werden unweigerlich eintreten.
Das kann zu einem Problem werden. Doch gute Designs sind nicht nur hübsch – sie sind robust. Sie halten dem Unbekannten stand. Und dieses Unbekannte kann auf verschiedenen Ebenen ganz schön gemein sein.
Lasst uns diesen Gemeinheiten zuvor kommen.
Was Kunden (als Inhaltslieferant) kaputt machen werden
Textlängen
Ob Überschrift, ob Teasertext, ob Menüpunkt: Die Texte und Worte, die im Design aufeinander abgestimmt waren, werden dem inhaltlichen Anspruch weichen müssen. Was vorher wie eine gute Balance zwischen Text und Weißraum erschien, wird plötzlich zur Buchstabenwüste.
Anzahl von Elementen
Schön, so eine horizontale Navigation mit vier Menüpunkten. Doof, wenn es plötzlich zwölf werden. Auch das mit den sechs Bildern in de Galerie mutete übersichtlich an. Doch was, wenn sie am Ende fünfzig zählen?
Farben und Kontraste
Die dunkle Schrift auf hellen Bild funktioniert im Layout wunderbar. Allerdings hat man für einige Seiten dann doch dunkle Bilder ausgesucht, denn andere standen nicht zur Verfügung. Und komischerweise passt das knallgelbe Motiv nicht mehr zum dunkelroten Farbschema das Designs.
Formate und Verhältnisse
Die Textmenge neben dem Portraitfoto der Geschäftsführerin passt außerordentlich gut. Daher hat man sich auch an diesen Wortanzahl-Vorschlag gehalten. Nur das Foto, das müsste jetzt doch eher ein querformatiges sein. Und etwas breiter.
Was Website-Besucher kaputt machen werden
Bildschirmdimensionen
„Diese Seite ist optimiert für 1024 mal 768 Pixel" – ein Hinweis aus längst überwunden geglaubter Vergangenheit. Und doch, dem statischen Design, selbst wenn es drei oder vier Layout-Varianten durchformuliert, bleibt kaum etwas anderes übrig, als eine handvoll Versionen mit idealistischer Brust zu präsentieren.
Im Browser-Umfeld gibt es so gut wie keine dieser Idealszenarien. Hier sind Browser großgezogen, kleingedrückt, Viewports durch Bookmark-Leisten, Toolbars verengt oder auf Riesen-TV-Bildschirmen überlebensgroß gestreckt.
Selbst sicher geglaubte Formate wie die eines iPads sind nur so sicher wie der darauf verwendete Browser oder die iOS-Version. Also gar nicht.
Und klar, die Idee der fixierten Toolbar oder des sich automatisch beim hoch-scrollen einblendenden Headers funktioniert auf einem Phablet geradezu famos. Auf einem Smartphone mit nur wenigen Pixeln kleinerem Display kompromittiert diese Idee aber womöglich das ganze Nutzungserlebnis. Und genug Platz für die Toolbar-Icons ist vielleicht auch nicht mehr.
Eingabemethoden
Da der Design-Trend ohnehin gerade zu größeren, mächtig anmutenden Elementen mit jeder Menge Weißraum geht, ist der Hinweis, Buttons und sonstigen Interaktiven Elemente auch für den klobigsten Touchscreen-Daumen ausreichend Größe zu verleihen, fast hinfällig.
Und doch ist womöglich die ein Idee mit dem Mausüber-Effekt nicht ganz zu Ende gedacht, da es in den meisten Umgebungen gar keine Maus gibt.
Nicht zuletzt ist es denkbar, dass es nicht einmal ein zeigergesteuertes Gerät ist, sondern alles per Tastatur bedient wird. Stichwort Hervorhebung von fokussieren Elementen - oder für die CSSler unter uns: Dank an deinen :focus!
Schriftgrößen und mehr
Ja, Nutzerinnern können nach wie vor die Standard-Schriftgröße an ihrem Browser selber setzen, auch unabhängig vom obligatorischen Gesamt-Zoom. Es passiert seltener, aber es passiert.
Herrje, sie können sogar noch so viel mehr. Bilder und externe Schriftarten unterdrücken, Popups blockieren, Farben austauschen, Zeilenhöhen ändern und und und. Natürlich kann und muss das Design dem allen nicht standhalten. Doch wer seine Zielgruppe kennt, kann hier einen Wissensvorsprung für sich geltend machen.
Was die Technik kaputt machen wird
Pixelgenauigkeit
Jetzt haben sich schon alle Redakteure an die Textlängen gehalten und trotzdem bricht die letzte Zeile im Safari vor nur einem Einzelwort um. Im Firefox passiert das nicht.
Schade, aber: That's life. Dass Browser in ihrer Darstellung leicht bis mittelschwer voneinander abweichen, lässt sich nicht verhindern. Je eher der Design-Prozess diese Tatsache akzeptiert, desto mehr Zeit kann beim mit-dem-Lineal-am-Bildschirm-nachmessen gespart werden.
Fun Fact: Die Buttons in der Sidebar eines kürzlich gelaunchten Projektes hatten gestern noch keine runde Ecken. Dass sie heute welche haben, liegt am Browser-Update und ein damit verbundenes neues Browser-CSS. Hätten Sie's geahnt?
Auflösungen
Crisp und clean sollte diese Schriftart dargestellt werden, nicht verwaschen und pixelig. Außerm lässt sich der i-Punkt kaum noch erkennen.
Das hatte im Design gut funktioniert, doch dort wurde im Hinblick auf hochauflösende Bildschirme mit Schriftkantenglättung gearbeitet. Nicht jeder Bildschirm, nicht mal jedes Betriebssystem kann das gleich gut.
Wenn also die Unterzeile des Logos plötzlich nicht mehr gut zu lesen ist, liegt es nicht in der Macht des Front-Ends, das zu ändern, wenn der Bildschirm die dafür notwendige Auflösung verweigert.
Farben und Kontraste
Dass sich Druckfarben oder die Farbe auf der Lieblingskaffeetasse der Chefin nicht verbindlich auf den Bildschirm bringen lassen, sollte sich mittlerweile herumgesprochen haben.
Doch mehr noch, Bildschirme sind, je nach Fähigkeit und Konfiguration durchaus in der Lage, säuberlich gewählte Kontraste und Farbwerte vollständig zu verzerren. Ärgerlich, wenn dabei Schriften mit Hintergründen verschmelzen oder Farben so knallig werden, dass sie alles andere überstrahlen.
Fazit
Fast alle dieser Fallgruben lassen sich vorab simulieren oder mitdenken.
Ein „robustes“ Design ist also mehr als nur die Anordnung und Ausgestaltung von einzelnen Elementen. Gutes Design definiert ein Regelwerk, eine was-ist-wenn-Logik. Dabei bleibt es logisch und nachvollziehbar, nichts passier einfach so.
Daher: Um Sollbruchstellen zu erkennen und auszumerzen, macht Euer Design kaputt. Es wird dadurch nur besser.