Die wichtigsten Tipps für deine Unternehmens-Webseite

Du hast nur eine Chance für deinen guten ersten Eindruck. Mit diesen Tipps repräsentierst du dich und deinen Betrieb perfekt im Internet.

Deine Webseiten sollten immer einen bestimmten Sinn haben bzw. einen bestimmten Zweck dienen. Es gibt einige Punkte, die bei jeder Webseite wichtig sind. Es gibt jedoch auch Punkte, auf die du nur bei bestimmten Arten von Webseiten besonders machen solltest.

Aus diesem Grund ist unser Blogbeitrag in 3 Arten von Webseiten unterteilt.

1.) Startseite deiner Unternehmenswebseite
2.) Landingpage (eine Webseite, die nur dazu gedacht ist dein Produkt ⁄ Dienstleistung zu bewerben und zum Kauf zu animieren)
3.) Blog und Informationsseiten
4.) Online Shop

Es gibt natürlich noch andere Arten von Webseiten.
In den aller meisten Fällen sind nur diese 4 Arten von Webseiten als Unternehmenswebseite sinnvoll.

Als ersten Schritt ist es wichtig zu definieren, welche Funktion deine Webseite erfüllen soll und wie du Besucher auf deine Webseite bringst.

Soll deine Webseite deinen Webseiten-Besucher:

über deinen Betrieb informieren?
zum Kauf in deinem Online-Shop animieren?
zum Anruf mit deinem Unternehmen animieren?
dazu bringen, sich in dein Kontaktformular einzutragen?

Wie willst du deine potenziellen Kunden auf deine Webseite bringen?

Über die Suchmaschinenoptimierung (SEO)
Über Werbung in Suchmaschinen (z.B. Google Ads)
Über Werbung in den sozialen Medien (z.B. Facebook, Instagram usw.)
Über Affiliate-Partner (eine Art Empfehlungsmarketing im Internet)
Über E-Mail-Marketing
Über Blogs, Foren und Frageplattformen

Allgemeine Tipps zu Unternehmenswebseite

Auf die folgenden Punkte solltest du bei allen deinen Webseiten beachten.
In den späteren Abschnitten werden dir die Besonderheiten der verschiedenen Arten von Webseiten erklärt (Homepage, Landing Page, Blog und Online Shop).

1.) Optimierung für mobile Geräte (z.B. Smartphones)
2.) Schnelle Ladezeit & geringer Datenverbrauch
3.) Gute Lesbarkeit
4.) Einfache Navigation
5.) Meta Titel, Beschreibung und andere Meta-Tags
6.) above the fold (direkt sichtbarer Bereich deiner Webseite, ohne zu scrollen, wenn dein Besucher auf deine Webseite gelangt)

Optimierung für mobile Geräte (z.B. Smartphones)

Mehr als die Hälfte der Webseiten-Aufrufe werden auf mobilen Geräten, wie Smartphones, erzeugt.
Aus diesem Grund arbeitet auch Google nach dem Motto ‚Mobile first‘.

Für Google ist die Optimierung deiner Webseite, für mobile Geräte, eines der wichtigsten Merkmale für die Platzierung deiner Webseite in der Google-Suche.

Deine Webseite sollte sich auf die Größe des Bildschirms deines Besuchers anpassen.
Benutze prozentuale Werte für die Größen und Abstände deiner Webseiten-Elemente.

Heutige Smartphones vergrößern Webseiten so, dass der vorhandene Text gut lesbar ist.
Das führt dazu, dass nur ein kleiner Abschnitt deiner Webseite auf dem Bildschirm von Smartphones zu sehen ist.

Auf Webseiten, die nicht mobil optimiert sind muss dein Webseiten-Besucher in alle 4 Richtungen scrollen oder raus und rein zoomen, um deine Webseite komplett sehen zu können.
Deine Webseite sollte nur vertikal gescrollt werden müssen, damit deine Webseite benutzerfreundlich ist.
Deine Webseite sollte also auf jeden Fall so breit sein wie die Bildschirmbreite deines Besuchers.

Ich empfehle dir mindestens 2 verschiedene CSS-Dateien für deine Webseite zu haben.
Eine für kleinere Bildschirme (Smartphones, Tablets usw.) und eine für mittlere und größere Bildschirme (z.B. PC’s Laptops).
Du kannst jedoch auch mehr als 2 CSS-Dateien benutzen, um deine Webseite noch besser auf die verschiedenen Bildschirmgrößeren (z.B. Laptops, Tablets usw.) zu optimieren.

Achte auf die Lesbarkeit der Texte auf deiner Webseite.
Für mobilen Geräten solltest du eine größere Schriftgröße (mindestens 18 Pixel) benutzen, damit diese auch auf kleineren Geräten noch gut zu erkennen bzw. zu lesen ist.

Auf mobilen Geräten solltest du die Bilder, auf deiner Webseite, in der Größe (bzw. der Breite) des Bildschirms, deines Webseiten-Besuchers, anzeigen lassen.

Achte darauf, dass anklickbare Elemente, wie Buttons und Links, genug Abstand zueinander haben und groß genug sind.
Jeder deiner Webseiten-Besucher sollte deine Webseiten-Elemente anklicken können, ohne das Bild zu vergrößern.

Designe die Navigation auf deiner Webseite so, dass deine Webseiten-Besucher nicht endlos durch deine Webseite scrollen muss, um die für ihn wichtigen Teil deiner Webseite zu finden.
Die Navigation auf deiner Webseite sollte von überall auf deiner Webseite erreichbar sein.
Am besten als fixiertes Element, dass immer an der gleichen Stelle des Bildschirms angezeigt wird.
Wenn deine Webseite viele Abschnitte hat solltest du diese als aufklappbare Untermenü-Punkte einbauen.

Schnelle Ladezeit & geringer Datenverbrauch

Besonders für Smartphones und andere mobile Geräte ist es wichtig, dass deine Webseite schnell geladen wird.

Auch für Google ist die Ladezeit ein sehr wichtiger Faktor für die Platzierung deiner Unternehmenswebseite.

Smartphones haben um einiges weniger an Rechnenleistung als PC’s.
Dadurch brauchen Smartphones länger, um eine Webseite darzustellen.
Zudem ist die Internetverbindung oft langsamer, als am PC.

Komprimiere deine Bilder-, Videos-, CSS-, HTML-, JavaScript-Dateien, dass verkleinert den Datenverbrauch dieser Dateien.

Lade die benötigten Daten für den ‚above the fold‘-Bereich als erstes.
So kann der Browser deines Besuchers den Anfangsbereich deiner Webseite anzeigen, während der Rest deiner Webseite noch geladen wird.

Gute Lesbarkeit

Die Texte auf deiner Webseite sollten so einfach zu lesen sein wie möglich.
Nur so werden deine Texte auch oft und vollständig gelesen.

Schriftgröße: Man sollte keine Luppe brauchen, um deine Texte lesen zu können.
Benutze am besten eine Schriftgröße von 18 Pixel für normale Texte.
Für Überschriften solltest du eine Schriftgröße benutzen, die 150 – 200% der normalen Schriftgröße beträgt.

Du kannst auf deiner Webseite die HTML-Elemente H1 bis H6 für deine Überschriften benutzen.

Schriftart: Die Lesbarkeit deiner Schriftart ist um einiges wichtiger, als ein gutes Aussehen deiner Schriftart.
Es gibt viele moderne kunstvolle Schriftarten, die zwar gut aussehen, aber schwer zu lesen sind.

Abstand deiner Textzeilen: Erhöhe den Zeilenabstand deiner Texte.
Bei zu kleinen Zeilenabständen verrutscht man leicht in eine andere Zeile beim Lesen.

Hier im diesem Blog benutzen wir für große Bildschirme (PC’s und Laptops) einen Zeilenabstand von 150% der Schriftgröße.
Für kleinere Bildschirme (Smartphones und Tablets) benutzen wir einen Zeilenanstand von 170%.

Breite deiner Textzeilen: Deine Textzeilen sollten nicht breiter als eine DIN-A4-Seite sein.
Als Beispiel können wir diesen Blog nehmen.
Auf größeren Bildschirmen sind die Textzeilen 1200 Pixel breit. Das ist fast so breit wie eine DIN-A4-Seite.

Platziere deinen Text in der Mitte des Bildschirms.

Auf Smartphones und Tablets sind unsere Textzeilen fast so breit, wie der Bildschirm. Um genau zu sein sind es 92% der Bildschirm-Breite.
Du solltest jedoch einen kleinen Rand an beiden Seiten Platz lassen.

Kurze Sätze: Kurze Sätze sind einfacher zu lesen. Vermeide lange Sätze, mit vielen Nebensätzen.
Lange Sätze, mit mehreren Nebensätzen, sind schwerer zu lesen bzw. zu verstehen. Trenne lange Sätze in mehrere kürzere Sätze.

Absätze: Benutze Absätze, um deine Texte lesbarer zu machen. Deine Leser machen bei jedem Ende eines Absatzes eine kleine Pause.
Das hilft einerseits den zuvor gelesenen Absatz besser zu verstehen. Zudem erleichtert es deinen Leser, nach einer Denkpause, den wiedereinstieg in deinen Text.

Kontrast: Achte auf einen hohen Kontrast zwischen der Farbe deines Hintergrunds und deines Textes.
Bei einer schwarzen bzw. dunklen Schrift muss es zwar kein weißer Hintergrund sein. Du solltest aber eine helle Hintergrund-Farbe dazu wählen.

Du solltest vorsichtig sein, wenn du Texte auf Bildern schreibst. Bei Bildern mit hellen und dunklen Stellen kann es sein, dass ein Teil deines Textes nicht gut lesbar ist.

Besonders bei Bildern kann ein Text-Schatten helfen die Lesbarkeit deines Textes zu verbessern.
Zum Beispiel ist ein weißer Text mit Schwarzem Text-Schatten auf hellem und dunklem Hintergrund gut zu lesen. Das gleiche gilt für einen schwarzen Text mit weißen Text-Schatten.

Einfach verständliche Wörter: Verwende kurze und einfache Wörter. Benutze Wörter, die jeder kennt.
Erkläre Fachwörter direkt im selben oder nächsten Satz. Überlege bei schweren Wörtern, ob es nicht ein einfaches Wort dafür gibt.

Trenne lange Wörter mit Bindestrichen. Zum Beispiel das Wort 'Reihensechszylinderwirbelkammervierventilturbodieselmotor' in das Wort 'Reihen-Sechszylinder-Wirbelkammer-Vierventil-Turbo-Dieselmotor'.
Dieses extreme Beispiel veranschaulicht gut, wie die Lesbarkeit durch Bindestriche verbessert wird.

Abschnitte + Navigation: Teile deine Webseite in mehrere Abschnitte auf. Gebe diesen Abschnitten einen Titel. Füge eine Navigation oder ein Verzeichnis auf deiner Webseite ein. Dieses sollte überall auf deiner Webseite einfach zu erreichen sein.

Besonders für Smartphones und Tablets ist dies um so wichtiger, weil auf kleineren Bildschirmen die Übersicht viel schwerer fällt.

Einfache Navigation

Bedenke, dass die meisten deiner Webseiten-Besucher sind auf der Suche nach einer speziellen Antwort.
Deine Webseite sollte so aufgebaut sein, dass dein Webseiten-Besucher so einfach wie möglich seine Antwort findet.
Nachdem dein Webseiten-Besuche seine Antwort erhalten hat wird er viel wahrscheinlicher dazu bereit sein weiterzulesen bzw. andere Webseiten von dir zu besuchen.

Bei größeren Webseiten (vor allem bei Onepage-Webseiten) solltest du nicht nur Links zu anderen Webseiten von dir verlinken, sondern auch interne Links setzen.

Einen internen Link setzt du, indem du einen Anker-Link
<a name=‘name_des_links‘>
an die Stelle setzt, die du verlinken willst. Diesen Link kannst du dann über die Adresse deiner Webseite + ‚#name_des_links‘ aufrufen.
https:⁄⁄www.beispielseite.de⁄#name_des_links

Eine Übersicht - mit Links zu den jeweiligen Abschnitten - am Anfang deiner Webseite kann hilfreich sein, doch solltest du auch eine Möglichkeit bieten von jedem Ort auf deiner Webseite alle wichtigen Webseiten bzw. Abschnitte auf deiner Webseite zu erreichen.

Eine Gute Lösung ist eine Navigations-Leiste, die an einer Stelle des Bildschirms fixiert angezeigt wird bzw. wir haben hier im Blog ein Navigations-Icon in der oberen Menü-Leiste eingefügt.

Auf Smartphones ist immer nur ein kleiner Teil deiner Webseite sichtbar, was die Übersicht erschwert. Deswegen ist es umso wichtiger, dass die Navigation deiner Webseite auf Smartphones einfach zu bedienen und gut erkennbar ist.

Meta Titel, Beschreibung und andere Meta-Tags

Auf deinen Webseiten ist der Meta-Titel, die Meta-Beschreibung und alle anderen Meta-Tags nicht direkt zu sehen.
Der Meta-Titel, deiner Webseiten, wird verwendet für die Überschriften der Suchmaschinen-Ergebnisse (z.B. der Google-Suche), in 'Social Media Beiträgen' und in der Tab-Leiste von Web-Browsern.

Die Meta-Beschreibung, deiner Webseiten, wird für eine kurze Beschreibung deiner Webseite verwendet, die meistens zusätzlich zum Titel in Suchmaschinen-Ergebnisse und 'Social Media Beiträgen' angezeigt wird.

Du kannst für Facebook, Twitter und Co auch separate Meta-Titel und Meta-Beschreibungen auf deinen Webseiten einfügen.

Dies sind die wichtigsten HTML-Tags für deine Webseiten:
Meta-Titel: <title>Hier kommt der Titel deiner Webseite hin<⁄title>
Meta-Beschreibung: <meta name="description" content="Das ist die Beschreibung deiner Webseite.">
Meta-Keywords: <meta name="keywords" content="keyword1, keyword2, keyword3, usw.">
Social-Media-Titel: <meta property="og:title" content="Dein Titel für Social Media" ⁄>
Social-Media-Beschreibung: <meta property="og:description" content="Deine Beschreibung für Social Media." ⁄>
Social-Media-Vorschaubild: <meta property="og:image" content="https:⁄⁄www.beispiel.de⁄bild.png" ⁄>
Twitter-Titel: <meta name="twitter:title" content="Dein Titel für Twitter" ⁄>
Twitter-Beschreibung: <meta name="twitter:description" content="Deine Beschreibung für Twitter." ⁄>
Webseiten-Logo: <link rel="icon" type="image⁄png" href="https:⁄⁄www.beispiel.de ⁄logo.png">
Kanonische Webseite: <link rel="canonical" href="https:⁄⁄www.Beispiel.de⁄"⁄>

above the fold

Der "above the fold"-Bereich ist der Teil deiner Webseite, denn deine Webseiten-Besucher als erstes sehen. Deswegen ist der "above the fold"-Bereich einer der wichtigsten (wenn nicht sogar der wichtigste) Bereich deiner Webseite.

Der "above the fold"-Bereich ist besonders bei deiner Webseite wichtig, die deine Webseiten-Besucher als erstes sehen: also deine Startseite oder deine Landing Pages.

Zu erst zum technischen Teil des "above the fold"-Bereich:

Alle Elemente des "above the fold"-Bereiches, deiner Webseite, sollten als erstes geladen werden. Dadurch kann dein Webseiten-Besucher deine Webseite benutzen, bevor deine Webseite komplett geladen wurde.

Lade alle Bilder, Videos, CSS-Dateien und JavaScript-Dateien, die für den "above the fold"-Bereich, deiner Webseite, nicht gebraucht werden erst nachdem dein "above the fold"-Bereich geladen wurde.

Die schnellere Ladezeit deines "above the fold"-Bereiches wirkt sich in 2 Punkten positiv für dich aus:
1. Wird ein größerer Anteil deiner Webseiten-Besucher deine Webseite laden und auch wirklich besuchen. Bei zu langer Ladezeit brechen viele den Ladevorgang ab und besuchen lieber eine andere Webseite.
2. Die schnellere Ladezeit wird die Bewertung deiner Webseite auf Google, Bing, Facebook und Co verbessern.

Kommen Jetzt wir zum inhaltlichen Teil des "above the fold"-Bereiches:

In den ersten 3 Sekunden entscheidet sich dein Webseiten-Besucher auf deiner Webseite zu bleiben und mehr zu lesen oder deine Webseite direkt wieder zu verlassen. Aus diesem Grund muss der "above the fold"-Bereich, deiner Webseite, das Interesse deiner Webseiten-Besucher direkt wecken.

Platziere hier Inhalte, die Aufmerksamkeit erzeugen und zeige deinem Webseiten-Besucher, welche Vorteile er von deinem Unternehmen ⁄ Produkt erhalten kann.

Fasse dich kurz und platziere in deinem "above the fold"-Bereich einen Titel, der das Interesse deines Webseiten-Besuchers weckt und ihn zum Weiterlesen animiert.

Führe die Aufmerksamkeit deiner Webseiten-Besucher, der Reihe nach, von einem Punkt deiner Webseite zur nächsten – bis zum Ziel deiner Webseite.

Als Beispiel:
Lenke die Aufmerksamkeit deiner Webseiten-Besucher als erstes auf den Titel deiner Webseite. Als nächstes auf den Untertitel und im nächsten Schritt auf eine Grafik, einen Button, ein Formular oder Ähnliches.

Auch wenn die anderen Bereiche deiner Webseite auch wichtig ist solltest du ein besonderes Augenmerk auf den "above the fold"-Bereich, deiner Webseite, haben.

Einige deiner Webseiten-Besucher werden schon allein durch deinen "above the fold"-Bereich überzeugt sein bei dir zu Kaufen. Deswegen solltest du im "above the fold"-Bereich die wichtigen Kontaktdaten sichtbar machen oder ein Kontaktformular ⁄ einen Button zu deinem Kontaktformular in deinem "above the fold"-Bereich platzieren und mit einem "Call-To-Action" dazu animieren.

Das könnte dich interessieren:

Damit wir unsere Webseiten für Sie optimieren und personalisieren können würden wir gerne Cookies verwenden. Zudem werden Cookies gebraucht, um Funktionen von Soziale Media Plattformen anbieten zu können, Zugriffe auf unsere Webseiten zu analysieren und Informationen zur Verwendung unserer Webseiten an unsere Partner in den Bereichen der sozialen Medien, Anzeigen und Analysen weiterzugeben. (mehr dazu) Sind Sie widerruflich mit der Nutzung von Cookies auf unseren Webseiten einverstanden?
Cookie-Entscheidung widerrufen

Profileinstellungen

Benutzername

Anmeldung

Angemeldet bleiben

Registrierung

Hiermit bestätige ich, dass ich für mich relevante E-Mails bekomme und akzeptiere die Datenschutzerklärung von smartlife-online.de.

Passwort ändern

Neue E-Mail-Adresse

Bitte bestätige dein Passwort

Gib bitte deine E-Mail-Adresse deines Accounts ein.

Welche Frage hast du?

Du musst dafür angemeldet sein.