Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Vorschau auf einen Relaunch

Vorschau auf einen Relaunch

Der diesjährige Adventskalender neigt sich dem Ende, da wirft die nächste größere Aktion bereits ihre Schatten voraus. Unter der Haube kann webkrauts.de nicht mehr mit dem Stand der Technik mithalten. Hinter dem heutigen Türchen erwartet euch daher ein Vorgeschmack auf den nötigen Relaunch. Nicolai Schwarz lädt ein zu einem ersten Blick in die Zukunft von webkrauts.de.

Es ist für jeden auf den ersten Blick zu erkennen: Unsere Webseite ist mittlerweile etwas, sagen wir mal, in die Jahre gekommen. Wir sind 2005 mit WordPress und den ersten Inhalten gestartet. Im Laufe der letzten Jahre gab es – mehr oder weniger – regelmäßig neue Artikel und einige Serien. Für ein Projekt, das wir alle in unserer Freizeit mit Inhalten füllen, schon nicht schlecht. Aber die Unterschiede zwischen den Inhalten der Artikel und der eigenen Webseite werden immer größer. Wissen wir.
Nun starten wir einen neuen Anlauf für einen Relaunch. Die Umsetzung soll im Februar/März erfolgen, heute öffnen wir bereits ein Türchen für eine besinnliche Vorschau auf das Design. Zunächst aber ein paar inhaltliche Überlegungen:

Inhalte finden

Wir haben hier auf webkrauts.de eine Menge älterer Artikel gesammelt, die nach wie vor gut und aktuell sind. Allein: das Blogformat macht es schwierig, diese Artikel auch zu finden. Bisher gibt es vier Möglichkeiten, zu den Inhalten zu kommen: Besucher können die Seiten einzeln durchblättern, die Suche bemühen, über die Serien gehen oder es über die (derzeit unstrukturierten) Tags versuchen. Wir werden zwei weitere Optionen hinzufügen und unsere Inhalte auch über Rubriken (HTML, CSS, Usability, Accessibility …) und Schwierigkeitsgrad (Anfänger, Fortgeschrittene, Experten) zugänglich machen. Bei der Gelegenheit bringen wir dann auch die Tags in eine ordentliche Struktur.

Neue Inhalte ermöglichen

Wir kümmern uns zwar gerne um neue Inhalte, können aber als Nebenprojekt kein regelmäßiges Magazin bieten. Das wollen und müssen wir auch nicht, schließlich gibt es andere Webseiten, die das viel besser leisten. Andererseits reduzieren sich die Aktivitäten der Webkrauts nicht nur auf Artikel hier auf der Webseite. Wir sind auf BarCamps und Konferenzen unterwegs, halten Sessions und Vorträge, schreiben Fachartikel und -bücher.

Auf diese Aktivitäten können wir besser hinweisen; deshalb erweitern wir unsere Inhalte. Unter dem neuen Menüpunkt »Bücher« werden wir sowohl echte Rezensionen von Fachbüchern als auch Bücher von Webkrauts (mit reinem Klappentext) vorstellen. Es wird für alle Besucher die Möglichkeit geben, passende Web-Termine anzulegen, Webkrauts können auf eigene Vorträge verweisen. Außerdem können wir kleine Hinweise auf Artikel in Magazinen, im eigenen Blog oder auf anderen Webseiten eintragen (»Kurz notiert«). Also eine Art internes Twittern, was wir übrigens absichtlich nicht durch automatische Feeds der Twitter-Accounts von Webkrauts regeln.

Vorschau der Startseite

Aus diesen Überlegungen heraus haben wie die Startseite umgearbeitet. Im Header besteht nun neben der Suche die Möglichkeit, unsere Inhalte nach Rubrik, Serie oder Schwierigkeit zu durchstöbern. Außerdem ein übliches Hauptmenü und Links zu Twitter und dem RSS-Feed. Darunter – hell hervorgehoben – unsere Hauptinhalte: aktuelle und in der Regel exklusive Artikel für webkrauts.de in einem jQuery-Slider. Es folgen die kurzen Notizen, Termine und Vorträge sowie ein größerer Footer.

Screenshot der Startseite
Siehe auch den Klickdummy der Startseite

Vorschau eines Artikels

Bei den Artikeln passen wir die Typografie an und sorgen für eine bessere Lesbarkeit. Wir stellen unsere Autoren deutlicher in den Vordergrund, indem die Autoreninfo nun oben neben dem Artikel und nicht mehr am Ende angezeigt wird. Dazu kommen übliche soziale Links und Hinweise auf andere Artikel desselben Autors.

Screenshot einer Artikel-Seite
Siehe auch den Klickdummy der Artikelseite

Alles im Fluss

Bevor ihr euch der Kritik hingebt: Dies ist eine Vorschau. Bestimmte Elemente werden wir erst bei der Umsetzung im Zusammenspiel mit dem CMS hinzufügen. Das betrifft vor allem Dinge wie Responsive Design, barrierefreie Aspekte oder einige Details am Design (etwa die Kontraste oder die finale Typografie). Insofern lohnt sich im Moment eigentlich kein Blick auf das Markup.

Ansonsten sind wir auf eure Anmerkungen gespannt. Bis zum Relaunch sind es noch ein paar Wochen hin, so dass wir gute Ideen gerne noch mit aufnehmen können.
Vielleicht werden einzelne Elemente nicht allen gefallen, aber eines dürfte sicher sein: Mit diesem Ansatz sind wir inhaltlich, technisch und gestalterisch schon mal zwei, drei Schritte vorangekommen.

Kommentare

Marc
am 24.12.2011 - 09:36

Strukturell super. Dann muss ja jetzt nur noch ein zeitgemäßes Layout gestaltet werden ;-)

Permanenter Link

Dan
am 24.12.2011 - 10:36

Gefällt mir persönlich nicht. Wirkt alles so eintönig und altbacken.

Permanenter Link
Marcel Böttcher

Marcel Böttcher
am 24.12.2011 - 15:09

Ich möchte mich meinen Vorrednern anschließen: Strukturell sicherlich ein Gewinn, gestalterisch jedoch nicht zeitgemäß.

Bedingt durch den sehr bunten und etwas altbacken strukturierten Hintergrund, dem (zu) massiven Einsatz von Abrundungen und der aus meiner Sicht ungeschickt platzierten Partie aus Logo und Claim, ergibt sich ein sehr verspieltes, fast kindliches Bild. Ich habe eher das Gefühl in einem Spielzeugladen als bei den Webkrauts zu stehen.

Typografisch hätte man m.M.n. mehr rausholen können: Die Items der drei Linklisten auf der Startseite (Kurz notiert, Termine, Vorträge) lassen sich nur schwer erfassen und auch beim Überfliegen eines Artikels könnten die Subheadlines etwas mehr Führung geben. Ein Highlighting in den Codeblöcken wäre natürlich schön. Ich bin mir der Problematik mit dem Übernehmen der Inhalte in ein neues System bewusst, trotzdem wirken die Fotos und Grafiken im Artikel sehr unplatziert.

Auch beim Hoververhalten sehe ich noch Optimierungspotenzial: Die Hauptnavigation wirkt durch den langgezogenen Farbwechsel sehr unruhig, bei den "Zungen" (Navigation nach Rubrik, Serien und Anspruch) hätte man hingegen mehr machen können.

Ich denke, dass der aktuelle Stand noch nicht zeitgemäß ist und dem Claim "für mehr Qualität im Web" noch nicht gerecht wird. Dafür sind noch zu viele Schnitzer in der Gestaltung. Ich bin aber sehr gespannt, was sich bis zum eigentlichen Launch noch tut.

Permanenter Link

Oliver
am 24.12.2011 - 16:00

Hm, ich empfinde es auch nicht als Verbesserung ... meine Kritikpunkte wären das Logo, was ins Design geschossen statt integriert ist und die Schriften, die es sehr unruhig machen. Wenn man nur auf den header schaut, dann nerven die verschiedenen Schriften schon arg.

Permanenter Link

Kilcher
am 24.12.2011 - 17:27

Mit gefällt das neue Design sehr gut!
Für meine Empfinden sind die Farben gelb, blau, grau sehr harmonisch kombiniert und die horizontal gehaltene Darstellung verleiht dem Inhalt Ruhe. Einzig die Links und Sublinks im Menu oben würde ich ohne unterstreichen anzeigen, und die unterstrichenen Links und Textlinks würde ich beim hovern mit einem Farbwechsel hervorheben.

Permanenter Link

Claudia
am 24.12.2011 - 23:54

Darf ich als Nicht-Profi auch meine Meinung abgeben?

Mir gefällt das neue Design. Nix altbacken. Besonders gelungen finde ich die oberste Navigation: Inhalte nach: Rubrik, Serien, Anspruch.

Wünsche euch frohe Festtage!

Permanenter Link

Gerhard Großmann
am 25.12.2011 - 00:59

Hier mal einige Gedanken von mir, vielleicht verändern sie, vielleicht festigen sie auch bereits Entschiedenes:

• Die Farben finde ich sehr harmonisch und nicht zu bunt.
• Bei der Artikelseite irritiert mich, dass der Hintergrund nicht mitscrollt. Das sieht so aus, als ob sich die Schrift über dem Papier hinwegbewegt (auf der Startseite bewegt sich der Hinter ja auch mit).
• Apropos Schrift: Die Share ist eine grandiose Wahl!
• Bei den drei Wählfeldern für Rubrik, Serie und Schwierigkeit (»Zungen« ☺) ist die Textspalte etwas schmal. Wenn Text dann in zwei Zeilen umbricht, kann man nicht unbedingt sofort erkennen, was noch zum Punkt dazugehört und was schon ein neuer Punkt ist. Hier könnte man bei zusammengehörigen Einträgen den Zeilenabstand etwas verringern.
• Es wäre schön, wenn der Wechselkasten anhält, sobald man einen Artikel angewählt hat. Bei einem zweiten Klick auf die Nummer – die sich vielleicht in ein Pause-Symbol verwandelt hat – könnte es dann weiterlaufen.
• Ihr verlinkt aber schon auch die Überschriften in dem Wechselkasten, oder? Und vielleicht auch die Kommentare (Direktsprung dorthin; wenn man den Artikel schon gelesen hat und nur nochmal wegen der Antworten aufsucht)?
• Das »für mehr Qualität im Netz« könnte man wirklich in einer weniger ausgefallenen und auch weniger verschnörkelten Schrift setzen. Vielleicht die Lucida Sans in Kursiv?
• Statt »Inhalte nach Rubriken« könnte man einfach »Rubriken« (oder »Wissensbereiche«) schreiben. Entsprechend bei den anderen Punkten »Serien« und »Schwierigkeitsgrad« (oder so).

Permanenter Link

Ansgar Hein
am 26.12.2011 - 00:49

Mutige Entscheidung, das Design auf das 24. Türchen zu legen. Und ungeachtet der Geschmacksfrage (modern, unmodern, gefällt, gefällt nicht, zu bunt, zu rund, zu eckig, zu langweilig, zu irgendwas) ist es richtig, dass die Webkrauts ein neues Design benötigen und dass es strukturell und unter der Haube erste Sahne ist. Danke für die Vorschau und vielleicht lässt sich die ein oder andere Anregung ja noch einarbeiten ... ich bin auf den Relaunch gespannt und freue mich, dass die Seite dann viel benutzerfreundlicher daherkommt.

Permanenter Link

Der Kieler
am 28.12.2011 - 16:07

Mit der farblichen Gestaltung bin ich noch nicht zufrieden - der Rest sieht schon ganz gut aus ..!

Permanenter Link

Axel Copypast
am 28.12.2011 - 23:39

Ist das ernst gemeint? Graue Farbe auf weißem Hintergrund?

Permanenter Link

Silkea
am 29.12.2011 - 11:58

Die neue Struktur gefällt mir sehr gut. Das Design finde ich persönlich etwas unruhig. Die verspielte Schrift ("Qualität...") wurde ja schon ansprochen. Die Schrift für die Rubriken würde ich lieber etwas größer machen und den Text kürzer ("Inhalte nach" könnte man einfach weglassen).

Außerdem gefallen mir die runden Übergänge der Hintergrundfarben nicht. Sie sind zu klobig und lenken zu sehr vom Hauptinhalt ab - bei den Artikeln ist es dann besser mit dem einfarbigen Hintergrund.

Das Layout der Artikel mit den prominenteren Infos zum Autor ist schön gelöst. Der Konstrast des Artikels ist etwas gering für längeres Lesen, finde ich.

Bin auf die Endfassung gespannt!

Permanenter Link

Peter
am 29.12.2011 - 21:03

Wie bereits von anderen erwähnt, ist vieles eine Geschmacksfrage.

Was mir persönlich unmittelbar nach öffnen der Seite negativ auffiel (und nervte) war der automatische Wechsel (slider). Er lenkt - und das ist eigentlich bekannt - von den nicht weniger wichtigen Texten darunter ab. Das auch, weil (mir) die Schrift insgesamt zu unruhig, wenig gut lesbar und teils kontrastarm erscheint.

Und ja, der background erinnert mich irgendwie an NetObjects Fusion V.2.x.x ;-)

Mal rund, mal eckig - sicher auch nicht optimal.

Aber hey, ich bin am allerwenigsten ein Designer und sollte vielleicht nicht so laut denken :-)

Permanenter Link

nik
am 30.12.2011 - 17:01

Für mich liest sich der Text schlechter als vorher. Die Schrift ist weniger bildschirmtauglich als die aktuelle und woher die Idee kommt, dass weniger Kontrast die Lesbarkeit fördert (grau statt schwarz), hat sich mir auch noch nie erschlossen. Die Dropdowns, in denen sogar Text umgebrochen werden muss, finde ich relativ sinnfrei, genau wie den „kurz notiert“-Footer.

Permanenter Link

Peter
am 01.01.2012 - 11:37

Ohne jeden Anspruch auf Richtigkeit und völlig wertfrei noch ein paar Gedanken:

Worum geht es auf den Seiten der Webkrauts - also das Mission Statement - findet der Besucher ganz unten, fast schon schamhaft versteckt. Erwartet der unvorbereitete Besucher diese Info nicht eher im Viewport, wenn die Seite geladen ist?

Ich finde auf der Startseite keine deutliche"optische Führung" zu den wichtigsten Seitenelementen. Die Hauptnavigation geht ein bischen zwischen Header und Slider unter. Die fast identische Gestaltung von Header und dem Bereich unter dem Slider (Kurz notiert, ...) erscheint inhaltlich gleichberechtig zu sein.

Die (vielen) gleichnamigen Links verwirren etwas. Möglicherweise auch deshalb, weil teils der gleiche Text auch unverlink als Headline verwendet wird.

Die Gestaltung des Top-Borders als durchgehende und gestrichelte Line erinnert an eine Stoffnaht, die aber auf dem Hintergund keinen Sinn macht. Dieser erinnert eher an Marmor o.ä. und läßt sich schlecht nähen ;-)

Ebenso wäre zu probieren, ob die gestrichelten Linien zwischen den Einträgen optisch entbehrlich sind und damit mehr Ruhe einkehrt.

Die Gestaltung des Suchbereiches im Header ließ bei mir zunächst die Vermutung aufkommen, dass der eingegebene Suchbegriff sich auf die drei Möglichkeiten Rubrik, Serien und Anspruch bezieht. Wichtig ist auf alle Fälle eine gut funktionierende Volltextsuche.

BTW: Die schwierige Entscheidung, welche Artikel welchen Schwierigkeitsgraden zuzuordnen sind, würde ich mir nicht antun wollen. Ich halte das für entbehrlich. Ob man mit seinen vorhandenen Kenntnissen einem Artikel folgen kann, hängt doch auch von dem Schreibstil des Autors ab.

a:hover wurde bereits genannt.

Die Artikelseite wirkt im Gegensatz zur Startseite auf mich viel ruhiger und angenehmer - abgesehen von den bereits genannten Vorschlägen zu Designdetails.

Und ja, ich stimme nun zu: die jetzige Schriftart bringt keinen Gewinn.

Mit diesen hoffentlich helfenden Hinweisen uns Allen ein erfolgreiches 2012!

Permanenter Link

Jochen
am 07.01.2012 - 10:13

Gibt es einen Grund für die Farbwahl? Woher kommt auf einmal dieses (Baby)Blau? Sicherlich alles eine Geschmacksfrage, aber mit webkrauts assoziiere ich den orangenen Farbton aus dem Logo.
Was aber meines Erachtens keine Geschmacksfrage mehr ist, sondern ein Verstoß gegen die Barrierefreiheit und damit für eine Webseite, die sich für Webstandards einsetzt, "unwürig", ist der Schriftzug im Banner. Das Orange auf dem Blau - ein leichtes Flimmern ist bei mir die Folge.

Den Marmor(?)-Hintergrund finde ich weder zeitgemäß noch für eine ehern technisch orientierte Seite passend.

Für meine Nutzung der webkrauts-Seite wäre es hilfreich, wenn vor allem der Demo-Link sowie weitere Links schneller/einfacher auffindbar wären (z.B. in der rechten Spalte).
Häufig lese ich die Einleitung und dann überfliege ich den Artikel auf der Suche nach dem Demo-Link. Solch eine Demo ist für mich anschaulicher, ich versteh schneller, um was es geht, manchmal sorgt sie gar für ein "Ahhhh, wie genial"-Effekt. :) Erst dann les ich den Artikel genauer um zu erfahren, wie das funktioniert.

In diesem Sinne: Ein gesundes und erfolgreiches Jahr 2012!

Permanenter Link

Gerd Taddicken
am 18.01.2012 - 08:17

Sehr geehrte Damen und Herren!

Für mich persönlich ist die Gestaltung mehr als zweitrangig. In Bezug auf Barrierefreiheit wäre es schön, wenn so wenig wie möglich Fremdworte verwendet würden.

Mit 62 habe ich in Bezug auf Relaunch erst einmal bei der Firma Google vorbeigeschaut. Da kam auf deutsch auch das Gleiche heraus. Ohne ,Re...' erschien dann Start. Mmmh, dann heißt Relaunch vermutlich Neustart - Neuanfang wäre auch nicht schlecht.

Mal sehen, wie hier ä, ö und ü dargestellt werden. So ein Verlangen für einen Kommentarschreiber ist meiner Ansicht zu viel...

Bei aller Kritik finde ich es gut, dass sie auf das Verfallsdatum für Kommentare = 23.01.2012 hinweisen. Steht diese Information eigentlich auch am Anfang?

Mit freundlichen Grüßen

Gerd Taddicken

Permanenter Link

Peter
am 20.01.2012 - 16:36

@Gerd Taddicken:
Da ich kein offizielles Mitglied der Webkrauts bin, kann ich nur meine persönliche Ansicht kundtun:

Ich vermute, dass sich das Webprojekt der Webkrauts zunächst an Kolleginnen und Kollegen wendet, die sich tagtäglich mit dem Thema 'web working' beschäftigen.
Hier darf und muß man voraussetzen, dass die gängigen Fachbegriffe bekannt sind.

Eine zweite Zielgruppe werden diejenigen sein, die sich aus Interesse (Hobby)und einer deutlichen Webaffinität mit dem Thema beschäftigen. Bei dieser Zielgruppe darf man voraussetzen, dass die wichtigsten und gängigsten Begriffe bekannt sind.

Von daher halte ich eine noch stärkere Zuwendung zu "leichter Sprache" nicht für zielführend. Im Gegensatz zu anderen ähnlichen Publikationen, die dann schon mal sehr stark englisch-lastig sind, finde ich die Texte der Autoren sehr ausgewogen und halte sie für einen vertretbaren Kompromiss zwischen "Fach-Chinesisch" und "Populärwissenschaft".

Dabei sollte es m.E. bleiben.

Ansonsten landen wir in der Situation, dass wir eine "persönliche tragbare Elektronenrechenmaschine" benutzen, auf der ein "Programm für die Anfrage und Darstellung von Informationen in einem Netz von Dokumenten, die mit einer Kennzeichnungssprache hergestellt und mit einander verbunden sind" installiert ist, in einem "Automobile mit Zerknalltreibling" fahren, dabei ein "tragbares Funktelefon" am Ohr haben und so die "Funkmessgerätefalle" übersehen. Schlimmer noch: die "elektronische Post" enthielt im "Beipack" einen "Rückwähler". Und warum sind heiße Bräute cool?

Nix für ungut... :-)

Permanenter Link

Die Kommentare sind geschlossen.