Artikel

Wie erstellt man eine Website?

Welche Dinge sind beim Design und der Programmierung einer Website zu beachten? Ich erkläre die Vorgehensweise, stelle einige Tools vor und gebe Empfehlungen ab.

Bild von Enzo Volkmann, dem Autor dieses Artikels 04.10.2024

Welche Schritte gehören zur Erstellung einer Internetseite?

Das Design und die Umsetzung einer Website lässt sich grob in 6 Phasen unterteilen:

  • Bestandsaufnahme: Gibt es bereits eine Internetseite? Welchen Nutzen bringt sie? Was kann/muss übernommen werden; was muss anders werden?

  • Inhalt und Nutzen: Welche Inhalte sollen präsentiert werden? Welche Fragen sollen beantwortet werden? Wie gliedern sich die Inhalte?

  • Design: Wie soll die neue Seite aussehen und sich bedienen lassen? (Responsive Design, Mobile First, Dark Mode, etc.)

  • Technik: Soll ein Content-Management-System (CMS) genutzt werden? Wenn ja, welches? Gibt es Schnittstellen oder andere technische Besonderheiten?

  • Umsetzung: Programmierung und Konfiguration der Website

  • Inbetriebnahme: Konfiguration des Webhostings, Einrichtung von Sicherungen, Einrichtung von Weiterleitungen

Im Folgenden gehe ich auf einige Details zu jeder Phase ein und stelle einige Punkte vor, die es jeweils zu beachten gilt.

Erkenntnisse aus der Bestandsseite gewinnen und erste inhaltliche Recherche

In vielen Fällen gibt es bereits eine alte Website, die aus verschiedenen Gründen überarbeitet und neu erstellt werden soll (veraltetes Design, schlechte Performance, technische Probleme). So unzufrieden die Betreibenden der Seite auch damit sein mögen, oft lassen sich noch wertvolle Erkenntnisse aus der alten Website gewinnen, die unbedingt in die Erstellung einer Neuen einfließen müssen.

Hierzu gehört vor allem, sich das Nutzerverhalten und die gut funktionierenden Seiten anzuschauen, die schon heute die Fragen der Suchenden beantworten. Oft sind gerade lange bestehende Seiten für gewisse Fragen weit oben in den Suchergebnissen vertreten. Das muss bei der Neuerstellung und der Erarbeitung neuer Inhalte beachtet werden, sodass auch nach dem Start der neuen Internetseite derselbe oder ein besserer Erfolg erreicht wird.

Im Gegenteil zu den gut funktionierenden Seiten und Suchanfragen kann auch geprüft werden, für welche wichtigen Suchbegriffe die alte Seite noch nicht gefunden wird. In diesen Bereichen besteht dann auf jeden Fall Handlungsbedarf.

Um inhaltlich gut aufgestellt zu sein, empfiehlt es sich, bereits frühzeitig und langfristig eine SEO-Betreuung in Anspruch zu nehmen, wodurch qualifizierte Aussagen über die Performance der Website getätigt und datenbasierte Optimierungen durchgeführt werden können.

Neben dieser inhaltlichen Dimension der alten Website sind auch die Erfahrungen der Redakteurinnen und Redakteure aufschlussreich. Meiner Erfahrung nach sind sie oft unzufrieden mit der Bedienung des eingesetzten (oder fehlenden) Content-Management-Systems (CMS). Bei der Neuentwicklung einer Website können wir an dieser Stelle ansetzen und beispielsweise mit dem CMS Kirby eine wesentlich benutzerfreundliche Seite erstellen.

Screenshot der Google Search Console
Wichtiges SEO-Tool: Die Google Search Console

Welche Inhalte soll die Website haben und wie strukturieren wir sie?

Um eine neue Website zu erstellen, muss zunächst erarbeitet werden, welche Inhalte die neue Seite zeigen soll, welche Fragen sie beantworten soll und welchen Nutzen sie für Nutzerinnen und Nutzer bieten soll. Das kann einhergehen mit der Bestandsaufnahme der Alt-Seite oder erfolgt bei neuen Websites auf der grünen Wiese.

Wenn bekannt ist, welche alten Seiten gut funktionieren und wichtige Fragen der Suchenden bereits beantwortet werden, ist klar, dass diese Inhalte auch in der neuen Seite hochwertig präsentiert werden müssen.

Um inhaltliche Klarheit über die geplante Internetseite zu gewinnen, müssen Fragen geklärt werden wie:

  • Wonach sucht unsere Zielgruppe?

  • Für welche Fachbereiche/Themen/Nischen wollen wir gefunden werden?

  • In welchen Themen haben wir Experten-Status und können hochwertige, authentische und originelle Inhalte erstellen?

  • Wie sind unsere Inhalte organisiert? Zum Beispiel nach Produktgruppe, Zielgruppe oder Industriezweig

  • Welche Vorarbeit muss für die Bereitstellung der Inhalte geleistet werden (z.B. Bildmaterial beschaffen)

Daraus wird eine inhaltliche Struktur ausgearbeitet. Hier kristallisiert sich heraus, welche Seiten es geben soll/muss und auch, wie die Navigation auf der neuen Website aufgebaut sein soll. Diese inhaltliche Übersicht ist die Basis für die Ausarbeitung des visuellen Entwurfs durch den Webdesigner sowie für die Redaktion, um bereits entsprechende Inhalte auszuarbeiten.

Screenshot aus dem SEO-Tool Sistrix
SEO-Tools wie Sistrix bieten Einblick in das Suchverhalten der Menschen und die Performance von Websites. Sie sind Grundlage für die Content-Planung.

Erstellung eines Webdesigns

Als nächstes folgt das tatsächliche Design der neuen Website, also wie sie optisch aussehen soll. Diese Arbeit findet bei mir in dem Design-Tool Figma statt, das die Erstellung anschaulicher und interaktiver Website-Prototypen erlaubt.

Bei der Erstellung des Designs arbeite ich auf Grundlage der vorangegangenen inhaltlichen Analyse und gestalte Komponenten und Seiten für die Darstellung aller benötigten Inhalte; also etwa einer Startseite, einer Leistungsseite oder einer Produktseite.

Natürlich kommen hier nun auch erstmalig die Markenbestandteile wie Farben, Logos und Schriften zum Einsatz. Diese werden so gewählt, dass sie zur Marke und Botschaft der Seite passen: Ein Onlineshop für Kinderspielzeug wird daher eine deutlich andere Designsprache haben als eine Website für eine Steuerberatung.

Selbstverständlich ist auch die Beachtung von Prinzipen wie Mobile-First und die Anpassung des Designs an mobile Geräte (Responsive Design), auf denen die Mehrzahl der Besuchenden (je nach Branche) die Seite anschauen wird. Darüberhinaus gestalte ich alle meine Seiten auch für den Dark-Mode, sodass die Seite auch zu später Stunde noch angenehm benutzt werden kann.

Bei der Erstellung des Designs stelle ich sicher, dass die verschiedenen Komponenten an mehreren Stellen der Website wiederverwendet werden können und das die Betreibenden der Seite später im Content-Management-System (CMS) einfach neue Seiten anlegen und frei zusammenstellen können.

Screenshot des Design-Tools Figma
Einblick in ein Webdesign-Projekt im Design-Tool Figma

Welches Content-Management-System kommt zum Einsatz?

Mit einem Content-Management-System (CMS) können die Inhalte einer Website in einer benutzerfreundlichen Bedienoberfläche bearbeitet werden, ohne dass Programmier- oder sonstige technische Kenntnisse notwendig sind. Das ist in jedem Projekt wichtig, denn in der Regel arbeiten Laien mit der Seite und schreiben die Inhalte.

Es gibt eine Vielzahl von Content-Management-Systemen auf dem Markt mit verschiedenen Leistungen, Konzepten, Möglichkeiten und Preisen. Es sollte einige Voraussetzungen erfüllen, um es als geeignetes System zu qualifizieren:

  • Einfache Bedienung & schnelles Zurechtfinden: Auch nach längerer Pause und für Laien

  • Übersichtliche Benutzeroberfläche: Nur das sehen, was gerade wichtig ist

  • Flexibilität in der inhaltlichen Struktur: Keine starren Vorgaben

  • Die Website lädt schnell und ist technisch auf dem neuesten Stand

  • Möglichst einfach zu betreiben, wartungsarm und mit Sicherungsmöglichkeiten

  • Möglichst kostengünstig

Meine klare CMS-Empfehlung ist Kirby. Ich setze es seit längerem für alle meine Projekt ein und bin davon überzeugt, dass es die aktuelle beste Lösung für mich als Programmierer und für die Inhaber einer Seite ist. Es bietet eine technisch hervorragende Basis für die Erstellung schneller und SEO-optimierter Websites und darüberhinaus eine aufgeräumte Benutzeroberfläche, die es einfach macht, neue Inhalte für den eigenen Webauftritt zu erstellen.

In diesen Artikeln erkläre ich im Detail, welche Vorteile des System bietet:

Wenn bereits eine alte Website existiert und dort ein bestimmtes CMS im Einsatz ist, können die Inhalte in der Regel auch gesichert und übertragen werden. Das lohnt sich vor allem bei großen Seiten, bei denen sonst der manuelle Übertragungsaufwand zu groß wäre.

Screenshot des Admin-Panels einer Wordpress-Seite
Negativ-Beispiel:
Beim Login in dieser Wordpress-Seite findet sich niemand zurecht
Screenshot des Panels einer Kirby-Website
So kann es aussehen:
Aufgeräumte Oberfläche einer Kirby-Website
(Link zum Projekt)

Technische Umsetzung und Programmierung der Website

Nach Abschluss des visuellen Webdesigns gehe ich als Programmierung in die technische Umsetzung der Seite. Dabei überführe ich das ausgearbeitete Design in hochwertigen und schnellen Code.

Wie genau diese Programmierung aussieht, hängt maßgeblich vom ausgewählten CMS und den sonstigen technischen Gegebenheiten der Website ab. Im Kern geht es aber immer darum, den entsprechenden HTML-, CSS- und Javascript-Code zu schreiben, der die im Design erarbeiteten Komponenten wirklich im Browser erscheinen und nutzbar werden lässt.

Im Falle des Kirby-CMS umfasst das insbesondere die Konfiguration der Benutzeroberfläche und inhaltlichen Strukturen des CMS mittels YML-Dateien sowie die Umsetzung der Komponenten in PHP und CSS.

Je nach Anforderung des Projektes kommen ggf. weitere Programmierarbeiten hinzu, wie etwas die Umsetzung von Formularen und Funnels sowie die Anbindung externer Tools (z.B. Zapier, Stripe, Paypal, E-Mail-Versand, ...).

Screenshot von YML-Code zur Definition eines Feldes im Kirby CMS
Beispiel für YML-Code zur Definition eines Feldes im Kirby CMS
Screenshot vom PHP-Code einer Komponente in Kirby
Beispiel für PHP-Code einer Komponente im Kirby CMS

Webhosting und Inbetriebnahme einer Website

Um eine Website im Internet zu veröffentlichen, werden eine Domain und ein Webhosting benötigt. Diese können bei diversen Anbietern günstig angemietet werden und sind bei vielen Unternehmen bereits vorhanden. Meiner Erfahrung nach haben viele Unternehmen seit Jahren alte Verträge mit Hosting-Anbietern und bezahlen oft deutlich zu viel. Es kann Sinn machen, die aktuelle Situation zu prüfen und ggf. einen Wechsel durchzuführen.

Die Domain ist der Name einer Website und die Adresse, unter der sie erreichbar ist, zum Beispiel volkmann-design-code.de für diese Website. Sie ist immer eindeutig und besteht aus dem Namensteil (volkmann-design-code) und der Domain-Endung, die in der Regel länderspezifisch ist (.de). Es gibt aber auch besondere Domain-Endungen für gewisse Städte, Branchen und ähnliches (z.B. .berlin, .agency, .cafe, ...).

Beim Webhosting handelt es sich um einen Service des Webhosting-Anbieters, über den die Daten der Website (HTML, CSS, ...) über einen Webserver beim Aufruf der verknüpften Domain bereitgestellt werden.

In diesen Themenbereich fallen oft auch verwandte Themen, die nicht direkt mit der Website zu tun haben, aber mit der Domain wie etwa E-Mail-Adressen (@domain-name.de) oder sogenannte DNS-Einträge (zum Beispiel benötigt für Office365, die Google Search Console und viele weitere Dienste).

Ich unterstütze dich gerne umfassend auch bei diesen technischen Themen der Website-Erstellung. Wenn du etwa den Eindruck hast, aktuell zu viel zu bezahlen, komm gerne für eine unverbindliche schnelle Prüfung auf mich zu.

Screenshot der DNS-Verwaltung einer Domain
Beispiel für die DNS-Einstellungen einer Domain als Teil der Konfiguration des Webhostings
Bitte gib dein Einverständnis

Um deinen Like zu speichern, benötigen wir deine Zustimmung zur Verwendung von Cookies.

Dadurch kann die Seite sich merken, dass dir der Artikel gefällt.

Es werden keine personenbezogenen Daten übertragen oder gespeichert. Deine Einwilligung wird für ein Jahr gespeichert.