ComputerBase 6.0: Mehr Details zum neuen Design

 2/2
ComputerBase 1 Kommentar

Hochauflösende Bilder und Kernaussagen

Alle auf ComputerBase eingebetteten Bilder gibt es in Zukunft auch in einer hochauflösenden Variante mit vierfacher Auflösung. Das gilt für Aufmacher, Logos und Fotos in Tests gleichermaßen. Zu diesem Zweck wurden über 175.000 alte Bilder neu berechnet. Neben den HiDPI-Varianten haben diesen Schritt auch die neuen Formate und Wasserzeichen notwendig gemacht.

Eine Ausnahme gibt es bei der Auslieferung hochauflösender Bild-Varianten vorerst noch: Die Vollbildansicht auf Desktop-PCs ist davon ausgenommen. Diese hochauflösenden Varianten liegen in 3.840 × 2.160 vor, die Dateigröße steigt gegenüber dem Standard von 1.920 × 1.080 jedoch enorm, wobei der optische Effekt in der Vollbildansicht hingegen am geringsten ist. Da das selbst bei einer schnellen Internetverbindung deutlich schnellere Laden der Bilder den Nutzen der höheren Auflösung überwiegt, kommen deshalb auch bei HiDPI-Displays in der Vollbildansicht als Standard Full-HD- und keine UHD-Bilder zum Einsatz.

Neu ist auch die Art der Einbettung von Bildern, worauf wir bereits in der Ankündigung von ComputerBase 6.0 kurz eingegangen sind. Die Änderungen betreffen sowohl die Darstellung im Text als auch die Vollbildansicht und das mobile Layout. Optik und Bedienung wurden über alle Geräteklassen vereinheitlicht.

Bilder können vielfältiger eingesetzt werden
Bilder können vielfältiger eingesetzt werden

Zwar ließen sich auch in der Vergangenheit bereits kleinere Bilder rechts und links neben dem Text einbetten, da dies optisch aber derart unpassend wirkte, wurde es im alten Design wann immer möglich vermieden. Im neuen Design können Bilder nun wahlweise groß, mit halber Größe rechts oder links oder in klein rechts oder links neben dem Text platziert werden. Dabei machen sich die kleineren Bildformate erneut den durch den Wegfall des Seitenstreifens gewonnen Platz zunutze und lockern das Design auf, ohne den Lesefluss komplett zu unterbrechen, wie es große Bilder tun. Redakteure haben mehr Möglichkeiten, ihren Text so zu gestalten, wie sie ihn präsentieren möchten und wichtige Inhalte stärker in den Fokus zu rücken.

Eine interne Änderung erlaubt es Redakteuren darüber hinaus, Bilder aus unterschiedlichen internen Quellen und Teile einer längeren Bildstrecke in einer eigenen, durchklickbaren Bildstrecke zu vereinen. So können beispielsweise auch für Teilaspekte eines Geräts Bildstrecken eingesetzt werden, ohne hierfür intern explizit eine solche Bildstrecke anzulegen, wie es in der Vergangenheit notwendig war.

Darüber hinaus können Autoren Kernaussagen oder kurze Zitate seitlich neben dem Text hervorheben. So können Leser, die einen längeren Text nur überfliegen, anhand prägnanter Aussagen einfacher die für sie interessanten Stellen erkennen und wieder in den Text einsteigen. Das Resultat all dieser Änderungen sind Texte, deren Lesefluss seltener unterbrochen wird, die optisch ansprechender und leichter zugänglich sind.

Sicher teilen ohne Doppelklick

Eine deutliche Aufwertung hat im neuen Design auch die Möglichkeit erfahren, Inhalte über soziale Netzwerke zu teilen. Die entsprechenden Schaltflächen sind sichtbarer und schon mit dem ersten Klick nutzbar. Da es sich um einfache Links und nicht um externe JavaScript-Widgets handelt, werden beim bloßen Lesen von Inhalten trotzdem keine Informationen an Facebook und Co. gesendet. Die dargestellte „Like“-Anzahl ermitteln die ComputerBase-Server.

Teilen per WhatsApp auf dem Smartphone
Teilen per WhatsApp auf dem Smartphone

In der mobilen Ansicht ist in Zukunft neben Facebook, Google+ und Twitter auch das Teilen über WhatsApp möglich. Das Versenden des Links erfolgt dabei erst nach zweimaliger Bestätigung durch den Anwender. Alternativen zu WhatsApp sind grundsätzlich möglich. Sofern gewünscht, können wir das Feature in Zukunft ausbauen, falls ein anderer Messenger als WhatsApp bevorzugt wird. Hierzu bitten wir um Kommentare im Forum.

So loggt es sich ein und sucht es sich

Etwas umgewöhnen müssen sich im neuen Design Leser, die häufig zur Suche oder dem Benutzermenü greifen. Die Suchfunktion ist ab sofort über das Lupen-Symbol in der Hauptnavigation erreichbar. Trotzdem braucht man weiterhin nur einen einzigen Klick, da beim Öffnen des Suchmenüs das Eingabefeld automatisch fokussiert wird. In den Sektionen Downloads und Preisvergleich findet sich ein weiteres Suchfeld im direkten Zugriff.

Die Suchergebnisseite wurde ebenfalls deutlich überarbeitet. Die Auswahl der Filter ist jetzt übersichtlicher und an bekannte Suchmaschinen angelehnt. Suchbegriffe werden in den Treffern farblich hervorgerufen.

Das Einloggen erfolgt in Zukunft über das stilisierte Profilbild im Hauptmenü. Einmal eingeloggt, wird der Platzhalter durch den eigenen Avatar aus dem ComputerBase-Forum ersetzt. Neue „Private Nachrichten“ im Forum werden als Kreissymbol am Profilbild in Orange dargestellt. Das Benutzer-Menü und die Suche finden sich auch auf Smartphones immer direkt griffbereit im Header wieder.

Downloaden und Preise vergleichen

Komplett neu gestaltet ist die Sektion Downloads, dieser Schritt war lange überfällig. Auf der Übersicht ist die kaum sichtbare Leiste mit den Kategorien einem neuen Auswahlmenü gewichen, das das Angebot auf einen Blick sichtbar macht. Die Kategorie-Logos sind extra für ComputerBase erstellt worden und finden sich so nicht noch einmal im Netz. Auch die Logos der Downloads sind jetzt hochaufgelöst.

Im Download-Bereich wurde saniert, nicht renoviert
Im Download-Bereich wurde saniert, nicht renoviert

Auch die Ansichten der einzelnen Downloads sind neu. Ab sofort stehen die Download-Links direkt sichtbar am linken Rand der Seite und fallen dank Piktogrammen und weiteren Optimierungen deutlich platzsparender aus. Selbst wenn der Text zum Download (mit Bildern) länger ausfällt, finden sich die Links so in Zukunft sofort. Deutlich hübscher sind ab sofort auch die Verweise auf Downloads am Ende von News.

Der Preisvergleich kommt auch in Zukunft von Geizhals. Obwohl der Preisvergleich von außerhalb kommt, haben wir ihn trotzdem nicht unangetastet gelassen. Damit der Preisvergleich nicht vollständig aus dem Rahmen fällt und auch auf mobilen Endgeräten endlich nutzbar ist, haben wir Geizhals zu ein paar Anpassungen bewegen können. Zusammen mit einigen Anpassungen am Design unsererseits fällt die Sektion jetzt nicht mehr aus dem Rahmen, ohne die wahre Herkunft Geizhals für Kenner zu verschleiern.

Anzeigen mit klaren Vorgaben

Die Anzahl der Anzeigen ist gegenüber dem alten Design unverändert geblieben, wir haben stattdessen an ihrer Integration gearbeitet. Die Google-Textanzeigen am Ende von Tests und News kommen ansehnlicher denn je daher und auch die klassischen Banner passen sich vielerorts besser in das Design ein.

Durch die Trennung von Hauptmenü und Seiteninhalt werden normale Banner, extrahohe „Billboards“ und Wallpaper (umschließen die Seite) jetzt an derselben Stelle platziert, d.h. die Seite wird nicht mehr je nach Werbemittel an unterschiedlichen Stellen „aufgerissen“. Im alten Design standen einige Anzeigen über der Seite, andere zwischen Hauptmenü und Aufmachern.

Wallpaper umschließen im neuen Design deshalb auch nicht mehr die komplette Seite, denn das Hauptmenü mit dem Logo steht immer darüber. Eine etwaige Einfärbung des Seitenhintergrunds wirkt wie angegossen, nicht wie ein Fremdkörper.

Der Wegfall des Seitenstreifens in News und Tests führt dazu, dass das (fast) rechteckige Banner-Format „Rectangle“ in Zukunft nicht mehr neben dem Inhalt steht, sondern in ihn hinein ragt. Dafür steht es nicht mehr zwangsläufig direkt am Kopf des Inhalts sondern oftmals weiter unten.

Wir werden bei Anzeigen auch in Zukunft transparent bleiben, Missstände so schnell wie möglich versuchen auszuräumen und auf hochwertige Formate pochen. Auch im neuen Design gibt es unten am Seitenende einen Button „Probleme mit einem Werbebanner?“ zum Melden von Problemen mit Anzeigen.

Responsive Design und Browser-Support

Das neue Responsive Design hat eine gemeinsame Code-Basis für Desktop-PCs, Notebooks, Tablets und Smartphones. Unabhängig vom genutzten Gerät gibt es auf jeder Seite dieselben Inhalte – lediglich deren Anordnung und die Bedienung werden den jeweiligen Verhältnissen angepasst.

Ein Gesicht von Smartphone bis PC
Ein Gesicht von Smartphone bis PC

Noch nie war ComputerBase auf jedem Endgerät so sinnvoll, vollständig und ohne Zoomen nutzbar. Noch nie war der Wiederkennungswert auf allen Geräten so hoch.

Voraussetzung ist, dass der verwendete Browser nicht zu alt ist: Für Internet Explorer 6 und 7 (auf ComputerBase zusammen 0,04 Prozent der Zugriffe) gibt es keinerlei Unterstützung mehr. Dank zahlreicher Workarounds ist das neue Design im Internet Explorer 8 (0,7 Prozent der Zugriffe) hingegen noch benutzbar, allerdings werden wir – zeitgleich mit Microsoft – den Support für IE8 im Januar 2016 einstellen.

Ebenfalls viele Krücken braucht der bis einschließlich Android 4.3 vorinstallierte „Stock-Browser“. Android-Nutzern ist die Installation eines regelmäßig aktualisierten Browsers wie Google Chrome schon allein aus Sicherheitsgründen dringend anzuraten.

Auch in anderen älteren Browsern müssen ggf. kleine Abstriche in puncto Komfort gemacht werden. Grundsätzlich gilt: je neuer der Browser, desto besser funktioniert das neue ComputerBase-Design. Mit der jeweils neuesten Version von Chrome, Firefox, Internet Explorer, Opera oder Safari sind keine Probleme zu erwarten.

Ein paar Zahlen zum neuen Code

Responsive Design wird nachgesagt, dass es sich negativ auf die Ladezeit auswirken würde. Das muss aber nicht der Fall sein. Das neue ComputerBase-Design nutzt Responsive Images und lädt auf kleinen Smartphone-Displays keine unnötig großen Bilddateien. Der CSS-Code ist mit 21 KB nur unwesentlich größer als im alten Design (Desktop 19 KB, Mobile 14 KB), obwohl darin im neuen Design bereits fast alle SVG-Icons eingebettet sind. Die Größe des JavaScript-Codes hat sich mit jetzt nur noch 20 KB mehr als halbiert.

Ohne Berücksichtigung der Anzeigen (deren Größe von Seitenaufruf zu Seitenaufruf stark variiert) bringt die neue Startseite in Desktop-Browsern mit „Standard-Display“ sowie auf Smartphones mit hochauflösendem Display jeweils rund 450 KB auf die Waage. Auch wenn man Anzeigen dazurechnet, sind das deutlich weniger als die durchschnittliche Website-Größe von mittlerweile fast 2 MB.

Natürlich gibt es in puncto Performance immer Verbesserungspotenzial. Aber schon der jetzige Stand kann sich sehen lassen.

Der ganze Rest ist endlos

Die vielen Änderungen am Design machen eins unmöglich: Das Resultat in Gänze zu beschreiben. Es muss erlebt werden. Ein paar letzte Worte:

Die Übersichtsseite zu Tests (& Berichten) zeigt mit drei 16:9-Aufmachern am Kopf, dass sie nicht mit der Startseite konkurriert. Optisch sind die Aufmacher aber gleich aufgebaut. Die Auswahl der Unterkategorien wandert von der Schwerpunkt-Leiste in den rechten Seitenstreifen. Im Verlauf der Seite finden sich zwei von der Startseite bekannte graue Querbalken wieder. Der erste enthält Lesertests, der zweite prominente FAQs aus der Community unter dem Motto „Leser helfen“. So prominent haben sich diese Artikel noch nie auf ComputerBase wiedergefunden.

In den Unterkategorien finden sich die „So testet ComputerBase“-Artikel jetzt prominent im rechten Seitenstreifen.

Die Sektion Videos hat Anpassungen im Detail erfahren und auch die Einzelansicht von Videos trägt den immer höher aufgelösten Formaten Rechnung.

Weitere Neuerungen betreffen die bessere Nutzbarkeit unter Einsatz der Tastatur oder von Screenreadern (Stichwort „Accessibility“), eine neue Kennzeichnung der News/Berichte von Messen, neue Tooltips für Wikipedia-Links, die 404-Fehlerseite... Es gibt in jedem Fall genug zu entdecken.

Ein Design braucht Konsequenz im Alltag

Das Design von ComputerBase ist ein Gerüst. Erst Texte, Bilder und Videos machen den Eindruck für den Leser vollkommen. Damit steht und fällt das Design auch mit diesen Elementen.

Wir haben es uns zum Ziel gesetzt, das Design auch im Alltag auf dem Niveau zu halten, wie wir es über Monate entworfen haben. Dazu gehört, dass wir Bilder bewusst und nur in hochauflösenden Formaten nutzen und Zeilenumbrüche in Titeln dort, wo sie nicht passen, vermieden werden.

Rückwirkend haben wir über 2.500 (!) Tests mit neuen Überschriften und Aufmachern versehen, um diesem Anspruch gerecht zu werden. News werden seit August 2014 parallel mit neuen Titeln und Logos versehen – so lange reicht der experimentelle Parallelbetrieb einer frühen Version des neuen Designs zurück.

Das Ziel zu erreichen, fordert der Redaktion viel Einsatz ab – gerade in hitzigen Situationen ist passendes Bildmaterial oft nicht direkt zur Stelle. Um mehr Quellen anzapfen zu können, haben wir im neuen Design die Möglichkeit geschaffen, auch Bilder unter freigegebenen CC-Lizenzen auf ComputerBase verwenden zu können. Wir möchten allen Fotografen danken, die ihre Werke unter diesen Lizenzen zur Verwendung online verfügbar machen!

Ein Fazit zum Neuanfang

Für uns endet mit der Veröffentlichung des neuen Designs ein Prozess, der vor drei Jahren begann. Nie zuvor haben wir uns inhaltlich so viele Gedanken darüber gemacht, welche Anpassungen am Design dem Inhalt am besten stehen, nie zuvor haben wir mit solcher Konsequenz und mit externer Unterstützung an einem Relaunch von ComputerBase gearbeitet. Die klare Linie der Präsentation über alle Geräteklassen bietet unseren Inhalten jetzt endlich die Bühne, die sie verdienen.

Wir finden, dass ComputerBase trotz der Fülle an Anpassungen dabei auf den ersten Blick wiederzuerkennen ist. Das beginnt beim im Kern unveränderten Logo, setzt sich über das Farbschema und den grundsätzlich unveränderten Aufbau der Startseite sowie die inhaltliche Schwerpunktsetzung mit den wenigen Aufmachern und einem News-Stream fort und gipfelt in den Inhalten, die am Tag der Umstellung dieselben sein werden wie einen Tag zuvor.

Insgesamt sind wir sehr stolz auf das gemeinsam Erreichte, und das eigene Surfverhalten spiegelt den Erfolg wider: Mit dem neuen Design besuche ich inzwischen fast täglich die Startseite von ComputerBase; und zwar nicht, weil ich es muss. Sondern vielmehr, weil ich die Inhalte mag, und sie endlich den visuellen Rahmen bekommen haben, den sie eigentlich schon länger verdient hätten.

Gerrit van Aaken von praegnanz.de

Das neue Design ist nicht das Ende der Entwicklung, es soll der Anfang sein. Die Liste der Funktionen, die wir uns für ComputerBase wünschen, ist lang. Hätten wir alle Ideen und Wünsche versucht umzusetzen, wir würden nie fertig werden. Die nächsten Schritte sind damit vorprogrammiert.

Über die nächsten Tage werden die von der Community bzw. den Lesern gemeldeten Fehler behoben, die es mit Sicherheit noch geben wird. Nach kurzer Verschnaufpause geht es dann an die Implementierung weiterer Funktionen. Die Redaktion wird die neuen Möglichkeiten mit Inhalt füllen. Und auch hier gibt es unzählige neue Ideen, die nur auf ihre Umsetzung warten. Aber das ist das nächste Kapitel.

Dieser Artikel war interessant, hilfreich oder beides? Die Redaktion freut sich über jede Unterstützung in Form deaktivierter Werbeblocker oder eines Abonnements von ComputerBase Pro. Mehr zum Thema Anzeigen auf ComputerBase.