Inhaltsverzeichnis
Dieser Beitrag beleuchtet die Stärken und Schwächen einer vollständig durch KI entwickelten Webseite und zeigt, wie Unternehmen von diesen Erkenntnissen profitieren können. Ein Leipziger Hausmeisterbetrieb in 2. Generation, der bisher keine eigene Webseite hat, bat um eine Einschätzung seiner vollständig KI-generierten HTML-Webseite. Wir untersuchen die Landingpage hinsichtlich Layout und Gestaltung, Programmierung und Website Compliance.
Layout und Gestaltung
In der heutigen digitalen Ära gewinnt die Nutzung Künstlicher Intelligenz (KI) bei der Entwicklung und Optimierung von Webseiten zunehmend an Bedeutung. Die HTML-Webseite in unserer Analyse macht einen seriösen, soliden und vertrauenswürdigen Eindruck – genau das, was man von einem etablierten Hausmeisterservice erwartet. Das Layout ist klassisch, übersichtlich und zielgruppengerecht. Es wirkt verlässlich, kompetent und professionell. Die erdigen, warmen Beige-/Creme-Töne passen sehr gut zum Thema „Hausbetreuung“. Die Kombination aus eleganter Serif-Schrift für die Hauptüberschrift und einer klaren Sans-Serif für den Rest funktioniert gut. Der Kontrast zwischen Text und Hintergrund ist ausreichend.
Die Statistik-Zeile unten rechts (30+ Jahre, 58 Objekte, 24/7) wurde gut platziert. Der Hero-Bereich ist klar strukturiert: Headline, klare Positionierung (Familienbetrieb in 2. Generation, Nutzerversprechen und prominenter CTA-Button mit modernem Gassmorphism-Effekt. Glassmorphism ist ein UI-Design-Trend, der durch transluzente „Milchglas“-Elemente, Hintergrundunschärfe und subtile weiße Ränder gekennzeichnet ist. Der Begriff wurde 2020 vom Designer Michał Malewicz geprägt, obwohl die Ästhetik bereits in früheren Systemen wie Windows Aero oder iOS 7 existierte.
Stärken
- Individuelles Layout im Gründerzeitstil
- Gute visuelle Hierarchie und Typografie
- Nostalgische Farbgebung und Stimmung
- Vertrauenssignale, klare Positionierung
- Guter Kontrast zwischen Text und Hintergrund
- prominenter CTA-Button im Glassmoriphism-Effekt
- Gute Lesbarkeit auch über dem Bild
Schwächen
- Kein Back-to-Top Button
- Kein Kontaktformular, Keine Animationen
- Kein mobiles Menü, nicht DSGVO-konform
Programmierung (Quellcode)
Eine vollständig KI-programmierte Webseite stellt einen Meilenstein in der Automatisierung und Effizienz dar, doch wie sauber ist der Quellcode? Der Code ist funktional und nach klassischen HTML-Standards aufgebaut, technisch jedoch stark verbesserungswürdig. Es wurden Google-Fonts und Google-Maps verwendet. Wirklich problematisch wird es allerdings bei den Bilddateien: Diese sind nicht als separate Bilder in einem Unterordner hinterlegt, sondern direkt als Text im HTML-Code.
So sieht das im Quellcode aus:
background-image: url(‚data:image/jpeg;base64,/9j/2wBDAAQDAwQDAwQEAwQFBAQFBgoHBgYGBg0JCggKDw0QEA8NDw4RExgUERIXEg4PFRwVFxkZGxsbEBQdHx0aHxgaGxr/...');
Das ist ein extrem langer String (mehrere hundert Zeilen), der das gesamte Bild verschlüsselt enthält. Die riesiges Base64-Bilder direkt im CSS ergeben eine Dateigröße von über 4 MB. Die Seite lädt dadurch deutlich langsamer, der Browser kann das Bild nicht gut zwischenspeichern und der Eigentümer kann das Bild ohne Programmierkenntnisse nicht einfach austauschen.
Base64 ist nur sinnvoll bei sehr kleinen Icons oder Grafiken (z. B. < 5–10 KB). Bei einem großen Hero-Bild ist es ein klarer Fehler und einer der Hauptgründe, warum die Seite langsam lädt.
Stärken
- Korrekte Grundstruktur
- Verwendung von <nav>, <header>, <footer> und <section>
- Sinnvolle ID- und Klassen-Namen
- Grid und Flexbox werden gut eingesetzt
- Media Queries für Responsivität sind vorhanden, aber Navigationsmenü und Öffnungszeitenbox (mittlere Section) sind nicht responsive
Schwächen
Bereich | Problem | Schweregrad | Empfehlung |
SEO / Semantik | Viele Bilder ohne alt-Attribute (Hero, Galerie, Logos) | Hoch | alt-Texte hinzufügen |
Responsivität | Navigationsmenü und Öffnungszeitenbox nicht responive | Hoch | Mobiles Nav-Menü; Öffnungszeitenbox responsive einrichten |
SEO / Semantik | Keine <main>-Landmark, fehlende ARIA-Rollen bei Modal-Links und Buttons | Mittel | role=“dialog“, aria-modal=“true“ |
Performance | Riesiges Base64-Bild direkt im CSS (über 4 MB Dateigröße!) | Sehr hoch | Externes Bild + loading=“lazy“ |
Validität | Mehrere <style>-Blöcke und Inline-Styles über den ganzen Code | Mittel | Externe CSS-Datei |
Validität | Verwendung von onclick im HTML (z. B. Modal-Links) | Mittel | Event Listener in JS |
SEO / Semantik | Fehlende strukturierte Daten (Schema.org für LocalBusiness) | Mittel | JSON-LD hinzufügen |
DSGVO | Google Fonts ohne display=swap und Preload | Hoch | Besser: Lokal hinterlegen |
DSGVO | Google Maps | Hoch | Besser: Lokal hinterlegen |
Sicherheit | Kein rel=“noopener“ bei externen Links | Niedrig | Hinzufügen |
Website Compliance
Im Footer der Webseite befinden sich Links zu Impressum, Datenschutz und AGB. Es besteht aktuell keine gesetzliche Pflicht, Allgemeine Geschäftsbedingungen (AGB) zu verwenden. Unternehmen dürfen frei entscheiden, ob sie vorformulierte Vertragsbedingungen einsetzen oder Verträge individuell aushandeln. Ein Verweis auf das Telemediengesetz (TMG) im Impressum einer Webseite ist seit dem 14. Mai 2024 rechtswidrig, da das TMG durch das Digitale-Dienste-Gesetz (DDG) abgelöst wurde. Dies gilt als fehlerhaftes Impressum, da es einen veralteten und nicht mehr existenten Rechtsrahmen zitiert. In der KI-generierten Datenschutzerklärung steht geschrieben, dass die Webseite ausschließlich technisch-notwendige Cookies verwendet, wobei Google Fonts und Google Maps nicht zu diesen gehören. Die Aussage ist inhaltlich falsch.
Zusammenfassung
Es ist eine sehr solide, glaubwürdige Website für einen lokalen Hausmeisterservice in 2. Generation. Sie macht nicht den Fehler, zu modern oder verspielt zu sein – das wäre hier kontraproduktiv. Der Hero-Bereich ist klar strukturiert: starke Headline, klare Positionierung (Leipzig-Sellerhausen, seit 1995), Nutzenversprechen und prominenter CTA-Button mit modernem Gassmorphism-Effekt. Glassmorphism ist ein UI-Design-Trend, der durch transluzente „Milchglas“-Elemente, Hintergrundunschärfe und subtile weiße Ränder gekennzeichnet ist.
Technisch handelt es sich um eine klassische HTML-Webseite, jedoch mit groben Verstößen gegen die aktuellen HTML-Standards. An Website-Compliance wurde gedacht, aber nur mangelhaft umgesetzt. Es fehlt auch ein zwingend notwendiger Cookie-Banner bei Google Diensten und externen Einbindungen.
Wenn Sie sich auch eine Webseite mit KI erstellen ließen und überprüfen lassen möchten, ob diese DSGVO-konform ist, kontaktieren Sie uns telefonisch unter 0341 – 248 667 27 oder per Mail an info@agentur-fuer-digitale-medien.de. Wir freuen uns auf Ihre Anfrage!
FAQ – Häufig gestellte Fragen
KI-generierter Code ist nicht automatisch sicher. Zwar arbeiten KIs wie ChatGPT oder spezialisierte Assistenzsysteme sehr präzise, doch können sie unbemerkt kritische Schwachstellen oder veraltete Sicherheitsstandards in den Code einbauen. Der Quellcode muss zwingend manuell überprüft werden.
Daher ist es wichtig, regelmäßige Sicherheitsüberprüfungen durch Fachleute durchzuführen und bewährte Sicherheitsmaßnahmen zu implementieren, um die Webseite vor Angriffen zu schützen.
KI-programmierte Webseiten können datenschutzkonform sein, wenn sie am aktuellen Rechtsstand ausgerichtet sind und die geltenden Datenschutzgesetze einhalten, etwa durch transparente Datenverarbeitung, Einholung von Einwilligungen und Sicherstellung der Datensicherheit. Es ist jedoch wichtig, dass die Entwickler und Betreiber der Webseiten die jeweiligen Anforderungen sorgfältig umsetzen und regelmäßig überprüfen, um Datenschutzverstöße zu vermeiden.
Diese Frage lässt sich nicht pauschal beantworten. Durch den Einsatz von KI im Unternehmen bei der Erstellung oder dem Relaunch einer Webseite können sich Kosteneinsparungen erzielen lassen, indem viele zeitaufwändige Prozesse vom Unternehmen selbst erledigt werden. KI-Tools können beispielsweise Design-Vorschläge bringen, Inhalte generieren, Bilder optimieren und seit neustem auch funktionale Programmierungen liefern. Wir empfehlen vor der Veröffentlichung unbedingt eine Experten-Prüfung, um eventuelle Mängel zu beseitigen, da die tatsächliche Website-Qualität von der Qualität der Eingaben und der jeweiligen KI-Software abhängig ist, weshalb eine manuelle Überprüfung und Feinjustierung oft sinnvoll bleibt, um optimale Ergebnisse zu erzielen.
Die tatsächliche SEO-Qualität hängt stark von der Qualität der Eingaben und der jeweiligen KI-Software ab, weshalb eine manuelle Überprüfung und Feinjustierung oft sinnvoll bleibt, um optimale Ergebnisse zu erzielen. Dieser Beitrag untersuchte eine Claude-programmierte Webseite auf HTML-Basis. Im Quellcode enthalten waren klassische SEO-Standards wie Meta-Titel und Beschreibung, es fehlen jedoch strukturierte Daten für Google und KI-Suche sowie die alt-Attribute der verwendeten Bilder.
