Wie alt ist die Website oder der Blog Ihres Unternehmens? So um die fünf Jahre? Dann sollten Sie jetzt weiterlesen. Ein Internetauftritt sollte spätestens alle fünf bis sechs Jahre aktualisiert werden, da sind sich Fachleute einig. Das ist auch nachvollziehbar, denn nach dieser Zeit ist zumindest das Design nicht mehr zeitgemäss. In den meisten Fällen muss nach so langer Zeit auch das Content Management System CMS dem grossen Service unterzogen und auf den aktuellen Stand der Möglichkeiten gebracht werden. Oder es ist Zeit mit einem neuen, flexibleren CMS wie z.B. WordPress zu arbeiten.

Nach über fünf Jahren war auch dieser Blog hier in die Jahre gekommen, das Design passte nicht mehr. Das verwendete Theme wird vom Entwickler kaum mehr unterstützt. An einer mobilen Version haben wir vor zwei Jahren behelfsmässig geschraubt. Schliesslich wurde die Zeit reif für den kompletten Relaunch. Für das Design und die technische Umsetzung habe ich mich mit Karin Christen und Silvan Hagen von der Web-Agentur required+ zusammengesetzt. Dass wir gut zusammenarbeiten und uns ergänzen wussten wir aus den beiden Blog-Projekten mit  SBB Cargo und der Katholischen Kirche im Kanton Zürich. Vorgegangen sind wir in diesen Schritten:

1. Analyse und Workshop zum Relaunch

Eigene Verbesserungsideen und der Blick auf Seiten aus dem Wettbewerb und führenden Blogs waren eine Grundlage. Wir haben die Fakten geprüft: Google Analytics zeigt “unter der Kühlerhaube” welche Inhalte auf ein gutes Echo stossen und wie die Seite genutzt wird. Uns hat aber auch interessiert, wie die Besucher dieses Blogs die verschiedenen Angebote ansteuern. Mittels einer Heatmap haben wir eruiert und ausgewertet, wie sich die Besucher auf den Seiten bewegen.

Anfang Mai haben wir in einem Workshop besprochen, was im künftigen Auftritt wichtig ist, was verbessert werden muss und was im neuen Auftritt keinen Platz mehr findet:

1. Der Blog wird verstärkt zu einer Agentur-Website, das bedeutet, dass das Angebot besser beschrieben und mit den Fach-Beiträgen verzahnt wird.
2. Wer bisher wissen wollte, wer hier schreibt, musste das via die Seite “über mich” in Erfahrung bringen. Neben Home wurde diese Sub-Seite, seit es den Blog gibt, am meisten aufgerufen. Ein Klick zuviel, befanden wir, darum zeige ich mich neu schon auf der Homepage.
3. Verbessert ist auch die Informationsarchitektur: Startseite, Kategorien, Sidebar und Inhalte wurden dafür einer kritischen Prüfung unterzogen und vereinfacht.
4. Die Seite muss punkto Darstellung und Navigation für alle Gerätegrössen optimiert sein. Jeder achte Besucher kommt mobil mit dem Smartphone auf die Seite.

Was wir über Bord geworfen haben:

• Die Seite Knowhow gibt es so nicht mehr, denn sie versprach mehr, als sie zu halten vermochte: Die Blogroll, Links zur Horizonterweiterung und Quellen zur Arbeitshilfe konnte ich mangels Gestaltungsmöglichkeiten lediglich als trostlose Linkliste darstellen. Dafür haben wir eine schönere Lösung gefunden. Knowhow existiert im Blog auch weiter als Schlagwort.
• Die statische Seite Social Media First Aid wurde zwar ganz gerne gelesen, aber nie in Anspruch genommen. Darum habe ich sie ins Angebot integriert. Zudem befanden wir, dass der englische Begriff fehl am Platz ist.
• Die Sidebar rechts war für einen modernen, grosszügigen Auftritt nicht mehr zeitgemäss, sie musste weg.

2. Wahl von Theme und Plugins

Die Webagentur required+ bietet ihren Kunden für die Gestaltung des Webauftritts beides an: Die Anpassung von einem bestehenden Theme oder den Aufbau eines neuen Themes von Grund auf. Das gleiche gilt auch für Plugins, das sind kleine Programmschnipsel welche die Funktionen des CMS erweitern wie z.B. Social Media Buttons oder Formulare. Der Entscheid, der gefällt werden muss, lässt sich mit einem Haus-Projekt vergleichen. Wenn Sie ein Haus umbauen, können Sie es erst besichtigen, Sie nehmen Dinge wahr, die

Ihnen sehr gut gefallen und andere die Ihnen überhaupt nicht passen. Diese ändern Sie dann: Das kann dann von der Versetzung von Türen, umgestalten der Küche oder die neue Farbe an den Wänden alles Mögliche sein. In dem Moment, wo klar wird, dass kein Stein auf dem anderen stehen bleibt, weil Sie so dermassen viel verändern möchten macht es Sinn, über einen Neubau nachzudenken. Natürlich hat das auch seinen Preis. Für diese Seite hat required+ ein Theme vorgeschlagen, das genügend flexibel in der Anpassung ist. Aber bei jedem fertigen Theme, und insbesondere auch bei eingesetzten Plugins, gibt es auch Grenzen. Diese gilt es frühzeitig zu besprechen.

3. Aufbau der Entwicklungs-Umgebung

Mockups, die mit einer schönen Präsentation die zeigen wie Seiten und verschiedene Elemente aussehen werden sind zwar gut. Auch in diesem Projekt haben wir immer wieder mit grafischen Vorschlägen für die Gestaltung gearbeitet. Sie helfen bei der Entscheidungsfindung, bevor sich ein Programmierer an die Arbeit macht und das Ganze umsetzt. Aber eine Website lebt von Aktion und Interaktion und das wird erst sicht- und erlebbar, wenn mach sich nicht durch Seiten und Beiträge durchklicken kann. Darum empfiehlt es sich möglichst früh eine Entwicklungsumgebung, im Fachjargon Dev-Umgebung (für Developement), einzurichten. Hier baut die Web-Agentur die neue Struktur der künftigen Seite oder des Blogs auf und migriert oder verständlicher zügelt die Inhalte in diese Umgebung.

4. Projektmanagement

Der gemeinsame Workshop im Mai war auch das Kick-Off. Daraus hat required+ eine revidierte Offerte und einer Anforderungsliste gemacht. Die weitere Zusammenarbeit haben wir via eine Projektplattform gelöst. So konnten Mails reduziert werden und alle am Projekt beteiligten Mitarbeiter (das Team war grösser wie das Kernteam im Workshop) hatten jederzeit einen aktuellen Überblick. Regelmässige Besprechungen halfen Prioritäten zu setzen, Vorschläge zu klären und Entscheide zu fällen.

Die Abstimmung der Entwicklung von Design und Informationsarchitektur lief also über die Entwicklungsumgebung. Auch wenn hier der Fortschritt jederzeit überprüft werden kann muss sich der Auftraggeber bewusst sein: Hier wird gearbeitet. Nochmals zum Vergleich: Wenn Sie sich ein Haus um- oder neu bauen lassen, dann begehen Sie zwar regelmässig die Baustelle und besprechen die Fortschritte. Sie werden aber nicht jedes Mal darauf hinweisen, dass hier die Abdeckung für die Steckdose noch nicht montiert ist und da der Kühlschrank noch fehlt. Das verlangt Disziplin und Vertrauen. Wenn Sie noch nie selber einen Blog oder eine Website neu gebaut oder einem Rebdesign unterzogen haben empfiehlt es sich von Anfang an eine erfahrene Projektleitung ins Boot zu holen. Sie versteht die Schritte und kann abschätzen, wo ein Projekt rund läuft und wo es droht aus dem Ruder zu laufen.

Während das Team von required+ an der Arbeit war hatte ich auf der Ebene der Beiträge einiges zu tun. Die statischen Seiten mit Angebot, über mich und Kontakt mussten komplett neu geschrieben werden. Zudem musste ich jeden einzelnen Beitrag in die Hände nehmen und einer Qualitätskontrolle unterziehen:

• Prüfen des Titelformats (im alten Theme arbeitete ich mit h4, teils mit h3, im neuen Blog mit h2)
• Formatierung aller Interviews: Hier hat mir required+ eine schönere Lösung realisiert.
• Bilder überprüfen und Formate anpassen an das neue Design.
• Beiträge auf Textdesign prüfen und mit Zitaten, Tweets und Angebot ergänzen.

Dann habe ich auch die Gelegenheit genutzt um über alle Beiträge hinweg die Konsistenz der Schlagwörter zu prüfen und zu optimieren. Verschiedene Schreibweisen schleichen sich über die Jahre ein und nehmen so dem einzelnen Keywords das Gewicht. Für diese inhaltliche Optimierung ist es wichtig, genügend Zeit einzurechnen.

5. Schlussabnahme

Inhalte, Navigation und Funktionen wurden getestet. Mitte August, nach gut drei Monaten kam der Moment zu dem alle wesentlichen Aufgaben erledigt waren und es Zeit für das Go Live wurde: Am 17. August haben wir den neu gestalteten Blog online genommen. Aber eine Website und ein Blog ist ein dynamisches Projekt. Es lebt von den Ideen der Macher. Aber auch von den Bedürfnissen und Gewohnheiten der Leser. Wir werden die Nutzung in den nächsten Wochen weiter beobachten, freuen uns aber auch über das Feedback von unseren Lesern und optimieren weiter.

Ich habe mit required+ schon seit längerer Zeit eine Maintenance Vertrag für regelmässige Updates von WordPress und Plugins. Besteht eine solche regelmässige Zusammenarbeit, lassen sich auch kleinere Anpassungen unkomplizierter bewerkstelligen.

Das ist in diesem Blog hier neu

Das Web und die Technologie haben sich in den letzten Jahren weiter entwickelt. Zwar sollten für den schnellen Überblick auch heute die wesentlichen Informationen im obersten Bildschirm-Bereich ersichtlich sein, Scrollen oder auf auf Smartphone und Tablet Wischen gehören für den Nutzer heute ganz selbstverständlich dazu. Diese schnelle Art zu navigieren erlaubt auch eine grosszügigere Gestaltung. Usability und Joy of Use lagen der Gestaltung der Seite zugrunde: Der Besucher soll sich auf der Seite wohl fühlen, einen guten Überblick erhalten und leicht navigieren können. Und so sieht das Resultat im Vergleich zu früher aus:

Homepage (Startseite) vorher und nachher

Artikel vorher und nachher

Die wesentlichen Anpassungen teile ich hier in aller Kürze für alle, die auch einen Relaunch ihrer Seite planen als Checkliste, worauf man achten kann und/oder soll.

• Die Seite weist in der Gestaltung mehr Raum für Bilder und Texte auf und wirkt so luftiger und grosszügiger.
• Grössere Schriften und eine modernere Typographie mit Serifenschrift erleichtern das Lesen.
• Klare Bezeichnungen und der Verzicht auf unnötige Elemente (Clutter) verbessern die Übersicht.
• Der Leser erhält auf einen Blick eine Auswahl der aktuellsten Beiträge aus allen Kategorien.
• Die am meisten gelesenen Beiträge gut sichtbar aufgelistet.
• Schon auf der Startseite sind ein paar Worte mit Bild über mich zu finden. Menschen wollen sehen, wer hinter einer Organisation steckt, möglichst mit Bild.
• Besondere Fundstücke aus meiner Lektüre sind auf der Startseite kuratiert. (Das gab’s früher schon im Newsroom.)
• Nach jedem Artikel werden drei weitere Beiträge zum gleichen Thema mit Bild und Titel angeboten.
• Social Media Buttons stehen nicht mehr nur am Schluss, sondern auch am Anfang jedes Beitrags.
• Zitate oder Tweets sind neue Elemente welche das Textdesign und die Unterstützung für den schnellen Leser verbessern.
• Beiträge sind, wo thematisch passend, mit meinem Angebot verlinkt.
• Der Blog kann nicht mehr nur mit RSS im Feed Reader sondern neu auch mit Mail abonniert werden (ganz unten rechts auf der Seite beim orangen Zeichen).
• Das Kommentarfeld lädt zuerst zum Schreiben ein, erst mit dem Schreiben erscheinen auch die Pflichtfelder.

• 

  Was die Seite zu bieten hat wird nun auch in einer Navigation im Fussbereich sichtbar.

• Der Kontaktbereich gibt einen Überblick über alle Möglichkeiten für eine einfache Kontaktaufnahme von Telefon über Mail bis Social Media.

Die Seite ist – ohne geht es heute ohnehin nicht mehr – für Smartphones optimiert und lässt ein angenehmes Lese- und Navigationserlebnis zu. Viele Seiten behelfen sich für die Navigation mit dem so genannten “Hamburger” bei dem die Menüauswahl erst mit Dropdown sichtbar wird. Required+ hat für die mobile Version dieses Blogs ein Horizontal-Scroll-Menu gebaut, also eine Menüführung die quer über den Screen verläuft und gescrollt werden kann. Und das sieht heute so aus:

Wir sind natürlich gespannt, wie diese Lösung bei unseren Smartphone-Lesern ankommt.

Nach dem Relaunch ist vor dem Relaunch. Dieses Seite wird immer wieder moderate Anpassungen erleben, im Mittelpunkt stehen dabei meine Leserinnen und Leser mit ihren Bedürfnissen. Das Team von required+ und ich freuen uns über Meinungen, Lob aber natürlich auch Verbesserungsvorschläge unten im Kommentar oder über alle anderen Kontaktmöglichkeiten.