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 ;-)

28 Kommentare

Uwe

Kein Discourse als Foren-Software. Relaunch somit nur teilweise erfolgreich ;-)

Gregor

Ein neues Design war absolut überfällig, da gibt es gar keinen Zweifel. Ich bin zwar kein CB-Stammleser, aber natürlich schon häufiger per Google auf die Seite gestoßen. Meine erste Assoziation war immer: Wird die Site noch betreut? Das alte Design hat mich an Zeitschriften wie Amiga Joker erinnert, auch wenn das natürlich noch ein ganzes Stück länger her ist. Gerade von einer Techniksite erwarte ich aber, dass sie mir das Gefühl vermittelt, dass die Infos auf der Höhe der Zeit sind und keine Technik von gestern.

Die Umsetzung finde ich gut, die Fira Sans hatte ich auch sofort im Kopf, als ich die Ãœberschrift gelesen hatte und hab geschmunzelt, als ich den ersten neuen Screenshot gesehen habe (zumindest sieht die “cbsans” stark nach Fira aus). Die breiten vertikalen Leisten habt ihr vom Guardian geklaut, auch wenn die es technisch anders umgesetzt haben ;)

Das Einzige, was mich stört, ist der fixe Navigationsbalken, der auch beim Scrollen Platz verschwendet, aber das muss wohl so…

Warum sich gerade Foren-User beschweren kann ich nicht nachvollziehen. Das Forum sieht doch (leider) noch nach VBB-Standard aus. Andererseits: Eine Community, die nicht erst mal aufschreit, hängt nicht wirklich am Projekt, siehe Gulli-Board und viele mehr!

CB Nutzer

Na herzlichen Glückwunsch, dann seid ihr also dieser Pfuscherverein, der die CB Seite versaut hat? Schon echt beeindruckend, wenn ein paar Designer aus dem Forum eure Arbeit in 30 Minuten wesentlich verbessern können. Da kann man sich echt was drauf einbilden. Aber hauptsache #KlickiBunti# #FB #G+, #Asozial-Media Zeug einbauen.

Gerrit

Das rahme ich mir ein.

Interessiert sowieso keinen

Mann muss schon ein begnadeter Designer mit FH Diplom sein, um eine Seite so zu designen, dass sie aufgrund von Schriftart, Schriftfarbe und Hintergrundfarbe so unangenehm zu lesen ist. Wenn man dann noch die Werbung so in den Text einrückt, dass sie den Lesefluss stört und noch zusätzlich Kommentare in einer anderen Farbe und Schriftgröße hinzufügt, dann hat man das absolute Maximum an unleserichkeit erreicht.

Uwe

Also ich kenne ComputerBase nur vom Ganz-Selten-Besuchen; die aus meiner Sicht unsachliche, Kritik der Nr. 3 und 5 kann ich, auch wenn ich sie auf die sachliche Ebene herunterstrippe, nicht nachvollziehen; ich finde es relativ übersichtlich und recht durchdacht.

Die Farben hätte ich anders gemacht; insgesamt gefällt mir das Allermeiste sehr gut.

Gerrit

@Uwe wenn das Forum auf eine andere Software umgestellt wird, was wohl auch 2015 oder 2016 ansteht, dann gnade uns Gott!

Dennis

Irgendwann muss man den Absprung schaffen, bevor man den Anschluss verliert. Dabei jeden zu erreichen und es allen auch noch recht zu machen, ist nahezu unmöglich – speziell bei einer solch großen und heterogenen Community. Beständigkeit/Gewohnheit hin oder her und in allen Ehren… wenn mein Bäcker um die Ecke renoviert und mir die Tapete nicht gefällt, kauf ich ja auch nicht gleich woanders meine Brötchen. Ich finde es gelungen und zähle mich zu den neu erreichten Lesern von ComputerBase. Go for it!

John

Also ich frage mich ja, wir Ihr den Job als Agentur mit einer Website, die Amateurhafter nicht sein kann, bekommen habt!? Soll das Augenkrebs grün vertrauen wecken oder abschrecken? Mit den Farben habt Ihr es nicht so und mit Gestaltung noch weniger.

Ich selbst bin seit über 10 Jahren 2D / 3D Senior Artist. Ich hätte gern freundlicher geschrieben, aber die Arroganz “man sei eine professionelle Agentur mit Skill” hat mich davon abgehalten.

Mit dem Projekt habt Ihr weder Euch noch Computerbase einen gefallen getan.

Eric Eggert

Beim Fußball ist jeder Zuschauer Bundestrainer, in Communities ist jeder Forumsschreiber Chefdesigner.

Das man durch dieses Verhalten, das jeglichen Respekt vor der Zusammenarbeit mit den Gründern, dem Prozess der Entstehung, den Anforderungen an die Agentur missen lässt, dem „eigenen Projekt“ Schaden zufügt scheint für die Community egal zu sein.

ComputerBase hat sich mit einem Auftrag und einem Konzept für die Zukunftsfähigkeit des Unternehmens an eine Agentur gewandt, die hohen Sachverstand sowohl im Bereich Design als auch im Bereich moderne Webtechniken hat. Die Vision der Gründer wurde entsprechend umgesetzt und soll sicherstellen, dass es ComputerBase auch in den nächsten Jahren noch gibt.

Natürlich ist es ungewohnt, Dinge verändern sich, und das ist manchmal nicht einfach zu verstehen. Menschen, die ihren Job sehr gut machen, persönlich angreifen ist unter aller Würde und auch durch nichts zu rechtfertigen.

Gerne möchte ich die „Designer“ sehen, die Briefing, Konzept und stufenloses responsive Design in 30 Minuten hinbekommen. Das ist doch Ãœbertreibung und man merkt, dass diese Leute einfach keine praktische Erfahrung mit echten, realen (Design-)Projekten haben.

Wer nichts verändert wird zwangsweise überholt. Schade, dass die „Früher war alles besser“-Fraktion das nicht sehen will.

Kim

Hey Gerrit,

trotz der negativen Stimmen: meinen Glückwunsch zum gelungenen Relaunch! Mich beeindruckt die durchgängige Liebe zum Detail, die vollständige Responsivität und das Sich-Neu-Erfinden, ohne die Wurzeln zu vergessen. Und das bei der Komplexität.

Interessant auch euer Workflow. Manchmal muss es halt etwas pragmatischer sein.

Grüße aus Berlin

ben_

Puh … das ist kein Spaß, eine Seite gegen gute Teile ihrer Nutzer zu erneuern.

Ich erinnere mich noch an den Relaunch einer großen Nachrichtenseite mit Z, als am Tag nach dem Relaunch die Rechte Hand des Chefredakteurs neben mir stand und sagte, draußen würde sich bereits eine Menschenmenge versammeln mit Mistgabeln und brennenden Fakeln, die die Rückkehr der “Auf einer Seite Lesen”-Funktion fordern würde. Da war ich sehr froh, dass das die größten Sorgen waren.

Jere

Ganz davon abgesehen, dass das Design mir persönlich sehr gut gefällt, möchte ich einfach nochmals betonen, dass ich das Redesign sehr gelungen finde. Man hat endlich wieder das Gefühl, auf einer aktuellen und noch aktiven Seite zu sein, und nicht bei der WaybackMachine.
Es ist schön zu sehen, dass hier die Reaktionen weitaus positiver Ausfallen. Das zeigt, dass die Leute, die sich auch sonst mit Webdesign beschäftigen und nicht nur ihre Lieblingsseiten verherrlichen, hinter euch stehen und eure Meinung und das Design befürworten. Und das ist mehr wert als sämtliche pseudo-professionellen Rants im Forum.

Parzival

Habt ihr gut gemacht. Lasst euch nicht von unsachlichen Kommentaren und gefährlichem Halbwissen die Laune verderben. Das ist eine Website mit einer extrem hohen Nerd-Dichte und wenn man ein paar Threads aus dem CB-Forum kennt, dann weiß man dass es da oft um Leben und Tod bei der Verteidigung seiner persönlichen Meinung geht.

Ohne jemanden etwas böses zu wollen… Das ist eine sehr kritische Kundengruppe, die man niemals komplett zufriedenstellen kann.

realmic

Ich lese seit mehr als 12 Jahren CB, und fand mich bisher sehr gut da zurecht. Das ist seit ein paar Tagen mit einem Mal anders. Viele im Forum, haben ja geschrieben, das es unübersichtlich geworden ist und man das “alte” gewohnte CB nicht mehr erkennen kann. Dem Auftraggeber scheint das wohl nicht bewußt gewesen zu sein, das die CB’ler so sehr an dem alten Logo und Aufmachung hängen?!

Im Vergleich zu anderen IT-Techsites, war CB (alt) vom Design sicher nicht sehr modern, aber die Funktion war gegeben sich schnell (Augenfreundlich) zu informieren und die Website stach etwas aus dem “Einheitslook” herraus. Naja auch zwei Tage später kann ich mich mit dem neuen Design nicht so recht anfreunden.

Das ist meine persönliche Meinung!

Nächstes Mal sollte man vielleicht auch die Community mit einbeziehen und mit abstimmen lassen, dann ist der “Schock” und die anschließende “..leidenschaftliche Wut..” nicht allzu groß.. Der Auftraggeber ist zufrieden, die Kunden sind zufrieden und euer Team ist zufrieden! Win-win

@realmic

*win-win-win

JohnDoe

Ein ganzes Jahr engste Zusammenarbeit?

Handelt man diesbezüglich einen Pauschalbetrag aus oder wird das stundenbasiert abgerechnet?

So ein Projekt komplett neu zu designen bis in die kleinsten Details verschlingt ja ein Vermögen!

Seid ihr dadurch zu Millionären geworden?

afhjdfs

Beim letzten Design-Wechsel waren die Kommentare auf CB genau so vernichtend, also nicht wundern.

Roman

Glückwunsch zum Redesign! Kannte CB bisher nicht. Bitte als nächstes unbedingt heise.de redesignen!

Gerrit

@Roman: Ich hätte mehr Lust auf ein Redesign von Gamer’s Global, wegen Langer und Lenhardt und so.

Gerrit

@JohnDoe: Natürlich nicht Vollzeit! Es gab teilweise Phasen, wo wir mehrmals die Woche 60-90 Minuten geskypt haben, dann hat Steffen auch mal mehrere Wochen alleine an der Implementation gebaut, dann vielleicht drei Wochen Pause, dann wieder ein neuer Inhaltstyp usw.

Es gab keinen Festpreis, sondern eine Art Kick-Off-Budget für eine Basisgestaltung, und als dieses Budget aufbebraucht war, haben wir auf Stundenbasis weitergearbeitet.

Manuel

Das habt ihr gut gemacht. Im Forum dort (ich habe natürlich aus Neugier den Thread zum Redesign überflogen, aber hallo…) kommen jetzt natürlich Fragen auf, wie »ab wann gehört eine Community* den Usern mehr als den Betreibern?«
Ich fände die Fragestellung einen eigenen Beitrag wert. Es ist ja nichts neues, in Zeiten von agile und co Pakete zu splitten und mit unterschiedlichen Personen an verschiedenen Baustellen zu arbeiten. Warum die User eigentlich nicht einbeziehen.

Die Antwort ist für uns Designer klar, aber sollte man das Gedankenexperiment nicht einmal durchspielen?

* man muss vielleicht ehrlicher Weise zugeben, dass Tech-, Nerd-, Fantasy-, Gamer-, Rollenspiel-, Autocommunities da komplizierter zu handlen sind, als andere. Oder auch nicht.

JohnDoe

viele scheinen sich ja über das fehlende Orange im CB Logo zu echauffieren….

Hier ist es doch:

http://www.computerbase.de/design/logo.png

wieso bindet man das nicht ein. Das war doch ein wichtiges Element der Identität der Seite…. also dass das B von Base orange ist.

Verstehe ich nicht. Allein damit könnte man die meisten User ruhigstellen.

Wieso wurde das organe dem B entzogen? ComputerBase komplett weiss sieht doch tatsächlich wie nix halbes und nix ganzes aus…

Friedrich

Liebe Prägnanzler,

auch von meiner Seite ein betont positives »Chapeau« für den CB-Relaunch.

Das Beste, was man mit den unsachlichen Tiraden machen kann, ist die Ãœbergabe an einen Medienpathologen (Lehrstühle hierzu gibt es sicher bald) zur weiteren eingehenden wissenschaftlichen Untersuchung.

in diesem Sinne – weiter so…

Christoph

“Nächstes Mal sollte man vielleicht auch die Community mit einbeziehen und mit abstimmen lassen,”

Nein, bitte nicht.

flow

Also das neue wie das alte Logo machen eigendlich keinen großen Unterschied. Base hinten – Base vorne…
Das Problem ist hier das eigendliche Basis-Logo. Das müsste mal als erstes überarbeitet werden (sieht einfach sehr handgemacht und in die Jahre gekommen aus).

Das Alte hatte einzig den Vorteil, das es eine echte Signalfarbe hatte. Wenn man diesen dann noch entfernt, bleibt nunmal nicht viel.

Auch der Menübereich…
Logo echt klein – optisch alles Weiss – Keine Trennung – Typo? Die Navi sieht auch nicht nach Navi aus (nackte einfache weisse magere Typo…
Subnavi: keine auszeichnung (status) – nur hover???

Und die Banner-Area reisst auch alles auseinander und steht mal hier mal da. ich versuch die dinger einfach immer fest positionieren weils sonst zu unruhig wird.

Ansonsten gutes Raster und alles GUT LESBAR :-)
Headline bissl arg gewaltig :-)

fwolf

Nachdem ich heute mal wieder hier durchstöb – äh. prokrastiniere :D – und auf diesen Eintrag gestoßen bin .. nun, CB sah schon seit Jahren extra angegammelt aus.

Jetzt? Wow. Verdammt gutes Realign! ;)

cu, w0lf.

ps: die jammernden Ewig Gestrigen können mir gerne meine Website innert 30 Minuten neu bauen. Aber so richtig fett, mit allem Blingbling und Klingeling, was das HTML5CSS3ReactAnchorJSWebv3.1 zu bieten hat :D
pps: oha, Textile kommt offenbar nicht mit Emoji klar? o.O

Christoph

Hi,
also bin seit Jahren ebenfalls ein begeisterter Leser von Computerbase und das “eingestaubte” Layout war zwar nicht abschreckend, aber auch nicht besonders einladend. Vorallem, da viele anderen Websites bereits modernisiert worden sind. Ich finde persönlich, dass die Seite besonders gut auf mobilen Endgeräten läuft, ob das nun jetzt echtes RWD ist oder nicht. Jetzt ist die Seite aufgeräumt – modern – ansprechend und fokussiert. I like!

Kommentar verfassen

Mit dem Absenden dieses Formulars erklären Sie sich damit einverstanden, dass ich die von Ihnen eingegeben Daten auf meinem Webserver speichere. Ihr Name, der Kommentartext und die angegeben Website werden für die anderen Besucher von praegnanz.de angezeigt. Ich gebe jedoch insbesondere Ihre E-Mail-Adresse nicht an Dritte weiter und nutze diese auch nicht zu Marketing- oder Statistik-Zwecken. Sie können alle Daten zu einem späteren Zeitpunkt wieder entfernen lassen.