Webographen

In mehr als fünf Jahren haben Unternehmen bei uns weit über 50 professionelle Homepages erstellen lassen. Auf dieser Seite erfährst du, wie Webprojekte ablaufen und auf was du als Auftraggeber achten solltest, damit der Relaunch deiner neuen Firmenwebsite ein Erfolg wird.

Wenn du für das Marketing und die Website verantwortlich bist, dann sind die folgenden Inhalte eine gute Orientierung, um sicher durch das nächste Webprojekt zu kommen.

1. Homepage erstellen lassen: In 5 Phasen zur Firmen-Homepage

Viele Firmen, die sich eine neue Homepage erstellen lassen, greifen auf die professionelle Unterstützung einer Agentur oder eines Freelancers zurück.

Die 5 Phasen bei der Erstellung einer Homepage

Wie in der oberen Grafik dargestellt, besteht der Entstehungsprozess einer Website aus den folgenden Phasen:

  1. Konzeption
  2. Gestaltung
  3. Webentwicklung
  4. Erstellung und Einpflegen der Inhalte
  5. Veröffentlichung der Website

Wie lange dauert es, sich eine Homepage erstellen zu lassen?

Unabhängig davon, ob es sich um eine neue Website oder einen Relaunch handelt: Die meisten Projekte von Firmenwebsites dauern unserer Erfahrung nach zwischen 9-12 Wochen. 

Auf den ersten Blick erscheint das ganz schön lang, denn schließlich wollen wir alle, dass unsere Website am besten gestern fertig ist. Webprojekte beinhalten jedoch einige Korrekturschleifen sowie andere Phasen, in denen du als Auftraggeber stark gefordert bist. Die Zeit dafür schneiden sich die meisten irgendwie aus den Rippen, da das Tagesgeschäft meistens dringender ist.

Zum Ablauf: Die Phasen eines Webprojekts bauen aufeinander auf. Ein kompetenter Partner führt dich durch diese Phasen und weist dich jeweils auf die wichtigen Themen hin.

Bei uns entstehen Homepages in der Regel in den oben genannten fünf Phasen, die ich dir im Folgenden beschreibe:

Konzeption deiner Firmenwebsite

Egal, ob es sich um den Relaunch deiner bestehenden Seite oder um eine ganz neue Homepage handelt. Wir empfehlen immer, mit einer professionellen Website-Konzeption zu starten.

Denn ein durchdachtes Konzept ist das Fundament einer professionellen Website, welche den Vertrieb deines Unternehmens gezielt unterstützt. Dies sind die wichtigsten Stationen in der Planung deiner Homepage:

  1. Festlegen der Website-Ziele
  2. Definition deiner Zielgruppe
  3. Optimierung der Berührungspunkte deiner Zielgruppe mit der Website
  4. Ausarbeitung deines Alleinstellungsmerkmals
  5. Analyse der Websites deiner Mitbewerber
  6. Recherche von passenden Keywords und Themenbildung
  7. Planung der Seitenstruktur
  8. Planung der Inhalte

Die Konzeptionsphase endet mit der Erstellung von Wireframes. Diese sind zugleich die Grundlage für die zweite Phase, in welcher die Screendesigns deiner Website gestaltet werden.

Responsive Webdesign – So funktioniert deine Webseite auch mobil

Bei der Gestaltung deiner Webseite erstellt dein Webdesigner die sogenannten Screendesigns. Dabei wird üblicherweise für jeden Seitentyp eine Vorlage in mehreren Auflösungen gestaltet. Der Webentwickler benötigt die Screendesigns in verschiedenen Auflösungen, damit er die Designs möglichst genau umsetzen kann.

Responsive Webdesign bedeutet, dass sich die Inhalte automatisch an die größer des Bildschirms anpassen

Sieht der Umfang deiner neuen Homepage z.B. wie auf der unteren Grafik aus, müssen mindestens diese sieben Screendesigns gestaltet werden:

  • Startseite
  • Über-uns-Seite
  • Leistungen-Seite
  • Referenzen-Seite
  • Kontaktseite
  • Einfache Textseite
  • 404-Seite
Einfache Struktur einer Homepage für Unternehmen
Die Grafik zeigt die übliche Basisstruktur einer Homepage.

Wie du in der Abbildung siehst, teilen sich die Leistungen jeweils die gleiche Vorlage. In der dritten Phase, in welcher deine Website entwickelt wird, entstehen aus den Screendesigns sogenannte Templates

Diese Templates kannst du dir als wiederverwendbare Vorlagen vorstellen, mit denen du beliebig viele Unterseiten auf deiner Homepage anlegen kannst.

Die Grundlage für eine mobile Webseite sind responsive angelegte Screendesigns

Damit der Webentwickler auch deine mobile Webseite erstellen kann, ist allerdings noch Vorarbeit vom Webdesigner notwendig. Dieser muss dafür von jedem Screendesign mehrere Varianten anlegen.

Üblicherweise wird ein Screen in drei Varianten angelegt. Hier am Beispiel der Startseite:

  • Desktop (mit einer Breite von 1920px)
  • Tablet (mit einer Breite von 768px)
  • Mobil (mit einer Breite von 375px)

Bei komplexeren Webdesigns kann es auch notwendig sein, dass Zwischenauflösungen gestaltet werden. Mit diesen fällt es den Entwicklern im Anschluss leichter, die Designs wie gewünscht umzusetzen.

Warum benötigst du überhaupt eine mobile Website?

Wenn deine Website responsive entwickelt wird, passen sich die Inhalte automatisch an jede Bildschirmgröße an. Eine zeitgemäße Business Website sollte diese Anforderungen auf jeden Fall erfüllen, da der Anteil des mobilen Traffics stetig wächst und das Thema ebenso für die Suchmaschinenoptimierung relevant ist.

Korrekturschleifen – Umgang mit Änderungswünschen

In der Regel enthält ein Webprojekt immer mehrere Korrekturschleifen. In diesen gibst du deinem Webdesigner deine Änderungswünsche und dieser überarbeitet die Designs nach deinen Vorstellungen.

Ist die Anzahl vereinbarter Korrekturschleifen erschöpft, fallen üblicherweise zusätzliche Kosten an. Unserer Erfahrung nach sollten allerdings zwei Korrekturschleifen in der Designphase und eine weitere nach der Programmierung ausreichen.  

Alternativ kannst du mit deiner Agentur vor Projektstart auch vereinbaren, dass mehrere Entwürfe geliefert werden.

Wie läuft die Programmierung einer Unternehmenswebsite ab?

Sobald die Designs von dir freigegeben wurden, wird deine Website entwickelt. Was du zu diesem Zeitpunkt bereitstellen solltest, ist:

  1. ein Webspace
  2. eine Domain
  3. eine Datenbank (Wenn ein CMS wie WordPress zum Einsatz kommt.)

Alle drei Dinge erhältst du bei den gängigen Hosting-Providern in sogenannten Hosting-Paketen. Erkundige dich bei deiner Webdesign Agentur aber unbedingt nach den genauen Spezifikationen. Denn diese können von Projekt zu Projekt unterschiedlich sein. Inkompatibilitäten an dieser Stelle können später unnötig Zeit kosten und den Go-live deiner Website verzögern.

Wie sieht ein ordentlicher Entwicklungsprozess aus?

Ein professioneller Webentwickler arbeitet mit mehreren „Instanzen einer Website“. Diese sind:

Drei Serverumgebungen bei der Entwicklung von Websites: Development, Staging und Production
Professionell entwickelte Homepages sind immer „Drillinge“. Die Development-Umgebung dient der Entwicklung und die Staging-Umgebung der Überprüfung und Abnahme. Die Live-Umgebung ist jene, die öffentlich für jeden zugänglich ist.
  1. Development-Umgebung: Diese existiert nur lokal auf dem Rechner des Entwicklers.
  2. Staging-Umgebung: Diese befindet sich auf einem Webserver, der nicht öffentlich zugänglich ist. Hier werden Tests gemacht, Bugs behoben und die Korrekturschleifen durchgeführt.
  3. Live-Umgebung: Diese ist die öffentlich zugängliche Version deiner Website, die auch Production-Umgebung genannt wird.

Bei der Entwicklung einer Website wird immer zunächst in der Development-Umgebung gearbeitet. Denn hier muss man sich keine Gedanken machen, wenn mal etwas zu Bruch geht. Das Ganze existiert ja nur auf dem lokalen Computer des Entwicklers.

Ist ein bestimmter Meilenstein der Programmierung erreicht, wird dieser auf die Staging-Umgebung hochgeladen. Dort kannst du einen Blick auf den aktuellen Stand werfen und dein Feedback abgeben. Die Staging-Umgebung ist in der Regel durch ein Passwort geschützt. So ist sichergestellt, dass nur berechtigte Personen die Website aufrufen können.

Erst wenn hier alles eingehend auf Fehler überprüft und in Ordnung ist, wird dieser Stand in die Live-Umgebung kopiert. Die Live- bzw. Production-Umgebung ist jene, die öffentlich im Internet ist. Diese kann also von jedem besucht werden.

Content Kreation – Erstellung der Texte und Bilder 

Die bisherigen Phasen bei der Homepage-Erstellung bauen aufeinander auf, weshalb sie nacheinander stattfinden sollten. Die Erstellung der Bilder und Texte deiner Website ist jedoch ein Prozess, der schon vorher anfangen kann. Das liegt einerseits daran, dass die Inhalte nicht nur Einfluss auf das Layout und die Seitenstruktur haben, sondern auch auf die SEO.

Erstellung der Inhalte, also Bilder und Texte, ist ein wesentlicher Bestandteil bei der Entstehung einer Website.

Wann macht es Sinn, einen Fotografen zu engagieren?

Ob es Sinn macht, einen Fotografen zu engagieren, wollen wir nicht zur Frage stellen, denn wir finden, dass es immer sinnvoll ist. Professionelle Fotos sind auf einer Webpräsenz oft die halbe Miete und darum würden wir immer zu einem Fotografen raten.

Wir wollen eher darauf eingehen, ab wann es Sinn macht, den Fotografen ins Boot zu holen. Wenn du schon bestehende Texte und Bilder hast, können diese gleich bei der Gestaltung berücksichtig werden. Das ist sogar besonders gut, denn dann kann der Designer Schlüsselstellen im Text durch das Design hervorheben.

Hast du zu Beginn noch kein Bildmaterial, werden die Screendesigns eben mit Dummy-Bildern aus Stock-Galerien wie etwa unsplash.com entworfen. Den Fotografen empfehlen wir dann ins Boot zu holen, wenn die Screendesigns von dir freigegeben wurden. 

So kann sich der Fotograf einen konkreten Eindruck vom Umfang des Auftrags machen und weiß genau, welche Bildinhalte und -formate benötigt werden. Hierzu ein Beispiel anhand von Header-Bildern:

Header-Bilder werden oft in voller Breite der Seite dargestellt und nicht selten ist über dem Bild eine schicke Headline platziert. Wenn der Bildhintergrund zu unruhig ist, wird die Schrift schlecht zu lesen sein oder überlagert sogar ein Gesicht. Solche Fotos müssen so geschossen werden, dass der Platz für den Text berücksichtigt wird.

Wenn der Fotograf das nicht erfährt, wird er es in der Regel nicht berücksichtigen.

Wann ist es sinnvoll, mit den Texten zu starten?

Mit den Texten verhält es sich ähnlich wie mit den Bildern. Im Idealfall hast du diese schon, bevor mit dem Design gestartet wird. Denn so kann der Designer deine Inhalte gestalten und du musst deine Inhalte nicht an das Design anpassen.

Erst texten und dann designen führt zu einem wesentlich besseren Ergebnis. Das liegt daran, da das Design die grundlegende Aufgabe hat, deine Inhalte visuell ansprechend und gut konsumierbar darzustellen. Gestaltet man ohne die entsprechenden Inhalte, kann diese Aufgabe nur bedingt erfüllt werden.

Wireframes helfen dir beim Texten

Wir wissen aber, dass sich viele fürs Texten eine grafische Vorlage wünschen, um sich besser orientieren zu können. Hier kommen die Wireframes ins Spiel.

Ein Wireframe ist eine erste Skizze deiner Website. Meistens werden sie in Graustufen gehalten und auf Bilder, Texte, Farben und Logos wird bewusst verzichtet. Sie dienen dem Zweck, dem Inhalt deiner Website eine erste Gliederung zu geben und die Funktionalität zu planen.

Veröffentlichung deiner Website

Sind deine Texte und Bilder fertig, werden diese auf der Staging-Umgebung eingepflegt. Je nach Budget kannst du das selbst übernehmen oder von deiner Internet-Agentur machen lassen.

Trotz vorgegebener Zeichenzahlen kann es natürlich passieren, dass die Inhalte an einigen Stellen nicht in die Vorgaben des Designs passen. Darum ist es empfehlenswert, vor Go-live deiner Website eine letzte Korrekturschleife zu machen. In dieser werden dann die letzten kleinen Schönheitsfehler behoben.

Zudem sollte die Website noch in den gängigen Browsern und auf verschiedenen Geräten wie Computer, Tablet und Handy überprüft werden. Verschiedene Browser und Geräte interpretieren den Code einer Website in gewissen Details manchmal unterschiedlich, wodurch es hier zu Abweichungen kommen kann. 

Sind die letzten Korrekturen und Überprüfungen abgeschlossen, kann deine neue Website nun endlich live gehen. Dazu wird der Stand aus der Staging- in die Production-Umgebung übertragen.

Was du beim Relaunch unbedingt in Sachen SEO beachten musst

Bei einem Website-Relaunch ändern sich nicht selten auch die URLs der Webseiten. Hinsichtlich der SEO wäre es besser, wenn die alte URL-Struktur erhalten bleiben würde. Doch oft werden die Inhalte bei einem Relaunch anders strukturiert, was einen Erhalt der alten URLs nicht ermöglicht.

Ein weiterer Grund kann sein, dass du das Content Management System wechselst. Dadurch ergibt sich auch eine Änderung an der URL-Struktur deiner Website.

Wenn du einen Relaunch deiner Website durchführst, lasse das Thema SEO auf keinen Fall unter den Tisch fallen. Plane es frühzeitig mit deiner Agentur. Der Aufwand, den dieses Thema verursacht, ist wesentlich geringer als der Schaden, den Fehler verursachen können.

Was du im Detail beachten musst, kannst du hier lesen: SEO beim Website-Relaunch: Ablauf, Tools und Checkliste.

2. Interner Aufwand: So viel Zeit solltest du einplanen

Sich eine professionelle Homepage erstellen zu lassen, benötigt nicht nur ein gewisses Budget, sondern auch jede Menge Zeit. Damit deine Website zum gewünschten Datum online gehen kann, musst du dir genügend Zeit freischaufeln.

Zeitaufwand für ein Webprojekt

Deine Agentur wird dir zwar einen Großteil der Arbeit abnehmen, aber du musst immer noch Input liefern, Entscheidungen treffen und Feedback geben. Besonders in der Konzeptionsphase bist du gefragt. Dein Beitrag zur Definition der Buyer Personas, der Customer Journey und des Elevator Pitches entscheidet letztendlich über die Qualität der Website.

Falls nicht anders vereinbart, liegt es nach der Konzeptionsphase an dir, Inhalte wie Bilder und Texte zu liefern. Dazwischen finden immer wieder Korrekturschleifen statt, in denen deine rasche Reaktion gefragt ist, da ansonsten nicht weitergearbeitet werden kann. Du merkst: Damit das Projekt ohne Unterbrechungen verläuft, ist es wichtig, dass auch du als Auftraggeber pünktlich lieferst.

Denn größere Verzögerungen deinerseits können unter Umständen mit den Timelines anderer Projekte deiner Agentur kollidieren. Wenn es blöd läuft, kann es passieren, dass die Agentur die Arbeit für dich erst wieder später aufnehmen kann, als dir lieb ist.

Empfehlung zum Zeitmanagement

Plane auf jeden Fall genügend Zeit für deine Aufgaben ein. Bitte deine Agentur darum, dir eine Übersicht zukommen zu lassen, auf der du siehst, was diese bis wann von dir benötigen.

Wenn möglich, bestimme einen Mitarbeiter als internen Projektleiter und stelle sicher, dass dieser genügend Kapazitäten dafür hat.

3. Was kostet eine Website? So vergleichst du Leistungen

Viele wollen sich ihre Website günstig erstellen lassen. Doch wenn du mehrere Angebote einholst, kannst du sicher sein, dass sich diese alle unterschiedlich zusammensetzen. Wenn du einfach nur die Summe unter dem Strich betrachtest, vergleichst du Äpfel mit Birnen. Du bist also gut beraten, wenn du dich eingehend mit den Leistungen auseinandersetzt und erst dann die Preise vergleichst.

Stell es dir einfach ein wenig so vor, als würdest du ein Auto kaufen. Alle haben vier Räder, fünf Türen, ein Lenkrad und einen Schalthebel und trotzdem gibt es immense Unterschiede in den Preisen.

Bei einer Website gliedern sich die Kosten in einmalige und fortlaufende Kosten. Im Folgenden gehen wir auf beide Arten ein:

Die Kosten einer Website sind nicht unbedingt sofort ermittelbar. Einige Anforderungen tauchen oft erst im Laufe des Projekts auf.

Einmalige Kosten einer Homepage

Die einmaligen Kosten einer Website umfassen:

  • Beratung & Konzeption
  • Webdesign
  • Entwicklung

Sowie eventuell:

  • Texte
  • Bilder
  • Videos
  • Grafiken

Laufende Kosten einer Internetseite

Zu den laufenden Kosten einer Internetseite gehören:

  • Hosting und Domain
  • Lizenzen für Schriftarten, Plugins, CMS und Erweiterungen
  • Wartung und Pflege deiner Internetseite
  • Eventuelle Weiterentwicklungen deiner Internetseite

Was kostet eine Homepage? – Darum ist ein Preisvergleich schwierig

Die Kosten einer Website hängen von sehr vielen Faktoren ab und darum lautet die korrekte Antwort auf die Frage in der Überschrift streng genommen: „Es kommt darauf an.“ Wir wissen, dass das nicht die Antwort ist, die du dir jetzt erhofft hast. Doch es ist im Grunde die einzig seriöse, die man ohne weitere Informationen geben kann.

Den größten Einfluss auf den Preis haben die folgenden Faktoren:

  • Stundensätze
  • Geschätzter zeitlicher Aufwand
  • Umfang des Designs
  • Programmierung einer Custom-Lösung oder Verwendung eines kaufbaren Themes

So vergleichst du die Leistungen verschiedener Anbieter

Wenn du einfach nur die Summen der Angebote vergleichst, erhältst du ein stark verzerrtes Bild.

Unserer Meinung nach gehört der Preis schon zu den wichtigen Kriterien, nur ist ein Angebot kaum mit dem anderen vergleichbar, wenn dieses nicht auf den exakt gleichen Kriterien und Leistungen beruht.

Bevor du also die Kosten vergleichst, starte lieber mit dem Vergleich der Leistungen. Welche Leistungen wichtig und relativ einfach miteinander vergleichbar sind, haben wir im Folgenden für dich zusammengestellt.

Gibt es eine Konzeptionsphase und was umfasst diese?

Ein wichtiger Aspekt erfolgreicher Websites ist eine digitale Strategie und eine umfassende Konzeptionsphase. Erkundige dich danach, ob deine angefragten Anbieter eine Konzeptionsphase anbieten und was diese umfasst.

Eine ordentliche Konzeption sollte in etwa die folgenden Themen beinhalten:

  1. Festlegen der Website-Ziele
  2. Definition deiner Zielgruppe
  3. Optimierung der Berührungspunkte deiner Zielgruppe mit der Website
  4. Klarstellung deines Alleinstellungsmerkmals
  5. Analyse der Websites deiner Mitbewerber
  6. Recherche von passenden Keywords und Themenbildung
  7. Planung der Seitenstruktur
  8. Planung der Inhalte

Die Erarbeitung eines solchen Konzepts nimmt einige Zeit in Anspruch, bildet aber ein stabiles Fundament für deinen digitalen Erfolg. Da dies eine umfassende Beratungsleistung ist, rechne hier durchaus mit Kosten. Wenn die Konzeption kostenlos ist, frage nach, was sie umfasst.

Wie detailliert werden die Screendesigns gestaltet?

Erkundige dich, wie die Screendesigns deiner neuen Website erstellt werden. Wichtige Qualitätsmerkmale sind:

  1. Wie viele Auflösungen werden je Seitentyp erstellt? Desktop, Tablet und Mobil sind heutzutage Pflicht für responsive Websites.
  2. Werden für komplexere Abschnitte im Design auch Zwischenauflösungen gestaltet?
  3. Wird ein Designsystem angelegt? (Dieses vereinfacht später die Weiterentwicklung.)

Was würden gegebenenfalls weitere Entwürfe kosten?

Es kann passieren, dass der erste Entwurf nicht deinen Vorstellungen entspricht. Erkundige dich deshalb danach, wie hoch die Kosten eines zusätzlichen Entwurfs wären.

Wie viele Korrekturschleifen beinhaltet das Projekt?

Die Korrekturschleifen sind dafür da, die Entwürfe nach deinen Vorstellungen anzupassen. Frage also nach, wie viele Korrekturschleifen inklusive sind und wie mit zusätzlichen Korrekturschleifen umgegangen wird.

Was umfasst die Programmierung?

Gehen wir davon aus, du würdest dir eine WordPress Website erstellen lassen. In diesem Fall solltest du in Erfahrung bringen, auf was das geplante WordPress Theme beruht.

Dazu solltest du wissen, dass individuell programmierte WordPress Themes zwar teurer sind, aber auch nur das beinhalten, was du benötigst. Sogenannte Multipurpose Themes sind zwar für wenige Euro zu haben, doch beinhalten sie jede Menge Funktionen und Codes, die du nicht brauchen wirst. Das ist dann so, als würdest du den ganzen Winter lang mit deinen Sommerreifen im Kofferraum rumfahren.

Zudem sind viele Funktionen mit zusätzlichen Plugins (Erweiterungen) umgesetzt, welche die Website häufig langsamer, instabiler und unsicherer machen – aus unserer Sicht keine gute Basis für eine Business-Website.

Diese Fragen solltest du hinsichtlich der Programmierung stellen:

  1. Wird die Seite mit einem Custom- oder einem Multipurpose-Theme umgesetzt?
  2. Werden Funktionen wie Bildergalerien und Slider mit Plugins umgesetzt oder in das Theme integriert?
  3. Werden modulare Inhalte mit einem Themebuilder oder mit Gutenberg-Blöcken realisiert?
  4. Entspricht die WordPress Programmierung allgemein dem WordPress Codex? 

Wie sieht es mit Pflege und Weiterentwicklung der Website aus?

Websites müssen heutzutage regelmäßig gewartet werden. Das ist so ähnlich wie bei deinem Smartphone. Fortlaufend gibt es Updates, welche neue Funktionen mit sich bringen, Fehler beheben oder Sicherheitslücken schließen. Bei einer Website ist das im Grunde genauso.

Hinsichtlich der Pflege deiner Website stelle dir folgende Fragen:

  1. Wird eine regelmäßige Wartung und Pflege angeboten?
  2. Wie oft werden die Updates durchgeführt?
  3. Werden regelmäßige Backups erstellt, die auf einem externen Server gespeichert werden?
  4. Gibt es ein Uptime Monitoring, welches die Verfügbarkeit deiner Website überwacht?
  5. Gibt es ein System, das Sicherheitslücken erkennt?
  6. Was wird getan, wenn Sicherheitslücken auftreten?
  7. Wie werden Leistungen berechnet, die über die eigentliche Wartung hinausgehen?

Bezüglich der Weiterentwicklung deiner Website stelle folgende Fragen:

  1. Wie werden zukünftige Weiterentwicklungen deiner Website berechnet?
    • Muss ein Stundenkontingent gekauft werden?
    • Gibt es einen Mindestumsatz je Anpassung?
    • Wie hoch ist der Stunden- oder Tagessatz?
  2. Wie schnell können Weiterentwicklungen umgesetzt werden?

Abschließende Worte zum Preis- und Leistungsvergleich

Wenn du den Abschnitt aufmerksam gelesen hast, wirst du bemerkt haben, dass an keiner Stelle Summen genannt wurden. Das liegt daran, dass der pauschale Umgang mit Kosten wirklich schwierig ist. Denn der Preis, den du für eine Website zahlst, hängt von zu vielen Faktoren ab.

Selbst ein Vergleich von Stundensätzen ist schwierig. Ein sehr erfahrener Entwickler kann pro Stunde 100 € oder mehr verlangen, ist aber durchaus schneller als ein Entwickler mit weniger Erfahrung, der vielleicht nur 60 € die Stunde berechnet.