Onepage Website oder doch lieber mehrere Seiten?

Onepage Website oder doch lieber mehrere Seiten?

Onepager, oder Onepage Websites, bei denen sich alle Inhalte direkt auf einer Seite befinden, haben in den letzten Jahren an Beliebtheit gewonnen.

Hier ein Beispiel:

 

Doch sind sie besser verglichen mit herkömmlichen Websites mit verschiedenen Unterseiten?

Vorteile von Onepage Websites:

  • auf dem Handy und Tablet scrollt der Besucher einfach nur nach unten und muss sich nicht über das (kleine) Menü zurechtfinden
  • die Seite wird einmal aufgerufen und geladen und gut ist. Der Lesefluss wird nicht dadurch gestört, dass man immer wieder auf einer neuen Seite weiterlesen muss, wenn man nach weiteren Informationen sucht.
  • du kannst das Onepager Format gut nutzen, um eine Geschichte von oben nach unten, also von Anfang nach Ende, zu erzählen und damit auch steuern, in welcher Reihenfolge der Besucher deine Informationen aufnimmt.

Nachteile von Onepage Websites:

  • Möchte man viele verschiedene Informationen und Angebote auf seiner Website zeigen, wirkt das auf Onepagern schnell viel zu überladen und lässt sich nicht so gut strukturieren.
  • Man hat nicht mehrere Unterseiten, die man auf ein Keyword (Suchbegriff) optimieren kann, sondern nur die eine Seite. Eine gute Platzierung ganz vorn in den Suchmaschinen ist daher schwieriger.
  • Bei Onepagern muss man noch mehr als auf anderen Websites auf eine klare Struktur und Bereiche, die sich voneinander abgrenzen, achten – sonst weiß der Besucher beim Scrollen nicht genau, was er da gerade liest. Wenn er dahingegen eine „Über mich“ Seite geöffnet hat ist es dagegen klar: Die ganze Seite von oben bis unten dreht sich um den „Über mich“ Punkt.

Melde dich zu meinem Newsletter an und erhalte den kostenlosen E-Mail Kurs "Die 5 wichtigsten Elemente einer erfolgreichen Website"!

Tipps für die Verwendung von Onepagern

Wenn du trotzdem eine Onepage Website erstellen willst:

  • Optimiere die Seite für den wichtigsten Suchbegriff, für den du gefunden werden möchtest
  • Nutze am Besten noch einen Unterbereich für Inhalte, die du regelmäßig aktualisierst – einen Podcast, Videos oder ganz klassisch einen Blog. Dadurch hast du dann wieder bessere Chancen, auch über Google & Co. gefunden zu werden.
  • Mit einem Menü, welches zu den entsprechenden Bereichen auf der einen Seite springt, hilfst du Besuchern auch an Desktop Geräten, besser navigieren zu können.
  • Außerdem solltest du ein LazyLoad Plugin verwenden – z.B. das kostenlose A3 Lazy Load – sodass immer nur der Bereich geladen werden muss, zu dem der Besucher gerade scrollt und nicht gleich die ganze Website von oben bis unten beim ersten Aufruf. Das steigert die Nutzerfreundlichkeit und ist ebenfalls wichtig für die Suchmaschine.

Fazit: Für kurze Websites mit wenigen, klaren Angeboten können Onepage Websites, solange sie noch einen Bereich für Inhalte wie z.B. Blog verlinken, eine klassische Website ersetzen. In den meisten Fällen empfehle ich weiterhin, Unterseiten wie „Start/Home“, „Angebot“, „Über mich“, „Kontakt“ etc. zu erstellen, um das Angebot besser zu strukturieren und bei den Suchmaschinen zu punkten.

 

Wie optimiere ich meine Bilder für die Website?

Wie optimiere ich meine Bilder für die Website?

Hast du dir schöne Bilder für deine Website rausgesucht, aber bist dir unsicher, ob sie vor dem Hochladen noch bearbeitet werden sollen?

Oder weißt du noch nicht genau, was für Bilder du auswählen oder erstellen sollst?

Dann habe ich hier ein paar Richtlinien und Tipps für dich, um die richtigen Bilder zu finden und fürs Web zu optimieren. 

fotosblog

1.) Auswahl der Bilder

Natürlich ist es wichtig, dass das gezeigte Bild zum Text passt. Aber es geht noch mehr: Bilder transportieren Stimmungen, Informationen, können Sachverhalte verdeutlichen und sagen ja bekanntlich oft mehr als 1000 Worte. Stockfotos (Quasi von Fotografen auf Vorrat produzierte Bilder wie z.B. von Schreibtischen, Blumen, lachenden Menschen etc., die man sich online teilweise kostenlos herunterladen kann) sind an einigen Stellen okay, deine Seite sollte aber immer auch echte Fotos von dir beinhalten. Achte bei Fotos von dir für deine Website darauf, dass du Kleidung trägst, die auch zu deinen Corporate Farben passt 🙂

2.) Welches Bildformat – JPEG, PNG, GIF, …?

Die beiden gängigsten Bildformate für Websites sind JPEG (bzw. JPG, da die gängigen Dateiendungen immer 3 Zeichen beinhalten) und PNG. Doch was ist hier nun der Unterschied?

PNG Dateien können mehr Informationen speichern als JPGs und lassen sich beliebig häufig verarbeiten und skalieren, ohne, dass die Bildqualität leidet. Außerdem können sie einen transparenten Hintergrundbereich haben, was sie vor allem ideal für Logos und Infografiken macht. Der Nachteil bei PNGs ist aber, dass die Dateien größer sind (als JPGs mit gleichen Abmessungen) und somit langsamer geladen werden.

JPGs können nicht verlustfrei komprimiert werden und die Bildqualität wird schnell sichtbar schlechter, wenn man die Bilder häufiger (in mehreren Schritten) bearbeitet. Für Fotos sind sie aber aufgrund der geringen Dateigröße gerade für den Internetauftritt ideal. Außerdem ist mit dem bloßen Auge oft kein Qualitätsunterschied zu erkennen im Vergleich zu PNGs, wenn man die Fotos auf der Website einbindet.

Es gibt außerdem noch GIFs, die animiert sein können. Bestimmt hast du schonmal in einem Newsletter oder in einem Messenger die kleinen Bewegtbilder gesehen:

Animiertes GIF von giphy.com

GIFs müssen allerdings nicht animiert sein. Die Bilder können verlustfrei komprimiert werden (super!), haben dann allerdings nur 256 verschiedene Farben (nicht so super für Fotos!).

 

3.) Größe & Abmessungen

Als grobe Richtlinie ist es empfehlenswert, dass die hochgeladenen Bilder 200 KB nicht überschreiten sollten. Gerade bei detailreichen PNG Grafiken ist dies jedoch schnell der Fall. Nutze dann unbedingt einerseits den kostenlosen Online Service Tinypng.com (siehe 5.) – Grafikservices) und sorge andererseits dafür, dass die Bilder auch nur die Abmessungen haben, die sie unbedingt für die Website benötigen.

Was ist damit gemeint? An der Stelle, an der das Bild auf die Website eingefügt werden soll, wird ein bestimmter Platz „reserviert“, also z.B. 500×200 Pixel für eine Grafik mit 500 Pixeln Breite und 200 Pixeln Höhe. Statt dass du nun ein Bild hochlädst, das 1000×400 Pixel als Maße hat und dies durch WordPress und den Browser auf die Hälfte schrumpfen lässt, verkleinerst du das Bild am besten vor dem Hochladen schon auf die benötigten 500×200 Pixel und sparst somit Ladezeit durch eine kleinere Dateigröße und Rechenarbeit beim Laden der Website.

 

4.) Woher bekommt man überhaupt gute Stockfotos?

Die bekanntesten Quellen für kostenlose, lizenzfreie Stockfotos sind:

  • Pixabay
  • Unsplash
  • Pexels
  • teilweise Picjumbo (haben aber auch viele kostenpflichtige Fotos)
  • Stocksnap.io

Bei der Verwendung der Fotos musst du im Vorfeld in den jeweiligen Nutzungsbedingungen prüfen, ob du eine Quellenangabe auf deiner Website vornehmen musst (in der Regel ist dies nicht der Fall).

Auch in Canva (siehe nächster Punkt Grafikservices) findest du viele großartige Stockfotos, vor allem in der Pro Version (kostenpflichtig).

Bei Flickr gibt es eine riesige Auswahl (mehrere Milliarden Bilder), es ist jedoch eine Quellenangabe notwendig und die Lizenzbedingungen sind etwas komplizierter.

Gute Stockfotos kann man z.B. kaufen auf:

  • Shutterstock
  • iStock
welchesformat

Stockfoto von canva.com

5.) Grafikservices

Canva

Wer Canva noch nicht nutzt, hat echt etwas verpasst. Es lassen sich damit mittlerweile unheimlich viele verschiedene Arten von Grafiken erstellen, mit großartigen Vorlagen für alle Social Media Kanäle, für Präsentationen, Logos, Flyer, sogar für Websites. Du kannst auch eigene Fotos hochladen und zuschneiden. Die Bedienung ist ziemlich intuitiv und schnell erlernbar und schon in der kostenlosen Version gibt es eine große Auswahl an Elementen, Fotos und Schriften für jeden Geschmack. Unbedingt ausprobieren!

TinyPNG

Natürlich kannst du deine Bilder mit Programmen wie Adobe Photoshop oder dem kostenlosen Gimp komprimieren. Eine grandiose Alternative ist aber die Website TinyPNG, auf der du deine Grafiken bis 5 MB kostenlos hochladen und komprimiert (=kleinere Dateigröße) wieder herunterladen kannst, ohne dass die Qualität leidet. Unbedingt zu empfehlen, bevor du deine Grafiken auf die Website hochlädst – man spart hier teilweise 70, 80% der Dateigröße ein und das wirkt sich natürlich sehr positiv auf die Ladezeit aus!

 

6.) WordPress Plugins

Auch WordPress hat natürlich einiges an Plugins zu bieten, die bei der Bildkomprimierung unterstützen. Die meisten sind in der kostenlosen Version eingeschränkt und komprimieren z.B. nur eine bestimmte Anzahl an Bildern pro Monat, aber das ist ja auch schon besser als nichts 🙂

reSmush.it

ist mit das beste Bildoptimierungsplugin für WordPress. Es lassen sich jedoch keine Abstufungen bei den Komprimierungen einstellen und es funktioniert nur für Bilddateien, die kleiner als 5 MB sind (was sie jedoch beim Hochladen auf eine Website eh sein sollten).

EWWW Image Optimizer & WP Smush

optimieren die Bilder schon automatisch beim Hochladen, können aber auch nachträglich noch zur Bildoptimierung verwendet werden. In der kostenpflichtigen Version ist die Kompression noch besser. 

ShortPixel Image Optimizer

Mit diesem Plugin kann man in der kostenlosen Version bis zu 100 Bilder pro Monat komprimieren. Dabei wird das Originalbild immer behalten und die komprimierte Version in einem Extraordner abgespeichert. Es wird außerdem ein Vergleich angezeigt, damit man sehen kann, ob die Qualität für einen ausreicht oder nicht.  

Compress JPEG & PNG images

Bei diesem Plugin kann man auswählen, welche Bildgrößten komprimiert werden sollen (z.B. alle Bilder, die zwischen 1 und 2 MB groß sind). Die Komprimierung ist allerdings nicht verlustfrei.

Melde dich zu meinem Newsletter an und erhalte den kostenlosen E-Mail Kurs "Die 5 wichtigsten Elemente einer erfolgreichen Website"!

 7.) Suchmaschinenoptimierung

Für die Suchmaschinen ist es wichtig, dass du einen sprechenden Bildnamen verwendest. Am besten nutzt du für den Dateinamen die gleichen Keywords (=Suchbegriffe), auf die du deine Seite oder deinen Blogartikel auch optimierst, also z.B. CocktailamStrand.jpg.

Du kannst zudem nicht nur den Dateinamen einstellen, sondern auch den Alternativtext (z.B. „Hund mit Futternapf“), der angezeigt wird, falls dein Bild einmal nicht geladen werden kann. Der Alternativtext ist zudem für Blinde wichtig ist, die sich das dann vorlesen lassen. Bei WordPress lassen sich folgenden 4 Eigenschaften pro Bild konfigurieren, wobei der Titel automatisch vom Dateinamen vergeben wird und der Beschriftungstext unter dem Bild angezeigt wird: 

Alternativtext

Die Beschreibung wird nicht angezeigt, ist jedoch für dich wichtig, da du nach Begriffen aus diesem Text in der WordPress Mediathek suchen kannst.

Hoffentlich konntest du hier noch den ein oder anderen Tipp für deine Website Grafiken für dich mitnehmen! Schreib mir gern, welches deine liebste Website für Stockfotos ist und ob du schon mit Canva gearbeitet hast.

 

Wie funktioniert der Divi Builder? Eine kurze Einführung

Wie funktioniert der Divi Builder? Eine kurze Einführung

Schau dir in meinem kurzen Video an, wie du mit dem DIVI Builder in WordPress ganz einfach neue Elemente – Texte, Bilder, Videos & Co. – in deine Website einfügen kannst. 

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Melde dich zu meinem Newsletter an und erhalte den kostenlosen E-Mail Kurs "Die 5 wichtigsten Elemente einer erfolgreichen Website"!

Die besten kostenlosen WordPress Plugins

Die besten kostenlosen WordPress Plugins

WordPress selbst bietet dir natürlich schon einige wichtige Features an – du kannst Texte und Bilder veröffentlichen, Kommentare schreiben und mit Themes das Design deiner Website anpassen. Alle weiteren Funktionen – wie z.B. einen Newsletter, einen Cookie Hinweis, Backupmöglichkeiten und vieles mehr – fügst du über sogenannte Plugins hinzu.

Ich bin ja generell ein Fan davon, nur so wenige Plugins wie nötig zu installieren. Weniger Plugins zu haben erhöht die Sicherheit und Performance deines WordPress und hilft natürlich auch dabei, es übersichtlicher zu halten. Trotzdem gibt es wirklich hilfreiche Plugins, von denen ich dir hier meine kostenlosen Favoriten vorstellen möchte.

Neben den besten Plugins zeige ich dir in diesem Blogartikel auch, wie du Plugins überhaupt installierst und worauf du vor der Installation achten solltest.


Kostenlose WordPress Plugins

 

Die folgenden Plugins kann ich dir sehr empfehlen und die meisten davon nutze ich selbst:

Allgemeine Plugins: 

  • YoastSEO oder RankMath (nicht beide gleichzeitig!) für die Suchmaschinenoptimierung
  • Elementor Website Builder als PageBuilder, zum einfachen Aufbau deiner Seiten per Drag & Drop:
  • Classic Editor für ganz einfache Textbearbeitung, wenn du keinen PageBuilder (oder den standardmäßig installieren Block Editor) nutzen möchtest.
  • MailPoet für einen einfachen Newsletter. Hiermit kannst du auch E-Mails personalisieren, E-Mail Serien verschicken und eine einfache Statistik anschauen. Kostenlos bis 1000 Abonnenten, also prima für den Anfang!

Für Sicherheit: 

  • Updraft Plus / BackWPup – für ein automatisiertes, regelmäßiges Backup deiner Website.
  • iThemes Security, Ninja Firewall oder Wordfence Security um generelle Attacken auf deine Website zu verhindern.
  • Easy Update Manager – für automatisiertes Aktualisieren von WordPress, Plugins, Themes und Übersetzungen.
  • WPS Hide Login – Macht deinen WordPress Administrationsbereich unter einer beliebigen anderen Adresse erreichbar, z.B. www.deinedomain.de/hallo23 statt dem Standardlogin www.deinedomain.de/wp-admin. Dies erhöht die Sicherheit und schützt vor Angriffen auf deine Website.

Für die Seitenoptimierung: 

  • a3LazyLoad – Sorgt dafür, dass bestimmte Elemente (z.B. Bilder) erst geladen werden, wenn der Besucher zu den Elementen heruntergescrollt hat und nicht schon sofort beim Aufrufen der Seite. Dies erhöht die Ladegeschwindigkeit.
  • Autoptimize – Bietet verschiedene Optimierungsmöglichkeiten für eine verbesserte Ladegeschwindigkeit.
  • EWWW Image Optimizer – Verkleinert die Bilder deiner Website, je nach Einstellungen auch ganz ohne Qualitätsverlust. Auch dies sorgt für eine verbesserte Ladegeschwindigkeit.

Viele der genannten Plugins bieten auch jeweils eine kostenpflichtige Version mit erweiterter Funktionalität an. In den meisten Fällen reichen die kostenlosen Varianten völlig aus.

Ein sehr wichtiges – kostenpflichtiges – Plugin ist eins für dein Cookie Banner. Da hier kein einfacher Hinweis „Ich nutze Cookies und wenn du auf der Seite bleibst, gehe ich von deinem Einverständnis aus“ erlaubt ist, empfehle ich dir auf jeden Fall in Borlabs Cookies oder in DSGVO Pixelmate (beide je 39€) zu investieren.

Melde dich zu meinem Newsletter an und erhalte den kostenlosen E-Mail Kurs "Die 5 wichtigsten Elemente einer erfolgreichen Website"!

 

Wie installiere ich ein Plugin?

 

Kostenlose Plugins findest du direkt über die Suchfunktion auf der Plugins Seite in deinem WordPress Backend (Plugins -> Installieren). Hast du das gewünschte Plugin gefunden, klickst du erst auf Jetzt Installieren, danach auf Aktivieren.

Schau dir hier in einem kurzen Video an, wie du den Elementor Website Builder installieren kannst:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Kostenpflichtige Plugins musst du dir in der Regel auf der Herstellerseite herunterladen oder du bekommst sie per E-Mail zugeschickt. Die gespeicherte Datei kannst du dann über den Plugin hochladen Button hochladen und installieren. 

Worauf sollte ich bei Plugins achten?

 

Auf der Plugin Seite werden dir für jedes Plugin wichtige Informationen angezeigt:

  1. Ist das Plugin überhaupt mit deiner WordPress Version kompatibel?
  2. Wann wurde es zuletzt aktualisiert? Ist dies schon lange her, wird es vielleicht gar nicht weiterentwickelt, was sowohl vom Sicherheitsaspekt her schlecht ist, als auch bedeutet, dass entdeckte Bugs (Fehler) vermutlich nicht mehr behoben werden.
  3. Wie oft ist das Plugin im Einsatz (und wie gut wird es bewertet)? Ist es häufig installiert, kannst du davon ausgehen, dass es gut ist.

Hast du noch weitere Tipps für richtig gute, kostenlose Plugins? Dann lass mir gerne einen Kommentar da!