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:

<p>Dies ist ein Absatz Nummer 1</p>
<p>Dies ist ein weiterer Absatz</p>
<h2>Dies ist eine Überschrift</h2>

Für jedes Element gibt es eigene Tags. Formulare heißen <form>, Tabellen <table>, Bilder <img>, Listen <li>. Uns so weiter. Eigentlich recht simpel.

Dein Text und dein Bild wird direkt in die Seite hineingeschrieben. Das Bild wird in Form einer Verknüpfung sichtbar gemacht, indem man in die Seite den Dateinamen und den Pfad des Bildes schreibt. Und schwupp – schon kann die Datei vom Browser gelesen werden. Deine HTML-Dateien erstellst du auf deinem lokalen Rechner. Von dort lädst du die Datei auf deinen Hoster hoch. Und schon ist sie im Internet für jeden sichtbar.

Dies ist natürlich nur eine sehr einfache Erklärung und soll als Unterscheidung zum CMS reichen. 

Anders bei einem CMS wie WordPress: Hier werden die Informationen wie Texte und Bilder in einer Datenbank gespeichert. Und das CMS erstellt aus den Informationen automatisch eine lesbare HTML-Datei. Du brauchst also nicht mehr selber die HTML-Datei erstellen. Das übernimmt WordPress für dich mit Hilfe von programmierten Befehlen. Das wiederum heißt: Ohne Datenbank funktioniert WordPress oder ein anderes CMS nicht. 

Vorteil von HTML

Der größte Vorteil von HTML ist, dass die Seiten ratzfatz laden. Die Schnelligkeit der Ladezeit von HTML-Dateien läßt sich von keinem CMS toppen. Deshalb würde ich bei sehr kleinen Websites wie Webvisitenkarten einfache HTML-Dateien erstellen. Vorausgesetzt, diese Website soll nicht erweitert werden.  

Ein weiterer Vorteil von HTML ist seine Stabilität und Sicherheit. Updates sind nicht erforderlich. Und um die Sicherheit muss man sich keine Sorgen machen, ein Angriff auf die Seiten sind ziemlich ausgeschlossen. Und wenn doch: Einfach alle Seiten nochmal hochladen. 

Ich hatte dies bei einem Kunden erlebt. Völlig aufgelöst rief er mich eines Tages an: Auf seiner Domain war nur noch eine hässliche, schwarze Seite mit irgendwelchen merkwürdigen Aufforderungen zu sehen (welcher Inhalt, weiß ich heute nicht mehr). Per FTP-Programm hab ich mich auf den Webspace des Kunden eingeloggt: Irgendein Idiot muss die FTP-Zugangsdaten geknackt haben und hat dort seine eigene Startseite hochgeladen. Zum Glück waren die Zugangsdaten unverändert. Ich musste mich also nur einloggen und die störende Startseite löschen. Da ich alle HTML-Dateien von Kunden auf meinem Rechner speichere, konnte ich die Original-Startseite des Kunden einfach wieder hochladen und alles war gut. 

Nachteil von HTML

Wenn später weitere Seiten hinzu kommen, wird’s bei reinen HTML-Seiten kompliziert: Das Menü muss um den Link der neuen Seite erweitert werden. Und das bedeutet: Jede vorhandene Seite muss extra geöffnet und dort das Menü um den neuen Seitenlink ergänzt werden. Bei 3 Seiten ist die Arbeit überschaubar – aber schon bei 10 Seiten wird die Arbeit zeitraubend. 

Auch interaktive bzw. dynamische Elemente wie Kontaktformulare sind in HTML nicht möglich. Spätestens hier muss PHP ins Spiel kommen. Das gilt besonders, wenn du mit deiner Website ein Shop betreiben möchtest: Hierfür brauchst du definitiv ein CMS.

Zu guter Letzt: Natürlich muss man HTML-Kenntnisse haben, wenn man HTML-Websites verändern möchte. Einfache Texte ersetzen ist noch möglich, wenn man weiß, dass Texte zwischen zwei p-Tags stehen (Beispiel: <p>Hier ist Text</p>) oder in h-Tags (Beispiel: <h1>Eine Überschrift</h1>). Aber Fehler sind vorprogrammiert und alle anderen Änderungen sind noch komplizierter.

Vorteil eines CMS wie WordPress

Hier kommt der Vorteil eines CMS ins Spiel: Texte, Bilder, Menüs, Aussehen wie Farben oder Größen und so weiter lassen sich in einem CMS wie WordPress ratzfatz ohne besondere Kenntnisse ändern. Du öffnest die Stelle mit dem Text, der geändert werden soll. WordPress öffnet dir ein Fenster, einen so genannten Editor, der ein wenig an eine Seite des Schreibprogramms Word erinnert. Und hier machst du einfach deine Änderungen. Zack. Speichern, schließen, Seite aktualieren, fertig. Einmal angelernt und mit dem System vertraut, ist es kinderleicht, auf einer Website mit einem CMS Änderungen umzusetzen.

Natürlich hat ein CMS auch Nachteile: Ein CMS muss regelmäßig gewartet werden. Heißt: Regelmäßige Updates vom System, den Themes und den Erweiterungen sind wichtig, ebenso regelmäßige Backups. Und ein CMS wird langsamer geladen als eine HTML-Seite. Je nach Schnelligkeit der Internetverbindung kann das schon mal nerven…

Aber dieser kleiner Mehraufwand (der sich zum Teil automatisieren lässt) wird durch seine grandiosen Vorteile mehr als eingeholt: Das System ist skalierbar und lässt sich fast beliebig an alle möglichen Herausforderungen anpassen. Ein Menüpunkt muss rein? Nichts leichter als das: Mit einem Klick haben alle Seiten eine Erweiterung der Navigation. Ein Shop muss her? Kein Thema. Dafür gibt es diverse Erweiterungen. Wie das PlugIn WooCommerce. Eine sehr gute Erweiterung für alle Shopbetreiber. Ein Newsletter soll eingerichtet werden? Nichts leichter als das: Diverse Newsletteranbieter wie CleverReach, MailChimp, Active Campaign, Sendinblue, Rapidmail und viele andere lassen sich problemlos integrieren. Und auch SEO (Suchmaschinenoptimierung) ist sehr gut machbar mit dem PlugIn Yoast SEO. 

Was ich heute sage:

WordPress ist ideal für Laien

Jeder Laie kann seine Website selber bauen. Es gibt professionelle Vorlagen (Themes) für WordPress, die das Design der Website fast zum Kinderspiel werden lassen. Natürlich fast, denn etwas Überlegung, Konzeption und Strategie gehören dazu und Fehler kann man machen. Trotzdem: Das Design ist kein Hexenwerk. Und wenn du Hilfe brauchst: Lies einfach meinen Blogartikel:

„9 Fehler im Design einer Website“. 

Doch auch wenn du jetzt sagst: Ist mir alles zu viel Arbeit. Ich gebe die Website ab an eine Webdesignerin. Klar, das ist völlig legitim. Als Webdesignin wäre ich die letzte, die dir das ausreden würde 😉 Aber, mein Tipp: Es kann nicht schaden zu wissen, wie der Kram funktioniert. Damit du nicht völlig abhängig bist von einem Dienstleister. Ich sehe das so: Wie möchtest du ein Auto fahren, wenn du dich nicht traust zu tanken? Oder was machst du, wenn du wegen eines Plattens liegen bleibst? Da musst du dann auch ran, ob du willst, oder nicht 😉

Ich habe am eigenen Leib erfahren, wie einfach es ist, dieses System zu erlernen. Was ich auch gelernt habe: Wie schön es ist und welche Freiheit es bedeutet, wenn man zu jeder Zeit und von jedem Ort auf seine Website eigenständig zugreifen kann. Denn für einen Selbständigen ist heutzutage die eigene Website der Dreh- und Angelpunkt des Business. 

Weitestgehende Eigenständigkeit ist mein Motto. 

Constanze Straub

Constanze Straub ist Webdesignerin und Expertin für visuelle Kommunikation. Seit 2 Jahren zeigt sie BeraterInnen und Kreativen, wie sie ihre Website erfolgreich selber machen. Wenn Constanze Straub nicht am Mac sitzt oder an der Staffelei steht, heizt sie mit dem Fahrrad durch die Natur oder schmeißt silbergraue Stahlkugeln auf den Boulebahnen in und um Lüneburg.