Wenn man "'mal schnell" eine Website für einen selber, den Verein, die Band o.ä. braucht , die professionell aussehen soll, egal von welchem Gerät sie aufgerufen wird - was ist der beste (und schnellste) Weg?
Man kann fertige Website-Baukästen im Internet verwenden, mit denen man eine Website bauen kann, aber dieser Service kostet teilweise gar nicht so wenig und man ist in der Gestaltungsfreiheit eingeschränkt, denn oft werden nur bestimmte Standardlayouts angeboten.
Ich zeige euch einen Weg, wie ihr eure Website mit geringem Aufwand selber erstellen könnt!
Was bedeutet "responsive"?
Eines ist klar: eine Website wird nicht mehr nur über einen PC aufgerufen - das war früher einmal -, nein es können alle möglichen Clients sein: Mobile Phones, Tablets usw. Also muss die Website "responsive" sein, das Layout soll auf jedem Gerät gut aussehen.
In der Regel wird das durch Blöcke ("div") erreicht, die auf einem grösseren Display nebeneinander dargestellt werden, aber auf kleineren Displays nach unten umgebrochen werden.
Die Farbpalette ist wichtig
Webdesigner verwenden perfekt aufeinander abgestimmte Farben. Psychologische Aspekte spielen hier eine Rolle: Websites, die eher einen Technikbezug haben, z.B. für eine IT-Beratungsfirma, werden oft in Blautönen dargestellt. Bei Websites, die thematisch mit Natur zu tun haben (Gärtnerei, Waldkindergarten...), wird eher Grün eingesetzt.
D.h. man sollte sich überlegen, welche Farbpalette am besten zu der Website passt oder welche einem am besten gefällt. Dabei würde ich auf fertige Paletten zurückgreifen, bevor man sich die Mühe macht selbst was zu entwerfen (ausser man ist Webdesigner und kann es ;-) ).
Hier ein Tipp von mir: coolors.co.
Dann kann man beginnen, sich selbst eine (responsive) Website zu bauen - hier ist es z.B. gut beschrieben: www.elab2go.de.
Für die meisten kleinen Websites ist es ausreichend, alle Inhalte auf einer Seite zu packen. Oben kann das Menu platziert werden und beim Klicken auf einen Menupunkt wird nach unten gesprungen (auf einen sogenannten "anchor").
Geht es nicht einfacher?
Bevor man anfängt die Site von null auf selbst zu bauen, würde ich vorher nach frei verwendbaren Open Source Webtemplates suchen - und wenn man ein passendes findet, dieses zu verwenden bzw. anzupassen.
Bei html5up.net habe ich wunderschöne responsive Webtemplates gefunden, die man frei verwenden darf. Kompliment an den oder die Webdesigner!
Mit einem passenden Editor (ich verwende geany dafür) kann es dann losgehen: Template herunterladen, entpacken und die Inhalte nach eigenem Gusto anpassen. Nach kurzer Zeit hat man eine Website mit schönem responsiven Layout erstellt, aber ... !
Eine andere Möglichkeit ist, docsy zu verwenden, es ist primär für Code-Dokumentationszwecke gedacht, man kann damit aber auch ansprechende kleine Webprojekte umsetzen.
Böser Google - Abmahnungen drohen!
In (fast allen) aktuellen Templates werden sehr oft die Google Fonts verwendet, die von einem Server heruntergeladen werden. Was in Deutschland bzw. in der EU problematisch ist: entweder man lädt sich die Fonts herunter und installiert sie lokal auf dem eigenen Webserver oder Webspace oder man hat ein Problem.
Das Problem besteht darin, dass Google alle möglichen Daten sammelt u.a. auch, wer (welche IP-Adresse) die Fonts abruft - dieses Datensammeln soll verhindert werden. Weil die IP-Adresse ein personenbezogenes Datum darstellt, ist die Weiterleitung und Übermittlung in die USA ohne einer qualifizierten Einwilligung nicht erlaubt.
Es gibt hierzu ein Landgerichtsurteil. Um Abmahnungen zu verhindern dürfen Google Fonts nicht von Servern geladen werden. Am Besten sollte ganz auf sie verzichtet werden, denn es gibt genügend Open Source Fonts als Alternativen!
Mit diesem kostenlosen Tool kann geprüft wenden ob und wie Google Fonts auf Websites eingebunden wurden: https://fontsplugin.com/google-fonts-checker/.
Weitere Details zur Rechtslage findet man z.B. bei der IHK Nord Westfalen.
Und was jetzt?
Es gibt fertige Templates ohne Google Fonts, diese sind in der Regel aber schon etwas älter und beinhalten noch spezielle Abfragen, um welche Internet Explorer Version es sich handelt, um dann andere HTML-Kommandos auszuführen. Das ist aber m.E. nicht mehr zeitgemäss und der Internet Explorer wird nicht mehr so häufig als Standardbrowser gewählt.
Es gibt aber noch eine viel interessantere Möglichkeit...
Man hört es immer öfter, viele verwenden es auch schon, man kommt nicht sofort auf den Gedanken, weil man eine Website bis dato immer selbst gemacht hat - um es kurz zu machen: KI (künstliche Intelligenz) ist hier ein guter Weg!
Die KI soll die Arbeit machen
Ich habe mich für Claude von Anthropic entschieden (ich verwende das Model Opus 4.5). Claude erzielt bei der Code-Erzeugung mit diesem Model gute Resultate! Allerdings dauert es etwas und es werden ziemlich viele Tokens verbraucht. Wem das zu teuer wird, sollte Sonnet verwenden.
Ein Claude Code Pro Monatsabo für einen Monat kostet 20 Euro, damit kann man schon viel Code generieren und hat nicht so viel Wartezeiten, weil die Tokens (die für die Erstellung verbraucht werden) nicht ausreichen.
Ich habe die Option gewählt, es auf meinem Linux Notebook zu installieren, zusätzlich habe ich die Sprachsteuerung aktiviert. Damit kann man sofort beginnen der KI zu beschreiben, was man benötigt.
Ausserdem kann man einstellen, dass Claude meinen Chrome Browser ("fern-")steuert.
D.h. wir bewegen uns ab jetzt auf einer völlig anderen "Ebene" - nicht mehr auf HTML-Code und css-Befehls Ebene (Cascading Style Sheets), sondern auf der sprachlichen Ebene des Prompt-Engineerings!
Das hört sich in etwa so an: "Erzeuge mir für meinen Sportverein eine responsive Website, die keine Google Fonts verwendet, und binde die Fotos, die im Verzeichnis "Bilder" in meinem Home-Verzeichnis liegen in die Rubrik "Über uns" ein. (Man kann auch Google Fonts verwenden, Claude wird diese standardmässig aber DSGVO-konform lokal einbinden.)
Eines ist klar: wenn man nur relativ knapp beschreibt was man will, bekommt man eher eine "Standardlösung" (die man später aber noch weiter verfeinern lassen kann).
Besser wäre es, schon von Anfang an relativ genau zu beschreiben was man möchte. Das wird über den "Plan Mode" unterstützt. Claude denkt länger nach welche Teilschritte er dazu benötigt (die er später dann auch erzeugen wird). Den Plan muss man dann genehmigen, damit er umgesetzt wird. D.h. er generiert alle notwendigen Dateien in einer sinnvollen Struktur, startet einen Webserver und zeigt das fertige Resultat an.
Bestehende Websites updaten lassen
Das ist eine sehr interessante Funktion für alle, die ältere Websites haben, die sie verschönern wollen!
Einfach der Künstlichen Intelligenz die Referenz auf die alte Website mitteilen oder alle Dateien in ein lokales Verzeichnis kopieren und den Migrationsvorgang mit diesem Prompt starten: "Stelle die vorhandene Website im Verzeichnis my_website auf responsive um, und verwende dazu ein neues Template, welches sich in https://opensourcetemplates/abc befindet.". Das soll nur ein Beispiel sein, der Fantasie sind hier keine Grenzen gesetzt.
Es macht einen nachdenklich, was da zukünftig noch an Arbeit für Webdesigner übrig bleibt...
Nach meinen ersten Versuchen, finde ich diese Punkte wichtig:
- Möglichst genau beschreiben was man möchte oder alternativ den Plan-Mode verwenden.
- Es beschleunigt die Erstellung sehr, wenn man auf eine alte oder ähnliche Website referenziert. Dann kann z.B. die Struktur, die Inhalte oder nur das Layout übernommen werden. Das muss man der KI natürlich mitteilen.
- Falls man eine Farbpalette vorher schon ausgewählt hat, den Link auf diese Palette mit angeben. Evtl. verbunden mit dem Hinweis, welche Farben für welche Teile der Website verwendet werden sollen.
- Es ist ein interaktiver Prozess - Claude generiert immer wieder neuen Code und das Ergebnis sieht man nach einem Refresh gleich im Browser. Falls etwas erzeugt wurde, was nicht gut aussieht oder falsch ist, kann jederzeit auf ältere Versionen zurückgesprungen werden.
Ich hoffe, ich habe euch neugierig gemacht und ihr versucht es selber einmal. Die Ergebnisse sind wirklich erstaunlich. Viel Erfolg!