Webmaster-Crashkurs

Website entwerfen, planen und umsetzen

Wie fange ich an, wenn ich eine Website erstellen möchte? Das ist der Punkt, an dem viele scheitern und sich einfach ins Chaos stürzen, was aber bei den wenigsten zur Erreichung des gesetzten Ziels führt: eine selbst erstellte Website.

Hier im Webmaster-Crashkurs soll deshalb nicht nur von Technik wie HTML, CSS, PHP und JavaScript gesprochen werden, sondern auch von der Konzeption der eigenen Website. Wie fange ich an, was benötige ich, wie gehe ich vor, um eine eigene Website zu erstellen und dann im Internet zu präsentieren?

Die Konzeption einer Website vom Planen zum Umsetzen in 8 Schritten

Wenn Sie nicht wissen, wie Sie am besten beginnen, um eine erfolgreiche Website an den Start zu bekommen, halten Sie sich an die folgenden Schritte. Selbst wenn Sie die Umsetzung nicht selber machen wollen, es bleibt immer am Besitzer der Website, die Punkte 1–3 und zum Teil die Punkte 7–8 mit Leben zu füllen.

  1. Zielsetzung festlegen
  2. Konzeption der Inhalte
  3. Konzeption des Design
  4. Umsetzung der Inhalte und Struktur in HTML
  5. Umsetzung des Designs in CSS
  6. Website hochladen (Provider suchen bis zum Übertragen)
  7. Die eigene Website promoten - ohne Besucher (meistens) keine Zielerreichung
  8. Kontrolle

Lassen Sie uns die Punkte mit Leben füllen – dafür brauchen Sie erstmals außer gesunden Menschenverstand und Stifte mit Papier nichts!

Zielsetzung einer Website festlegen

Hier kommt der am meisten unterschätzte Punkt. Legen Sie das Ziel Ihrer Website fest. Und ja – schwarz auf weiß. Schreiben Sie das Ziel groß auf ein Blatt Papier und heften Sie es an die Wand, damit Sie es während dem Erstellen der Website IMMER sehen.

Sehr viele Webseiten sind schon ohne Ziel bzw. Zielfestlegung entstanden. So wird auch die Zielerreichung extrem schwierig bzw. zufällig. Überlegen Sie exakt, was Sie vorrangig mit der Website erreichen wollen. Und zwar das primäre Ziel – nicht 5 Ziele frei nach dem Motto (was ich öfters von meinen Kunden höre), ich möchte meine Produkte vorstellen, Neuerscheinungen bei der Presse bekanntmachen und einen Onlineshop und auch noch die Computerspiele von meinem Sohn über die Website vertreiben.

Nein – 1 Ziel, DAS Hauptziel. Nicht mehr und vor allem nicht weniger!

Und wenn Sie für jemanden eine Website entwerfen, fragen Sie nach. Fragen Sie zweimal nach. Fixieren Sie das Ziel schriftlich. Es ist erstaunlich, wie oft in Firmen die Mentalität vorherrscht, das haben alle, das brauche ich auch. Egal wie – soll nur gut aussehen. Klar kann es ein Ziel sein, dass die Website repräsentieren soll. Dann muss das als Ziel festgeschrieben werden und genau auf diese Zielerreichung hingearbeitet werden. Aber man darf sich dann nicht wundern, wenn die Website nicht gut in Kundenbindung ist.

Fragen Sie wirklich 2-mal nach – oft genug habe ich erlebt, dass es für den obersten Chef nach dem Motto läuft „Mein Haus, mein Auto, meine Website“. Die Marketingabteilung hat aber eine andere Vorstellung und der Vertrieb komplett andere Wünsche. Legen Sie das Ziel fest und stellen Sie es von Anfang an die ganze Zeit für jeden Offensichtlich in den Vordergrund (wie es Sie für sich an die Wand hängen).

Was könnten Zielsetzungen bei einer Website sein? Überlegen Sie sich verschiedene (auch für Bekannte und Verwandte, die Websites für Ihre Firma haben).

Wenn Sie nun Ihre Zielsetzung formuliert haben und kein Domainname vorgegeben ist, können Sie nun den passenden Domainnamen festlegen. Dabei ist dies unter Umständen dadurch schwer, dass schon viele Domainnamen reserviert und von anderen genutzt werden. Es kann aber durchaus noch passende freie Domainnamen geben. Unter Umständen kauft man einem anderen den Domainnamen ab.

Was mache ich mit dem Ziel?

Wenn das Hauptziel nun festgelegt ist, überlegen Sie, wie Sie dieses Ziel am besten erreichen. Versetzen Sie sich in die Rolle des Websitebesuchers und überlegen Sie, ab wann die Website einen Mehrwert für Sie als Besucher bieten würde. Eine Win-Win-Situation zwischen Website-Betreiber und Website-Besucher ist ideal.

Wenn Sie z.B. Reisen verkaufen wollen, könnte der Mehrwert Ihrer Website so aussehen, dass Sie viele Informationen zum Reiseland und Insidertipps anbieten – und natürlich die besondere Reise gleich zu buchen ist.

Sie wollen über Ihre Website Kunden gewinnen zum Thema Mode – bieten Sie auf spielerische Art z. B. eine Möglichkeit, dass der Interessent eine Schaufensterpuppe selber mit den aktuellen Modeschnitten und Farben dekorieren kann. Die fertige virtuelle Schaufensterpuppe kann dann von anderen Besuchern bewertet werden und der Monatssieger erhält genau diese Ausstattung geschenkt (oder mit 50% Rabatt, was Sie wollen).

Sie wollen schwere Motorräder mit einem patentierten Sound verkaufen – bieten Sie Ihren Rockern in Spe an, die schönen Motorradrouten auf Ihrer Website zu dokumentieren und von anderen abzurufen oder z.B. per Newsletter oder RSS-Feed zu bekommen.

Ihrer Kreativität sind keine Grenzen gesetzt (höchsten dann bei der Umsetzung durch ihren technischen Kenntnisstand) – nachdem Sie das Ziel und eine Möglichkeit zur Zielerreichung festgelegt haben, geht es weiter zur Konzeption der konkreten Seite.

Konzeption der Struktur und Inhalte

Wenn das Ziel festgelegt ist, kann es an die Konzeption der Inhalte gehen. Ohne Ziel macht die Konzeption der Inhalte keinen Sinn (bzw. führt schnell zum blinden Aktionismus).

Legen Sie mit Papier und Stift fest, was es neben der Startseite noch für weitere Seiten geben soll und was die Inhalte dieser Seite sein werden. Es geht hier NICHT um das Design der Website – im Vordergrund stehen die Inhalte Ihrer Website.

Jedes Kästchen steht für eine Seite – jede Seite sollte nur 1 Thema haben. Es funktioniert aus verschiedenen Gesichtspunkten nicht, mehr als 1 Thema auf einer Einzelseite zu haben. Wenn wir für unser Beispiel „Reiseseiten“ auf einer Seite die besonderen Spezialitäten beim Essen UND auf derselben Seite die Einreisebestimmungen in das Land beschreiben, geht das technisch zwar. Aber dem Leser werden sich der innere Zusammenhang und die Intention dieser Seite nicht wirklich erschließen. Auch nicht, wenn er darüber nachdenkt. Er wird irritiert, und wenn die Irritation groß genug ist, wird er sich eine andere Website suchen.

Für unsere Reiseseite mit dem Ziel, Ferienwohnungen zu vermieten, stellen wir einen kleinen Plan auf. Überlegen Sie sich selber, welche Seiten und Inhalte Sie für die Zielerreichung (Ferienwohnung vermieten) erstellen würden.

Beispiel Struktur von Website entwerfen

Diese Ansicht hat den Vorteil, dass man eine Übersicht über die geplanten Seiten hat. Je nach Umsetzung kann man später eine direkte Verlinkung von Unterseiten zu anderen Unterseiten erreichen, die im obigen Beispiel nicht abgebildet sind. Direkt von den Naturerlebnissen zur Ferienwohnung mit direktem Zugang zum Naturschutzgebiet und eigenem Biotop und von dort zur Buchungsseite.

Es ist egal, ob Sie diese Skizze von Hand oder mit einem Tool anfertigen (z.B. wurde obige Skizze mit den SmartArts in Microsoft Word 2007 gemacht). Diese Übersicht spart später Zeit und Sie können sich mit Freunden und Bekannten schon über Ihre geplante Website austauschen und weitere Anregungen und Ideen sammeln und in diesem frühen Stadium einbauen.

Konzeption des Design

Wenn Sie die Zielsetzung und die Struktur und die geplanten Inhalte festgelegt haben, geht es zur Konzeption des Designs. Es kann jetzt durchaus sein, dass Farben und Richtung bereits durch Ihre Zielsetzung festgelegt sind.

Um an unser obiges Beispiel mit der naturverbundenen Ferienwohnung festzuhalten – welche Farben werden im Design vorherrschen?

Was für Bilder sind notwendig?

Für die Farben würde ich nach meinem Empfinden ein grün vorziehen – wir wollen unsere Ferienwohnung den Naturliebhabern (unsere primäre Zielgruppe laut Zielsetzung) anpreisen. Rot steht für Liebe – sollten Sie also als primäre Zielgruppe Flitterwöchner haben, dann kann auch Rot die richtige Farbe sein (falls die Zielgruppe überhaupt groß genug ist, um für eine Vollauslastung der Ferienwohnung zu sorgen). Orange wird auf jeden Fall am wenigsten passen, da Orange gerne für Modern, Plastik und kaum für Natur steht.

Bei den Bildern werden Sie sich wieder an Ihrer Zielsetzung orientieren (der Zettel an Ihrer Wand – siehe Abschnitt „Zielsetzung einer Website festlegen“). Nachdem wir uns auf Naturliebhaber „eingeschossen“ haben, werden Bilder mit Haus im Grünen, Wälder und Wanderer in Frage kommen. Wasserfälle nur, falls es Wasserfälle gibt, andernfalls kommt sich der Besucher irgendwann veralbert vor (im Harz gibt es jedoch zahlreiche Wasserfälle). Dagegen sind die Inline-Skater-Strecken im Harz zwar schön, aber eher was für hartgesottene Sportler.

Skizzieren Sie nun im Groben, wo im Kopfbereich was sitzt, wo die Steuerung ist (i.d.R. auf der linken Seite) – wo der Inhalt und andere Elemente sitzen.

Jedes Element sollte eine Funktion haben. Elemente ohne Funktion gleich weglassen.

Wir werden i.d.R. auch nicht mehrere verschiedene Designs benötigen, denn die Website soll ja wie aus einem Guss aussehen. In Firmen heißt das Zauberwort dazu Corporate Identity.

Umsetzung der Inhalte und Struktur in HTML

Nachdem diese Vorarbeiten gemacht sind, können wir die Inhalte und Strukturen nun in HTML-Dateien umsetzen. Dabei können wir unser Organigramm hernehmen und für jedes Kästchen eine HTML-Datei erstellen. Diese Dateien bekommen unterschiedliche Dateinamen (dazu mehr im Kapitel HTML) und die Inhalte werden dort integriert. Dabei wird HTML genutzt, das die Inhalte strukturiert. HTML-Befehle legen z.B. fest, was Überschriften und wo Abschnitte sind, und geben dem Inhalt eine logische Struktur. Der Einsatz von HTML wird im Kapitel xHTML ausführlich erklärt.

Ungeduldige werden erst nur eine erste Seite in HTML setzen und dann das Design (siehe nächster Schritt) machen und erst danach alle restlichen HTML- Seiten. Das bleibt dem Naturell jedes einzelnen überlassen.

Umsetzung des Designs in CSS

Nachdem die Inhalte und Struktur über HTML festgelegt und umgesetzt wurden, geht es an das Design. Das Design wird über die Struktur und Inhalte der HTML-Dateien gestülpt. Im CSS wird z.B. festgelegt, dass alle Überschriften dunkelblau angezeigt werden und eine bestimmte Größe haben. Bisher waren die Überschriften in HTML einfach schwarz und größer als normaler Text – nachdem man mit CSS das Design festgelegt hat, wird es zur HTML-Datei dazu geladen und angewendet. Wie man CSS anwendet und wie Design über CSS gemacht wird, gibt es in dem großen Kapitel über CSS zu lesen.

Website hochladen (vom Provider bis zum Übertragen)

Jetzt wird die fertige Website von der eigenen Festplatte zu einem Internetserver übertragen, damit die ganze Welt jederzeit die Inhalte meiner Website lesen kann. Bei der Zielsetzung wird (falls nicht vorgegeben) auch schon der Domainnamen festgelegt. Dieser wird bei einem Provider „gehostet“, damit die Website und ihre Inhalte unter diesem Domainnamen erreichbar sind.

Die eigene Website promoten - ohne Besucher (meistens) keine Zielerreichung

Zum Promoten und Bekanntmachen der eigenen Website gehört im ersten Schritt die Anmeldung bei Suchmaschinen. Dabei müssen Sie Ihre Website nicht bei den 1.3 Millionen Suchmaschinen auf dieser Welt anmelden, sondern nur bei den wichtigen (im Klartext Google) und den spezifischen – wenn es z.B. eine Suchmaschine für unsere oben genannten Ferienangebote im Harz gibt, dann auch dort.

Auch können Sie in den entsprechenden Magazinen werben und Ihre URL anbringen.

Seien Sie kreativ im Marketing. Schreiben Sie einen Bericht für die (fiktive) Zeitschrift „Naturliebhaber Harz“ mit dem Verweis auf Ihre URL.

Bieten Sie in eBay Ihre Ferienwohnung an – ein Verweis auf Ihre URL ist meines Kenntnisstandes laut den Statuten von eBay untersagt – aber womöglich steht die URL Ihrer Homepage groß auf dem Dach Ihres Hauses, das im Bild abgebildet ist, damit auch Gleitschirmflieger wissen, wo sie übernachten können.

Schicken Sie Ihren bisherigen Gästen eine Weihnachtskarte mit der neuem Domainnamen. Nutzen Sie Ihre täglichen E-Mails (nein – es ist nicht cool, weiter die E-Mail von einem freien Hoster zu verwenden, wenn man eine eigene Domain hat und somit auch eigene E-Mail-Adressen erstellen kann).

Kontrolle

Vertrauen ist gut, aber Kontrolle Ihre Logfiles und das Besucherverhalten auf der Website ist besser und Sie können überprüfen, ob die Zielsetzung erreicht ist bzw. wo was geändert werden muss. Mit den entsprechenden Tools sehen Sie genau, welche Seiten angesehen werden (bzw. nicht angesehen werden) und wo Besucher die Website verlassen. Ziehen Sie Ihre Rückschlüsse. Wenn von 1000 Website-Besuchern, die die Seite „Ferienwohnung buchen“ aufrufen, nur 1 bucht, dann läuft da etwas schief. Liegt es an unnötig komplizierter Technik. Ist es eine Formulierung, die die Leute abhält (frei nach dem Motto: Sie können gerne Haustiere mitbringen, denn Flöhe sind bereits in der Ferienwohnung vorhanden).

Resümee, Zusammenfassung Website Konzeption

Bei der Konzeption einer Website kann man, wie gezeigt, Schritt für Schritt vorgehen. Spätestens wenn Sie ein Ziel haben und mit der Website Geld verdienen möchten, müssen Sie sich immer wieder Gedanken machen, was Sie verbessern können, damit die Website noch besser funktioniert, und die entsprechenden Änderungen durchführen. Eine Website lebt – eine Website jedoch, die einmal gemacht wurde und dann nie mehr verändert, kann schnell nutzlos werden und im schlimmsten Fall kontraproduktiv.

Aber lassen Sie sich nicht von zu vielen Überlegungen vorab davon abhalten, HTML und CSS zu lernen. Einmal muss man anfangen, und der große Vorteil gegenüber der Bildhauerei ist, dass Websites in Normalfall nicht in Stein gehauen sind, sondern verändert und angepasst werden können.

Und nun viel Spaß beim Lernen von HTML und CSS und viel Erfolg für Ihre Website!

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2014   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit Videos