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:
von ConstanzeStraub | Dez. 1, 2020 | Allgemein, Anleitungen, WordPress
Den Aufbau einer Website zu starten ist einfacher als du denkst.
Diese Tipps helfen dir, dein Business online zu stellen
Du möchtest deine Website selber machen.
Du weißt, dass du mit einer Website noch mehr Kunden gewinnt.
Noch mehr Reichweite aufbaust.
Super, eine gute Idee.
Wenn du noch grübelst: Das schaff ich nie, ich bin technisch unbegabt…
Vergiß deine Glaubenssätze.
Was ich vor 15 Jahren dachte:
Eine Website selber machen? Nie im Leben! Ist mir viel zu technisch…
In dieselbe Posaune pustete mein ehemaliger Chef aus der Werbeagentur. Er und sein Partner hatten die Agentur an den Nagel gehängt. Ich wurde arbeitslos und mein Chef hat in seiner Wohnung allein weitergemacht.
Tja, wohl eins der ersten Home-Offices.
Kurze Zeit später hab ich ihn nach seiner Website gefragt: „Ich brauch keine“, so seine Antwort.
Okay, dann brauch ich sowas auch nicht. Schließlich stand das Internet noch in den Kinderschuhen. So hab ich mich in meiner bequemen Verweigerungshaltung ausgeruht.
Aber irgendwie mussten Kunden her.
Also hab ich mich einige Zeit später bei einem VHS-Kurs angemeldet: HTML für Anfänger. Ich hab Sachen gelernt wie HTML und CSS und viele Buchstaben in spitzen Klammern. Alles böhmische Dörfer für mich, ich war genervt.
Wo ist das denn bitte schön kreativ?
Hartnäckig wie ich bin hab ich unzählige Fachbücher durchstöbert. Las auf schlauen Internetseiten (das Internet wurde mit mir nicht nur älter, sondern auch schlauer) und bald war sie online: meine 1. Website.
Grauenhaft. Aus heutiger Sicht.
Mach es einfacher als ich und bau spielerisch deine Website selber
Nie war es so einfach wie heute, eine eigene Website selber zu machen! Du brauchst keine HTML-Kenntnisse (wie ich damals), du musst nichts programmieren.
Heute gibt es solche Systeme wie WordPress.
Was ist WordPress?
Einfach gesagt ist WordPress ein Haufen von Dateien, in die nette Menschen Programmierzeilen geschrieben haben, damit andere nette Menschen ohne Programmierkenntnisse daraus eine eigene Website bauen können. Bei WordPress ist die Programmiersprache PHP.
PHP kann man lernen und es ist nicht soooo schwierig. Da das aber kaum jemand möchte, wurde das System so gebaut, dass du dich im System anmelden kannst, um dort deine Inhalte zu verbreiten (Texte, Bilder und Videos, deine Dateien eben).
Viel brauchst du nicht für deine eigene Website: Du brauchst vor allem ein PC (oder ein Notebook), ein Internetzugang und ein Provider bzw. Hoster. Ein Hoster ist die Firma, die die Dateien deiner Website auf einem Rechner (Server) speichert und veröffentlicht, also im Internet für alle erreichbar macht.
Dann brauchst du natürlich die Software WordPress, ein gutes Theme und ein Programm, mit dem du deine Dateien auf deinen Hoster hochladen kannst. Das ist alles.
Du bekommst jetzt Schweißperlen auf der Stirn? Immer mit der Ruhe – schließlich fährst du Auto, ohne zu wissen, wie du den Motor austauschen kannst… Lies weiter, ich erkläre alles Schritt für Schritt.
Die verdammte Angst vor der Technik – alles Mumpitz
Schritt 1
Hoster suchen
Am besten wählst du einen Hoster, der für WordPress geeignet ist. Denn nicht jeder bringt alle sinnvollen Voraussetzungen mit. Zu dem Thema gibt es reichlich Empfehlungen und unterschiedliche Meinungen, die ich in meinem Kurs und dem Workshop ausführlich erläutere. Ich mache es hier kurz:
Mein Hoster ist allinkl.
Viele Webautoren empfehlen allinkl wegen des super Preis-Leistung Verhältnis und dem kundenfreundlichen Support.
Schritt 2
Domain überlegen
Überlege dir eine sinnvolle Domain. Ob du deinen eigenen Namen nimmst oder einen Fantasienamen bleibt dir überlassen. Meine Grafikdesign-Seite heißt consenza-design. Manche Marketingexperten raten dazu, einen Kunstnamen zu wählen, andere wiederum dazu, den eigenen Namen zu nehmen.
Darauf kann ich an dieser Stelle nicht eingehen. Ist sicher Geschmacksache.
Update 2022: Heute würde ich auf jeden Fall den Eigennamen wählen.
Welche Domainendung?
Als Domainendung nehme ich grundsätzlich de. Natürlich ist auch com möglich, für de gibt es aber einige gute Gründe. Da ich in Deutschland lebe, werden wahrscheinlich die meisten davon ausgehen, dass ich eine de-Domain habe. Und eine Länderdomain ist vertrauenswürdiger als .net oder .info oder was auch immer.
Wenn du Müller oder Schröder heißt: Nimm auf keinen Fall eine Domain mit Umlauten. Also bitte mueller. Oder schroeder. Seit 2002 sind Umlaute zwar möglich – trotzdem sieht man sie selten. Nicht ohne Grund: Umlautdomains haben einige Nachteile – technische, psychologische und marketingstrategische Nachteile.
Okay, weiter:
Schritt 3
Datenbank, Subdomain und FTP-Zugang anlegen
Vorweg: allinkl bietet wie viele andere WordPress-Hoster die sogenannte 1-Klick-Installation von WordPress an. Das heißt: Die Installation funkioniert quasi automatisch. Meine Empfehlung: Mach die Installation manuell. Dann lernst du von Anfang an, wie alles läuft (später wirst du eh auf deine Dateien manuell zugreifen müssen). Du siehst, welche Dateien WordPress umfasst. Du weißt, was alles in deiner manuellen Installation enthalten ist. Es kann auch sein, dass du später mal die ein oder andere Datei öffnen musst. Dann hast du schon mal einen Blick dafür.
Weiter mit allinkl: einloggen. Leg dir hier eine Datenbank an, eine Subdomain und einen FTP-Zugang. Alle Daten (Benutzername, Passwörter, vom Provider vorgegebene Daten etc.) schön ordentlich aufschreiben. Und ich meine ORDENTLICH!
Wenn man beim Notieren der Daten schludert, verliert man schnell die Übersicht. Ergebnis: Frust.
Hab ich selbst erlebt. Aus meiner eigenen Erfahrung weiß ich: Wenn du hier nicht gewissenhaft bist, passieren schnell Fehler. Eher als dir lieb ist liest du deine schnellen Skizzen falsch ab und zack – eine Fehlermeldung. Dann kommt dieses doofe weiße Fenster von WordPress mit dem gefühlten Mittelfinger…
Oder alles war auf einem kleinen Zettel notiert. Der natürlich, kennt man ja, sich irgendwann selbständig macht.
Und unter das Sofa flattert… Das Geschrei ist groß…
Datenbank anlegen
Datenbank, uuuh, was ist das denn nun wieder…
Hier werden einfach gesagt alle Informationen gespeichert, also alles, was du in deiner WordPress-Website schreibst und tust. Ohne Datenbank kein WordPress.
Keine Sorge: Das Anlegen der Datenbank ist kinderleicht.
Die Datenbank befindet sich bei allinkl in der technischen Verwaltung. Im sogenannten KAS. Wie die Bezeichnungen bei anderen Hostern sind ist meist unterschiedlich. Manchmal muss man etwas suchen, dann könnte dieser Punkt im Bereich „Hosting“ oder „Webspace“ liegen. Einfach etwas schauen. Hast du den Link „Datenbank“ gefunden, gehst du einfach auf „Datenbank anlegen“ oder „neue Datenbank“ (je nach Hoster). Dort erhältst du meist vom Hoster den Datenbanknamen.
Das Passwort vergibst du selber. Speichern, fertig.
Datenbankname, Benutzername und Passwort gut notieren, das brauchst du nachher, wenn du Datenbank und WordPress verbindest (die eigentliche Installation von WordPress).
Und was ist nun eine Datenbank?
Stell dir eine Datenbank vor wie ein Regal voller Bücher. Und immer, wenn jemand eine deiner Seiten auf deiner Website besucht, greift er oder sie quasi ins Regal, holt sich ein Buch raus und liest darin…
Subdomain anlegen
Warum Subdomain?
Ich installiere mein WordPress immer auf eine Subdomain und leite dann später auf die richtige Domain weiter. Auf der Subdomain kann ich in Ruhe alles ausprobieren, ohne eine Baustellenseite vorzuschalten, was ich lästig finde.
Wie gesagt, das ist meine Vorgehensweise, du kannst es selbstverständlich auch mit einer Baustelle machen und direkt auf deiner richtigen Domain alles installieren. Besucher sehen dann nur eine Platzhalterseite. Was du an der Website machst, siehst hier nur du.
Was ist eine Subdomain?
Ein Subdomain ist ein zusätzliches Verzeichnis (Speicherplatz) auf deinem Webspace. Sie ist ein Teil der Domain, wird von Google aber als eigenständige URL betrachtet (darum sollte man bei einer Subdomain immer überlegen, ob sie aus SEO-Gründen sinnvoll ist). Eine eigenständige URL ist zum Beispiel sinnvoll, wenn ein Shop von der Website ausgegliedert werden soll.
Eine Subdomain erkennst du daran, dass vor der Domain (vor dem 1. Punkt von links gelesen) eine weitere Bezeichnung steht (die du frei wählen kannst).
Beispiele:
shop.meinedomain.de
angebot.meinedomain.de
kurs.meinedomain.de.
FTP-Zugang anlegen
Warum FTP-Zugang?
Einen FTP-Zugang brauchst du, um deine WordPress-Dateien auf deinen Webspace bei allinkl hochzuladen. Wie das Hochladen geht, erkläre ich in Schritt 4. Den FTP-Zugang richtest du ebenso wie Datenbank und Subdomain bei deinem Hoster ein. Das ist ebenso einfach wie das Anlegen einer Datenbank.
Diese Schritte sind deine Grundlagen für die WordPress-Installation. Sei hier bitte gewissenhaft und notiere alle Zugangsdaten, Benutzernamen, Passwörter usw. gut lesbar. Siehe oben.
Mein Tipp:
Leg dir ein Dokument an, meinetwegen Word oder Excel oder eine Google-Tabelle (kann ich sehr empfehlen). Und tipp hier all deine Daten rein. Dann hast du sie immer griffbereit und kannst per Copy & Paste deine Daten während des Installationsprozesses eingeben. So gibts kein Geschrei, wenn wegen eines blöden Tippfehlers irgendwas nicht klappt. Oder wenn sich der Notizzettel in Luft aufgelöst hat…
Schritt 4
FTP-Programm einrichten
Du brauchst ein Programm, mit dem du dich auf dein Webspace einloggst, damit du deine Daten hochladen kannst.
Es gibt verschiedene FTP-Programme. Gute sind FileZilla und Cyberduck. Ich nutze FileZilla. Den gibts kostenlos für Windows und Mac.
Wenn du das Programm auf deinem Rechner installiert hast, öffnest du das Programm. Unter >Datei >Servermanager öffnet sich ein Fenster – der Servermanager eben. Hier klickst du links auf >Neuer Server. Du legst also einen Server an. Im Feld rechts tippst du die Daten ein, die du von deinem Hoster erhalten hast bzw. dein Passwort, dass du wahrscheinlich selber erstellt hast.
Schritt 5
WordPress herunterladen und Dateien auf Webspace laden
Nun ist WordPress an der Reihe. Hol dir die aktuellste Version direkt von wordpress.org (hier die deutsche Seite). Bitte nicht WordPress.com, das ist eine andere Geschichte. Ist jetzt nicht wichtig, erwähn ich nur der Vollständigkeit halber.
Lad dir also dein WordPress runter.
Endpacke die gezippte Datei.
WordPress installieren ist wirklich einfach und auch für Einsteiger kein Problem. Ganz ehrlich: Das größte Problem ist immer die eigene Einstellung. Das häufigste Hindernis, etwas anzugehen, was wir nicht gewohnt sind, ist die eigene Angst vor etwas Neuem.
Kopfkino eben.
Ich weiß, wovon ich spreche: Jahrelang habe ich mich mit Blockaden herumgequält. Bis es eines Tages bei mir „Pling“ machte. Von einer Minute zu anderen wurde mir klar, dass ich die Blockade über Jahre selber aufgebaut hab. Aber das ist ein anderes Thema, wenn du Lust hast mehr zu lesen: Darüber schreibe ich bestimmt ein Artikel.
Nun öffnest du dein FTP-Programm und stellst die Verbindung zu deinem Hoster her (hier: allinkl). Oben links kannst du den Server auswählen, gehst auf „Verbinden“, nun siehst du im Fenster unten rechts das Ordnerverzeichnis von deinem Webspace. Nun machst du folgendes:
du wählst auf der rechten Seite des Fensters den Ordner aus, der den Namen deiner angelegten Subdomain hat
auf der linken Seite vom FileZilla-Fenster wählst du dein WordPress-Ordner aus, klickst ihn an, damit du die Dateien darin siehst, wählst alle Dateien darin aus und klickst „hochladen“ an (im Kontextmenü, das sich mit der rechten Maustaste öffnet). Achte darauf, dass du alle Dateien auswählst.
Die Dateien werden hochgeladen, das dauert jetzt ein paar Minuten, je nach Schnelligkeit deiner Internetverbindung.
Schritt 6
WordPress installieren
Die WordPress-Dateien sind hochgeladen. Damit ist WordPress aber noch nicht fertig installiert. Nun muss die Verbindung zur Datenbank hergestellt werden.
WordPress ist berühmt für seine einfache Installation. Denn du wirst Schritt für Schritt durch den Prozess geleitet. Alles, was du jetzt tun musst: stur deine Zugangsdaten eintragen, die du bei allinkl erhalten bzw. gewählt hast. Und wenn du keinen Tippfehler machst, sollte dies ganz einfach klappen.
gib den Namen deiner Subdomain im Browser ein (also z.B. test.majameier.de)
Hinter dem .de gib ein Schrägstrich ein (Slash: /), anschließend „admin“. Falls du den wordpress-Ordner direkt hochgeladen hast, ohne ihn zu öffnen, muss du noch „wordpress“ eintippen. Also „test.majameier.de/wordpress/admin.
es öffnet sich das selbsterklärende Fenster, in denen du deine Daten eingibst. Jetzt wird dir auch klar, warum ich dir empfohlen habe, alles fein säuberlich in einem Dokument zu notieren 😉
War alles erfolgreich, gratuliert dir WordPress und du kannst dich mit einem selbstgewählten Passwort einloggen.
Schritt 7
Theme installieren
Damit WordPress für dich anwendbar ist, brauchst du noch ein Theme. Ein Theme ist quasi Werkzeugkasten und schicke Vitrine in einem. Beides macht deine WordPressinstallation erst zu dem, was du später siehst: zu einer schicken und funktionsfähigen Website mit allem Zipp und Zapp.
Mein Tipp: Such dir ein Premium-Theme.
Der Nachteil: Es gibt tausende Themes. Wer die Wahl hat, hat die Qual. Die meisten gibt es kostenlos. Investiere ein paar Euro und nimm ein Premiumtheme. Diese kostenpflichtigen Themes werden regelmäßig gewartet und erhalten ständig Updates. Das ist wichtig, damit deine Website immer auf dem neuesten technischen Stand ist. Das betrifft vor allem die Sicherheit deiner Website.
Außerdem gibt es Themes mit einem sogenannten PageBuilder. Diese Builder erleichtern dir den Bau deiner Website erheblich, weil du auf der Oberfläche deiner Website arbeiten kannst. Du siehts also live während der Eingabe, was sich auf deiner Website ändert.
Klare Empfehlung: Das Thema Divi
Ich nutze das bekannte Theme Divi von Elegante Themes, ein bekannter US-amerikanischer Themehersteller. Das Theme ist technisch ausgereift und hervorragend, arbeitet mit allen wichtigen Plugins (Erweiterungen) zusammen und macht deine Website damit enorm leistungsfähig.
Aber das beste: Der Bau deiner Website wird damit zum Kinderspiel.
Fertige Layoutvorlagen bietet das Theme ausserdem, du kannst also sofort loslegen.
Ein Wort zum „sofort loslegen“: Der Aufbau einer Website erfordert schon einige Vorüberlegungen. Es ist sinnvoll, schon um sich nicht zu verzetteln, sich vor dem Bau einer Website ein Konzept zu machen. Das spart jede Menge Zeit und Nerven.
Ich spreche aus Erfahrung.
Schau hier. Lies meine Anleitung, wie du ganz unkompliziert ein Konzept für deine Website erstellst.
Wenn du bis hierhin gelesen hast, bist du schon ein ganzes Stück weiter. Hau rein und vergiss nicht:
Es gibt nix Gutes, ausser man tut es.
Falls du noch mehr Hilfe brauchst: Ich biete ein Workshop an, in dem ich mit dir zusammen WordPress und das Theme installiere. Außerdem bauen wir darin das Grundgerüst deiner Startseite. Schau hier:
