💻 Dein Leitfaden zur Erstellung und Planung deiner Webseite

Grundlagen und Vorbereitung bei der Webseiten-Erstellung

Für eine Firma ist die eigene Webseite das größte Aushängeschild und auch Privatpersonen wünschen sich immer mehr eine eigene Webseite, auf der sie interessante Inhalte für die Öffentlichkeit zugänglich machen möchten.

Doch um eine eigene Webseite zu erstellen reicht es in den meisten Fällen nicht aus einen Baukasten zu buchen, mit dem man mit nur ein paar wenigen Schritten seine Gedanken freien Lauf lassen kann. Denn eine Webseite besteht nicht nur aus wild zusammengewürfelten Elementen, die das System vorgibt, sondern auch aus vielen weiteren Bereichen, über die man sich als zukünftiger Webseiten-Betreiber Gedanken machen sollte.

Ich zeige dir die wichtigsten Grundlagen beim Erstellen einer Webseite, an die du vielleicht noch gar nicht gedacht hast.

Domainnamme und Domainregistrierung

Der Domainname spielt eine essenzielle Rolle bei der Vorbereitung einer Webseite. Der Besucher sollte schon einmal eine grobe Ahnung davon bekommen, was auf der Webseite geboten wird oder von welcher Firma die Webseite ist. Zudem ist die Domain auch ein Indikator für Suchmaschinen.

Wähle eine Domain, die leicht zu merken ist und die deinen Aufgabenbereich, dein Produkt-Gebiet oder deine Firma gut beschreibt. Die Domain sollte natürlich auch nicht zu lang sein.

Ein Beispiel für eine Webseite, auf der Kaffee verkauft wird wäre kaffee-shop, kaffee-billig-kaufen oder kaffeekaufen24.

Du hast in den Beispielen vielleicht bemerkt, dass es weder Leerzeichen oder Sonderzeichen gibt, da diese Zeichen nicht in einer Domain vorkommen dürfen. Mittlerweile werden Umlaute zwar im WWW akzeptiert, aber nur empfohlen wenn die Zielgruppe ausschließlich aus Deutschland, Österreich und der Schweiz kommt. Großbuchstaben werden nicht beachtet und automatisch klein geschrieben (Kaffee-Shop = kaffee-shop).

Hast du dir deine Domain ausgesucht musst du dich noch für eine sogenannte Top-Level-Domain entscheiden. Top-Level-Domains werden in zwei Gruppen unterteilt: Generische-Domains und Länder-Domains. Alle Länder-Spezifischen Domains wie .de, .es, .pl, usw. sind Länder-Domains. Generische Domains sind beispielsweise .com, .info, .org, usw.

Hast du ein regionales Unternehmen solltest du dir überlegen eine Länder-Domain zu verwenden, wie zum Beispiel .de. Internationale Unternehmen nehmen in den meisten Fällen eine .com-Domain, gemeinnützige Organisationen verwenden üblicherweise eine .org-Domain.

Du kannst dich auch dafür entscheiden mehrere Domains gleichzeitig zu registrieren. Jedoch gibt es für eine Webseite nur eine Haupt-Domain. Alle anderen Domains sollten auf die Haupt-Domain weiterleiten.

Nachdem du dir sicher mit deiner Domain bist kannst du sie bei einem Hoster auf Verfügbarkeit prüfen lassen und für dich registrieren.

Solltest du die domain im nachhinein ändern und keine entsprechenden Maßnahmen ergreifen, verlierst du dein Google-Ranking. Sei dir bei der Wahl deiner Domain also sicher, damit du sie nicht noch einmal austauschen musst.

Das Template als Grundlage Deiner Webseite

In der Regel wird bei der Erstellung einer Webseite ein fertiges Template verwendet, um Zeit zu sparen. Das Template ist eine fertige Vorlage für deine Webseite, meistens in HTML und CSS programmiert. Viele Templates haben Dank PHP und JavaScript auch schon einige Funktionen, wie Animationen, Formulare und noch viel Mehr enthalten.

Achte nicht so sehr auf die Farben deines Wunsch-Templates. Es gibt nur wenige Ausnahmen in den man sie nicht anpassen kann. In WordPress und anderen Content Management Systemen kann der Template-Hersteller über das sogenannte Backend dem Website-Betreiber eine Oberfläche zur Verfügung stellen, in der er alle wichtigen Anpassungen vornehmen kann um die Corporate Identity (Firmenspezifische Farben und Typografien) in die Webseite einfließen zu lassen.

Die Entscheidung um das Template sollten die programmierten Elemente und das Verhalten treffen. Ein modernes Template setzt viel auf weiße Flächen, große Bilder und hat als Eye-Catcher Elemente in einer Highlight-Farbe enthalten. Die Highlight-Farbe sollte sich in vielen Fällen an die CI richten.

Ein sehr wichtiges Kriterium bei der Auswahl eines Templates spielt auch die Fähigkeit eine responsive Darstellung zu ermöglichen. Die Responsivität beschreibt die Eigenschaft ein und dieselbe Webseite auf jedem Endgerät optimal darzustellen. Somit muss der Website-Ersteller nur eine einzelne Webseite erstellen, statt jeweils für das Smartphone, das Tablet und den Desktop-Rechner.

Natürlich musst du kein Template verwenden, sondern kannst auch in die Programmierung von Webseiten einsteigen und damit ein eigenes Template für deine Webseite entwickeln, dass du nach belieben anpassen kannst.

Die Seitenstruktur

Die Seitenstruktur sollte gut durchdacht werden, damit sich der Benutzer Intuitiv auf deiner Webseite auskennt. Andernfalls wird er deine Webseite sehr schnell frustriert verlassen.

Um das zu ermöglichen solltest du bereits bei der Template-Auswahl darauf achten, ob das Menü deines Wunsch-Templates auch eine Multi-Level-Navigation zulässt. Mit dieser Art der Navigationen kannst Du mehrere Menü-Ebenen darin erstellen um Deine Seiten richtig zu kategorisieren und zu strukturieren. Ein Beispiel wäre ein Menüpunkt "Unternehmen" unter dem der User Punkte wie "Kontakt", "Über uns" und "Referenzen" findet, sobald er über diesen Menüpunkt mit der Maus fährt.

Überlege dir genau wie du die Kernelemente deiner Webseite Aufbereiten möchtest und verknüpfe diese in der Navigation so, dass sie auf den ersten Blick erkenntlich sind. Auch das Google-Ranking deiner Webseite profitiert davon, da die Navigation deine Kernbereiche auf allen Seiten verlinkt. Die eigentliche Eingangsseite ist in vielen Fällen nicht die Startseite, sondern die sogenannten Landingpages (Einstiegs-Seiten) deiner Webseite, wie eine Produktkategorie, die detaillierte Darstellung eines bestimmten Produkts bzw. einer Leistung.

Wichtige Inhalte

Sobald du eine Webseite betreiben möchtest musst du einige Grundangaben platzieren, damit man dich nicht über einen Anwalt Abmahnen kann. Die wichtigsten beiden Seiten auf einer Webseite sind das Impressum und der Datenschutz.

Im Impressum stehen wichtige Inhalte zum Webseiten-Betreiber und wer für die Inhalte verantwortlich ist. Für Privatpersonen gelten dabei aber andere Regelungen wie bei einer Firma. Für eine Firmen-Webseite oder einen Shop benötigst du zum Beispiel eine gültige Umsatzsteuer-Nummer. Eine Homepage, also eine nicht-kommerzielle Webseite, benötigt eine solche Umsatzsteuer-Nummer nicht, da hier auch keine Produkte beworben werden.

Wichtig für eine Privatperson ist die Angabe des Namens, der Telefonnummer, die E-Mail-Adresse und eine gültige Anschrift.

Was du für deine Webseite tatsächlich benötigst findest du auf e-recht24.de. Shop-Betreiber oder Firmen sollten aber einen Anwalt und einen Datenschutzbeauftragten aufsuchen und die rechtlichen Seiten mit ihm zusammen erstellen.

Die Entwicklungs-Umgebung

Eine Entwicklungs-Umgebung ist eine Webseite die man für das Entwickeln neuer Elemente oder das Vorbereiten neuer Seiten und Beiträge verwenden kann. Auf dieser Test-Seite kannst du deine Website für den ersten Betrieb vorbereiten, bevor sie veröffentlicht wird. Das ist sehr empfehlenswert, da der Benutzer sonst die leere Webseite, oder eine fehlerhafte Webseite vorfindet.

Viele Hoster (Strato, 1und1, etc.) geben dir die Möglichkeit eine Subdomain innerhalb deiner Domain zu erstellen, um einen Blog neben der eigentlichen Seite zu erstellen, oder eben eine Entwicklungs-Umgebung mit einem Passwortschutz vorzubereiten. Eine Subdomain kann so aussehen (Am Beispiel von kaffee-kaufen.de): www.kaffee-kaufen.de, www2.kaffee-kaufen.de, blog.kaffee-kaufen.de, shop.kaffee-kaufen.de, staging.kaffee-kaufen.de.

Eine Subdomain darf nur einmal innerhalb deiner Domain existieren. Hier gelten die gleichen Regeln wie in deiner Domain: Keine Sonderzeichen, keine Leerzeichen, keine Großbuchstaben.

Sobald du zufrieden mit deiner Webseite bist kannst du sie von deiner Entwicklungs-Umgebung auf deine Live-Umgebung transferieren um sie für das World-Wide-Web sichtbar zu machen. Bei einer HTML- oder PHP-Webseite geht das relativ einfach, indem du die Daten per FTP überträgst. Sobald eine Datenbank verwendet wird musst du auch diese übertragen. Das ist bei jedem Content Management System der Fall.

CMS oder HTML

Content Management System oder doch lieber Hypertext Markup Language? Worin liegt der Unterschied? Ein Content Management System basiert auf HTML und weiteren Programmiersprachen wie PHP und verwendet in den meisten Fällen eine Datenbank.

Eine HTML-Seite kann unter Umständen Sinn machen, wenn die Webseite nur aus sehr wenigen Seiten besteht, die so gut wie nie geändert werden, wenn nur eine Übergang-Seite aufrufbar sein soll, oder wenn man eine Web-Visitenkarte mit der Domain verknüpfen möchte. Sobald aber mehr Seiten benötigt werden sollte man lieber die Finger von einer reinen HTML-Webseite lassen und auf ein Content Management System setzen.

Ein Content Management System, kurz CMS, erlaubt es dem Website-Ersteller schnell und einfach neue Seiten im gleichen Schema hinzuzufügen. Das passiert in der Regel mit nur wenigen Klicks. Alle weiteren Maßnahmen die man sonst bei einer HTML-Seite machen müsste sind in einem solchem System schon enthalten.

Eine der bekanntesten Content Management Systeme sind Magento, Typo3 oder WordPress. Je nach Größe der Firma und was man benötigt, entscheiden sich die Webseiten-Ersteller oder die Auftraggeber welches System sie verwenden möchten. Große Firmen verwenden in vielen Fällen Typo3, da dieses von der Sicherheit wesentlich besser aufgestellt ist als WordPress, jedoch wird hier ein großes Basiswissen vorausgesetzt die die Erstellung einer Webseite deutlich erschwert was zu höheren Kosten kommen kann. WordPress hingegen ist sehr flexibel und einfach in der Anwendung. Wer das notwendige Fachwissen besitzt kann dieses System auch sehr Sicher gestalten.

Bei beiden Systemen gilt jedoch, dass diese niemals zu 100% vor Hacker-Angriffen geschützt sind. Gewöhne dir deshalb an einen Passwort-Generator für deine Accounts zu verwenden, um Hackern keine Chance zu lassen deine Administrator-Konten anzugreifen.

Suchmaschinen-Vorbereitung

Eine Webseite zu erstellen ist schön und gut, aber was bringt das Ganze, wenn sie von keinem Benuzter gefunden wird?

Deshalb sollte ein jeder Webseitenbetreiber auch mit dem Begriff SEO auseinandersetzen. SEO bedeutet Search-Engine-Optimizing (auf deutsch Suchmaschinenoptimierung) und wird gemacht, damit Google und Co. die Webseite finden und Einstufen können.

Du kannst bereits beim Erstellen deiner Webseite auf viele Kleinigkeiten achten um die Webseite für Google vorzubereiten: Überschriften (h-Tags) definieren und semantisch passend setzen, Seitentitel und Seitenbeschreibung (Meta-Description) für jede Einzelne Seite setzen, Keywords in die Texte einfließen lassen, Bilder beschriften (alt- und title-Tag setzen).
Diese Maßnahme nennt sich OnPage Optimierung und sind die Basis für eine gute Suchmaschinenoptimierung.

Wer eine eigene Webseite erstellen möchte muss ein wenig Wissen bereithalten. Das waren die grundlegenden Informationen, damit du eine kleine Liste für den Start in das WWW bekommst. In folgenden Beiträgen zeige ich dir wie du deine Webseite für Google optimierst und bringe dir bei, wie du eine Webseite von Grund auf mit verschiedenen Auszeichnungssprachen und Programmiersprachen programmierst.

Der erste Schritt in Richtung eigene Webseite

Im Jahr 2018 gab es über 16 Millionen deutsche Webseiten. Das bedeutet, dass jeder 5. deutsche Bürger eine eigene Webseite besitzt. Ich erkläre dir, wie du den ersten Zeh in die Webseiten-Erstellung eintauchst.

Eine eigene Webseite zu besitzen ist fantastisch. Man kann seiner kreativen Ader freien Lauf lassen.

Mit ein wenig Glück und Können kannst du mit deinem eigenen, individuellen Stil Tausende Menschen begeistern. Zudem kannst du mit einem eigenen Blog ein wenig Geld für die Urlaubskasse einnehmen.

Ich möchte dir zeigen, wie du eine eigene Webseite anlegen kannst.

In der Beitragsreihe Deine erste Webseite programmieren findest du alle Informationen, um deiner Webseite Leben einzuhauchen.

Die Domain deiner Webseite registrieren

Jede öffentliche Webseite erhält einen Namen, mit der man sie aufrufen kann. Diesen Namen nennt man "Domain".

Eine Domain kannst du in der Regel bei einem Hoster oder bei einem Domain-Registrar für dich beanspruchen. Merke dir, dass eine Domain nie dir gehört. Du mietest sie für einen unbestimmten Zeitraum und kannst sie auch wieder kündigen.

Eine Domain ist unabhängig vom Webspace (dazu später mehr), wird aber häufig in Verbindung eines Hosting-Pakets angeboten. Ein Hosting-Paket beinhaltet alle wichtigen Dinge, die du für die Registrierung einer Webseite benötigst: Domain, Webspace, SSL-Zertifikat, E-Mail, und mehr.

Die Struktur einer Domain

Eine Domain besteht aus mehreren Einzelteilen, die du individuell "zusammenstecken" kannst. Sie wird immer von der niedrigsten Ebene (Links) zur höchsten Ebene (Rechts) gelesen.

Um dir diese Bestandteile zu erklären schauen wir uns zunächst folgende Domain an:

https://www.example.de

Bezeichnung	Erklärung	Beispiel
Root	Der "Root" kann bei der Registrierung und bei der Eingabe im Browser vernachlässigt werden. Diese Ebene kennen die wenigsten, da er vom Browser selbstständig gesetzt wird.	Ein Punkt nach der Top-Level-Domain: www.example.de.
Top-Level-Domain	Die Top-Level-Domain gibt eine Zugehörigkeit an. Sie kann entweder Länderspezifisch (de/it/es) oder generisch (org/net/com) sein. Für internationale Unternehmen empfehle ich eine .com-Domain. Für deutsche Unternehmen eine .de-Domain.	de com uvm...
Second-Level-Domain	Das ist der eindeutige Name deiner Webseite. Das kann zum Beispiel "codepalm" oder in unserem Beispiel "example" sein.	example(.de) kaffee-shop(.de)
Subdomain	Eine Subdomain ist ein Unterprojekt einer Webseite. Stell dir vor, dass du einen Shop besitzt, der 2 fremdartige Produkte oder Dienstleistungen verkauft: Schuhe und Schuh-Reparaturen. Die beiden Themen können voneinander getrennt werden, um zwei einzigartige Webseiten zu erstellen, die durch Verlinkungen miteinander Verknüpft werden können.	www(.example.de) schuhe(.example.de) reparatur(.example.de)
Protokoll	Das Protokoll gehört indirekt zur Domain. Mit ihm kann man beschreiben, was man mit der Domain machen möchte. Mit http:// oder https:// kann eine Webseite im Browser aufgerufen werden. Mit ftp:// oder sftp:// können Dateien durch ein spezielles Programm transferiert werden.	https://(www.example.de) ssh://(www.example.de) ftp://(www.example.de)