Internetseite erstellen lassen: In 12 Schritten zur Internetseite

Wer eine Online Präsenz erstellen lassen möchte, sollte sich mit dem Basiswissen auskennen, wie ein solcher Prozess aussieht. Im Folgenden eine Beschreibung.

Übersicht

1) Konzept

a. Wer sind die Kunden?
b. Wieviele Besucher wird es geben?
c. Sicherheitsaspekte
d. Unternehmenstyp
e. Welches Ziel verfolgt die Website?
f. Welches Budget besteht für die Umsetzung?
g. Anbindung Warenwirtschaftssystem/ ERP/ Drittsystme?
h. Welcher Mobiler Ansatz wird gewaehlt?
i. Wie wichtig ist Suchmaschinenoptimierung?
j. Wird es einen Blog geben?
k. Onlineshop? Produktkonfigurator? Zahlungsanbindung?
l. Kommen Landing Pages zum Einsatz?
m. Erklärvideo? Corporate Video?
n. Animationen?
o. Entscheidung Content Management System oder Individualprogrammierung

2) Workshop
3) Wireframes
4) Photoshop Dateien
5) PSD zu HTML/ CSS
6) Implementierung des Web Designs in die Website (CMS/ PHP/ Framework, etc.)
7) Content Erstellung/ Copywriting
8) Technische Umsetzung von Funktionalitäten (Produktkonfiguratoren, etc.)
9) Weiterleitung der alten Onlinepräsenz
10) Testing/ Übergabe
11) Wartung
12) Fortlaufende Tätigkeiten
Fazit

1) Konzept

Bevor das Design erzeugt oder gar die erste Zeile Code geschrieben wird, sollte man ein Konzept für das Projekt besprechen, beziehungsweise niederschreiben.

Folgende Punkte sind dabei zu beachten:

a. Wer sind die Kunden?

Eine Internetseite wird anders gestaltet, je nachdem wer die Kunden sind. Für Kinder und Jugendliche sollte die Online Präsenz bunt und Fröhlich wirken. Für einen gestandenen Manager sollte der Ton und auch die Farben konservativer gestaltet sein. Ein Weg, um die Besucher zu beschreiben, sind sogenannte Personas. Auf kleinen Kärtchen werden die Eckpunkte (Alter, Beruf, Einkommen, etc.) und eine Beschreibung der Kundenwünsche aufgelistet. Dabei sollte man nicht zu viele Personas erzeugen. Drei reichen. Denn die Webpage für noch mehr Ansprechpartner anzupassen kann schwer werden. Drei ist jedoch definitiv möglich.

Hier ein Beispiel für eine Persona:

b. Wieviele Besucher wird es geben?

Hier geht es eher darum, um festzulegen welche Technologie man auswählt. Hat man zirka 1000 bis 20’000 Besucher im Monat auf der Webpräsenz, dann langen Content Management Systeme wie WordPress. Sind es mehr, dann braucht es Technologien wie TYPO3 oder eventuell eine Individualprogrammierung mit PHP oder einem PHP Framework (beispielsweise Laravel, Zend oder Symfony).

c. Sicherheitsaspekte?

Auch der Sicherheitsaspekt ist eine Thematik. Besonders mittelständische Unternehmen brauchen eine hohe Sicherheit ihrer Daten. Lösungen wie TYPO3 können dabei unterstützen.

d. Unternehmer-Auftritt/ Unternehmenswebsite/ Konzern

Auch ist es wichtig zu bestimmen, für wen der Auftritt gedacht wird. Für einen Unternehmer, der als Einzelkämpfer auftritt, ist eher das individuelle Auftreten, mit vielen Bildern des Unternehmers selbst wichtig. Ist es ein Konzern, dann sind Dinge wie Corporate Identity und Corporate Design wichtig.

e. Welches Ziel verfolgt die Website? (News, Kundengewinnung, Lead Generierung, Newsletter Anmeldung)

Bei vielen Internetseiten geht es einfach darum, das Unternehmen Online zu repräsentieren. Das Marketing und der Vertrieb laufen oftmals noch klassisch ab. Vieles ändert sich jedoch und Unternehmen merken, dass man Leads auch Online erzielen kann. Je nachdem was man möchte, muss man die Website anders gestalten. Besonders wenn man Leads generieren möchte, zum Beispiel soll der Besucher ein Kontaktformular ausfüllen, dann muss man bereits viele Dinge beachten. Hier einige wichtige Begriffe:

  • Copywriting: Um Besucher gezielt anzusprechen, müssen die Texte dementsprechend angepasst werden. Spezialisierte Copy Writer können Texte schreiben, die mehr Kunden positiv ansprechen. Man könnte die Texte auch selbst schreiben, ein Copy Writer ist jedoch spezialisiert und ein “Text der Verkauft” lohnt sich mittelfristig.
  • Conversion Rate Optimierung: Kurz CRO. Dieser Bereich wird immer wichtiger. Früher hat man Webseiten einfach so Online gestellt. Wenig Gedanken sind in den Bereich “Wie kann ich mehr Besucher zu Kunden machen” gegangen sondern eher “Wie kann ich mehr Webbesucher bekommen”. Es bringt jedoch wenig, wenn immer mehr Menschen auf die Onlinepräsenz kommen, jedoch nur ein kleiner Teil, zum Beispiel 0.05 Prozent der Besucher das Kontaktformular ausfüllen. Man hat gemerkt, dass man durch gezielte Anpassungen, diese Zahl auf 2 bis 8 Prozent oder sogar mehr ansteigen lassen kann! In dem man Bilder, Texte, Videos dementsprechend anpasst. Beispielsweise hat man gemerkt, dass Formulare mit weniger Feldern öfter ausgefüllt werden, als Formulare welche viele Felder haben.
  • In diesem Zusammenhang ist auch das sogenannte “A/B Testing” interessant. In welchem man unterschiedliche Variationen eines Formulars oder eines anderen Webelementes testet und schaut welches besser performt (Hinweis: Dies ist ein fortlaufender Prozess und läuft auch nach der Internetseiten Erstellung weiter)

f. Welches Budget besteht für die Umsetzung?

Dieses Budget müssen Sie dem Dienstleister nicht unbedingt mitteilen. Jedoch ist es besser, wenn der Dienstleister weiss, welche Vorstellung Sie haben, so kann dieser besser planen. Ansonsten wird es oftmals ein Ratespiel auf Seiten der Agentur.

g. Anbindung Warenwirtschaftssystem? ERP System?

Bei Webseiten ist es oftmals besser keine Anbindung an das Warenwirtschaftssystem oder das ERP vorzunehmen. Bei Online Shop Projekten oder bei Mitarbeiterportalen kann es jedoch durchaus sinnvoll sein. Was man dabei bedenken sollte: Eine Anbindung einer Internetseite an ein ERP oder sonstiges System ist meistens komplex und Aufwendig in der Erstellung.

h. Mobile App oder Responsive Design?

In den meisten Fällen reicht ein Responsive Design, in welchem sich die Website den unterschiedlichen Bildschirmgrössen anpasst (Smartphone, Tablet, Desktop). In speziellen Fällen macht auch eine Mobile App (Android und iOS) Sinn, wenn zum Beispiel den Mobile Nutzern zusätzliche Funktionalitäten zugänglich gemacht werden sollen (GPS, Bilderaufnahme, etc.).

i. Wie wichtig ist Suchmaschinenoptimierung?

Ist es das Ziel, mehr Besucher über das Internet und Suchmaschinen zu erhalten? Dann macht es Sinn sich über Suchmaschinenoptimierung (SEO) Gedanken zu machen. Hierfür müssen die Texte und Bilder so angepasst werden, dass diese von Google auf den ersten Plätzen in der sogenannten organischen Suche anzeigt.

j. Blog?

Ein Blog kann eine Webpräsenz dynamischer wirken lassen. Dieser hat folgende Vorteile

  • Positionierung als Experte: Schreibt man regelmässig zu einem Thema, dann wird man mit der Zeit als Experte in seinem Bereich wahrgenommen.
  • Findung in den Suchmaschinen: Wenn man zu einem bestimmten Thema oder einer Nische schreibt, dann wird man mit der Zeit in den Suchmaschinen gefunden (Stichwort: SEO und Content)
  • Fragen und Antworten: In Blogbeiträgen können News, Informationen und Fragen und Antworten weitergegeben werden.

Ein Blog hat also sehr viele Vorteile und kann ein Bestandteil einer Website sein. Umso grösser das Unternehmen, desto professioneller sollten jedoch auch die Inhalte sein.

k. Onlineshop? Produktkonfigurator? Zahlungsanbindung?

In einigen Fällen braucht es auch einen Onlineshop. Diesen sollte man jedoch als separates Projekt aufsetzen, denn hierbei gibt es wiederum unzählige weitere Punkte zu beachten. Beispielsweise könnte man einen Produktkonfigurator bauen, welche es den Besuchern ermöglicht, eigene Produkte zusammenzustellen und zu bestellen.

l. Landing Pages?

Landing Pages unterscheiden sich von einer Webpräsenz. Diese sind dafür gedacht, Besucher gezielt zu einer Aktion zu bewegen. Dies kann das Anmelden für einen Newsletter sein, das Ausfüllen eines Kontaktformulars, das Herunterladen eines Whitepapers und vieles mehr. Hier ein paar Vorteile von Landing Pages:

  • Haben keine weiterführenden Links: Das Besondere einer Landing Page ist, dass diese keine weiterführenden Links hat. Man kann also nur nach oben oder nach unten scrollen (jedoch kann es interne Links geben, die das navigieren auf der gleichen Seite vereinfacht).
  • Es gibt ein bestimmtes Ziel auf welche alle Texte und Buttons hinweisen: Man kann nur eine bestimmte Sache machen. Zum Beispiel das Ausfüllen eines Kontaktformulars. Somit vermeidet man zuviele Optionen für den Besucher und dieser kann sich einfacher entscheiden.

Ein Landing Page Konzept sollte separat besprochen werden. Zum Beispiel als separates Projekt. Denn das Potenzial ist gross, denn Landing Pages haben eine viel höhere Abschlussrate (Newsletteranmeldung, etc.) als Webseiten.

m. Erklärvideo? Corporate Video?

Je nachdem was das Ziel ist, sollte man auch kleinere Videos erstellen. Ein Erklärvideo von zwei bis drei Minuten länge kann die Dienstleistung innerhalb einer kurzen Zeit erklären und zum Handeln auffordern. Dies kann man zum Beispiel auf der Startseite oder auf Landing Pages verwenden. Oder ein Corporate Video, wenn es darum geht, die Marke zu stärken und dem Besucher die Geschäftstätigkeit aufzuzeigen.

n. Animationen?

Besonders bei Produkten kann es sinnvoll sein, kleinere Animationen erstellen zu lassen, welche die Funktionalität bildlich beschreibt.

o. Entscheidung Content Management System oder Individualprogrammierung:

Zum Ende der Konzeptphase kann man sich dann entscheiden wie man das Ganze technisch umsetzt. Man kann beispielsweise komplett auf “fertige Systeme” setzen. Hier ein Beispiel für die Umsetzung mit einem Content Management System (CMS):

  • CMS: TYPO3 oder WordPress oder Drupal
  • Landing Pages/ AB-Tests: Unbounce
  • Newsletter: Mailchimp

Der Vorteil von Content Management Systemen und “fertigen Systemen” ist, dass sich der Aufwand enorm verringert. Speziell für kleine Unternehmen und kleinere Mittelständler ist das sicherlich der bessere Ansatz.

Wenn man jedoch sehr viele individuelle Funktionalitäten benötigt, dann kann eine Individualprogrammierung sinnvoller sein. Hier ein Beispiel für die Umsetzung a la Individualprogrammierung:

  • Website-Backend: PHP oder ASP.NET oder Java
  • Website-Frontend: HTML, CSS, JavaScript
  • Landing Pages: Auch eines der Technologien wie PHP, etc. oder alternativ Landing Page Builder wie Unbounce.

Der Vorteil ist wie schon gesagt, dass man sehr individuelle Programmierungen vornehmen kann. Das ist besonders bei Mittelständlern und Konzernen wichtig. Oder für Unternehmen welche spezielle Dienstleistungen unter anderem Online anbieten.

Auch wenn es sehr viele Vorteile gibt, was man bei diesem Ansatz verstehen muss: Der Aufwand vervielfacht sich und Dinge die mit einem CMS in Stunden umgesetzt werden können, kann in einer Individualprogrammierung Wochen und Monate dauern. Dennoch es lohnt sich. Es kommt auf das Projekt an.

2) Workshop

Wenn man die Konzeptionsphase hinter sich hat, dann kann man sich Online oder vor Ort mit den wichtigsten Ansprechpartnern (Kunde, Dienstleister, Projektleiter, Programmierer, Nutzer) zusammensetzen und die Dinge aus der Konzeptionsphase noch einmal durchgehen.

Man kann noch mal den Sinn der einzelnen Punkte besprechen und eventuell auch ein Whiteboard nutzen, um das Ganze zu visualisieren (den Prozess der Erstellung der Internetseite oder die Website selbst).

In diesem Workshop kann dann nochmal besprochen werden, welche Punkte umgesetzt werden.

3) Wireframes

Jetzt ist der Punkt, an dem die Agentur gefragt ist, die ersten sogenannten Wireframes zu erstellen. Das sind ungefähre Skizzen wie die Webpräsenz später aussehen sollen.

  • a. Auf Papier: Mit einem Bleistift erzeugt man die ersten Seiten der Website auf Papier.
  • b. Mit Wireframe Online Tools/ Klickbare PDF Datei: Hierbei gibt es viele kostenfreie und kostenpflichtige Online Tools, in denen man die Internetseiten erstellen kann. Mit wenigen Klicks lassen sich simple Prototypen bauen. Diese lassen sich als klickbare PDF Dateien herunterladen oder man kann dem Kunden einen Link zukommen lassen, in welchem die Skizzierungen aufrufbar sind.
    Diese Wireframes lässt man dem Kunden zukommen lassen und dieser kann dann sein Feedback geben.

Der Vorteil von Wireframes ist, dass zu diesem Zeitpunkt noch keine aufwendige Designarbeit oder Programmierung getätigt wurde. Einen Button zu verschieben oder ein komplettes Redesign vorzunehmen dauert daher nur wenige Minuten.

Dies wäre anders wenn zum Beispiel die Website bereits programmiert ist, dann ist eine Veränderung mit Stunden und Wochen und manchmal sogar Monaten an zusätzlicher Arbeit verbunden. Dass heisst also auch: Auch wenn es ein wenig zeitaufwendig ist die Wireframes/ Skizzen zu erstellen. Es lohnt sich, weil man in dieser Phase “relativ” wenig Zeit für Veränderungen benötigt.

4) Photoshop Dateien

Jetzt macht sich der Designer daran die Wireframes in Photoshop Dateien umzusetzen. Hier sieht man dann bereits wie die fertige Website aussehen wird.

In den meisten Fällen werden bis zu drei Änderungswünsche zugelassen. Mehr lässt sich auch machen, der Aufwand (und damit die verrechneten Stunden) erhöhen sich dadurch jedoch.

5) PSD zu HTML/ CSS

Diese Photoshop Dateien (sogenannte PSD Dateien) werden nun in HTML und CSS vom Webdesigner umgewandelt.

Diese werden benötigt, diese dann in das Content Management System oder die Individualprogrammierung zu übernehmen.

Hinweis: Bei Content Management Systemen gibt es zum Beispiel auch sogenannte Templates, dann kann man sich die Designphase sparen. Dann muss man jedoch auch bereit sein, sich an die Design-Vorgaben des Templates zu halten. Denn diese Design-Vorgaben sind eher starr und Webelemente (Texte, Videos, Buttons, Menüs, etc.) lassen sich nicht einfach an die Stellen verlegen, an welchen man diese haben möchte.

6) Implementierung des Web Designs in die Website (CMS/ PHP/ Framework, etc.)

Ein Programmierer wird nun die Designs nehmen und diese in das ausgewählte Content Management System einbauen, oder aber in die Individualprogrammierung, je nachdem welchen Ansatz man gewählt hat.

7) Content Erstellung/ Copywriting

Die Texte werden oftmals von einer Content Agentur geschrieben, die mit der sogenannten “Lead Agentur” (welche das Ganze koordiniert) zusammenarbeitet.

Hier die wichtigsten Content Typen:

  • a. SEO Texte: Hierbei geht es darum weit oben in den Suchmaschinen gefunden zu werden. Guter Texte sind jedoch so geschrieben, so dass sie auch dem Leser einen hohen Mehrwert bieten.
  • b. Blogbeiträge: Auch hier ist SEO ein Thema. Fragen auf typische Fragen können hier gegeben werden, oder Tipps und Tricks aus der Industrie.
  • c. Copywriting für die unterschiedlichen Seiten/ Landing Pages: Texte auf Landing Pages sind meistens kurz und prägnant und weisen auf eine bestimmte Sache hin. Auch dies kann besser von einem Profi geschrieben werden.
  • d. Bilder: Hier kann die Agentur entweder auf sogenannte Stock-Photo Seiten zurückgreifen. Dort zahlt man einen kleinen Lizenzbetrag und kann somit die Fotos nutzen. Dabei muss dann nur die Zeit für die Suche durch die Agentur (Suche nach den passenden Bildern) und die Bearbeitung der Bilder bezahlt werden. Besser jedoch ist, wenn die Agentur einen Fotografen engagiert, welcher hochprofessionelle Bilder erstellt.
  • e. Erklärvideos/ Corporate Videos/ Animationen: Auch für diese Aufgaben braucht es oftmals eine separate Firma, welches ich auf Erklärvideos/ Corporate Videos spezialisiert hat.

Diese Aufgaben können zum Teil separat zur Designphase und der Programmierung laufen.

8) Technische Umsetzung von Funktionalitäten (Produktkonfiguratoren, etc.)

Folgende Aufgaben werden, unter anderem, vom Programmierer umgesetzt:

  • a. Formulare: Formulare (zum Beispiel Kontaktformulare) und die Logik dahinter.
  • b. Plugins: In Content Management Systemen gibt es zum Teil kostenfreie Plugins, welche sich einfach installieren lassen. Sollte man jedoch individuelle Plugins benötigten, dauert die Entwicklung etwas länger. Diese werden vom Programmierer umgesetzt.
  • c. Produktkonfiguratoren: Diese werden oftmals auch in Onlineshops verwendet. Zum Beispiel, so dass der Nutzer der Website sich die Service oder Produkte individuell zusammenstellen kann.

Wie bereits erwähnt kann der Programmierer unterschiedlichste Technologien nutzen, um die Internetseite zu erstellen. CMS wie WordPress, Drupal, TYPO3 oder Contao kommen in Frage. Oder PHP, PHP Frameworks (Laravel, Zend) oder ASP.NET (wird oft in Abteilungen von grossen Konzernen eingesetzt, um Webpages umzusetzen) oder Java (für Banking-Applikationen und sehr grosse Projekte).

Zusatztipp: Setzen Sie auf bewährte Technologien wie PHP oder ASP.NET und nicht auf neuste Ansätze wie Golang oder Node.JS. Das lohnt sich eher für monderne Web-Applikationen und weniger für Webpräsenzen.

9) Weiterleitung der alten Onlinepräsenz

Wenn Sie eine bereits bestehende Onlinepräsenz haben, dann sollte man entweder die gleiche URL Struktur beibehalten.

Zum Beispiel: Linkstruktur

www.domain.de/ueber-uns bleibt auch nach der Umstellung www.domain.de/ueber-uns

Sollte sich die Struktur jedoch verändern, dann sollte die Agentur sogenannte 301-Redirects implementieren, so dass die Personen, die noch die alten Links irgendwo abgespeichert haben, oder welche vielleicht auf Onlineverzeichnissen gelistet sind, auf die neue Seite weiterleiten.

Was Sie vermeiden wollen ist, dass jemand auf einen alten Link klickt und eine Fehlermeldung auf Ihrer Internetseite angezeigt bekommt.

Zudem hat es auch unterschiedliche SEO Vorteile:

  • a. Früherer Linkaufbau wird erhalten (Umgangssprachlich “Link-Juice” genannt)
  • b. Domainstärke wird erhalten

10) Testing/ Übergabe

Wenn Sie eine Internetseite erstellen lassen dann muss diese, wenn die Umsetzung fertig ist, getestet werden. In grösseren Projekten gibt es dafür separate Software-Tester, welche die Funktionalitäten testen und schauen ob alles richtig läuft. Hierbei werden unter anderem folgende Punkte überprüft:

  • a. Funktionieren die Formulare?
  • b. Funktionieren die Seiten?
  • c. Funktionieren die Funktionalitäten?
  • d. Wird es richtig auf mobilen Endgeräten angezeigt

11) Wartung

Wenn es ein Content Management System ist, dann ist die Wartung meistens relativ einfach und ein Administrator of Kundenseite kann diese Aufgabe übernehmen. Beispielsweise das regelmässige Update von Plugins.

Bei Individualprogrammierungen kann auch ein Admin die Aufgaben übernehmen. Es braucht jedoch Unterstützung seitens des Programmierers bei der Agentur, wenn es darum geht Updates vorzunehmen oder andere Änderungen zu tätigen.

12) Fortlaufende Tätigkeiten:

Folgende Tätigkeiten können fortlaufend getätigt werden, wenn man die Seite zum Beispiel regelmässig aktualisieren will (zum Beispiel mit Neuigkeiten) oder die Conversion Rate steigern möchte:

  • a. A/B Testing
  • b. Landing Pages erstellen
  • c. Blogbeiträge/ News
  • d. Zusätzlicher Content

Fazit

Eine Internetseite erstellen zu lassen ist eine einfache bis komplexe Aufgabe, je nachdem wie man die Aufgabe angeht.

Am besten ist es immer mit einer Basisversion anzufangen. Erklärvideos, Landingpages, AB-Tests und weiteres lassen sich auch später hinzufügen.

Welche Erfahrungen haben Sie gemacht?

Interessante Beiträge:
Internetseite erstellen lassen von Rocket Homepage
Informationen zur Homepage von Heise

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Von am Juni 21, 2018   /   Internet, Website Entwicklung   /   Einen Kommentar abgeben

Schreibe einen Kommentar