von ConstanzeStraub | Mai 24, 2022 | WordPress
WordPress installieren: 6 einfache Schritte zu deiner perfekten WordPress-Website
Vielleicht hast du mal gelesen, dass kaum jemand ohne Fehlermeldungen WordPress installieren kann. „WordPress ist viel zu kompliziert“ höre ich auch immer wieder. Neulich sagte mir jemand, „dass man für WordPress programmieren können muss“.
Das ist Unsinn. Glaub mir, solche Aussagen sind Mythen. Sie entstehen, weil Anwender aus Unkenntnis Fehler gemacht haben beim WordPress installieren und dann enttäuscht waren, weil es nicht weiterging.
WordPress zu installieren ist nicht schwer. Aber ich gebe es zu: Wenn man nicht aufpasst sind Fehler möglich. Damit gerade Anfänger nicht unnötig enttäuscht werden, habe ich diese kleine Anleitung geschrieben. Mit diesem Fahrplan installierst du ruckzuck und ohne Stress dein WordPress.
Was brauche ich, um WordPress installieren zu können?
Wahrscheinlich hast du mindestens eine Grundvoraussetzung: einen PC oder ein Notebook. Der PC sollte einigermaßen modern sein. Das heißt: Er sollte aktuelle Programme und ein relativ aktuelles Betriebssysteme haben. Arbeitsspeicher sollte auch genügend drauf sein. Dann hast du es später einfacher. Der Browser, das ist das Programm, das dir Internetseiten anzeigt, sollte die neueste Version sein. Natürlich brauchst du auch eine gute Internetverbindung. Je schneller die Verbindung ist, desto mehr Spaß macht die Arbeit an der Website.
Nun kommt das, was du dir zusätzlich holen musst:
Hoster:
Natürlich brauchst du noch einen Hosting-Anbieter. Das ist die Firma, die dir Speicherplatz zur Verfügung stellt. Denn du brauchst einen Platz, auf dem deine Website-Daten „lagern“. Der Hoster bietet dir die Infrastruktur, damit deine Website im Internet gesehen werden kann. Achte hier beim Buchen des Hosters auf Mindestvoraussetzungen: genügend Speicherplatz, PHP, SSL-Zertifikat, Datenbank.
Domain:
Deine Website braucht einen Ort, an dem sie im Internet zu finden ist. Dafür ist die Domain da: Die Domain ist Adresse und Name für deine zukünftige Website. Bei jedem Hoster kannst du deine Domain bestellen.
Datenbank
Eine Datenbank brauchst du, wenn du ein Content Management System (CMS) installierst. WordPress ist so ein System. Andere CMS sind Joomla, Typo 3, Redaxo usw., auch sie funktionieren im Zusammenhang mit einer Datenbank. Aber keine Sorge, du musst dafür nichts großartig machen. Die Datenbank muss lediglich einmal – mit einem Klick – angelegt und später mit WordPress verbunden werden.
Datenzugang – ein FTP-Programm:
Du brauchst eine Möglichkeit, die Daten auf deinen Hoster hochladen zu können. Dafür gibt es sogenannte FTP-Programme. Eine Alternative ist das Web-FTP: Das bieten manche Hoster an. Damit kannst du ohne eigenem FTP-Programm deine Daten hochladen. Sicherer und bequemer ist allerdings ein FTP-Programm wie FileZilla.
WordPress
WordPress ist eine Software, mit der du deine Website erstellen kannst. WordPress ist die technische Grundlage für deine Website. Natürlich gibt es viele weitere Systeme und auch Baukästen wie Wix, Jimdo oder Squarespace, allerdings bevorzuge ich WordPress. Du bekommst WordPress vollkommen kostenlos unter dieser Adresse: wordpress.org.
Zusammengefasst brauchst du:
- ein PC oder ein Notebook
- Hoster
- Domain
- Datenbank
- FTP-Programm
- WordPress
- Auf dem Hoster eine Datenbank anlegen
WordPress funktioniert nur mit einer Datenbank
Eine Datenbank speichert all die Texte, die du auf deiner WordPress-Website schreibst. Auch dein Zugang zu deiner WordPress-Website und andere Passwörter werden in der Datenbank gespeichert. Davon merkst du nichts, denn das Speichern spielt sich im Hintergrund ab. Und du musst auch nichts an der Datenbank machen.
Alles was du machen musst: Einmal eine Datenbank anlegen. Doch keine Sorge: Das Anlegen der Datenbank ist mit einem Klick erledigt.
Über die Benutzeroberfläche deines Hosters wählst du deine Datenbank aus. Wo genau du die Datenbank findest und aktivierst, sieht bei jedem Hoster anders aus. Ich erkläre das am Beispiel von Allinkl, einer meiner Hoster:
- Du loggst dich im Kundencenter bei Allinkl ein.
- Dort im linken senkrechten Menü klickst du auf -> Technische Verwaltung.
- Im nächsten Fenster klickst du rechts auf den roten Schriftzug -> KAS Login.
- Du siehst eine neue Ansicht mit einem neuen senkrechten Menü auf der linken Seite. Hier klickst du auf -> Datenbanken
- Nun siehst du das Fenster -> Datenbanken > Übersicht
- Rechts oben findest du ein kleines Symbol mit einem roten Pluszeichen (+). Und die Option daneben: „neue Datenbank anlegen“..
- Hier klicken und es erscheint ein neues Fenster, in dem du die Beschreibung und das Passwort deiner Datenbank eingeben kannst.
- Speichern
- Nun kommst du automatisch auf die Datenbank-Übersicht mit deiner 1. Datenbank.
- Hier findest du rechts den Datenbanknamen und den Nutzernamen deiner Datenbank.
- Datenbankname, Nutzername und dein Passwort musst du sorgfältig notieren.
Tipp: Lege alle Zugangsdaten in einer Excel- oder Google-Tabelle an.
WordPress von wordpress.org herunterladen
WordPress ist ein Open Source System
Das heißt: WordPress ist kostenlos und kann einfach von der offiziellen WordPress-Website heruntergeladen und für jeden Zweck eingesetzt werden.
Dazu gehst du einfach auf wordpress.org und klickst auf den blauen Button oben rechts.
Falls dir englisch nicht so liegt, gibt es eine deutschsprachige Version der Seite -> de.wordpress.org.
Deine Datenautobahn zu deinem Hoster
Nun hast du WordPress auf deinen Rechner runtergeladen.
Der nächste Schritt ist: WordPress muss nun auf deinen Hoster hochgeladen werden. Dafür brauchst du einen sogenannten FTP-Zugang, die Datenautobahn zu deinem Hoster. Jeder Hoster bietet so einen FTP-Zugang an – du musst nur noch die „Autobahnzufahrt“ anlegen. Also Passwort und Zugangscode. Um im Bild zu bleiben.
Im nächsten Schritt (Schritt 4) erkläre ich dir 2 unterschiedliche Wege, auf welche Art du deine Daten auf deinen Hoster lädst. Aber egal welchen Weg du wählst: Als erstes muss der FTP-Zugang angelegt werden.
Doch keine Sorge: Das Anlegen des FTP-Zugangs ist simpel.
Was ist FTP?
Das Kürzel FTP bedeutet File Transfer Protocoll. Auf deutsch und in einfachen Worten: FTP bedeutet schlicht den Vorgang zur Übertragung von Daten.
Und so gehst du bei Allinkl vor:
- Du loggst dich (du kennst das bereits) im Kundencenter bei Allinkl ein.
- Dort im linken senkrechten Menü klickst du auf -> Technische Verwaltung (kennst du auch schon).
- Im nächsten Fenster klickst du rechts auf den roten Schriftzug -> KAS Login.
- In dem neuen Fenster klickst du im linken, senkrechten Menü auf -> FTP.
- Es öffnet sich das Fenster -> FTP > Zugang
- Dort siehst du oben auf der rechten Seite ein kleines Seiten-Symbol mit einem roten Pfeil und der Option daneben -> „Neuen FTP-Nutzer anlegen“.
- Diese Option klickst du an.
- Es öffnet sich ein neues Fenster.
Hier kannst du wie bei der Datenbank eine Beschreibung deines FTP-Zugangs notieren (optional). Ein Passwort ist Pflicht — nimm hier ein sicheres Passwort, möglichst 12-stellig und mit Sonderzeichen und Ziffern (ohne Umlaute)
Das Feld Pfad kannst du leer lassen, dann siehst du beim Einwählen auf deinen Webspace immer alle Verzeichnisse, die du angelegt hast (du bist dann im sogenannten Rootverzeichnis, dem obersten Verzeichnis).
Abschließend wie immer -> Speichern.
- Du kommst dann zurück auf das Übersichtsfenster.
- Dort siehst du nun deine FTP-Verbindung in einer kleinen Tabelle angelegt.
- Den Benutzernamen musst du dir gut notieren, ebenso dein gewähltes Passwort und den FTP-Server
Den FTP-Server nennt dir dein Hoster. Auf Allinkl findest du die Bezeichnung des Servers, wenn du in deiner FTP-Tabelle auf das rechte, kleine, rote Seitensymbol mit dem roten Pfeil klickst: Es öffnet sich ein Fenster mit all den Daten, die du für deinen FTP-Zugang brauchst. Hier kannst du auch dein Passwort ändern.
Hinweis: Auf der Tabellenansicht deines FTP-Zugangs findest du einige grüne Haken. Wenn die Buchstaben R, W, L, V jeweils einen grünen Haken haben, dann ist bei dir alles richtig eingestellt.
Deinen WordPress-Ordner auf den Hoster hochladen
Zwei Wege, um Daten per FTP hochzuladen
Möglichkeit 1
Hochladen mit dem Web-FTP
Du kannst den WordPress-Ordner mit den Web-FTP deines Hosters hochladen. Viele Hoster bieten diese Möglichkeit an. Web-FTP bedeutet: Über das Login deines Hosters kannst du Daten direkt mit dem Browser wie Firefox oder Chrome (oder jeden beliebigen Browser) hochladen.
Und so geht das bei Allinkl:
Wenn du das noch nicht getan hast, legst du zunächst deinen FTP-Zugang an. Wie das geht, hab ich in Schritt 3 erklärt.
Dann gehst du wieder in das KAS.
- Im KAS klickst du wieder im linken, senkrechten Menü auf -> FTP.
- Jetzt bist du wieder im Fenster: FTP > Übersicht.
- Dort steht unten in der Tabelle dein angelegter FTP-Zugang.
- Du klickst auf das linke Symbol mit den 2 kleinen roten Kästchen (wahrscheinlich sollen das Rechner sein)
- Es öfffnet sich ein neues Fenster in deinem Browser: Du siehst nun die Verzeichnisstruktur auf deinem Hoster.
- Dein Verzeichnis mit dem Namen deiner Domain klickst du an, es öffnet sich ein neues Fenster.
- Hier siehst du oben ein horizontales Menü. Dort auf -> Upload klicken.
- Nun kannst du auf -> Durchsuchen klicken.
- Nun wählst du deinen gezippten WordPress-Ordner aus, der auf deinem PC liegt. Wichtig: Es kann nur der gezippte WordPress-Ordner hochgeladen werden.
- Wenn der gezippte Ordner hochgeladen ist, muss er noch entzippt werden.
- Dazu klickst du das kleine weiße Auswahlkästchen links neben dem Symbol der gezippten WordPress-datei aus.
- Dann gehst du auf > Aktionen.
- Es öffnet sich ein Auswahlfeld, hier klickst du auf > Archiv entpacken.
- Mit > ok bestätigen.
- Nun wird der WordPress-Ordner entpackt. Das dauert ein paar Minuten, einfach abwarten.
- Wenn alles entpackt ist, kannst du wieder auf > ok klicken.
Möglichkeit 2
Hochladen mit einem FTP-Programm
Ich nutze zum Hoch- und Runterladen von Dateien immer ein FTP-Programm. Der Grund ist ganz einfach: Hier kann ich sämtliche Zugänge zu allen möglichen Hostern zentral anlegen. Ich brauche dazu nicht jeden Hoster extra aufrufen, alle Zugänge habe ich in meinem FTP-Programm gespeichert. Falls du nur einen Hoster hast, reicht auch das Web-FTP für dich aus. Wenn du mehrere unterschiedliche Zugänge verwalten möchtest, ist das FTP-Programm komfortabler. Außerdem hast du mit dem Programm noch einige zahlreiche Möglichkeiten.
Gute und kostenlose FTP-Programme sind FileZilla und CyberDuck.
Damit du mit einem FTP-Programm deine Daten hoch- oder runterladen kannst, musst du bei deinem Hoster zunächst einen FTP-Zugang einrichten. Wie das geht, hab ich oben in Schritt 3 erklärt.
Das FTP-Programm musst du vorher noch einrichten. Dort trägst du die Daten ein, die du erhalten hast, als du den FTP-Zugang bei Allinkl angelegt hast.
Verzeichnisstruktur anpassen
Ein wichtiger Schritt, der oft vergessen wird.
Hierauf musst du achten, damit es nicht zu Fehlermeldungen kommt.
Wenn du dein WordPress-Ordner hochgeladen hast, muss du sehr wahrscheinlich die Verzeichnisstruktur auf deinem Hoster anpassen. Was es damit auf sich hat erkläre ich hier:
Du kennst es ich von deinem PC oder Mac: Jedes deiner Dokumente ist in einem „Ordner“ angelegt. Deine Apps (Programme) sind ebenfalls in einem „Ordner“, dem Ordner „Programme“. Und so weiter. Nun wunderst du dich, dass ich „Ordner“ in Tüddelchen gesetzt habe… Natürlich sind die Ordner nicht wirkliche Ordner, wie wir sie aus dem analogen Leben kennen, sondern Verzeichnisse. Und genau solche Verzeichnisse befinden sich auf deinem Hoster.
Wenn du eine Domain hast bei Allinkl, dann kannst du beim Einloggen über FTP sehen, dass dort ein Verzeichnis steht, das den Namen deiner Domain hat. Beispiel: Wenn du eine Domain hast, die „sabinemeier.de“ heißt, dann liegt in deinem FTP-Bereich ein Verzeichnis mit dem Namen sabinemeier.de.
Du kannst das Verzeichnis öffnen, darin befindet sich die Datei index.htm. Das ist eine voreingestellte Standarddatei, die immer in neuen und damit leeren Verzeichnissen liegt. Sie sorgt dafür, dass du eine Platzhalterseite mit dem Logo von Allinkl siehst, wenn du deine noch leere Domain sabinemeier.de aufrufst (um im Beispiel zu bleiben).
Wenn du nun in dieses Verzeichnis deinen Ordner WordPress hochgeladen hast, dann steht dort immer noch diese index.htm von Allinkl. Aber du möchtest natürlich, dass dein neues WordPress aufgerufen wird, wenn du deine Domain in den Browser eintippst. Und nicht die index.htm.
Wie das geht?
Du musst ein interne Umleitung einrichten. Damit sagst du dem System: Im Browser des Besuchers soll nicht die Platzhalterseite index.htm von Allinkl angezeigt werden, sondern die Startseite, die in deinem hochgeladenen WordPress-Ordner liegt.
- Das machst du so:
- Du loggst dich wieder bei Allinkl ein.
- Wieder auf technische Verwaltung.
- Dann gehst du wie gehabt auf KAS Login.
- Hier im linken senkrechten Menü klickst du auf Domain.
- Du erhältst eine Übersicht all deiner Domains.
- In der Zeile, in der deine Domain gelistet ist, klickst du auf das linke, kleine Symbol, das rote Dokumentsymbot mit dem roten Pfeil.
- Es öffnet sich ein neues Fenster.
- Hier kannst du ein Ziel angeben für deinen Webspace.
- Damit die Inhalte in deinem WordPress-Ordner angezeigt werden, gibst du in das Feld bei Ziel einfach den Namen deines Ordners an. Das ist in der Regel eben „wordpress“. Wenn du den Ordner umbenannt hast in „meinetolleseite“, dann muss dein Ziel natürlich „meinetolleseite“ heißen. Natürlich immer ohne Tüddelchen und hinter einem Slash (/).
- Nun wird beim Aufruf deiner Domain auf den Inhalt deines WordPress-Ordners verwiesen – und nicht mehr auf die index.htm.
WordPress mit der Datenbank verbinden
WordPress installieren heißt: mit der Datenbank verknüpfen
Dieser Schritt ist die eigentliche Installation. Du hast dein WordPress zwar hochgeladen – aber damit ist noch nichts erreicht. WordPress funktioniert nur in Verbindung mit einer Datenbank. Darum musst du im nächsten Schritt WordPress mitteilen, wie die Datenbank heißt und welches Passwort sie hat. Erst dann kann WordPress mit der Datenbank kommunizieren.
- Den Installationsprozess startest du, indem du deine Domain in die Adresszeile deines Lieblingsbrowsers eingibst (Firefox, Chrome, Safari – was du willst).
- Hinter der Domain tippst du ein Slash (/).
- Und direkt hinter dem Slash tippst du „wpadmin“ oder einfach „admin“ ein – ohne Anführungszeichen natürlich.
- Beispiel: sabinemeier.de/wpadmin
- Dann Entertaste drücken.
- Es öffnet sich ein Fenster, in dem du weiterklicken kannst zum nächsten Schritt.
- Nun erscheint ein großes weißes Formularfenster.
- Hier gibst du die Daten zu deiner Datenbank ein, die du vom Hoster erhalten hast.
- Für das Feld „localhost“ kannst du probieren: Häufig passt „localhost“ und du musst nichts ändern. Bei Allinkl bleibt es bei localhost. Andere Hoster aber könnten einen anderen Datenbankhost haben. Das erfährst du bei deinem
- Hoster. Du findest diese Angaben im Kundenlogin deines Hosters. Falls das nicht zu finden ist: einfach beim Hoster anrufen.
- Das Feld Tabellenpräfix kannst du unverändert lassen.
Damit ist die Installation fertig.
Wenn alles geklappt hat und du dich nicht vertippst hast, erhältst du von WordPress eine Erfolgsmeldung.
von ConstanzeStraub | Feb. 23, 2022 | WordPress
5 mögliche Menüs und wie sie umgesetzt werden
Außerdem: 5 Fehler, die du beim Aufbau deines Menüs vermeiden solltest
Du möchtest die Besucher sicher durch deine Website führen? Du möchtest ein WordPress Menü erstellen? Dann brauchst du nicht nur eine gute Navigation. Du brauchst mehrere Menüs an verschiedenen Stellen deiner Website. Die schlechte Nachricht: In WordPress ein Menü erstellen kann verwirrend sein. Je nach Theme hast du mehrere Möglichkeiten, wie und wo du Menüs auf deiner Website einsetzt. Die gute Nachricht: Eine durchdachte Navigation anzulegen ist technisch einfach. Ich zeige dir hier, wie du Menüs in WordPress erstellst.
Welche Menüs gibt es?
WordPress selber bietet von Haus aus drei Menüpositionen an. Wo die Menüs stehen, wie genau sie aussehen – das hängt von deinem Theme ab. Denn jedesWordPress- Theme bietet unterschiedliche Menüpositionen an. Deshalb ist als 1. Frage sinnvoll: Wo soll deine Navigation stehen? Für die Antwort darauf musst du folgendes wissen:
- Welche Menüs gibt es überhaupt?
- Welche Menüs bietet dein Theme?
- Welche Positionen können Menüs auf der Website haben?
In WordPress arbeite ich mit dem Theme Divi. Mit WordPress + Divi sind die gängigsten Menüs mit den gängigsten Positionen möglich. Falls du ein anderes Theme benutzt, kann es sein, dass das ein oder andere Menü anders aussieht. Aber ich bin sicher: Meine Anleitungen werden dir weiterhelfen.
Hauptmenü – ein Must-have und das Leitsystem deiner Website
Mit dem Hauptmenü ist die Navigation gemeint, die auf einer Website die erste Geige spielt. Hier werden die wichtigsten Seiten deiner Website angesteuert. Was du wissen solltest: Das Hauptmenü kann verschiedene Positionsmöglichkeiten haben. In dieser Anleitung zeige ich dir, wie ein horizontales Menü am Kopf der Seiten in WordPress erstellt wird.
Footermenü: das Menü am „Fuß“ der Seiten
Das Footermenü findest du im untersten Bereich einer Website. Eben im Footer. Das ist der Bereich, der die einzelnen Seiten deiner Website abschließt und dem Besucher sagt: Weiter kannst du nicht scrollen. Ein Footermenü ist sinnvoll, weil damit die Besucherin ohne scrollen zu müssen weitere Unterseiten findet. Wenn du im Footer ein WordPress Menü erstellen möchtest, hast du mehrere Möglichkeiten. In dieser Anleitung zeige ich dir, wie du ein vertikales Footermenü und wie du ein horizontales Footermenü erstellst.
Sekundäres Menü — eine Linkleiste im Headerbereich
Das Sekundäre Menü steht im Headerbereich oberhalb vom horizontalen Hauptmenü. Dieses Menü ist eher auf großen Portalen sinnvoll. Auf Shopseiten oder mehrsprachigen Seiten kann diese Leiste sinnvoll sein, wenn Warenkorb, Login oder die Sprachauswahl untergebracht werden sollen. Weitere mögliche Elemente sind die Such-Lupe, Social-Icons, deine Telefonnummer oder die Mailadresse.
DropDown-Menü — die Erweiterung des Hauptmenüs
Wenn du ein nicht sichtbares WordPress Menü erstellen möchtest, wählst du das Das DropDown-Menü. Es wird auch Untermenü oder Submenü genannt. Der Name sagt es bereits: Es ist ein „Klappmenü“. Das heißt: Die Besucher klicken zuerst ein Link im Hauptmenü an, damit das Untermenü aufklappt. Sinnvoll ist das DropDown-Menü, weil in der horizontalen Menüleiste nicht mehr als sieben Links angeordnet sein sollten. Je weniger Links im Hauptmenü, desto übersichtlicher ist die Navigation. Der Rest kommt ins DropDown.
Horizontales WordPress Menü erstellen im Header
Eine einzelne Webseite wird in verschiedene Bereiche eingeteilt:
Der zuerst sichtbare Bereich ist der Header. Der Header ist der Kopfbereich einer Webseite. Deshalb wird hier in der Regel das Hauptmenü angebracht. Gut zu wissen: Die Seiten können so eingestellt werden, dass die Navigation auch beim Scrollen oben stehen bleibt. Und so kommst du zum wichtigsten Menü deiner Website:
Schritt 1
Seiten in WordPress anlegen
Damit du überhaupt ein Menü in WordPress sehen kannst, möchte WordPress zunächst Seiten haben. Der umgekehrte Weg – erst Menü, dann Seiten – ist zwar auch denkbar und technisch möglich, aber umständlich. Der erste Schritt also: Seiten anlegen. Auch inhaltlich ist das sinnvoll, denn dann machst du dir vor dem Anlegen der Website Gedanken über deine Inhalte.
Ich erlebe es immer wieder, dass Websitebetreiber zuerst an das Menü denken. Ohne bereits Seiten zu haben. Das ist, als würden sie erst den Sattel kaufen und dann das Pferd… Apropos: Hast du ein Konzept für deine Website? Das ist nämlich sehr sinnvoll und erleichtert dir die Arbeit. Falls du Tipps brauchst, lies gern meine Anleitung, wie du ein Konzept für deine Website erstellst > klick hier
Schritt 2
Bereich „Menüs“ im Dashboard von WordPress öffnen
Du loggst dich wie gewohnt in deine WordPress-Installation ein. Standardmäßig öffnet sich das Dashboard deiner Installation. Hier siehst du links die vertikale Menüleiste mit den Optionen, die du zum Aufbau deiner Website ansteuern kannst. Diese vertikale Menüleiste beginnt oben mit
- > Dashboard, dann
- > Beiträge, dann
- > Medien, dann
- > Seiten
Weiter unten findest du den Link Design. Dieser Menüpunkt enthält den Punkt Menüs. Es gibt 2 Möglichkeiten, zum Bereich Menüs zu kommen.
Möglichkeit 1:
Du „schwebst“ mit dem Mauscurser über den Begriff Design (ohne zu klicken!).
Es öffnet sich nach rechts ein Kontextfenster
Hier findest du unter den aufgeführten Links wie Themes, Customizer, Widgets den Punkt Menüs
Menüs anklicken.
Möglichkeit 2:
Diesmal klickst du auf Design
Das vertikale Hauptmenü in deinem Dashboard öffnet sich nach unten.
Nun siehst du im Menü unter Design dieselben Menüpunkte wie in Möglichkeit 1)
Schritt 3
Den Namen des Menüs eintragen
Wenn du auf Menüs geklickt hast, dann öffnet sich im Dashboard ein neuer Bereich. Das ist der Menübereich. Im Bereich Menüs kannst du deine Navigationen definieren, anlegen und ändern. Links im Bereich findest du einen Kasten Menüeinträge hinzufügen und rechts den Kasten Menü-Struktur. So gehst du vor:
- im Kasten Menü-Struktur findest du das Feld Name des Menüs
- hier trägst du einen beliebigen Namen für dein Menü ein
- dabei ist es sinnvoll, einen eindeutigen Namen zu wählen
- anschließend klickst du auf den blauen Button Menü erstellen.
Schritt 4
Seiten auswählen und dem Menü hinzufügen
Wenn du noch keine Seiten angelegt hast, dann ist das Feld Menüeinträge hinzufügen grau. Ansonsten ist das Feld wie der Kasten Menü-Struktur weiß. Nun kannst du Seiten auswählen. Standardmäßig ist hier der Tab Zuletzt erstellt vorausgewählt. So gehst du vor:
- Gewünschte Seite in der Checkbox links neben der Seitenbezeichnung auswählen
- du kannst auch mehrere Seiten auswählen -> dann mehrere Checkboxen anklicken
- auf den Button klicken: Zum Menü hinzufügen
- anschließend werden die Seiten rechts unter Menü-Struktur als Button dargestellt.
Diese Button kannst du wie erwähnt aufklappen. Im Feld Angezeigter Name kannst du den Namen der Seite ändern. Wichtig: Wenn du hier den Seitennamen änderst, dann ändert sich nicht die URL der Seite! Es wird lediglich die Linkbezeichnung innerhalb des Menüs geändert. Du kannst den Seiten also nach Herzenslust an dieser Stelle neue Namen vergeben.
Schritt 5
So ordnest du dem Hauptmenü eine Position im Theme zu
Nun muss WordPress noch mitgeteilt werden, an welcher Stelle der Website dein neues Menü stehen soll. Soll es im Header stehen? Oder im Footer? Auch das ist kein Hexenwerk: Du setzt einfach einen Haken. Das machst du so: Im selben Feld – im Feld Menü-Struktur – findest du die Option Menü-Einstellungen. Darunter 4 Auswahlfelder, die du jetzt anklicken kannst. Da dein neues Menü als Hauptmenü erscheinen soll, muss die Checkbox Hauptmenü angeklickt werden. Ganz simpel. Oder?
Dasselbe wird später mit dem horizontalen Footermenü und dem Sekundären Menü gemacht.
Seiten automatisch hinzufügen: Diese Auswahlbox kann ebenfalls angeklickt werden. Ich lass diese Box immer deaktiviert, denn es gibt immer mal Seiten, die nicht hinzugefügt werden sollen (wie das Impressum). Zum Abschluss speichern nicht vergessen.
5 Fehler, die du beim Erstellen eines Menüs vermeiden solltest
1. Das Menü hat zu viele Links
Wenn das horizontale Hauptmenü zu viele Menüeinträge hat, wird es unübersichtlich für deine Besucher. Denn die Leser haben keine Zeit zu raten, wo genau was sein könnte… Ein anderer Punkt ist die geringe Aufmerksamkeit für Details: Die Besucher wollen sich auf die Inhalte konzentrieren. Bedienelemente wie Menüpunkte sollten deshalb schnell verstanden werden. Es gibt Untersuchungen, wonach bis zu 7 Links noch gut in Erinnerung bleiben. Je besser Elemente im Gedächtnis bleiben, desto schneller kann sich die Besucherin durch die Website navigieren: Sie muss nicht ständig suchen und überlegen.
2. Die Navigationsleiste läuft zu breit
Manchmal sehe ich horizontale Navigationen, die zwar eine übersichtliche Anzahl an Links haben, aber zu breit laufen. Zu breit laufende Menüs sind natürlich genauso problematisch. Passieren kann das, wenn für die Links im Menü Wörter gewählt werden, die einfach zu lang sind. Bei kleinen Monitoren wie Tablets in der Queransicht oder Notebooks reicht dann der Platz nicht mehr aus – das Menü erhält einen Umbruch. In einem Menü mit Umbruch kann man schlimmstenfalls nicht mehr navigieren, weil sich die Links überlagern oder weil das Submenü nicht mehr angeklickt werden kann. Deshalb: Die Website auch immer auf kleinen Displays ausprobieren.
3. Unwichtige Links im Hauptmenü
Klar, das Impressum ist wichtig. Aber nicht für deine Besucher. Jedenfalls in der Regel. Das Impressum und andere rechtliche Angaben wie der Datenschutzhinweis sind gesetzliche Vorgaben. Es sind Seiten, die die meisten Besucher eher selten bis gar nicht besuchen. Warum also sollten ausgerechnet gesetztliche Pflichtangaben im Hauptmenü stehen? Schließlich ist dort am wenigsten Platz. Mein Tipp: Stell solche Links ganz nach unten. In die unterste Footerleiste.
4. Die Schrift der Links ist schlecht zu lesen
Zu kleine Schrift oder ein schlechter Kontrast: Wenn die Schrift im Hauptmenü nur undeutlich gelesen werden kann, dann muss mehr Zeit investiert werden, um die einzelnen Seiten zu finden. Die Besucher werden unnötig aufgehalten und springen unter Umständen entnervt ab. Mach es deinen Lesern so einfach wie möglich, deine Seiten zu finden. Ein wichtiger Schritt dahin ist eine gut lesbare Navigation.
5. Stumme Links: Menüpunkte, die nichts aussagen
Anbahnung, Mag ich, Katzenliebe… Was mag sich wohl hinter diesen Menüpunkten verbergen? Schwachpunkte eines Menüs sind Linkeinträge (Menüpunkte), die man nicht versteht. Mach es auch hier deinen Besuchern so einfach wie möglich. Lass sie nicht raten, sondern wähle „sprechende“ Links. Gut sind Begriffe, bei denen ohne zu überlegen sofort klar ist, welche Seiten man dahinter findet. „Über mich“? Klar, hier schreibt jemand über sich, was ihn oder sie ausmacht oder ihr Werdegang. „Kontakt“? Versteht sich von selbst, was dort zu finden ist. Auch wenn’s mal langweilig wirkt – du tust deinen Besuchern einen Riesengefallen, wenn du dich an anderer Stelle kreativ austobst.
von ConstanzeStraub | Mai 5, 2021 | WordPress
Dein manueller Umzug von WordPress ganz entspannt
Wer hat davor keinen Horror: ein Umzug.
Unser letzter Umzug ist noch nicht lange her: Weihnachten 2020. Ja, genau, Weihnachten. Und dann noch mitten in einer Pandemie. Und weil wir schlecht geplant haben, ging alles in die Hose: Eine Woche vor Heiligabend haben wir gerade mal EINE Umzugsfirma in Lüneburg gefunden, die Zeit für uns hatte und die wir beauftragen konnten. Aber offensichtlich gab es in der Firma Kommunikationsschwierigkeiten: Die Firma kam mit einem viel zu kleinen LKW. Ein Viertel unserer Sachen musste in der alten Wohnung bleiben. Und eigentlich hätten wir eine 2. Fuhre fahren müssen. Doch die Kollegen wollten so schnell wie möglich nach Haus – es war schließlich der 23. Dezember. Kann ich verstehen.
Ergebnis: Mein Mann und ich sind eine Woche lang, vom 24. bis 31. Dezember, mit unserem Wagen und einem Anhänger hin und her kutschiert. Wir beide allein. Unzählige Male sind wir Treppen hoch, Treppen runter gerannt. Zwischendurch noch zur Mülldeponie. Denn zu viel unnötiger Ballast hatte sich in den Jahren angesammelt
Weder an ein friedliches Weihnachtsfest noch an ein feierliches Silvester war zu denken. Wir waren einfach nur kaputt und froh, abends alle Viere von uns zu strecken in den noch ungemütlichen Zimmern.
Dagegen ist ein virtueller Umzug so entspannend wie eine Ganzkörpermassage.
Ehrlich.
So klappt der Umzug deiner WordPress-Website
In dem Fall, den ich hier beschreibe, möchtest du deinen Hoster wechseln. Gründe dafür gibt es genug: Du bist mit der Leistung deines alten Hosters nicht mehr zufrieden, du findest einen Hoster mit besserer WordPress-Unterstützung – was auch immer… Und wie in der neuen Wohnung die Möbel aufgestellt werden müssen, brauchst du auch beim neuen Hoster dieselbe Einrichtung: Datenbank und FTP-Zugang müssen angelegt werden, deine Website muss auf den neuen Webspace kopiert werden.
Zur Beruhigung: Mit WordPress umziehen ist kein Hexenwerk.
Bevor es losgeht ein Hinweis:
Bestimmt hast du vor dem Umzug deinen Auth-Code vom alten Hoster erhalten. Was das ist? Diesen Code brauchst du, um deine Domain beim neuen Hoster registrieren zu lassen. Mit dem Code weist du dich als rechtmäßiger Inhaber deiner Domain aus. Du gibst diesen Code bei deinem neuen Hoster an und der Umzug der Domain wird vom Hoster veranlasst.
Ist das soweit geklärt, kann nun dein WordPress umziehen.
Im Prinzip gibt es 2 Möglichkeiten: manuell oder mit einem Plugin. Ich zeige dir hier ausführlich die manuelle Variante. Wie du den Umzug von WordPress mit einem Tool wie Duplicator machst, schreibe ich in einem neuen Post.
WordPress-Umzug manuell
Ich selber mache meine WordPress-Umzüge immer manuell. Das hat mehrere Gründe.
hab ich so die Übersicht, was ich getan habe
muss ich auch mit einem Plugin so einiges beachten
läuft etwas mit der manuellen Installation schief, kann ich immer alles wiederholen
manchmal hakt der Umzug auch mit einem Plugin (z.B. wenn die Datenbank sehr groß ist)
Läuft alles glatt, brauchst du nicht mehr als 60 Minuten für den manuellen Umzug (inkl. Download- und Upload-Zeit). Und sollte doch irgendwas nicht hinhauen – dann machst du eben alles nochmal. Überhaupt kein Problem. Denn vor dem Umzug sicherst du deine Datenbank und die WordPress-Installation auf deinem Rechner. So hast du die volle Kontrolle und die Welt kann ruhig untergehen.
Hier in kurzen Stichworten die einzelnen Schritte:
- Vom alten Hoster Datenbank exportieren und auf deinen Rechner sichern
- Vom alten Hoster per FTP die WordPress-Dateien downloaden (auf deinen Rechner)
- Auf dem neuen Hoster eine Datenbank anlegen
- In die neu angelegte Datenbank die gesicherte Datenbank vom alten Hoster importieren
- Ein FTP-Zugang auf deinem neuen Hoster anlegen
- Eine Datei deiner WordPress-Site anpassen
- Deine WordPress-Website per FTP auf neuen Hoster hochladen
Du siehst: Mit WordPress umziehen sieht recht übersichtlich aus. Wenn man Schritt für Schritt vorgeht ist der manuelle Umzug auch für unroutinierte WordPress-Anwender gut machbar. Auch ich hab mal als Greenhorn angefangen – und fand es nicht schwierig.
Drei Vorraussetzungen brauchst du, um loszulegen:
- ein Ftp-Zugang zum alten Hoster
- Zugriff auf phpMyAdmin für die Datenbank
- und – natürlich – einen neuen Hoster mit Zugang
Los gehts, lass uns starten:
WordPress umziehen – Schritt 1: Datenbank sichern
Wahrscheinlich erzähl ich dir nichts Neues, der Vollständigkeit halber erwähne ich’s: WordPress funktioniert nur mit einer Datenbank. Alles aus deinem Content (Seiten, Beiträge, Benutzerdaten und vieles mehr) sowie wichtige Einstellungen werden in der Datenbank gespeichert. Das heißt: Wenn du mit deinem WordPress umziehen möchtest, muss die Datenbank mit. Leider.
Aber keine Sorge: Das ist in der Regel simpel. Für Änderungen an der Datenbank, für die Sicherung, den Import, Export und vieles mehr stellen die Hoster ein Tool bereit: phpMyAdmin.
In diesem Fall brauchst du die Funkion -> Datenbank exportieren. Über die Benutzeroberfläche deines Hosters wählst du deine Datenbank aus, klickst auf phpMyAdmin, es öffnet sich die Tabellenansicht der Datenbank. Hier klickst du oben im horizontalen Menü den Tab „Export“. Du musst nur darauf achten, dass die Tabellen der Datenbank ausgewählt sind (das kleine Plus-Zeichen aktivieren). Dann ein Klick auf „Exportieren“. Hier wählst du „Schnell“ aus. Das richtige Exportformat ist meist vorausgewählt: „SQL“. Du klickst auf „OK“ und schon wird eine Datenbank auf deinen Rechner geladen. Das ist wichtig: Die Datenbank muss auf deinen Rechner! Nur so kannst du sie in die noch leere Datenbank deines neuen Hoster importieren.
Auf deinem Rechner wirst du nun eine Datei mit der Endung .sql finden. Meistens trägt diese Datei den Namen der Datenbank. Also zum Beispiel db123456.sql.
WordPress umziehen – Schritt 2: Deine WordPress-Dateien sichern
Wenn du mit WordPress umziehen möchtest, brauchst du natürlich eine Datenstraße, auf der sämtliche Dateien deiner WordPress-Installation zum anderen Hoster geschifft werden. Ein FTP-Programm ist für so einen Transport eine geniale Sache. Falls du das noch nicht hast, weil deine WordPress-Website nicht von dir erstellt wurde oder weil dein WordPress vorinstalliert war, dann holst du als erstes dieses Programm. Gute FTP-Programme sind FileZilla oder CyberDuck. Ich arbeite mit FileZilla. Den FileZilla Client kannst du kostenlos downloaden (https://filezilla-project.org/). Achtung: „Client“, nicht „Server“ laden.
Wenn du in deinem FileZilla alles eingerichtet hast, kannst du dich auf dein Webspace (von deinem alten Hoster) einwählen. Finde das Verzeichnis (den „Ordner“), in dem deine WordPress-Installation liegt. Öffne das Verzeichnis, wähle alle Dateien darin aus und kopiere sie auf deinen Rechner in einen Ordner. Dazu klickst du mit der rechten Maustaste auf die ausgewählten Dateien, es öffnet sich ein Kontextfenster und du klickst hier auf „Herunterladen“. Nun werden alle deine WordPress-Dateien auf deinen Rechner kopiert. Vorher hast du natürlich einen Ordner auf deinem Rechner angelegt, in den du deine WordPress-Dateien speicherst, damit alle Dateien schön zusammen bleiben.
Jetzt nur noch etwa Geduld, denn das Herunterladen der Dateien kann etwas dauern.
WordPress umziehen – Schritt 3: Eine neue Datenbank anlegen
Auf dem neuen Hoster muss nun eine neue Datenbank erstellt werden. Später übernimmst du zwar die Daten deiner alten, gespeicherten Datenbank. Dennoch muss zuvor ein Grundgerüst einer Datenbank erstellt werden. Das findest du in der technischen Administration deines Hosters unter dem Menüpunkt „Datenbanken“. Hier „Datenbank hinzufügen“ (oder „Datenbank erstellen“, wie auch immer der Menüpunkt heißt) und der weiteren Anweisung folgen. Hier erhältst du den Datenbanknamen und Datenbankbenutzer (kann manchmal auch selbst vergeben werden), ein eigenes Passwort für die Datenbank vergibst du selber. Die Serverbezeichnung (Host) erfährst du von deinem Hoster. Häufig lautet der Hostname einfach „localhost“.
Alle Daten gut notieren!
Tipp: Alles per Copy & Paste in eine Excel-Tabelle speichern.
WordPress umziehen – Schritt 4: Datenbank des alten Hoster importieren
Da wir eh in der Datenbank sind, können wir auch gleich die alte Datenbank importieren. Und das ist genauso einfach wie der Export: Diesmal klickst du – Überraschung – im Menü oben auf „Import“. In dem folgenden Fenster wählst du deine sql-Datei aus, die du in Schritt 2 auf deinen Rechner gespeichert hast. Wenn du sie ausgewählt hast, klickst du auf „importieren“. Damit lädst du deinen Datenbank-Dump hoch (Dump = die importierte Datei deiner Datenbank). Beim Import kannst du die Standardeinstellungen belassen (es sei denn, du hast beim Export deiner Datenbank die Einstellungen geändert – was in der Regel nicht nötig ist).
Ein Hinweis, bevor du dein WordPress umziehen willst: Wenn deine Website sehr groß ist und damit auch deine Datenbank, kann es sein, dass der Import vorzeitig abbricht. Das liegt an der geringen PHP-Laufzeit. Das ist aber kein Problem: Dann nimmst du für den Import das Plugin MySQLDumper. Damit lässt sich das Problem der Laufzeit umgehen.
WordPress umziehen – Schritt 5: Einen FTP-Zugang auf deinem neuen Hoster einrichten
Falls noch nicht geschehen, brauchst du natürlich auch einen Zugang für deinem neuen Webspace. Das machst du genauso wie das Einrichten deiner Datenbank im technischen Bereich deines Kundenzugangs. Wie gehabt die Daten deines FTP-Zugangs anlegen, sauber kopieren und den Zugang in deinem FTP-Client (FileZilla) eintragen.
WordPress umziehen – Schritt 6: Deine WordPress-Dateien anpassen
Damit dein WordPress mit der neuen Datenbank kommunizieren kann, muss eine Datei in deinem WordPress-Ordner angepasst werden. Diese Datei ist die wp-config.php. Auch dies ist einfacher als man denken mag.
Finde also in dem Ordner, in den du deine WordPress-Dateien gespeichert hast, folgende Datei:
wp-config.php.
Diese Datei öffnest du mit einem einfachen Texteditor. Achtung: Auf keinen Fall mit einem Schreibprogramm wie Word, OpenOffice oder Page öffnen! Denn diese Programme verändern die wp-config.php-Datei automatisch.
Auf Windows gibt es dafür den Texteditor, auf dem Mac eignet sich das Programm „TextEdit“. Sehr gut geeignet sind Programme wie „CotEditor“.
Ich mache von der wp-config.php immer eine Kopie und speichere sie in einem anderen Ordner ab. So kann ich auf das Original immer ganz schnell zugreifen, wenn ich mich vertippt habe.
Also, folgendes machst du:
Öffne die Datei wp-config.php. Hier änderst du die folgenden Zeilen:
define(‚DB_NAME‘,’meinDatenbankname‘);
define(‚DB_USER‘,’meinDatenbankbenutzer‘);
define(‚DB_PASSWORD‘,’meinDatenbankPasswort‘);
define(‚DB_HOST‘,’localhost‘)
Zwischen den Hochkommata setzt du deine notierten Daten ein.
„localhost“ brauchst du nur ändern, wenn dein Hoster eine andere Hostbezeichnung hat für den Datenbankhost (DB_HOST).
Die Hochkommata am Anfang und Ende der geänderten Bezeichnungen darfst du nicht ändern oder löschen, denn sie sind Teile der Programmierung. Das ist auch einer der Gründe, warum du kein Schreibprogramm verwenden darfst. Denn die könnten die Hochkommata in Anführungszeichen ändern.
Und damit wäre die wp-config.php fehlerhaft.
WordPress umziehen – Schritt 7: WordPress auf den neuen Hoster hochladen
Jetzt kommt der letzte Schritt: Das Kopieren deiner WordPressdateien auf deinen neuen Webspace. Das machst du, indem du dich per FTP einwählst und dich mit deinem neuen Webspave verbindest. Falls du für dein WordPress ein Verzeichnis angelegt hast auf deinem Webspace, wählst du das Verzeichnis aus und öffnest es. Hier hinein lädst du sämtliche WordPress-Datein inkl. der geänderten wp-config.php. Du kannst auch alles in das sogannte Root-Verzeichnis laden. Das ist das oberste Verzeichnis, das du auf deinem Webspace anklicken kannst. Mein Tipp: Erstelle dir lieber ein Verzeichnis, in dem dein WordPress liegt. Dann hast du es später einfacher. Du must dann nur noch auf deinem Hoster angeben, in welches Verzeichnis deine Domain verweisen soll. Das war’s schon.
Damit ist der Umzug deiner Website mit WordPress fertig. Mit WordPress umziehen ist einfacher, als vermutet, wenn du Schritt für Schritt vorgehst.
Du kannst deine Website jetzt genauso weiter bearbeiten wie bisher.
von ConstanzeStraub | März 2, 2021 | WordPress
HTML oder WordPress? Die Vorteile eines CMS.
Eine persönliche Erfahrung
Alles begann vor 15 Jahren
Als ich mich vor knapp 20 Jahren als Designerin selbständig gemacht habe, stand das Internet noch in den Kinderschuhen. Die Zeit des Word Wide Web vor 20 Jahren ist kein Vergleich zu den heutigen modernen Techniken. Mit Websites tolle Sachen machen? Verglichen mit heutigen Möglichkeiten war die Technik damals reichlich eingeschränkt.
Es war die Hippie-Zeit des Internets: jung, verspielt, nervös, kreativ und auch schlampig.
Aufbruchstimmung im Internet
Nach 2 Jahren meiner Selbständigkeit ist mir klar geworden: Um Kunden zu zeigen, was ich mache, brauche ich „irgendwas“ im Internet. Nur so kann ich ohne Umwege und mit geringen Kosten meine Arbeiten präsentieren. Eine Vorstellung hatte ich auch: Die Website sollte einigermaßen seriös daherkommen. Keine lustig bunte Flashseite mit laufenden Zeichenfiguren. Wie es damals häufig zu finden war: Jede Agentur, die besonders kreativ sein wollte, hatte ein sogenanntes Flashintro vor den eigentlichen Webseiten vorgeschaltet.
Glaub mir: Der Bau einer Website war damals ein steiniger Weg. Als ich damit angefangen hab, waren Systeme wie WordPress neu und unausgereift, kompliziert und unverständlich. WordPress wurde ja erst 2003 entwickelt.
Spitze Klammern und kein Ende
Eine kleine Abhandlung über HTML gefällig?
Wenn du dran bleibst, erfährst du ein paar Hintergründe. Und merkst: Wie gut, das es WordPress gibt…
Also: Ich hatte null Ahnung, wie man eine Website macht. Was ich irgendwann herausbekommen hab: Eine Website besteht aus HTML-Dateien. Also hab ich einen VHS-Kurs besucht. Der Kurs war ein Witz. Zwar ist HTML leicht zu lernen. Trotzdem war ich damals frustriert. Enttäuscht, weil in dem, was der Dozent uns an die Tafel malte und was wir dann in den Rechner übertragen haben, nicht mal in Ansätzen und mit viel Fantasie eine „Website“ zu erkennen war. Jedenfalls nicht das, was ich schon mal irgendwo im Internet gesehen hab. Alles war viel zu abstrakt. Buchstaben zwischen spitzen Klammern sollten eine Website sein? Wo ist das Grafische? Wo die Gestaltung?
Vielleicht hätte mir der 2. Teil des Kurses die Augen geöffnet. Aber ich war erstmal genervt. Das Thema HTML und Websites landete erstmal zu den Akten. War mir zu blöd. Zu unkreativ.
HTML und GoLive
Wer mich kennt weiß: Wenn ich mir etwas in den Kopf gesetzt hab, dann will ich es haben. Oder wissen. Eine Form von Ehrgeiz, den ich seit Kindesbeinen nie abgelegt hab: Ich will alles selber machen. Ob Wände tapezieren, Türen streichen, Laminat und Teppich verlegen, Ledertaschen nähen, Schreibtische bauen, Schränke abschleifen oder Westen stricken: Alles schon gemacht. Und immer fast perfekt. Also: Auch jetzt wollte ich mich selber durchbeißen.
Ich hab mich auf den Hosenboden gesetzt. Und hab HTML gelernt, was das Zeug hält. Irgendwann bin ich auf ein einfach zu bedienendes Programm gestoßen: GoLive von Adobe. GoLive war (das Programm gibt es nicht mehr) ein Programm, mit dem man sehr intuitiv und einfach per Drag and Drop modulartig Webseiten erstellen und bearbeiten kann. Hier ein Textmodul schieben, dort ein Bildmodul schieben – schon sah das Ganze nach etwas aus.
Meine erste selbst gestrickte Website wurde geboren. Und ich konnte Bilder meiner Design-Arbeiten im Internet präsentieren. Okay, das Ganze war wirklich sehr simpel gestrickt. Aber ich war online!
Der erste Website-Auftrag
Irgendwann kam der erste Auftrag, eine Website zu machen. Ein guter Freund von mir ist als Versicherungsmakler selbständig und wollte eine Website haben. Das war ein tolle Gelegenheit für mich, tiefer in die Materie HTML einzusteigen. Es folgten weitere Aufträge zu Websites. Und nun wollte ich’s wissen. Ich las immer mehr, knobelte an Fehlern, probierte und verwarf – bis die Websites einigermaßen passabel waren. Für damalige Verhältnisse.
Über die Jahre hab ich reihenweise Bücher über HTML und CSS verschlungen: Bücher des Amerikaners Eric A. Meyer über CSS, „Bulletproof Webdesign“ von Dan Cederholm, das Online-Standardwerk von Stefan Münz „self html“ und die Bücher und Onlinereferenzen von Ulrike Häßler und viele andere Bücher. Und mittlerweile ist mit mir auch das Internet schlauer geworden: Immer umfangreicheres Wissen konnte ich direkt aus dem Internet saugen.
HTML 5 und CSS 3: responsives Webdesign
HTML und CSS entwickelten sich im Laufe der Jahre weiter. Nach HTML 4 kam HTML 5, nach CSS 2 kam CSS 3. Tolle Features wurden möglich: Websites konnten endlich „responsiv“ codiert werden. Responsiv heißt: Die Elemente der Website passen sich der Displaygröße an. So kann man z.B. den Schriften je nach Ausgabegerät größere oder kleinere Größen zuweisen. Eine Überschrift ist auf dem Monitor 1 cm hoch und deshalb zu groß für Smartphones? Kein Problem: Man schreibt einen Befehl der dafür sorgt, dass dieselbe Überschrift auf einem Smartphone kleiner dargestellt wird. Damit kein unschöner Umbruch entsteht.
Bilder und Textblöcke sollen auf dem Monitor nebeneinander stehen und auf dem Smartphone untereinander? Kein Problem: Wieder schreibt man eine passende Anweisung. Und voila: Auf dem Display des Smartphones rutscht das Bild unter den Text (oder umgekehrt, je nach Angabe).
Diese Technik war auch bitter nötig. Denn längst waren die ersten Smartphones auf dem Markt. Und immer mehr Menschen gingen mit Smartphone ins Internet. Wer die Entwicklung kennt weiß: Längst schon ist das Smartphone eine Eierlegendewollmilchsau – die Funktion „Telefon“ spielt fast nur noch eine Nebenrolle…
HTML 4, HTML 5, CSS – reicht das für eine Website?
Alles fein und schön. Aber irgendwann reichte reines HTML nicht mehr.
PHP für interaktive Elemente
Irgendwann wollten immer mehr Kunden ihre Websites selber ändern, Texte selber einsetzen. Oder sie erwarteten Features, die mit normalen HTML-Codierungen so nicht umsetzbar waren. Oft haben meine Kunden nachträglich Kontaktformulare gewünscht. Die aber kann man mit simplen HTML nicht umsetzen. Damit ein Kontaktformular im Browser des Besuchers abgesendet werden kann, braucht man ein Script, das den Versandt des Formulars an eine Mailadresse ausführt. Das wusste ich: Kontaktformulare oder andere interaktive Elemente einer Website werden in der Regel mit der Programmiersprache PHP ausgeführt.
Ein anders Problem war: Wollte ich Änderungen an einer Website machen, ging das nur auf dem Rechner, auf dem ich die nötigen Programme installiert hatte. Das hat mich abhängig vom Ort gemacht.
Meine Fragen waren also:
Will ich umfangreiche Webprojekte an einen Programmierer weitergeben? Oder kann ich das Programmieren lernen? Die Antwort war, richtig geraten: Super, wieder was Neues! Wo ist das nächste PHP-Lehrbuch? Wie lerne ich JavaScript? Gesagt getan, Bücher und DVDs bestellt…
Aber irgendwie war meine Lust schnell dahin. Der Grund war wahrscheinlich ganz simpel: Ich bin durch und durch Grafikerin und ich arbeite vor allem visuell. Und PHP ist eine Sprache. Das bedeutet: Man hat zuerst mal einen großen Haufen Zeichen und Buchstaben, die man in einem sinnvollen Kontext zusammenfügt. Man sieht also erstmal nix Grafisches… Außerdem war PHP für mich doch etwas komplexer als HTML. Zu komplex, um es „mal eben“ schnell und nebenbei zu lernen und in absehbarer Zeit parallel Aufträge damit umzusetzen.
Learning by Doing war mir in diesem Fall zu riskant. Also musste ich mir etwas anderes überlegen.
PHP plus HTML: Ein CMS war die Antwort
So, und nun kannst du alles, was ich oben über HTML geschrieben habe, getrost vergessen.
Okay, fast. Denn auch mit einem CMS wird dir HTML hin und wieder über den Weg laufen. Jedenfalls ein bisschen.
Ein Content-Management-System wäre die Lösung. Ein CMS. Erste Erfahrung mit einem CMS hatte ich 2007 mit Joomla. Damals hab ich für einen Kunden eine Website mit integriertem Shop erstellt. Joomla ist wie WordPress ein sogenanntes Content-Management-Sytem (CMS). Joomla war damals sehr sperrig, umständlich und wenig schön. Die Arbeit mit Joomla war holperig und hat keinen Spaß gemacht.
Acht Jahre später, 2015, hab ich den Relaunch der Website vom BBK Lüneburg übernommen. Hier war von Anfang an klar: Die konnte ich nicht mit HTML codieren. Denn die Seite sollte auch von KollegInnen editiert werden können. Und die sahen in HTML lediglich 4 große Buchstaben. Als musste ein CMS her. Diesmal wollte ich auf keinen Fall Joomla nehmen, mein Trauma… Ich hab mich für WordPress entschieden. WordPress war inzwischen sehr ausgereift, hat eine breite Community – überall findet man im Internet WordPress-Foren.
DIVI von Elegant Themes
Ich hab ein gutes Theme gefunden, das Divi der amerikanischen Firma Elegant Themes. Divi ist ein Theme und Pagebuilder in einem. Zufällig hab ich entdeckt, dass der Designer Marco Linke Child-Themes zum Divi entwickelt. Child-Themes sind ein Teil des Themes und enthalten Layout-Einstellungen. Diese Child-Themes sind einfach, übersichtlich und klar, ohne überflüssigen Schnickschnack. Dennoch kann man sie gut auf die Bedürfnisse seiner Website einstellen. Das finde ich sehr gut, denn die meisten Themes sind viel zu überladen. Und schnell macht man den Fehler, ein Layout zu übernehmen, das überhaupt nicht zum eigenen Angebot passt.
Das Gute am Divi: Es gibt fertige Module wie Kontaktformulare, Galerien, Slider, Bestellbuttons, Infotexte und vieles mehr. Die man einfach per Klick einsetzen kann. Die Themes sind von Haus aus responsiv, was ich besonders wichtig finde. Spannend ist: Ich kann die Website in einer Frontend-Ansicht bearbeiten. Das heißt: Ich sehe die zu bearbeitende Website-Oberfläche so, wie ich die Website als Besucher der Website sehe. In dieser WYSIWYG-Ansicht ist alles sehr easy (WYSIWYG = What you see is what you get = was du siehst ist das, was du erhältst).
Damals stellenweise etwas holperig, ist der Pagebuilder Divi mittlerweile richtig gut geworden. Ohne HTML-Kenntnisse lassen sich spielend leicht professionelle Websites erstellen. Erfreulicherweise programmieren die Divi-Entwickler für jede WordPress-Version ein Update zum Divi. Das ist aus verschiedenen Gründen wichtig: Aus Gründen der Sicherheit (WordPress wird gern mal gehackt) und natürlich, weil WordPress selber regelmäßig Neuerungen erhält.
Was ist ein Content-Management-System?
Vielleicht fange ich mal anders an: Was ist nun der Unterschied zwischen HTML und einem CMS wie WordPress? Denn auch die Inhalte in WordPress werden in HTML ausgegeben, sonst könnte der Browser die Website nicht anzeigen (jedenfalls nicht so, wie sich der Websitebetreiber das gedacht hat…).
Also:
CMS oder HTML – Was ist der Unterschied?
Ganz kurz: HTML-Seiten sind statische Seiten. Dagegen werden Seiten in einem CMS wie WordPress dynamisch aus einer Datenbank generiert. Das heißt: HTML-Seiten sind quasi „physisch“ vorhanden. Quasi, da natürliche eine digitale Datei anders als ein Blatt Papier nicht „physisch“ vorhanden ist. Man kann sie nicht anfassen.
Aber sie ist zu vergleichen mit anderen Dateien, die du von deinem Rechner kennst. Du kennst ja sicher Word-Dateien. Genauso ist auch eine HTML-Datei, die man selber bearbeiten und speichern kann. Diese Datei hat nur eine andere Endung: statt „doc“ oder „docx“ eben „html“. In fast jedem Textprogramm kannst du eine Seite auch als html-Datei abspeichern. Und darin nach Belieben deine Texte schreiben.
Damit der Internet-Browser (das Programm, mit du Internetseiten sichtbar machst), deine Inhalte lesen kann, werden die Elemente in den html-Dateien besonders ausgezeichnet. Diese Auszeichnungen nennt man „Tags“. Darum nennt sich HTML auch „Auszeichnungssprache“ (es ist keine Programmierung). Ein Element erhält am Anfang ein Tag und am Ende, das sogenannte schließende Tag. Und das sieht dann so aus:
Dies ist ein Absatz Nummer 1
Dies ist ein weiterer Absatz
Dies ist eine Überschrift
Für jedes Element gibt es eigene Tags. Formulare heißen
von ConstanzeStraub | Dez. 11, 2020 | Design, Startseite, Text, WordPress
Gestalte deine Website für deine Besucher: lesbar
Egal womit du unterwegs bist: WordPress, Joomla, Typo 3 oder Baukastensysteme wie Jimdo, Squarespace oder Wix: Jedes System stellt unterschiedliche Anforderungen. Aber eine Arbeit musst du überall machen: Du musst dir Gedanken darüber machen, wie du deine Website richtig gestalten kannst. Richtig heißt: lesbar und verständlich. Als WordPress-Coach bewege ich mich in diesem Artikel in erster Linie im System WordPress. Aber die hier erwähnten Fehler werden mit jedem System gemacht.
In meinem Blogartikel „Wie du ein genial einfaches Konzept für deine Website erstellst“ hab ich es geschrieben: Wenn du eine Website baust, bist du als Texter, Designer und Techniker unterwegs. Wenn du mit WordPress und einem guten Premium-Theme wie dem Divi arbeitest, dann nimmt dir das Theme viele Arbeiten ab. Ein professionelles Theme unterstützt dich in Design und Technik.
Ein bisschen gesunder Menschenverstand, Logik und Einfühlungsvermögen ist trotzdem nicht verkehrt. Häufig beobachte ich auf Websites dieselben Fehler in der Gestaltung. Die schlimmsten Fehler sind aus meiner Sicht mangelnde Lesbarkeit der Texte. Damit du auf deiner Website diese Fehler vermeidest, hab ich diesen Blogpost geschrieben.
Mach es besser. Ich zeige dir hier, wie du deine Website richtig gestalten kannst, damit deine Besucher deine Texte gern lesen.
Fehler Nr. 1
Schlechte Lesbarkeit durch zu breite Text-Zeilen
Viel zu breite Textblöcke ist ein häufig zu beobachtendes Phänomen. Warum so viele Websitebetreiber diesen Fehler machen ist mir ein Rätsel. Breit laufende Zeilen lesen sich einfach extrem anstrengend. Ich bekomme davon Kopfschmerzen. Probier mal: Nimm ein normal großes Lineal (30 cm). Falls du das nicht hast: Halte ein DinA4-Blatt quer vor deinen Augen. In dem Abstand, den du vor einem Monitor einnimmst. Also ca. 50 cm. Und nun wandere mit deinen Augen die gesamte Kante des Lineals oder des Blatts entlang: Von links, nach rechts, wieder zurück nach links, wieder nach rechts. Hin und her, von Ecke zu Ecke. Ein paar mal.
Das ist Schwerstarbeit für deine Augen. Das tut weh. Ich bekomme davon Kopfschmerzen. Jetzt wirst du einwenden: Okay, aber ich kann von links nacht rechts auch den Kopf bewegen. Klar. Beim Zuschauen eines Tennisspiels ist das normal. Da bewegt man den Kopf. Aber: Das macht keiner vor dem Monitor.
Es gibt verschiedene Kniffe, wie du dich an eine ideale Breite deiner Texte hältst. Eine einfache Möglichkeit ist: Lass den Text nicht breiter laufen als 15 – 20 cm. Abhängig von der Auflösung deines Displays. Natürlich ist dieses Hilfsmittel relativ. Relativ zu der Auflösung deines Notebook-Displays, von der Schriftgröße und dem Schrifttyp. Aber als grobe Richtung hilft diese Angabe.
Eine andere Empfehlung ist, die Texte nicht breiter laufen zu lassen als 800 Pixel. Aber dieser Tipp hat 2 Haken: Der 1. Haken: Pixel ist nicht gleich Pixel. Die Pixel eines Displays mit einer hohen Auflösung sind kleiner als die Pixel eines Displays, dessen Auflösung weniger groß sind. Das heißt: 800 Pixel sind nicht gleich 800 Pixel. Auf dem einen Display sind 800 Pixel 20 cm breit, auf einem anderen Display sind 800 Pixel 18 cm breit. Und 2 cm mehr oder weniger machen für die Lesbarkeit eines Textblocks viel aus!
Der 2. Haken: Die Breite eines Elements in responsiv programmierten Themes – wozu auch professionelle Premium-Themes von WordPress gehören – geben die Breite auch in Prozent an. Und selbst wenn die Breite eines Elements in Pixel angegeben ist – siehe oben. Eine sinnvolle Empfehlung ist die Anzahl der Zeichen in einer Zeile. Meine Empfehlung: Nimm 70 bis 80 Zeichen (ohne Leerzeichen) in einer Zeile. Wobei dieser Wert wieder abhängig ist von der Schriftgröße und der Schriftart. Je größer die Schrift, desto weniger Zeichen. Je schlanker der Schriftschnitt, desto mehr Zeichen. Letztlich ist alles relativ. Behalt deshalb die Lauflänge in cm im Auge. Also gefühlt 18 – 20 cm ist ein guter Wert.
Fehler Nr. 2
Textwüsten: Die Textblöcke haben zu wenig Absätze
Ein wesentliches Element, wenn du deine Website richtig gestalten möchtest, ist die Gestaltung der Texte.
Leider wird häufig zu wenig auf dieses wichtige Element geachtet. Dabei nehmen die Texte einen Großteil der Fläche auf den Seiten ein. Wenn man von Foto-Websites absieht. Fehlende Absätze sind einer der Fehler: Häufig sieht man auf schlecht strukturierten Webseiten riesige Textblöcke ohne Gliederungen, mit wenig Absätzen. Die berüchtigten Textwüsten. Die Absatzlänge ist ein wichtiges Kriterium, wenn man eine Website richtig gestalten will. Warum? Weil zu lange Absätze die Seite unübersichtlich machen. Mach es besser. Gliedere deine Texte in kurze, leicht verdauliche Happen. Plane viele Absätze ein. Mit höchstens 3 bis 4 Zeilen. Das Lesen am Rechner ist sehr anstrengend. Wenn du möchtest, dass deine Leser deine Seite nicht fluchtartig verlassen, dann strukturiere deine Texte. Setze viele Absätze, baue Listen ein, setze Grafiken in den Text. Da gibt’s viele Möglichkeiten. Sei kreativ. Gut sind Listen:
- Listen bringen Abwechslung
- Listen sind gut für das SEO
- Listen lockern Texte auf
- Listen lassen sich prima lesen
- Listen bleiben super im Gedächtnis
Fehler Nr. 3
Schriften im Fließtext, die schlecht lesbar sind
Wie du ohne Arial, Tahoma oder Times deine Website richtig gestalten kannst
Vorbei die Zeit, als Websites mit der winzigen Auswahl von 3 bis 4 Schriften unterwegs waren. Damals musste man die Schriften für seine Website nehmen, von denen man ausgehen konnte, dass die auch auf dem Rechner des Websitebesuchers vorhanden sind. Nutzt du Google-Fonts? Oder hast du schon mal davon gehört? Ein super Tool. Nie war es so einfach wie heute, wirklich schöne und dennoch lesbare Schriften auf seiner Website zu nutzen. Die Auswahl an schönen Schriften ist fast grenzenlos. Aber wer die Wahl hat, hat die Qual. Die meisten Websitebetreiber sind keine Designer. Und wissen eben nicht, welche Schriften zusammen harmonieren und welche nicht. Das ist allerdings noch das kleine Problem. Das größte Problem ist: Viele Websiteinhaber nehmen Schriften, die in Fließtexten nur sehr schwer zu lesen sind. Beispiel: Es gibt Schriften, die sehr schlank gestaltet sind. Ich finde solche Schriften schick, sie sehen meist edel aus. Wie die Condensed-Schnitte mancher Schrifttypen. Die Schrift hier in den Überschrifte meiner Posts haben eine Condensed-Schrift. Sie ist schmal und schlank geschnitten. Aber: Im Fließtext eingesetzt, also in längeren Texten, sind solche Schriften eine Katastrophe. Besonders ältere Augen ab 50 haben größte Schwierigkeiten, solche Schriften zu lesen. Damit du siehst, was ich meine: Die Roboto zum Beispiel. Eine sehr gern und häufig genutzte Schrift, die auch in den Google-Fonts enthalten ist. Diese Schrift hat einen normalen Schnitt (wie dieser Text), aber auch einen, der sehr schmal läuft (Roboto Condensed). Im Bild unten links die Roboto, rechts die Roboto Condensed.
Roboto und Roboto Condensed
Schriften im Vergleich: Roboto und Roboto Condensed. Im Fließtext ist ein normaler Schriftschnitt wie Roboto regular einfacher zu lesen als eine schmal geschnittener Schrift wie die Roboto Condensed
Im Vergleich siehst du sehr gut, was besser zu lesen ist. Zum Stichwort Google Fonts ein wichtiger Tipp: Setze Google Fonts DSGVO-konform ein! Was das bedeutet und welche Auswirkungen es haben kann, wenn du die Google Fonts falsch anwendest, hab ich in diesem Artikel beschrieben. Dort liest du auch, wie du die Google Fonts richtig einsetzt.
Formatierungen, die die Schrift unleserlich machen
Unnötige Formatierungen sind genauso schlimm. Wenn du deine Website richtig gestalten möchtest, kannst du auch auf diesen Punkt achten. Was verstehe ich unter „unnötigen Formatierungen“? Auf einer Website mit Rezepten hab ich neulich einen Text lesen müssen, der in 6 längeren Absätzen mit Kursivschrift geschrieben wurde. Wie hier, diese schräg gestellt Schrift. Ich musste 3 mal lesen, um den Text erfassen zu können. Im längeren Fließtext ist Kursivschrift das reinste Augenpulver.
Eine andere Problemschrift: Script-Schriften
Script-Schriften sind Schriften, die aussehen wie von Hand geschrieben. Sie haben diesen menschlichen Touch, wirken nahbar und authentisch, bringen die emotionale Note in den Text, den Human Touch. Und zu vielen Branchen passen sie wunderbar. Zum Beispiel zu DIY-Angeboten.
Ich mag Script-Schriften. Aber: Sie sind oft miserabel lesbar. Kann man leider nicht anders sagen. Neulich ist mir genau das passiert: Eine wunderschön schnörkelige, weit geschwungene Schrift als Überschrift auf einer Website. Aber: Ich konnte einfach nicht auf dem ersten Blick erkennen, ob es sich beim f um ein f oder um ein s handelt. Ich kam ins Stocken. Ich musste mehrmals lesen. Es war ein s. Ungünstig, wenn man 5 Sekunden braucht, um überhaupt die Schrift entziffern zu können. Und dann weitere wertvolle Sekunden um zu erfassen, welches Produkt die werte Dame bietet. (Sorry an dieser Stelle, aber Scriptschriften sieht man zu 99,9 Prozent bei AnbieterInnen). Daher meine Empfehlung: Sei vorsichtig im Gebrauch von Scriptschriften.
Website richtig gestalten
Fehler Nr. 4
Zu kleine Schrift und ungünstiger Zeilenabstand
Du merkst: Zu Schriften gibt es viel zu schreiben.
Leider machen sich die wenigsten wirklich Gedanken um diesen so wichtigen Punkt. Denn was nützt das schönste Layout der Website, die tollsten Farben, die brilliantesten Bilder, der hilfreichste Inhalt – wenn ich Probleme habe, die Schrift zu lesen? Wenn du die Website richtig gestalten möchtest, achtest du auch auf die Schriftgröße und den Zeilenabstand. Häufig sehe ich auf Websites zu kleine Schrift und / oder zu enge Zeilenabstände. Das ist echt eine Herausforderung für jeden Leser. Und wenn du möchtest, dass wirklich alle Altersgruppen deine Inhalte sehen, dann lass auch mal ältere Augen deine Texte lesen. Die werden mit der Lesbarkeit nämlich weit mehr Probleme haben als deine 20 Jahre jüngeren Leser und Leserinnen. Auch ein falscher Zeilenabstand kann die Lesbarkeit beeinflussen. Ist der Zeilenabstand zu gering, wird das Lesen anstrengend. Ist der Zeilenabstand zu weit, besteht die Gefahr, dass sich dein Leser auf deiner Website verliert. Und es muss unnötig gescrollt werden.
Website richtig gestalten
Fehler Nr. 5
Komplizierter Satzbau macht das Lesen schwer
Die Wesite richtig gestalten mit dem richtigen Inhalt
Zugegeben: Jetzt hab ich mich sehr weit aus dem Fenster gehängt: Denn der Inhalt hat nicht wirklich etwas mit der Gestaltung der Website zu tun. Aber: Mit der Formulierung deiner Texte kannst du dazu beitragen, wie gern die Besucher deine Texte lesen. Durch zu komplizierten Satzbau kannst du das Lesen erschweren. Je einfacher die Texte zu lesen sind, desto besser für deine Website, weil deine Besucher dann länger auf deiner Website bleiben. Und das ist nebenbei bemerkt gut für das SEO. Auf dem PC oder Smartphone lesen ist anstrengend für die Augen. Und wenn du in einfachen Worten und kurzen Sätzen schreibst, machst du es deinen Lesern leichter. Du wirkst nicht schlauer oder professioneller, wenn du Thomas-Mann-Schachtelsätze baust oder Fachbegriffe wie ein Wissenschaftler anwendest.
Wenn du komplizierte Sätze bildest, passiert nur eins: Du wirst nicht verstanden. Worauf musst du also achten?
- Einfachheit: Kurze Sätze, kurze Wörter, überflüssige Fachbegriffe vermeiden Syntax: Pro Satz sollte nur ein Gedanke ausgedrückt werden. Das Wesentliche steht am am Anfang des Satzes.
- Prägnanz: viele Verben und die Anwendung von Metaphern machen den Text lebendig (und leichter verständlich)
Übrigens gibt es zur Ermittlung der Lesefreundlichkeit sogar eine wissenschaftliche Herangehensweise.
Der Flesch Reading Ease
Hast du schon mal was von Flesch Reading Ease gehört? Der Flesch Reading Ease (FRE) wird für die Lesbarkeit von Texten angewendet. Dazu wird der FRE aus verschiedenen Faktoren berechnet. Unter anderem die oben genannten. Der Grad der Lesbarkeit wird mit einem Index ausgedrückt. Diesen Index kannst du sogar überprüfen lassen. Gib hier deinen Text ein und du erhältst den Index: fleschindex.de/berechnen Ein hilfreiches Buch zu dem Thema ist das Buch „Deusch für junge Profis“ von Wolf Schneider. Lesenswert auch „Das Leben und das Schreiben“ von Stephen King. Wie, DER Stephen King? Der mit „The Shining“ oder „Carrie“? Genau. Dass ich Horrofilm-Fan bin kann ich nicht gerade sagen. Das Buch empfehle ich trotzdem gern.
Website richtig gestalten
Fehler Nr. 6
Zu wenig Kontrast
Ich bleibe bei den Schriften: Ungünstige Kontraste wirken sich besonders bei den Texten negativ auf die Lesbarkeit aus. Beispiel: Wenn die Farbe der Schrift auf deiner Website ein heller Grauton ist und der Text auf weißem Grund steht, dann ist der Kontrast zu gering. Besonders ältere Augen haben Schwierigkeiten, solche Texte zu lesen. Oder gelbe Schrift auf rotem Grund. Das geht gar nicht. Bei der Gelegenheit: Bestimmt achtest du vor dem Erstellen deiner Website auf deine Zielgruppe. Wenn du Studenten ansprichst musst du auf andere Dinge achten, als wenn du deine Website für Rentner konzipierst. Trotzdem weißt du nie, wie gut die Augen deiner Leser sind. Egal ob jung oder alt. Deshalb achte immer darauf, dass die Kontraste ausreichend sind. Du musst es deinen Leser ja nicht unnötig schwer machen. Auch wenn es megaschick aussieht…
Website richtig gestalten
Fehler Nr. 7
Zu viele unterschiedliche Farben
Wie du mit Farben deine Website richtig gestalten kannst
Wie häufig hab ich das gesehen: Websites, die aussehen wie zugeklebte Litfasssäulen. Hier ein Bild, da eine Grafik, viele unterschiedliche Farben: knallbunt und überladen waren die Websites. Die Elemente einer Website haben zwei Aufgaben:
- die Leser informieren und
- die Leser beim Lesen führen.
Form follows Function: Die Inhalte sollten immer der Maßstab sein für die Gestaltung. Das betrifft Texte, Grafiken, Fotos, Farben, Schriften, Weißräume – alle Gestaltungsmerkmale einer Website. Farben: Wenig Akzentfarben sind sinnvoll. Farbliche Akzente helfen beim Lesen und strukturieren die Seite. Biete Abwechslung und mach mit sparsam und klug eingesetzten Akzentfarben das Lesen angenehmer. Wenn du zu viel Bilder und Farben einsetzt, dann ermüdet das Auge schnell, der Leser ist in nullkommanix von der Reizüberflutung übersättigt und hat wenig Lust, weiterzulesen. Außerdem führt zu viel Bunt schnell dazu, dass der Leser das Wesentliche aus den Augen verliert. Du möchtest ja, dass deine Leser deine Texte lesen. Dein Produkt kaufen. Zu viel unterschiedliche Farben lenken dabei ab. Manchmal ist weniger mehr…
Fehler Nr. 8
Ungünstige Farben für dein Angebot
Welche Farben kannst du nehmen für dein Thema? Welche Farben passen? Es müssen nicht deine Lieblingsfarben sein. Im Gegenteil, häufig sind es völlig andere Farben als die Lieblingsfarben des Anbieters der Website. Die Farben müssen zum Produkt passen. Und sollten die Zielgruppe erreichen können. Denn die Website soll in erster Linie die potentiellen Kunden ansprechen. Als Designerin nehme ich mir Tools zur Hilfe. Damit kann ich gezielt bestimmte Farbkombinationen heraussuchen. Bevor ich mit der Gestaltung anfange, überlege ich, welche Farbbereiche zum Thema passen könnten und wo und wie ich die Farben einsetze. Sind eher kalte Farben sinnvoll? Braucht mein Thema eher warme Farben? Was soll rüberkommen: Verspieltheit, Information, wissenschaftlicher Hintergrund, unterkühlte Distanz, menschliche Wärme, möchte ich Appetit machen, die Sinne ansprechen…
Dann überlege ich Farbkombinationen. Ein schönes Tool für die Zusammenstellung von passenden Farbpaletten ist das Color-Wheel von Adobe color.adobe.com Übrigens: Farben werden im Web in einem 6-stelligen Hexadezimalcode angegeben. Dieser Code besteht aus insgesamt 6 Ziffern und/oder Buchstaben mit einem # davor. Die Farbe schwarz hat den Code: #000000 Die Farbe weiß hat den Code: #ffffff Ein helles Grau hat den Code: #f2f2f2 Such dir einige wenige oder auch nur 2 harmonierende Farben und setze sie gezielt ein.
Fehler Nr. 9
Fehlender Weißraum lässt deine Seiten unruhig wirken
Jeder kennt die Start-Seite von Google: Minimalistisch, pur, reduziert. Ein weißes, ziemlich leeres Feld. In der Mitte das Suchfeld, in das man sein Suchbegriff eingeben kann. Mehr nicht. Jeder weiß sofort, was er/sie dort auf der Seite machen soll: ein Suchbegriff eingeben. Nichts lenkt vom eigentlichen Inhalt ab. Keine Werbung links, keine nervigen Banner, keine Links. Alle weiteren Produkte von Google findet man – unauffällig und nicht störend – in der oberen rechten Ecke. Die gesamte Seite wirkt sehr aufgeräumt und klar. Das ist kein Zufall. Der Besucher der Seite soll sich voll und ganz auf seine Suche konzentrieren. Nichts soll ihn ablenken. Kein Link soll ihn auf eine andere Seite locken. Und das Suchfeld ist in der Mitte des Viewports, damit der sofort beim Öffnen der Seite zu sehen ist.
Erklärung: Viewport ist der sichtbare Bereich innerhalb deines Browserfensters, den du siehst, ohne scrollen zu müssen. Natürlich werden deine Seiten nicht so weiß sein, so leer. Du möchtest ja Inhalte zeigen, deine Besucher sollen wissen, wie du helfen kannst, was du anbietest. Aber: Wenn du deine Seite zupflasterst wie ein Litfaßsäule, dann wissen deine Leser nicht, wo sie anfangen sollen. Nichts gegen Litfaßsäulen. Ich finde, Herr Ernst Litfaß hatte damals eine tolle Idee mit seiner Säule. Sogar im Zeitalter des Internets ist eine Säule zum Anbringen von Nachrichtigen eine tolle Sache. Litfaßsäulen beleben Innenstädte. Nicht selten lese ich beim Warten auf eine S-Bahn an der Litfaßsäule und schau mir die Poster an. Leider denken viele Websitebetreiber, dass ihre Website dieselbe Aufgabe hat wie ein Litfaßsäule. Ein Grafikelement, ein Banner, eine Foto, ein Textblock neben dem nächsten.
Was fehlt ist der Weißraum. Was ist Weißraum?
Weißraum bezeichnet den Raum zwischen den einzelnen Elementen einer grafischen Gestaltung. Also der Raum zwischen 2 oder mehreren Textblöcken, der Raum zwischen dem Menü und dem Text, der Raum zwischen Fotos und Textblöcken und so weiter. Den Effekt von Weißraum kennt jeder von Bildern. Um wieviel toller fühlt sich der Piratenknabe beim linken Bild? Genau. Links ist der Weißraum größer als im rechten Bild, der Pfannkuchen hat mehr Abstand zum Jungen, also hat er es höher geworfen. Oder der Pfannkuchen ist rechts wieder runtergekommen…
Zeichnung Junge mit Pfanne, der einen Pfannkuchen hochwirft
Zwischen Junge und fliegendem Pfannkuchen ist ein Raum. Auch dies ist ein Beispiel von Weißraum, der die Beziehung zwischen den Motiven definiert. Genauso gibt es Beziehungen zwischen Text-Bild, Bild-Rand etc. Der sogenannte Weißraum ist wichtig für die Wirkung von Text und Bild.
Weißraum bringt also zusätzliche Aussagen. Eine gute Lesbarkeit einer grafischen Oberfläche (die lesbare Fläche eine Webseite ist auch eine grafische Oberfläche) wird durch den Weißraum gefördert. Der Weißraum hat mehrere Aufgaben:
- Weißraum sorgt für Aufgeräumtheit,
- Weißraum führt den Blick der Leser
- Weißraum trennt die einzelnen Bereiche einer Webseite
- Weißraum sorgt dafür, dass sich das Auge beim Lesen immer wieder ausruhen kann
Mein Tipp also: Versuche, Weißraum in deine Seiten zu integrieren. Sei sparsam mit grafischen Elementen oder Fotos. Und gliedere Texte in einzelne Abschnitte. Auch so entsteht der wichtige Weißraum. Konnte ich dir mit meinen Tipps helfen? Fallen dir weitere haarsträubende Designsünden auf Websites auf? Dann schreib hier im Kommentar. Falls du etwas mehr Hilfe brauchst:
