Du wolltest schon immer eine eigene Homepage haben oder eine Webseite erstellen? – Hier der Guide!

Eine Webseite bauen geht mittlerweile richtig fix und ist so simpel wie noch nie! Aber eine gut besuchte und professionelle Webseite zu bauen, die perfekt auf die eigene Brand zugeschnitten ist und Kunden bringt, ist alles andere als simpel! Deswegen habe ich hier eine Best-Practice Liste mit Punkten zusammen gestellt, die du beachten solltest, wenn du eine Webseite baust.

Hier dein Guide für deine perfekte Homepage!

  1. Domain

    Fangen wir bei der Domain an! Die Domain ist das Tor zum Word Wide Web und die erste Anlaufstelle für einen Besucher deiner Seite. Domains kann man sich wie Straßennamen vorstellen. Es gibt gut befahrene und allseits bekannte Straßen oder Autobahnen und auch unbekannte Feldwege. Wenn du dich für eine falsche Domain entscheidest dann ist das vergleichbar wie eine Ladeneröffnung aufm Dorf in der letzten Ecke. Deswegen ist deine Domain schon ziemlich wichtig.
    Im besten Falle ist deine Domain kurz und prägnant und möglichst selbst erklärend. Allerdings zeigen auch viele Beispiele das es auch mal länger sein darf. Teuer sollte eure Domain nicht sein.

    Zwar ist es eine weitläufige Meinung das „gute“ Domains sehr teuer sein dürfen, der Meinung bin ich allerdings nicht. Im Laufe meiner Karriere bin ich wirklich sehr vielen begegnet und habe mit vielen zusammengearbeitet, die bereit waren 5-Stellige Summen für eine Domain auszugeben, im selben Atemzug dann aber an der Webseite selber sparen wollten.
    Um an die Straßennamen Analogie zu knüpfen, nur weil man seinen Laden an eine Hauptstraße platziert, heißt es nicht automatisch das auch Kunden in den Laden reinkommen werden. Bis heute ist es mir ein Rätsel woher die Bereitschaft kommt für eine Domain Unsummen auszugeben, ohne ein Multi-Millionen Business dahinter. Behalte immer den ROI der Domain im Kopf. Wenn du planst mit der Domain 7 – Stellige Summen zu erwirtschaften, dann kann sie auch teurer sein, in den meisten Fällen dient die Website aber nur als Digitale Visitenkarte… deswegen sollte die Domain auch dementsprechend wenig kosten!
    Mittlerweile muss es keine Top-Level (.de/.com) Domain mehr sein, es gibt unzählige neue Endungen für 15€ (.shop/.io).

  2. Hosting

    „Performance over everything“ sollte die Devise beim Hosting sein!
    Ein guter Hoster und ein gutes Paket entscheidet darüber, wie schnell die Webseite erreichbar ist und wie viel man am Ende noch optimieren kann. Auch wie sich die Seite bei viel Traffic verhält und nicht gleich bei 100 Usern parallel zusammen knickt, liegt am Hostingpaket! Für einen guten Hoster sollte man ein paar Euro mehr ausgeben.

    Zu sehr in den Hoster-Vergleich will ich hier nicht gehen, da es sehr Abhängig vom Zweck der Seite ist und der Nutzerschaft. Bei einem Shop oder einer Stark frequentierten Seite kann man sehr gut AWS(Amazon Web Services) einsetzen. Strato ist für jeden erstmal eine gute Anlaufstelle meiner Meinung nach.

  3. Tech

    Heutzutage gibt es sehr viele verschieden Methoden wie man eine Webseite entwickelt.
    Website-Baukasten mit CMS, reines Template-basiertes HTML oder volle Out-of-the-box Lösungen? Alles möglich! Mit all diesen Möglichkeiten wird man eine gute Webseite produzieren können, allerdings muss man sich damit schon ein wenig mehr befassen, da jede Methode seine spezifischen Vor-und Nachteile hat. Wie flexibel und eigenständig will man am Grundgerüst der Webseite Anpassungen vornehmen können? Du solltest dir, bevor du die Seite baust im Klaren darüber sein, was du willst, wie flexibel du deine Seite verändern willst und wo deine eigenen Fähigkeiten liegen.

    Mit rudimentären HTML und CSS Kenntnissen kann man auch selber schnell eine Webseite mit Bootstrap, HTML und Javascript bauen. Hat man diese nicht, würde ich eher zu Baukastensystem a la WordPress mit Templates und Plugins raten. WordPress zum Beispiel hat durch seine große Flexibilität und Nutzerfreundlichkeit, selbst für Laien, zur Folge, das es ziemlich langsam ist und lange Ladezeiten hat. Reine Bootstrap Seiten sind dagegen sehr schnell, fordern aber ein gewisses Know-How ein.

  1. Ziel

    Bevor du dich an das Design, Layout oder Formulierungen deiner Texte setzt, solltest du dir über dein Ziel im Klaren sein. Was willst du mit der Seite erreichen? Ist es eine digitale Visitenkarte die dich als Person oder dein Unternehmen vorstellt? Soll es ein Blog werden? Ein Online-Shop? Das Ziel und der Sinn bedingt alle folgenden Schritte sei dir deswegen sicher, wohin die Reise gehen soll!

  1. Layout & Farbe

    Wenn es auf die richtige Kommunikation deines Layouts ankommt, sind Farben enorm wichtig.
    Jede Farbe übermittelt einen anderen Eindruck und wird vom Betrachter unterschiedlich empfunden.
    Im richtigen Umgang können sie aber sehr kraftvoll und nützlich sein. Zum Beispiel wenn du die Aufmerksamkeit oder den Fokus auf ein bestimmtes Detail lenken willst.

    Unstimmige Farbkombinationen oder ausgefallene und grelle Farben können die Verweildauer auf der Webseite stark reduzieren und für eine schlechte User-Experience sorgen. Gute Tools mit denen man stimmige Farbkombinationen findet.
    Auch ein Intuitives und modernes Layout ist wichtig, die Navigation muss klar strukturiert, einfach zu bedienen,
    übersichtlich und schön anzusehen sein.

    Inzwischen gibt es viele gute Layouts, die jedem bekannt sind und von denen man sich viele abgucken kann!
    Versuch auf „in sich verschachtelte Dropdown Menüs“ zu verzichten und versuch deine Navigation „clean & easy“ zu halten!

    via GIPHY

    1. Content

      Content beinhaltet gute Texte und passende Bilder. So simpel das jetzt klingt, so effektiv ist es auch!
      „Content is King“ ist ein oft angeführtes Zitat aus den Bereichen Online Marketing und Suchmaschinen Optimierung.
      Wenn du dir hier frühzeitig viele Gedanken machst, dann sparst du bares Geld beim SEO oder Onlinemarketing im zweiten Schritt.
      Wie sieht guter Content aus?

      Bei einer digitalen Visitenkarte sind das prägnante und kurze Sätze die deinen Service oder dein Unternehmen auf den Punkt bringen, wichtig! Man hat nicht viel Zeit um dem User seinen Service oder seine Brand vorzustellen, da die Aufmerksamkeitsspanne eines DAU’s (Dümmster Anzunehmender User) nur wenige Sekunden beträgt! Text und Bildsprache müssen stimmig sein und sich ergänzen!
      Bei einem Blog sind das lange und packende Texte und maximale Verweildauer auf deiner Webseite ist oberstes Ziel.
      Bei einem E-Commerce Shop zum Beispiel sind gute Produktbilder und ausführliche Produktbeschreibungen wichtig.

    1. Bilder

      Bilder werden im Webdesign immer wichtiger. Der Spruch „Bilder sagen mehr als 1000 Worte“ trifft heute mehr den je zu! So sollten Bilder nicht nur hübsch anzusehen sein, sondern den Content unterstützen! Wo findet man gute und vor allem lizenzfreie Bilder? Meine erste Wahl ist unsplash.com. Eine der größten Sammlungen von lizenzfreien Stockimages.
      Durch „Community Collections“ für bestimmte Themen ist es  sehr empfehlenswert!

      Ein Tipp noch am Rande, den ich bei der Optimierung nochmal anreißen werde. Bevor du Bilder verwendest, achte auf die Auflösung. In den meisten Fällen sollten die Bilder verkleinert werden, sowohl von den Dimensionen als auch der Dateigröße. Für das Optimieren von Bildern gibt es bei WordPress unzählige gute Plugins. Wer es selbst machen will, dem empfehle ich tinyPanda! Hochladen und downloaden, fertig!

    2. Audience

      Kenne deine Zielgruppe. Das gilt eigentlich für jeden Aspekt deines Geschäfts, aber bei der Website eben genauso! Deine Zielgruppe definiert nämlich das Design, Layout und Usability deiner Website. Jede Zielgruppe hat andere Vorkenntnisse und Erwartungen an eine Website! Also entwickle deine Seite dementsprechend Zielgruppengerecht! Farben, Text und Bilder können stark variieren zwischen verschiedenen demografischen Gruppen genauso, wie das Medium über das die Website besucht wird!

    1. Ads

      Auf Werbung solltest du auf jeden Fall verzichten! Besonders wenn es eine digitale Visitenkarte werden soll!

    2. Typographie

      Es gibt sehr viele schöne Fonts zur freien Benutzung. Suche einen passenden Font aus, der zum CD (Corporate Design) oder zum Logo passt. Die richtige Typographie macht noch einmal einen signifikanten Unterschied aus.

    3. Einzigartigkeit

      Lass dir etwas einfallen das deine Website einzigartig macht! Wir haben uns damals eine verschwommene Glühbirne ausgedacht, die klar wird, sobald man über sie drüber hovert. Das Ganze war über einem Abschnitt über „Fokus“ und hat den Nukleus der Passage auf den Punkt gebracht, das wir für „Klarheit“ sorgen werden! Solch kleine Spielereien bleiben im Kopf und zeigen liebe zum Detail!

    1. Pop-Up’s

      Versuche Pop-Ups weitestgehend zu vermeiden! Seit dem DSGVO wird der User sowieso schon mit mindestens 2 Pop-Ups pro Seite bombardiert, da sind noch weitere nur nervig!

    2. Mobile First – Responsive Design

      Wir leben in mobilen Zeiten. Mehr als die Hälfte aller Webseiten besuche werden über das Handy oder Tablett erfolgen. Also ist oberste Maxime, das deine Seite perfekt für die Mobile-User angepasst ist. Es ist sogar so wichtig, das dieser Punkt an erster Stelle stehen sollte. Alles sollte klar lesbar sein, keine überlappenden Elemente und eine intuitive und angepasste mobile Navigation. Genauso wichtig sind schnelle Ladezeiten und optimierte Bilder! Hierzu ist der Punkt über Optimization so wichtig!

    3. via GIPHY

    4. Browser Compatibility

      Auch wenn der Internet Explorer in Sumpf der schlechten Browser verschollen ist, hat jeder Browser so seine Eigenheiten.
      Besonders die vielen mobilen Browser und Safari sollten gerne noch getestet werden. Es ist so einfach, allen Benutzern gleichermaßen eine grandiose Webseite zu bieten, wenn man auf die Browser Compatibility achtet. Um verschiedene Browser automatisiert zu testen gibt es auch unzählige Webseiten. Ein Beispiel wäre hierbei Browserling.com.

    5. Optimization

      Da die letzten Punkte sich weitestgehend um Optimierungen drehen, hier jetzt die wichtigsten Optimierungsmethoden. Unter Optimierung fallen überwiegend Punkte die die Ladezeiten verkürzen und den Pagespeed erhöhen. Der erste Schritt ist seine Website zu analysieren. Google bietet dafür eine Seite an (). Nach einer fixen Analyse gibt Google einem sehr viele Optimierungstipps! Nachdem man die Tipps von Google angewandt hat, sollte man sich um GZIP (Methode zur Quellcode Komprimierung) und der Modifizierung der „.httpaccess Datei“ widmen. WordPress bietet hierfür viele Plugins. Wer Bootstrap benutzt kann dies auch sehr simpel per Filezilla erledigen. HTTPS ist inzwischen auch ein Muss-Kriterium von Google und kann sogar von den meisten Webhostern per „One-Click“ eingerichtet werden.

    6. Testing

      Jetzt ist es an der Reihe deine Website komplett zu Testen. Google bietet hierfür externe Developer Addons mit denen Ihr eure Website auf Responsiveness, Browser Compatibility und Speed testen könnt. Einfach in Chrome auf „F12“ klicken, umschauen und anpassen. Auch fixe Code-Previews im Browser sind hierbei möglich!

    7. Sitemap und SEO

      Um von Google gut geranked zu werden solltest du auf SEO achten. Eine Sitemap einzurichten kann auch vom Vorteil sein. Die Robot.txt sollte auch angelegt werden. Unter WordPress gibt es für all diese Themen das Plugin Yoast SEO! Zum Thema SEO gibt es auch Online eine Menge Artikel und Videos, einlesen ist die Devise!

    8. Tracking & Analytics

      Kenne deine Besucher, denn dein Geschäft hängt von Ihnen ab. Deswegen solltest du solides Tracking und genaue Analyse-Mechanismen verbauen, um deine User kennenzulernen, Feedback zu bestimmten Beiträgen / Artikeln zu erhalten und deine Website dahingehend optimieren! Nur durch genaues Tracking wirst du wissen, woher deine User kommen, was sie interessiert und noch viel wichtiger, was sie nicht interessiert.

    9. Social Media

      Ein einfacher Weg am Anfang ein bisschen Traffic für deine Website zu generieren ist es, die Seite mit deinen Social Media Channels zu verknüpfen. Dies wird immer einfacher sowohl für Nutzer als auch für Entwickler!

    10. Newsletter

      Um deine engagiertesten Nutzer zu binden und ihnen einen deutlichen Mehrwert zu bieten ist es empfehlenswert einen Newsletter einzubauen. Vorteil ist ganz klar, dass du einen direkten Kundenkontakt aufbaust und neue Produkte an deine wertvollsten Kunden ausspielen kannst. Weiterhin kann man Umfragen direkt am Kunden durchführen und das Nutzerverhalten tracken.
      Eine E-Mail Liste ist also immer noch Gold wert. Anbieter die sehr viel automatisieren und eure Arbeit erleichtern gibt es viele.
      Eine gute All-In-One Lösung die ich immer wähle bietet Mailchimp an.

    11. Impressum / AGB / Datenschutz

      Impressum und Datenschutz sind die zwei wichtigsten Seiten. Sobald du das Tracking eingebaut hast, wirst du dich wundern wie viele, besonders Deutsche User, diese Seiten besuchen, um sich ein Eindruck zu verschaffen, wer hinter dem ganzen steckt. Rechtlich sind diese Seiten sowieso unabdingbar. Wer nach kostenlosen Vorlagen und Templates sucht wird bei Google fündig. Eine Empfehlung, die ich aussprechen kann an dieser Stelle ist, e-Recht24.de, sehr Nutzerfreundlich und ein guter Impressums- und Datenschutz Generator implementiert. Ein fehlendes oder falsches Impressum kann abgemahnt werden, deswegen muss ein richtiges Impressum den Namen, eine Ladungsfähige Adresse, Telefonnummer und E-Mail Adresse enthalten.

    12. DSGVO

      Die DSGVO wird wahrscheinlich das Unwort des Jahres 2018. Keiner weiß so wirklich was gefordert wird, aber muss sich an die Richtlinien halten. Jeder Webseitenbetreiber muss die neuen Richtlinien beachten, da er aktiv oder passiv personenbezogene Daten verarbeitet. Leider ist das Thema auch zu Umfangreich und würde hier den Rahmen sprengen, weswegen ich auch nicht sonderlich ausschweifen werde!
      Generell solltest du dich Fragen „Wo fallen personenbezogene Daten an?“ Protokolliere die Wege der Verarbeitung und lass das ganze prüfen, damit du auf der sicheren Seite bist!
      Hier eine kleine Checkliste für die Mindestanforderungen:

      • aktiviere HTTPS
      • passe deine Datenschutzerklärung an (nenne alle Plugins und Services)
      • alle Formulare dürfen nur die notwendigsten Informationen erheben und man muss darüber aufklären was mit den Daten passiert
      • check deine Social-Buttons und embedded Videos, da diese oft Daten sammeln
      • Tracking Tools checken auf Konformität und Opt-Out Funktionalität anbieten
      • Cookie Concent anbieten
      • Newsletter checken und mit Anbieter einen Vetrag zur Datenverarbeitung schließen sowie den Zweck des Newsletters erläutern
      • IP Anonymisieren

      Das ist lediglich eine grobe Übersicht, da ich kein Experte zu dem Thema bin! Bei Unsicherheiten solltest du auf jeden fall einen Experten drüber schauen lassen.

      via GIPHY

    Das sind die wichtigsten Aspekte um eine perfekte Internetpräsenz auf die Beine zu stellen. Diese Liste werde ich auf dem Laufenden halten und ständig anpassen und updaten. Sollte dir noch ein Punkt einfallen, schreib es mir gern in die Kommentare! Sollte ich dir geholfen habe, teile doch gerne deine Seite mit mir und ich gebe dir sehr gerne konstruktives Feedback dazu!

    Du willst mehr Tipps?

    In meiner StartUP Basics Rubrik zeige ich dir ALLES – von der Gründung bis zum Exit!

How To

Leave a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ich akzeptiere