Unser ComputerBase-Workflow

Als wir Anfang 2014 die erste Anfrage für ein Redesign von ComputerBase erhielten, waren wir zunächst einmal skeptisch. Auch wenn Philip und ich früher selbstverständlich Motherboards geschraubt, Jumper gesetzt und sogar casegemoddet haben, so ist unsere aktive PC-Bastelzeit doch schon einige Jahre her. Und die mutmaßliche Zielgruppe von ComputerBase schien uns – vor allem aufgrund des Designs – geradewegs aus dieser Zeit entgegenzuspringen. Ob unsere Vorstellungen eines modernen, universellen Webs dazu kompatibel sein würden?

CB

Die drei Gründer und Geschäftsführer konnten uns jedoch schnell davon überzeugen, dass sie voll und ganz hinter den aktuellen Entwicklungen im Web stehen, man würde das nur gerade nicht so sehr am Design erkennen. Und tatsächlich: Ein Blick in den Quelltext bestätigte, wie nah man am Puls der Entwicklungen war: HTML5-Semantik, CSS3-Techniken, WebP-Bildformat – alles pfeilschnell vom Server ausgeliefert – Hut ab! Unter der Haube war alles auf Stand, und wir wurden ganz offenbar nur in Sachen Design gebraucht, nicht aber für die Umsetzung in ein neues Markup. Doch wie fängt man so eine Zusammenarbeit an? Ist das nicht ein Paradebeispiel für einen völlig hippen Responsive Workflow? Durchaus, irgendwie. Auf unsere Weise eben!

Der Rahmen

Zunächst einmal waren uns seitens der Werbevermarktung gewisse Grenzen gesetzt. ComputerBase ist als kostenloses Angebot von der Werbung abhängig, muss deren Realitäten akzeptieren. Die ideale Maximalbreite der Website beträgt somit 1000 Pixel – Grund sind unter anderem sogenannte Fireplace-Ads, also Anzeigen, die sich oben, links und rechts komplett um die Website herumlegen. Doch auch unabhängig von Werbebannern sind mehr als 1280 Pixel natürlich keine gute Idee, wenn man nicht unendlich lange Zeilen oder alternativ einen Friedhof voller Seitenboxen anschauen möchte.

Die kleinste unterstützte Breite hingegen liegt bei klassischen 320px, und von dort aus geht es stufenlos bis hin zu den erwähnten 1000px. Eine stufenbasierte Lösung, die bestimmte Werbeformate noch homogener hätte integrieren können, wurde schnell wieder verworfen. Ebenso die bis dato verwendete separate Mobilversion mit zurechtgestutzten Inhalten. Ähnlich wie andere Newsangebote im Netz sollte es schon ein einheitliches HTML-Gerüst mit responsivem CSS sein – keine Version soll benachteiligt sein, universelles Webdesign eben.

Mobile First – naja, so ähnlich

Wie nähert man sich nun so einer Mammutaufgabe? Denn ComputerBase ist nicht eine einfache Firmenwebsite, sondern ein komplexes Konstrukt mit vielen unterschiedlichen Bereichen, Inhaltstypen und Sonderfällen, die sich seit 1999, dem Jahr der Gründung, angesammelt haben. Wir entschieden uns, das Design „von innen nach außen“ aufzubauen und mit dem Kernstück zu beginnen – der Newsauflistung nebst Thumbnail (welches am Anfang übrigens noch farbcodierte Icons waren). Diese Newsauflistung verträgt ca. 320–600 Pixel Breite und eignet sich somit sowohl als einspaltiges Element für Smartphones, aber auch als Hauptspalte auf breiteren Viewports.

Ausgehend von diesem Kernelement entwickelten wir das gesamte Drumherum und bauten Schritt für Schritt die äußeren Schichten auf, bis das grobe Layout für alle Geräte stand. Insbesondere die Desktop-Startseite folgt dabei dem „neuen“ Paradigma im Webdesign, welches bekanntlich weg geht von einer Hauptspalte und einer davon völlig unabhängigen Seitenleiste. Vielmehr ist das Layout nun in mehrere vertikal gestapelte Bereiche aufgeteilt, die jeweils ihren eigenen Haupt- und Nebenbereich haben, sowie von horizontalen Thumbnail-Teaserleisten unterbrochen werden.

CB6

Die Artikel-Einzelansicht bricht komplett mit ihrer Seitenleiste und ist auf allen Geräten einspaltig, was ihr Luft zum Atmen gibt und gerade bei längeren Testberichten hochwertig und reichhaltig wirkt. Quasi zum Nulltarif lösen wir dadurch auch das Problem mit den Marginalboxen auf Smartphones und Hochkant-Tablets, die man bei nachträglicher Responsivierung nur schwer in den Griff bekommt. Es gibt sie einfach nicht :-)

Der Workflow

Wir haben über ein Jahr an ComputerBase v6 gearbeitet, und das in ständigem Austausch mit der Geschäftsführung, die gleichzeitig als Projektleiter und HTML-Prototyper fungierte. Wir haben jedes noch so unbedeutende Mikroelement des neuen Designs erst besprochen, dann per Photoshop skizziert, manchmal auch per WebInspektor gebaut, wieder besprochen, wieder geprototyped, und dann letztlich in die echten HTML/CSS-Templates aufgenommen. Besonders gerne genommen, vor allem im späteren Verlauf des Projektes: Der kombinierte WebInspektor-Photoshop-Workflow, und der geht so:

Wir laden den aktuellen Stand des Projektes in den Browser, und verändern per WebInspektor die Parameter, die sich am schnellsten dort verändern lassen, z. B. die Gesamtbreite einer Newsliste mit entsprechend neu umbrechenden Zeilen. Dann nehmen wir davon einen Screenshot, laden es im Photoshop und machen dort solche Veränderungen, die sich mit einem Pixelprogramm schneller umsetzen lassen, wie das freie Verschieben von ganzen Layout-Blöcken. Auch wenn es unorthodox klingt, ist so ein gemischter Workflow letztlich die effizienteste Methode für uns gewesen.

(Natürlich hatten wir ursprünglich einen rein browser- und gitbasierten Workflow angestrebt, diesen aber im Laufe der Wochen immer mehr vernachlässigt. Letztlich war Steffen vom CB-Team für den finalen Code verantwortlich, und wir haben ihm über Mockups häppchenweise zugearbeitet.)

Die Kontroverse

Noch nie durften wir eine Website entwerfen, die so viele Leser hat wie ComputerBase, und die ihren Lesern auch so am Herzen liegt. Es tummelt sich eine äußerst aktive Community im Forum, die dort seit vielen Jahren einen Lebensraum gefunden hat. So etwas ist uns natürlich grundsätzlich nicht fremd. Die Vehemenz allerdings, mit der das neue Design nun auf Nichtgefallen stößt, erstaunt uns seit der ersten Sneak Preview Anfang des Monats jeden Tag aufs Neue. Man übertreibt nicht, wenn man behauptet, dass dem CB-Team und uns eine leidenschaftliche Wut entgegengebracht wird.

Viele der Meldungen sind absolut nachvollziehbar und aus der Perspektive der Stammleser auch berechtigt, manche Kommentare sind jedoch auch sehr unsachliche und emotionale Affektäußerungen. Man kann hier in Reinkultur beobachten, wie eine Marke, die sich aus Logo, Webdesign und Inhalt zusammensetzt, vermeintlich in den Besitz der Community übergegangen ist und nun droht, sich dieser wieder zu entfremden.

Insbesondere weil auch unsere kleine Agentur nun Ziel der verbalen Attacken ist, möchte ich noch ein paar Worte dazu verlieren. Auch wenn es viele Leser in der Aufregung nicht mitbekommen haben, ist das neue ComputerBase-Design keine Auftragsarbeit, die Anfang 2014 bestellt und März 2015 geliefert wurde. Es handelt sich vielmehr um eine extrem enge und inzwischen auch freundschaftliche Zusammenarbeit zwischen dem Gründerteam, welches ComputerBase seit 1999 mit Herzblut betreibt und unserer visuellen Weberfahrung, die bis ins Jahr 1996 zurückgeht. Stichworte wie „WordPress-Template“ und „Ich bau euch in 15 Minuten was Besseres“ sind also nicht angebracht und entlarven massive Unkenntnis der Materie.

ComputerBase ist thematisch seit einigen Jahren deutlich vielfältiger als es der erste Eindruck vermitteln mag: iPhone, AndroidWear, StartUps und Netzpolitik gehören genauso zum Repertoire wie die Klassiker Grafikkarten, First-Person-Shooter und CPU-Kühler. Unsere Aufgabe bestand nicht zuletzt darin, eine für alle Themenfelder angemessene visuelle Darstellung zu finden, und insbesondere neue Leser nicht durch das inzwischen veraltete Design abzuschrecken.

Nicht alle alteingesessenen CB-Leser werden diesen Relaunch mitgehen wollen, das machen die Kommentare deutlich. Doch wir zählen darauf, dass die ComputerBase-Themenvielfalt nun offener, leichtgewichtiger und professioneller in Szene gesetzt wird. Also: Wem eine unabhängige und ehrliche Technik-Berichterstattung am Herzen liegt, und wer sich designtechnisch im Jahr 2015 wohler fühlt als im Jahr 2003 – hier bitte klicken ;-)