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.) 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-, JS-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.

Das könnte dich interessieren:

Diese Webseite benutzt Cookies, um Ihnen die bestmögliche Nutzerfreundlichkeit zu bieten (mehr dazu). Wenn Sie diese Webseite weiterhin nutzen, wird von Ihrem Einverständnis ausgegangen.

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 an mich?

Du musst dafür angemeldet sein.