Agentur-Insights: Von der Idee zur fertigen Website

Eine neue Website durchläuft von der ersten Idee im Hinterkopf des Kunden bis zur Liveschaltung unterschiedliche Projektphasen. Da jeder Kunde und jedes Projekt einzigartig sind, variiert der Ablauf und die Schwerpunktsetzung von Projekt zu Projekt.

In diesem Beitrag beschreiben wir den beispielhaften Ablauf eines erfolgreich gelaunchten Internetauftritts. Die Beispielbilder stammen von der Umsetzung der Website Wir leben nachhaltig. Das im März 2015 live geschaltete Webportal veröffentlicht Tipps und Anregungen für ein nachhaltigeres Leben und wird vom Redaktionsteam der Energie- und Umweltagentur Niederösterreich (ENU) vorbildlich betreut.

Warum wir uns für die Zusammenarbeit mit SEAM entschieden haben?
Es war wohl das perfekte Zusammenspiel von Zuhören, was wir als Kunden wünschen und den tollen kreativen Ergänzungen durch die Mitarbeiterinnen und Mitarbeiter von SEAM. Gemeinsam sind klare Strukturen entstanden, die Fülle der Ideen und Wünsche sind in eine kompakte Wissensplattform überführt worden. SEAM schafft es ausgezeichnet technische Fachbegriffe in Bilder zu übersetzen und im Dialog mit uns die Seite ständig weiterzuentwickeln. Im Sinne der Nachhaltigkeit freut uns auch die Erkenntnis, dass man mit dem Zug schneller, bequemer und umweltfreundlicher von Wien nach  St. Pölten kommt!

Christa Ruspeckhofer, Energie- und Umweltagentur NÖ

1. Kick-off

Sobald die Projektbeauftragung erfolgt ist, werden im Zuge von Meetings bzw. Workshops die Projektziele und Rahmenbedingungen gemeinsam mit dem Kunden definiert, analysiert und skizziert.

Die ersten Funktionsskizzen müssen nicht schön sein. Grafisches Gespür ist später gefragt.

2. Konzeption

Die Ergebnisse werden in einem auf die individuellen Projektziele abgestimmten Konzept festgehalten, das folgende Themen behandelt:

• Branchenanalyse & Benchmarking
  Um eine Vergleichsgruppe für vertiefende Benchmarking-Analysen zu ermitteln, werden Mitbewerber anhand genau definierter Kriterien untersucht. Die Branchenanalyse zeigt auf, wie die lokale und globale Konkurrenz im Onlinebereich vertreten ist. Anschließend werden die Strategien der erfolgreichsten Mitbewerber analysiert, um gängige Best Practices zu ermitteln.
• Zieldefinitionen Online Strategie
  Die konkreten Ziele für die neu entstehende Webpräsenz werden definiert, damit sie zu einem späteren Zeitpunkt überprüft werden können.
• Funktionskonzept
  Das Funktionskonzept liefert eine genaue Abgrenzung des Projektumfanges. Die für die Zielsetzung notwendigen Webfunktionen und sämtliche zur Anwendung kommenden Inhaltstypen und Medien werden gelistet und erläutert.
• Informations- und Navigationsarchitektur
  Das Herzstück der Konzeption ist die Definition des exakten Seitenaufbaues. Die Visualisierung erfolgt hier mittels responsiver Wireframes (Funktionsskizzen). Die Haupt- und Untermenüpunkte der Navigation werden definiert und es werden unterschiedliche Navigationswege skizziert, um eine effiziente Gestaltung der Navigationselemente zu gewährleisten.
• Definition von Gestaltungselementen
  Die wiederkehrenden Gestaltungselemente der Website, ihr Aussehen, ihre Funktionalität und mögliche Anwendungsbereiche werden bestimmt.
• Inhaltstypenbeschreibung
  Der inhaltliche und gestalterische Aufbau der einzelnen Website-Elemente wird exakt beschrieben. Vorgaben bezüglich des Basislayouts, der Textformatierung und des Textumfangs sowie die praktische Anwendung der wiederkehrenden Gestaltungselemente werden festgelegt.
• Technisches Konzept
  Relevante technische Informationen werden gesammelt, geprüft und definiert. Dadurch erfolgt eine genaue Abgrenzung des erforderlichen Ressourcenaufwandes.
• Zeitplan
  Es wird ein Zeitplan erstellt, um die benötigten Ressourcen aufzuzeigen.

Das Konzept beinhaltet alle relevanten Kriterien, die für einen erfolgreichen Website-Relaunch notwendig sind. Es dient als Grundlage für alle weiteren Arbeitsschritte und garantiert einen reibungslosen und in jederlei Hinsicht gelungenen Gesamtprozess.

Das ausgearbeitete Konzept ist für alle weiteren Projektschritte maßgeblich.

3. Screendesign

Im Zuge der Konzeption wurden die einzelnen Layoutvarianten bereits genau definiert. Nun geht es darum, der künftigen Website eine individuelle und passende Persönlichkeit zu verleihen.

Das Screendesign definiert die Optik, Ästhetik und Benutzerführung des neuen Internetauftritts. Alle relevanten Seitentypen (z. B. Startseite, allgemeine Inhaltsseite oder Kontaktseite) werden gestalterisch umgesetzt. Die Werte des Unternehmens werden wirkungsvoll kommuniziert und das Design berücksichtigt allgemein gültige Standards der Benutzerfreundlichkeit und Barrierefreiheit.

Aus dem Wireframe wird ein grafischer Entwurf.

4. Codierung der HTML Templates

Sobald das Screendesign vom Kunden freigegeben wurde, wird mit der Codierung der einzelnen Layoutvarianten begonnen.

Damit die Website auf aktuellen Webbrowsern fehlerfrei dargestellt wird, werden aktuelle Webstandards (HTML5 & CSS3) verwendet.

Die Layoutvarianten werden responsive codiert und passen sich automatisch an die unterschiedlichen Ausgabegeräte (Desktop, Tablet, Mobile) an. Dies ist seit April 2015 ein absolutes Muss, weil die Suchmaschine Google jene Websites, die nicht für mobile Geräte optimiert sind, abwertet und in den Suchergebnissen schlechter platziert. Hier kann übrigens getestet werden, wie mobilfreundlich die eigene Website ist: Test auf Optimierung für Mobilgeräte.

Eine saubere und responsive codierte Website wird von Google & Co mit einem besseren Ranking in den Suchergebnissen belohnt.

5. Programmierung Backend

Sobald die HTML Templates fertiggestellt sind, wird mit der Programmierung des Backendes begonnen, damit die Website künftig vom Kunden selbständig gewartet werden kann.

Es gibt auf dem Markt die unterschiedlichsten Content Management Systeme (CMS), wie z. B. TYPO3, Drupal oder WordPress. Bereits zu Projektbeginn wird evaluiert, welches System sich für das jeweilige Projekt am besten eignet.

Die fertige Website wird von unseren Programmierern ausführlich getestet, um sicherzustellen, dass das Produkt einwandfrei funktioniert.

Das Content Management System TYPO3 eignet sich besonders gut für mittelgroße und große Webauftritte.

6. Projektfertigstellung & Onlinegang

Nach Fertigstellung der Programmierung erhält der Kunde eine ausführliche Einschulung zur Verwendung des Systems. Nun ist es an der Zeit, die neue Website mit Inhalten zu befüllen. Dies wird entweder vom Kunden selbst erledigt oder auf Wunsch von der Agentur durchgeführt.

Wir geben unseren Kunden gerne Tipps für das erfolgreiche Befüllen von Websites. Denn auch hier gilt es zu beachten: Die Inhalte sollten vor allem die richtigen Zielgruppen ansprechen. Aber es ist auch wichtig, dass die Texte suchmaschinenfreundlich verfasst sind.

Im Zuge dieser Projektphase wird die Website vom Kunden ausführlich getestet und anschließend erfolgt der Livegang.

7. Regelmäßige Erfolgskontrollen

Sobald ein Projekt online ist, wird erst einmal tief durchgeatmet und man kann sich für ein paar Tage wieder anderen Aufgaben widmen. Aber man sollte nicht in die Falle „Meine Website ist nun online und ich brauche mich nicht mehr darum zu kümmern“ tappen.

Damit Websites und ihre Besitzer langfristig mit dem Produkt glücklich sind und gesteckte Ziele erreicht werden, müssen Inhalte zumeist regelmäßig aktualisiert und erweitert werden. Es empfiehlt sich, in regelmäßig  definierten Abständen eine Erfolgskontrolle durchzuführen. Es gibt unterschiedliche Methoden um zu überprüfen, ob die zu Beginn definierten Projektziele erreicht wurden oder ob an bestimmten Stellen nachgebessert werden sollte.

Das Content Management System sollte in regelmäßigen Abständen gewartet werden, damit die Website nicht das Ziel von Hackerangriffen wird. Geräte und Webbrowser entwickeln sich ständig weiter. Daher sollte die eigene Website mindestens einmal im Jahr mit den unterschiedlichsten Geräten und Browsern getestet werden, ob nach wie vor alles einwandfrei funktioniert.

Übrigens: Falls Sie nach diesem Artikel den unbändigen Wunsch verspüren, ein neues Onlineprojekt zu starten oder wenn Ihre Website wieder einmal ein Softwareupdate vertragen könnte: Wir unterstützen Sie gerne dabei und freuen uns auf Ihre Kontaktaufnahme.