Eine gute Website ist wichtig – das spürt man spätestens beim zähen Navigieren auf komplizierten Webseiten oder wenn man einfach nicht findet, wonach man auf einer Webseite sucht.

Gute Webseiten zu bauen ist allerdings auch nicht gerade einfach. Deshalb gibt es dafür vollkommen zurecht eine eigene Branche.

Neue Tools auf Basis von künstlicher Intelligenz (KI) können die Arbeit beim Erstellen von Webseiten sowohl auf professioneller Ebene als auch für self-made Webseiten sinnvoll unterstützen.

Wie das geht, haben Ralph Piotrowski und ich uns im dritten Teil unserer Crashkurs-Reihe angeschaut. Einige Tipps und Workflows beschreiben wir euch in diesem Blogbeitrag.

3 Möglichkeiten, KI für Webseiten einzusetzen

Im Bereich der Texterstellung für Webseiten sind u.a. folgende Punkte hervorzuheben:

• Textgenerierung
• Textzusammenfassung (z.B. für Teaser oder auf Übersichtsseiten)
• Inhalts-Optimierung:
  • Grammatik- und Rechtschreibprüfung
  • Stilistische Verbesserungsvorschläge (z.B. einfachere und klarere Sätze)
  • SEO-Anreicherung: KI-basierte Tipps tragen dazu bei, Texte suchmaschinenfreundlicher zu gestalten und somit die Online-Sichtbarkeit zu verbessern (siehe unten)

Tipp: mehr dazu kannst du auch im Blogbeitrag zum Crashkurs KI in der Texterstellung nachlesen.

Auch die Integration von KI in Design, Bilder und Layoutprozesse ermöglicht Verbesserungen und Vereinfachungen:

• Individuelle Logos erstellen (z.B. Looka.com, logomakerr.ai)
• Bilder und Grafiken (z.B. DALL-E 3, Adobe Firefly)
• Designvorschläge mittels integrierter KI in Canva Magic Studio oder Adobe Sensei
• Layoutkonzepte (z.B. ChatGPT danach fragen, wie eine Website für ein beliebiges Thema aufgebaut sein sollte)

Tipp: mehr dazu kannst du auch im Blogbeitrag zum Crashkurs KI in der Bilderstellung nachlesen.

Kund*innen-Support ist wichtig und auch hier kann KI eine Rolle spielen:

• Sofortiger Support: KI-Chatbots und virtuelle Assistenten bieten unmittelbare Hilfestellung bei Anfragen
• Die Implementierung ist mittels Plattformen wie Dialogflow oder Microsoft Bot Framework möglich
• Wie das genau geht? Lass dir z.B. von ChatGPT eine Schritt-für-Schritt Anleitung geben, die auf deine Bedürfnisse und deine Vorstellungen zugeschnitten ist.

Zugänglichkeit und Inklusivität von Webseiten mit KI erhöhen

Wichtig ist für Webseiten, dass sie gut bedienbar sind und Informationen leicht zugänglich machen. Dazu gehören die Aspekte:

• Leistung: Wie kann die Ladegeschwindigkeit der Seite verringert werden?
• Zugänglichkeit: Wie hoch ist die Benutzer*innenfreundlichkeit der Webseite (z.B. ausreichende hohe Kontraste, Schriftgrößen, etc.)?
• Suchmaschinen-Optimierung (SEO): Wie gut wird die Webseite aufgefunden (durch Suchmaschinen wie Google oder Ecosia)

Diese Fragen lassen sich mithilfe des Analyse-Tools “Google Lighthouse” (kostenlos, keine KI) beantworten. Sollte sich daraus Verbesserungsbedarf ergeben, kann eine KI wie ChatGPT befragt werden, wo Einspar-Potenzial bei der Ladezeit zu finden ist (Leistung) oder bspw. welche Farbpalette für mehr Lesbarkeit und höhere Kontraste sorgt (Zugänglichkeit).

Möglichkeiten, wie KI für die Webseiten-Gestaltung eingesetzt werden kann

SEO erhöhen oder wie Webseiten besser auffindbar werden

SEO ist wie das präzise Beschriften eines Buchrückens in einer riesigen Bibliothek, damit Leser*innen genau das Buch finden können, das sie suchen, sobald sie den Katalog durchstöbern.

Die „Beschriftung des Buchrückens“ kann für eine  Website vorgenommen werden, indem:

• Überschriften und Zwischenüberschriften aussagekräftig sind,
• Schlagwörter in Texten und Überschriften enthalten sind,
• Bilder aussagekräftige Titel, Beschreibungen, Unterschriften und “Alt Text” (was angezeigt wird, wenn das Bild nicht angeschaut oder geladen werden kann) erhalten und die richtige Größe haben,
• Meta-Beschreibungen einer Webseite hinzugefügt werden.

Dabei kann KI unterstützen und Arbeit abnehmen: 

• erforderliche Texte an SEO angepasst erstellen
• Kontext (Text und Bild-Input) kann hochgeladen werden (z.B. mit GPT 4.0), um bessere Ergebnisse zu erzielen
• Feedback geben lassen: “Sind Überschriften, Titel, Beschriftungen usw. für hohe Auffindbarkeit von Suchmaschinen noch zu verbessern?”

Webseiten individualisieren mit KI-generiertem Code

Mit neuen KI-Tools gibt es nun auch die Möglichkeit, eine Website selbst zu programmieren oder um Code zu ergänzen, mit dem sich individuelle Vorstellungen umsetzen lassen. Auch wenn Code, also die Regeln und Algorithmen, die im Hintergrund dafür sorgen, dass ein Programm funktioniert oder eine Webseite Funktionen und Gestalt hat, technisch klingen mag – mit KI braucht dieser Code weder geschrieben noch verstanden werden, um ihn nutzen zu können.

Soll für eine Webseite beispielsweise ein Button oder ein Inhaltsverzeichnis erstellt werden und dabei bestimmte Vorstellungen berücksichtigt werden, dann kann hierfür etwa ChatGPT für den entsprechenden Code verwendet werden. Die KI wird darum gebeten, den Code zu generieren, der den zu formulierenden inhaltlichen und äußerlichen Vorgaben entspricht. Daraufhin wird html-Code (Inhalt und Funktion) und CSS-Code (Erscheinungsbild) ausgegeben. Es handelt sich dabei um zwei unterschiedliche Programmiersprachen. Beide werden anschließend auf der Webseite eingefügt (z.B. als “neues Modul” bei WordPress). Gegebenenfalls sind Anpassungen, bzw. Iterationen des Prozesses nötig, um das Ergebnis zu optimieren.

KI-Komplettlösungen für Webseiten

Für die Website-Erstellung gibt es auch KI-gestützte Komplettlösungen wie sitekick.ai oder mixo.io.

Unsere Empfehlung diesbezüglich lautet, für sich abzuwägen zwischen mehreren KIs mit spezifischen Funktionen (meist in kostenpflichtigen Abos), dafür aber als bequeme Komplettlösungen oder einem (zahlungspflichtigen) Abo für einen der KI-Allrounder wie GPT 4, dafür allerdings mit Mehrarbeit durch Hin- und Herkopieren zwischen KI-Tool und Zielort.

Vielfalt und tolle Ergebnisse treffen auf bestehende Herausforderungen

Abschließend sind wir einerseits überrascht von der Vielfalt der Möglichkeiten, wo KI bereits sinnvoll und effektiv eingesetzt werden kann, um Workflows in der Website-Erstellung zu verbessern und zu beschleunigen und begeistert davon, wie gut teilweise die Ergebnisse sind. Andererseits sind uns auch noch einige Schwachstellen aufgefallen und offene Probleme (z.B. KI-Komplettlösungen). Allerdings ist auch da vermutlich nicht die Frage, ob auf diesen Feldern noch eine Lösung gefunden wird, sondern vielmehr, wie lange es noch bis zur Lösung dauert.

On the other hand

Für eine kritische Auseinandersetzung mit dem Thema Künstliche Intelligenz, den Implikationen und sozialen sowie ökologischen Konsequenzen von KI haben wir eine Seite eingerichtet, die verschiedene weiterführende Ressourcen bereitstellt: https://agency-in-ai.org/on-the-other-hand/

Auch zu den vergangenen Crashkursen (KI in der Texterstellung und KI in der Bilderstellung) findest du eine Zusammenfassung auf dem socius Blog:

Texterstellung:

https://socius.de/gedanken-ki-text/

Bilddarstellung:

https://socius.de/crashkurs-bilderstellung-ki/

Die Aufzeichnung vom Crashkurs kann weiterhin erworben werden für 50€ pro Crashkurs, bzw. 120€ für alle drei Crashkurse zusammen. Weitere Infos findet ihr hier: https://agency-in-ai.org/ki-crashkurse/

Fragen oder Anmerkungen? Schreib Ralph und Burkhard per hello@agency-in-ai.org

Bildquellen: pexels.com & midjourney

sinnvoll zusammen wirken