Auf was ist beim Websiteaufbau zu achten?

Eine Checkliste für das saubere Aufsetzen einer Homepage

Eine eigene Homepage ist im unternehmerischen Bereich eine zwingende Notwendigkeit und im privaten Bereich mindestens praktisch, um diverse Projekte zu realisieren. Wir zeigen Ihnen in diesem Ratgeber, wie Sie sich eine Webseite aufbauen – von den technischen Grundlagen über Designfragen bis hin zu SEO-relevanten Themen. Am Ende sollten Sie eine klare Vorstellung davon haben, wie der Aufbau einer Homepage von der konzeptuellen Phase bis zum Launch voranschreitet.

Technische Voraussetzungen für Ihre Webseite

Drei wichtige Aspekte sind Teil jeder Homepage: ein Server, eine Domain und ein Hostingpartner, bei dem Sie den Server mieten (und dort Ihre Webseite hochladen). Theoretisch besteht auch die Möglichkeit, eigene Server zu kaufen. Im privaten Rahmen und auch für kleine Unternehmen wäre dies jedoch, finanziell gesehen, keine sinnvolle Entscheidung.

Betrachten wir die drei genannten Bestandteile zunächst getrennt:

Hosting

Das Hosting übernimmt einer von unzähligen Hostern. Sie finden sie ganz einfach über eine beliebige Suchmaschine, wenn Sie Begriffe wie “Webseitenhosting” eingeben. Der Markt ist hart umkämpft, Dutzende von Anbietern kommen mindestens in Frage. Sie alle unterscheiden sich hinsichtlich der technischen Eigenschaften, die das jeweilige Angebot mitbringt. Dazu gehören etwa der zur Verfügung stehende Speicherplatz, eventuelle Trafficbeschränkungen, die Anzahl der Domains und E-Mail-Adressen, die Unterstützung von PHP und MySQL (was wichtig ist, falls Sie etwa den Aufbau der Webseite über WordPress planen) und zahlreiche weitere Eigenschaften.

Überlegen Sie, was Sie wirklich brauchen, und treffen Sie anschließend die Entscheidung mit dem bestmöglichen Preis-Leistungs-Verhältnis.

Domain

Prüfen Sie, ob die gewünschte Domain überhaupt verfügbar ist. Normalerweise können Sie dies über Ihren Hostingpartner abwickeln oder unter direkt unter www.denic.de. Beachten Sie, dass Sie keine Rechte Dritter verletzen sollten. Vielleicht heißen Sie Benjamin Meier-Winter und möchten gerne Ihre Initialen als Domain nutzen. Es ist jedoch höchst unwahrscheinlich, dass Sie www.bmw.de nutzen können, ohne dass das Vorhaben in rechtlichen Schwierigkeiten mit dem Automobilhersteller endet.

Server

Die technische Ausstattung des Servers hängt meistens direkt mit dem von Ihnen gewählten Hostingpaket zusammen. Wie “gut” Ihr Server sein muss, hängt auch von Ihrem Vorhaben ab. Ein einfacher Blog, der Videos und Bilder bei anderen Plattformen hostet und ansonsten nur Text und einige simple Grafiken zeigt, braucht nicht mehrere Terabyte Speicherkapazität. Prüfen Sie, welche technischen Voraussetzungen wirklich gegeben sein müssen, und entscheiden Sie sich dann für ein Paket. Die meisten privaten Anwender und Unternehmen benötigen nämlich höchstens durchschnittlich ausgestattete Server.

Binden Sie sich im Zweifelsfall nicht zu lange an einen einzigen Hostingpartner. Kürzere Vertragslaufzeiten bedeuten, dass Sie schneller umsteigen können, falls sich anderswo bessere Angebote zeigen sollten.

Erstellung der Webseite – Eigenbau oder CMS?

Die selbstständige Programmierung einer Webseite lässt Ihnen viele Freiheiten, allerdings benötigen Sie dafür auch entsprechendes, sehr umfangreiches Fachwissen. Durch ein Content Management System – kurz: CMS – wird Ihnen viel Arbeit abgenommen, aber Sie müssen sich damit abfinden, nicht jedes kleine Detail exakt an Ihre Wünsche anpassen zu können. Vergleichbar wären die beiden Systeme mit dem Zeichnen auf einer freien, weißen Leinwand und dem “Malen nach Zahlen”.

Aber: Gerade aktuelle CMS wie das bereits erwähnte WordPress sind trotz Baukastenmentalität stark individualisierbar. Dort wählen Sie etwa Themen, Farben, Schriftarten, Layout und weitere Aspekte des Designs relativ frei. Da es sich um ein sehr populäres CMS handelt, stehen unzählige verschiedene Designs zur Auswahl – einige kostenfrei, andere nicht. Allerdings sollte Sie hier gewisse Vorkenntnisse im Bereich Programmieren vorweisen können.

Weiterhin gibt es diverse Homepage-Baukästen, die noch sehr viel simpler als WordPress aufgebaut sind. Der große Vorteil besteht darin, dass keinerlei Programmierkentnisse vonnöten sind, um sich einen Webauftritt zu erstellen. Die technische Seite wird komplett vom Anbieter übernommen und Inhalte können schnell und einfach geändert werden. Sollte man Fragen haben, bekommt man diese vom Support des jeweiligen Anbieters beantwortet und spart sich enorme Kosten im Vergleich zu einem Dienstleister.

Wir können daher nur dazu raten, ein gutes CMS wie WordPress oder einen Baukasten zu verwenden. Die eigenständige Programmierung erfordert enorm viel Zeit und Geld (und meistens beides). Nur dann, wenn Sie eigenständige, innovative Features anbieten möchten, die in keinem CMS enthalten sind, sollten Sie über eine Selbstprogrammierung nachdenken.

Wichtige Abschnitte – was darf nicht fehlen?

Der Großteil der Webseite unterliegt Ihren eigenen Wünschen und Vorstellungen, einige Bereiche sind aber zwingend vorgeschrieben:

• Sie sind dazu verpflichtet, als Webseitenbetreiber ein Impressum zu veröffentlichen. Ausnahmen bestehen nur dann, wenn das Angebot familiären oder persönlichen Zwecken dient. Erstellen Sie etwa eine Webseite, auf der Sie Ihren Urlaub für die ganze Familie festhalten müssen, sind Sie von dieser Pflicht befreit. In der Regel kommen Sie jedoch nicht um das Impressum herum.

• Betreiben Sie einen Onlineshop, der Produkte oder Dienstleistungen jeglicher Art verkauft, müssen Sie außerdem Ihre AGBs veröffentlichen. Ansonsten sind Sie nicht dazu berechtigt, einen Onlineshop zu führen, wodurch Strafen drohen. Lassen Sie die AGBs von einem Fachanwalt prüfen – einfaches Copy & Paste von anderen Onlineshops wird nicht funktionieren.

• Was passiert mit den Daten Ihrer Nutzer, wenn diese sich etwa für ein Forum anmelden oder bei einem Newsletter eintragen? Wohin wandern Anschriften und Adressen in einem Onlineshop? Eine Erklärung zum Datenschutz und was Sie genau mit den gesammelten Daten machen, ist gerade für kommerzielle Angebote unbedingt notwendig.

• Nicht unbedingt vorgeschrieben ist eine Kontaktseite. Dort erfahren Ihre Nutzer etwa E-Mail-Adressen, Telefonnummern für einen eventuellen Kundensupport, eine Anschrift oder ähnliche Daten. Sie müssen keine Kontaktseite einrichten, da viele dieser Informationen bereits im Impressum enthalten sind. Eine zentrale Anlaufstelle für Kontaktanfragen jeglicher Art empfinden die meisten Kunden jedoch als sehr angenehm.

Von diesen Punkten abgesehen haben Sie beim Design Ihrer Webseite völlig freie Hand. Erlaubt ist, was legal ist.

Test der fertigen Webseite

Die diversen unterschiedlichen Browser bringen zwar Vielfalt ins Netz, gleichzeitig sind Sie dadurch gegenüber Ihren Besuchern aber auch zur Kompatibilität mit allen gängigen Applikationen verpflichtet. Derzeit (Stand: Juli 2016) zählen dazu etwa der Internet Explorer, Microsoft Edge, Opera, Chrome, Firefox und Safari. Auf den genannten Browsern sollte Ihre Webseite einwandfrei dargestellt werden, da diese den absoluten Löwenanteil der Browserverteilung weltweit ausmachen. Ihre Webseite funktioniert in einem bestimmten Browser nicht? Dann müssen Sie noch einmal zurück an den Code!

Welche Fehler im HTML-Code begraben liegen, prüfen Sie beispielsweise durch validator.w3.org. Bezeichnet als Markup Validation Service prüft diese Webseite, ob Ihre Homepage mit den aktuellen Standards der HTML-Sprache konform ist. Ist dies der Fall, haben Sie sogenannten validen Code geschaffen.

Valider Code hat einige Vorteile: Beispielsweise wird nicht-valider Code von Browsern automatisch in nutzbaren Code umgewandelt. Vielleicht würden Edge und Chrome dies jedoch auf unterschiedlichem Weg machen, sodass auch das Resultat am Ende anders aussehen könnte. Ist Ihre Webseite vollständig valide, hat sie außerdem sehr gute Aussichten darauf, auch in vielen Jahren von ganz neuen Browsern problemlos dargestellt zu werden.

Gleichzeitig ist zu 100 % valider Code jedoch nicht unbedingt notwendig. Zahlreiche Webseiten sind fehlerbehaftet und stellen aktuelle Browser trotzdem nicht vor Probleme. Finden Sie am besten einen guten Mittelweg aus validem Code und “kreativen Eigenlösungen”, die funktionieren.

Nutzen Sie beispielsweise für die Erstellung der Webseite einen Homepage-Baukasten, entfallen diese Tipps übrigens. Dort haben Sie für gewöhnlich keinen Einfluss auf den eigentlichen HTML-Code. Weiterhin achten die Entwickler der Content Management Systeme darauf, dass die verschiedenen Bauteile ohnehin entweder auf validem Code fußen oder die nicht-validen Lösungen dennoch fehlerfrei dargestellt werden.

Tuning der Webseite

Zwar leben wir im Zeitalter der leistungsfähigen Smartphones, dennoch sollte die Performance der fertigen Webseite einen ebenso hohen Stellenwert genießen wie etwa Usability, Design oder Sicherheit. Nicht jeder Besucher wird mit einem ähnlich schnellen Laptop, Desktop-PC oder Tablet wie Sie unterwegs sein. Ignorieren Sie die große Mehrheit der Personen, die ein Gerät nutzen, das “einfach nur ausreicht”, machen Sie gerade als Unternehmen Verluste.

Optimierung Sie im Smartphone-Zeitalter Ihre Webseite vor allem auf mobile Geräte. Denken Sie an responsives Design, damit die Usability der Webseite und auch deren Performance auf Touch-Geräten erhalten bleibt. Sorgen Sie dafür, dass gerade größere Bilddaten im Cache landen können, damit sie nicht bei jedem Aufruf neu geladen werden – und das gilt auch für vermeintlich kleine Objekte wie das Favicon für den Browser, wo hin und wieder Performance verschwendet wird. Es ist nur 16 * 16 Pixel groß, sodass ein Icon mit höherer Auflösung zwar Performance (beziehungsweise Bandbreite) kostet, aber keine sichtbaren Vorteile bringt. Dieses kleine Beispiel zeigt, wie wichtig Performanceoptimierung ist.

Die Performanceoptimierung besteht in der Regel aus diesen eher kleinen, vermeintlich unscheinbaren Dingen, die jedoch in der Gesamtheit für ein deutlich schnelleres Nutzererlebnis sorgen. Eine langsame Webseite wird sehr viele Ihrer Kunden schnell wieder zum Absprung bringen. Einen einfachen Test können Sie selbst durchführen: Nehmen Sie das älteste Gerät, das Sie finden können, und rufen Sie Ihre Webseite auf. Zu langsam? Dann suchen Sie nach der Ursache ( zu aufwendige Themes, unkomprimierte PNG-Bilder, zu große GIF-Dateien, Integration von Plug-ins à la Flash oder Java, zu viel und zu aufwendige Werbung, etc etc …).

Analyse im Nachhinein

Auf Ihr gutes Bauchgefühl sollten Sie sich nicht verlassen. Nur durch Trafficanalysen und ähnliche Verfahren erkennen Sie – unter anderem -,r wie beliebt Ihre Webseite ist. Ein populäres Tool dafür ist die Nutzung von Google Analytics, wobei dessen Beliebtheit vor allem daher rührt, dass das Programm kostenlos ist.

Sie nutzen diesen Webdienst für die Bereitstellung umfangreicher Statistiken, die gerade Werbetreibenden in die Hände spielen und damit von SEO-technischer Relevanz sind. Dort erfahren Sie etwa, welche Suchbegriffe zu Ihrer Seite führen (ein wichtiger Performanceindikator für SEO), welche Inhalte besonders viele Besucher anziehen, wie viele Gäste Sie überhaupt haben, über welche Links der Zugriff erfolgt oder woher die Besucher kommen und zu welcher Uhrzeit Sie besonders gefragt sind.

Google Analytics ist ein sehr umfangreiches Tool, das Ihnen auch zeigt, wie lange Personen bei Ihnen bleiben oder wie viele weitere Webseiten sie pro Besuch aufrufen. Am einfachsten wäre es, wenn Sie sich das Resultat selber ansehen, denn eine Auflistung aller Funktionen würden Rahmen deutlich sprengen.

Wichtig ist: Sie sammeln zwar unfassbar umfangreiche Datensätze, aber Sie müssen auch lernen, sie auszuwerten. Ohne die richtigen Rückschlüsse zu ziehen, werden Ihnen Daten alleine nicht helfen. Integrieren Sie Google Analytics (oder jedes andere Analysetool, das Sie bevorzugen) daher in Ihre Bemühungen, die Webseite stetig zu verbessern. Erkennen Sie, welche Inhalte für Besucher besonders relevant sind, welche Abschnitte Sie verbessern oder streichen müssen und wer Ihre Zielgruppe überhaupt ist.

.htaccess – brauche ich das?

Die Antwort lautet: vielleicht. Die .htaccess-Datei dient dazu, Vorgaben seitens des Servers zu ändern. Sie können sich dies auf viele unterschiedliche Methoden zunutze machen, wovon einige recht populär sind. Der Umgang mit diesem “Werkzeug” ist jedoch nicht ganz einfach und geht über die bislang recht einfachen Tipps hinaus.

Beispielsweise können Sie eine entsprechend konfigurierte .htaccess dafür nutzen, bestimmte Bereiche oder auch Dateien mit einem Password zu versehen (was für Mitarbeiter Ihres Unternehmens wichtig sein kann). Sie können sich auch selbst SEO-technisch weiterhelfen und etwa den www-Anteil am Anfang einer URL unterbinden, falls Ihre Webseite auch ohne diesen Teil erreichbar ist (etwa als http://beispiel.de).

Vielleicht hosten Sie auch selbst Bilder auf Ihrer Webseite und möchten nicht, dass diese Grafiken auf anderen Webseiten oder vielleicht in Blogs und Foren direkt eingebunden werden – und auch dies können Sie durch die .htaccess-Datei unterbinden. Sehr beliebt ist auch die Änderung der standardmäßigen 404-Webseite, falls Besucher auf nicht vorhandene Inhalte zugreifen möchten. Hier haben Sie viel Spielraum für die Individualisierung und können sich beziehungsweise Ihr Unternehmen professionell und sympathisch gleichzeitig darstellen.

Hilfreich aus Sicht der Performance ist die genaue Definition des Browser-Cachings, das wir im vorherigen Abschnitt bereits erwähnt haben. In der .htaccess-Datei legen Sie fest, welche Dateien nach welchem Zeitraum erneuert werden sollen. Sie sehen schon, dass Ihnen diese kleine Datei extrem viel Spielraum für interessante “Basteleien” bietet – wenn Sie sich damit auskennen!

Fazit

Was Sie jetzt innerhalb von vielleicht zehn Minuten überflogen haben, dauert in der realen Umsetzung mehrere Wochen oder Monate. Gerade bei der Eigenprogrammierung und dem Verzicht auf ein CMS kommt ein erheblicher Aufwand auf Sie zu. Übrigens ist die Liste nicht der Wichtigkeit nach geordnet: Jeder Punkt hat für sich einen ebenso hohen Stellenwert und sollte entsprechend von Ihnen beachtet werden. Holen Sie sich im Zweifelsfall professionelle Hilfe: Das Aufsetzen einer Webseite ohne externe Agentur ist keine Aufgabe für den Praktikanten, nur weil der in seiner Freizeit “mal ein bisschen HTML gemacht hat”.