Artikel
Vorschau auf einen Relaunch
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.
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.
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.
Zum Autor
Nicolai Schwarz arbeitet unter dem Namen textformer mediendesign als selbstständiger Designer und Webentwickler in Dortmund. Hauptsächlich arbeitet er an Drupal-Projekten. Gelegentlich schreibt er darüber, zum Beispiel für das Webstandards-Magazin, t3n oder eben auf webkrauts.de. Im September hat er »Drupal 7: Das Praxisbuch für Ein- und Umsteiger« beim Galileo Verlag veröffentlicht.
- Info:
- Vorschau auf einen Relaunch ist Beitrag Nr. 1186
- Autor:
- Nicolai Schwarz am 24. Dezember 2011 um 08:00
- Kategorie:
- Adventskalender 2011
Kommentare
Bitte die Hausregeln beachten. Alle Kommentare werden auf werbliche Links/Nicknames geprüft und gegebenenfalls gelöscht.
Kommentar-Feed für diesen Beitrag
Entschuldige, das Kommentarformular ist zurzeit geschlossen.
Strukturell super. Dann muss ja jetzt nur noch ein zeitgemäßes Layout gestaltet werden
Kommentar by Marc - 24. Dezember 2011 um 09:36
Gefällt mir persönlich nicht. Wirkt alles so eintönig und altbacken.
Kommentar by Dan - 24. Dezember 2011 um 10:36
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.
Kommentar by Marcel Böttcher - 24. Dezember 2011 um 15:09
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.
Kommentar by Oliver - 24. Dezember 2011 um 16:00
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.
Kommentar by Kilcher - 24. Dezember 2011 um 17:27
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!
Kommentar by Claudia - 24. Dezember 2011 um 23:54
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).
Kommentar by Gerhard Großmann - 25. Dezember 2011 um 00:59
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.
Kommentar by Ansgar Hein - 26. Dezember 2011 um 00:49
Mit der farblichen Gestaltung bin ich noch nicht zufrieden – der Rest sieht schon ganz gut aus ..!
Kommentar by Der Kieler - 28. Dezember 2011 um 16:07
Ist das ernst gemeint? Graue Farbe auf weißem Hintergrund?
Kommentar by Axel Copypast - 28. Dezember 2011 um 23:39
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!
Kommentar by Silkea - 29. Dezember 2011 um 11:58
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
Kommentar by Peter - 29. Dezember 2011 um 21:03
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.
Kommentar by nik - 30. Dezember 2011 um 17:01
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!
Kommentar by Peter - 1. Januar 2012 um 11:37
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).
Erst dann les ich den Artikel genauer um zu erfahren, wie das funktioniert.
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.
In diesem Sinne: Ein gesundes und erfolgreiches Jahr 2012!
Kommentar by Jochen - 7. Januar 2012 um 10:13
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
Kommentar by Gerd Taddicken - 18. Januar 2012 um 08:17
@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…
Kommentar by Peter - 20. Januar 2012 um 16:36