Wie du deine Website schnell und effizient planst
Vorwort:
Die Website Planung ist der wichtigste Baustein in deinem gesamten Projekt. Aus eigener Erfahrung weiß ich, dass die Planung oft zu kurz kommt. Das hat sich bislang immer gerecht. Stundenlange Umbauten waren die Folge. Die Hälfte der Arbeit habe ich dir schon abgenommen, du musst nur meine Anleitung zum Thema Website Planung folgen.
Zuerst solltest Du dir die Frage stellen, was eigentlich alles in eine Webseite gehört und woraus eine Webseite besteht. Diese Fragen gehen wir jetzt auf den Grund.
Inhaltsverzeichnis Website Planung
Webseite leicht erklärt
Woraus besteht eine Webseite?
Du kannst deine Webseite mit nur einer Datei erstellen. Eigentlich brauchst du nur ein Dateiformat, welches der Browser verarbeiten kann. Dazu gehören TXT, PDF, JPG und PNG-Dateien. Diese Dateien kannst du auf einem Webserver hochladen und über den Browser aufrufen. Das wäre theoretisch eine Webseite. Professionelle Webseiten werden mit HTML, CSS und JavaScript programmiert. HTML und CSS sind Auszeichnungssprachen, sie werden geschrieben und nicht programmiert!
Wenn die Webseite auch Funktionen ausführen soll, die nicht sichtbar sind, wird noch eine serverseitige Programmiersprache benötigt. PHP ist eine serverseitige Programmiersprache. Ein gutes Beispiel wäre ein Kontaktformular. Der Kunde füllt das Formular aus und verschickt es. Beim Versenden des Formulars muss etwas mit dem Formular passieren. Mithilfe von PHP kann nun die Eingabe des Users verarbeitet werden und entweder eine E-Mail versenden oder bei einer Fehleingabe eine Fehlermeldung zurückgeben werden.
Soweit so gut, nun hätten wir eine simple Webseite, die ein Formular verarbeiten kann. Wenn wir noch eine Benutzerverwaltung, ein Backend und weitere nützliche Features haben möchten, wäre zudem noch eine Datenbank nicht schlecht. Mit einer Datenbank können wir viele Daten in Form von Tabellen abspeichern. Das hat den Vorteil, dass wir nicht für jede Unterseite HTML und CSS schreiben müssen. Wir müssen nur ein paar Vorlagen anfertigen und diese mit den Inhalten aus der Datenbank befüllen. Du hast wahrscheinlich gemerkt, dass es gar nicht so einfach ist, eine Webseite zu programmieren, daher benutzen wir ein Content-Management-System (kurz CMS). Speziell das CMS WordPress hat den Vorteil, dass Templates, Formulare und sämtliche Funktionen schon kostenlos auf WordPress.org verfügbar sind. Man muss diese nur installieren und an seinem Design ein bisschen anpassen. Du brauchst also nicht wissen, wie genau das mit HTML, CSS, JavaScript und PHP funktioniert, da das CMS die Programmierarbeit erledigt.
TIPP:
Hast du Interesse an HTML, CSS, JavaScript und PHP?
Auf dieser Seite werden dir die Basics erklärt:
w3schools
Server und Domain
Wir wissen nun, dass eine Webseite also aus Dateien besteht. Die Dateien müssen nun auf einen Server abgelegt werden, damit jeder Mensch auf dieser Welt darauf zugreifen kann und somit die Webseite sieht.
Es wäre denkbar, dass die Dateien auf dem eigenen PC abgelegt werden können, damit die Webseite erreichbar ist. Und ja, natürlich kannst du dir deinen eigenen Webserver auf deinem PC einrichten, aber dieser müsste 24 Stunden am Tag und 365 Tage im Jahr an sein. Sobald dein Rechner ausgeschaltet wird, wäre auch die Webseite nicht mehr erreichbar. Von den Wartungskosten mal abgesehen, ist ein Provider viel günstiger, als seinen eigenen PC dauerhaft in Betrieb zu lassen. Die Kosten liegen zwischen 5 und 10 Euro im Monat. Eine Domain ist meistens inklusive. Die Domain ist deine Internetadresse. Meine ist z. B. cms-wordpress.de (.de wird als TLD bezeichnet).
Es gibt auch kostenlose Anbieter, diese bieten dir aber nur eine Subdomain an. Bei mir würde eine Subdomain so aussehen:
subdomain.cms-wordpress.de
Bplaced bietet kostenloses Webhosting an, wenn ich den kostenlosen Tarif dort buchen würde, würde meine Domain so aussehen:
cms-wordpress.bplaced.net
Wie du siehst, ist das nicht wirklich schön, aber zum Testen reicht es völlig aus. Suchmaschinen werten Subdomain nicht sonderlich gut.
Worauf du bei deinem Provider achten solltest:
- SSL-Zertifikat ist ein muss
- Ohne Datenbank, kein WordPress
- SSD wäre gut
TIPP:
Es gibt viele private Menschen, die sich einen Serverschrank mieten und günstig Webhosting anbieten.
Das hat zudem den Vorteil, dass du nicht auf einem ausgelastetem Server landest.
Schreib mir eine E-Mail, wenn du Hilfe bei der Suche brauchst.
Welche Inhalte gehören auf eine Website
Zielgruppe bei der Website Planung
Der größte Fehler, den du bei der Website Planung machen kannst, ist es, die Webseite nach deinem Geschmack zu bauen. Du bist nicht die Zielgruppe. Überlege dir, wenn möchtest du mit deinem Blog oder deinem Unternehmen erreichen.
Hast du eher junge Leser oder ältere Kunden? Wenn du ältere Personen ansprechen möchtest, mach es bestimmt mehr Sinn, die Schrift etwas größer darzustellen, damit der User Texte besser lesen kann. Zudem weißt du auch, dass du einen älteren Menschen eher siezen solltest. Es gibt aber nicht nur Alt und Jung. Bist du ein lokales Unternehmen, also ein Unternehmen, welches möglichst viele User in der Umgebung ansprechen möchte? Für lokale Unternehmen mach es natürlich Sinn, Stadtzeichen auf der Webseite zu platzieren, da diese vertraut beim Kunden sind. Globale unternehmen haben es schon etwas schwieriger. Wenn deine Kunden auf der ganzen Welt verteilt sind, musst du bedenken, dass z. B. die Farbe eine komplett andere Bedeutung in China hat als bei uns in Europa.
Struktur
Nicht nur das Menü auf deiner Webseite sollte eine Struktur haben, sondern jede einzelne Seite hat eine bestimmte Struktur.
Navigationsmenü
Du kannst anmehren Stellen deiner Webseite eine Navigation, also ein Menü platzieren. Das wichtigste Menü findest du immer oben auf der Webseite, meistens als Leiste. Hier sollte auch der WICHTIGSTE Inhalt verlinkt sein. Nein, „über uns“ ist nicht ganz so wichtig, aber auf fast jeder Seite dort verlinkt. Für mich ist das Verschenktes potenzial, den du hättest an dieser Stelle ein Produkt oder einen guten Artikel verlinken können.
Überlege dir also gut, welche Produkte du dort verlinken möchtest oder wenn du einen Blog hast, welche Kategorien du dort zeigen möchtest. Auf fast jeder Seite befindet sich ganz unten auf der Webseite der Footer auch immer ein Menü. Zu 99 % findest du im Footer ein Menü, in dem du das Impressum und die Datenschutzerklärung findest. Das hat den Grund, dass sowohl das Impressum und die Datenschutzerklärung immer sichtbar sein müssen und daher packen fast alle diese Seiten in den Footer.
Struktur auf der Seite
Jede Webseite besteht aus einem Head, Main und Footer. Der Header ist der Teil, in dem sich das Menü befindet. Der Footer ist der Abschluss der Seite, hier werden weniger wichtige Informationen verlinkt. Du solltest aber auf jeden Fall im Footer noch mal deine Kontaktdaten hinterlassen, falls der User dich kontaktieren möchte. Das nennt der Profi auch „Call to Action“. Der Header und der Footer sind eigentlich immer dasselbe.
Nur der Main-Bereich unterscheidet sich auf jeder Seite. Ich werde es an einem praktischen Beispiel erläutern.
Nehmen wir an, wir sind ein Bäcker.
In die Hauptnavigation verlinke ich natürlich meine Hauptprodukte.
Startseite, Torten, Brote, Kuchen und Kontakt
Von der Startseite aus erkläre ich kurz zu jedem Produkt etwas Nettes und verlinke zusätzlich von der Startseite auf das Produkt. Auf der Seite Brote habe ich mehrere Überschriften.
Wichtig: Es gibt auf jeder Seite nur einmal die H1, das ist die wichtigste Überschrift, die es gibt. Es gibt Überschriften von H1-H6, je höher die Überschrift, desto unwichtiger ist auch der Absatz.
- Als H1 Wähle ich die Überschrift „Meine leckeren Brote“
- Welche Brote gibt es? – H2
Weizenbrot -H3
Roggenbrot – H3 - Wo gibt es das beste Brot? – H2
Nachdem du deine Struktur vorbereitet hast, kommt der spaßige Teil und du kannst anfangen, ganz viele Texte zu schreiben. Die Struktur ist nicht nur für deinen Kunden wichtig, sondern auch Suchmaschinen bewerten dich nach deiner Struktur.
TIPP:
Dir fällt einfach kein guter Inhalt ein?
Ein Blick auf Google lohnt sich. Es werden dir zu fast allen Suchen "Ähnliche Fragen" und ganz unten "Verwandte Suchanfragen" angezeigt. Diese Themen solltest du unbedingt auf deine Webseite packen, da sehr viele Menschen genau danach suchen und Google würde gerne diesen Menschen die passende Lösung zeigen. Wenn du alles richtig machst, wird bald deine Webseite dort angezeigt.
Design der Webseite
Das Design deiner Webseite sollte natürlich deiner Zielgruppe entsprechen. Achte dabei, dass jede Seite dieselben Farben hat. Übertreibe es nicht und suche dir maximal 6 Farben aus. Weniger ist mehr. Cleandesign ist gerade Trend. Baue nicht nur Textwüsten, sondern zeige auch ansprechende Bilder.
TIPP:
Du findest keine passenden Farben? Hier findest du harmonische Farben, die von Top-Designern zusammengestellt wurden.
Budget
Machen wir es kurz und schmerzlos. Wenn du nur mal testen möchtest, ob dir ein Blog gelinkt oder du ein Schulprojekt hast, nehme die kostenlose Subdomain und bediene dich aus den zahlreichen Themes und Plugins von WordPress.
Wenn du jedoch deine Firma von Anfang an professionell darstellen möchtest, investiere wenigstens in die Domain und ein günstiges Webhosting. Die Kosten sind mit 5-10 € im Monat überschaubar. Ich empfehle auch, ein premium Theme zu kaufen, diese kosten im Schnitt 50 Dollar. Du bist deutlich schneller mit deinem Projekt fertig und hast wesentlich mehr Einstellungen, um dein Projekt individueller zu gestalten.
Aber Achtung, es gibt viele Themes, die nichts taugen. Darauf gehe ich aber in späteren Tutorials weiter ein.
Fazit
Der Vorteil von einem CMS liegt auf der Hand, mit WordPress baust du dir ohne Programmierkenntnisse deine eigene Webseite. Überlege Dir, wer deine Zielgruppe ist und lege die Webseite darauf aus. Deine Webseite ist die Präsentation für deine Zielgruppe. Du weißt nun, dass die wichtigsten Themen / Produkte in der Hauptnavigation verlinkt werden müssen.
Keine Sorge, das war jetzt nur Theorie, im Laufe meiner Tutorials gehen wir gemeinsam alles durch. Ich zeige dir, wie du WordPress installierst und eine schicke Webseite auf die Beine stellst.