Sind KI-gebaute Websites mobiltauglich? So prüfen Sie es
Sind KI-gebaute Websites mobiltauglich? So prüfen Sie es
Generierte Layouts passen sich der Bildschirmbreite an, ein Zugo-Build kommt also nutzbar auf dem Telefon an und nicht als geschrumpfte Rechnerseite. Was kein Builder verspricht: dass es mit Ihren Inhalten gut aussieht. Lange Überschriften, breite Tabellen und schwere Bilder brechen Telefonseiten, und alle drei kommen von Ihnen.
Die Mehrheit Ihrer Besucher sieht die Seite einhändig, unterwegs, auf einer schlechteren Verbindung als der, auf der Sie getestet haben. Genau um die Prüfungen davor geht es hier.
Was heißt mobiltauglich eigentlich genau?
Es sind fünf getrennte Eigenschaften, die im Alltag zu einem Wort zusammengezogen werden, und sie fallen unabhängig voneinander aus.
Das Layout fließt um, statt Zoomen zu verlangen. Der Text ist ohne Vergrößern lesbar. Bedienflächen sind groß genug und weit genug auseinander, dass ein Daumen die richtige trifft. Nichts lässt sich seitwärts schieben. Und die Seite lädt über Mobilfunk in erträglicher Zeit, nicht nur im Büro-WLAN.
Eine Seite kann die ersten vier Punkte erfüllen und am fünften deutlich scheitern. Das ist sogar der Normalfall bei einer hübschen generierten Seite mit einem unkomprimierten Titelbild. Behandeln Sie die fünf als Prüfliste, nicht als ein einziges Urteil, denn die Behebung sieht bei jedem Punkt anders aus.
Kommen generierte Builds schon anpassungsfähig an?
Ja, im strukturellen Sinn. Die Layout-Logik eines Builds ist darauf angelegt, sich anzupassen: Spalten stapeln sich, die Navigation klappt zusammen, Text fließt um. Das ist der Normalzustand und keine Einstellung, die Sie aktivieren müssen.
Was der Build nicht vorhersehen kann, ist Ihr Material. Ein Produktname, der in eine Überschrift am Rechner passt, bricht auf dem Telefon in drei Zeilen. Eine Vergleichstabelle mit sechs Spalten hat auf einem schmalen Bildschirm keinen Platz. Ein Foto, das am Rechner scharf wirkt, ist ein Vielfaches dessen, was ein Telefon braucht.
Im Deutschen kommt eine Eigenheit dazu, die englischsprachige Ratgeber nicht kennen: zusammengesetzte Substantive. Wörter wie Terminvereinbarung, Datenschutzerklärung oder Ansprechpartnerin sind lang und lassen sich nicht umbrechen. Sie sind die häufigste Ursache für eine Überschrift, die auf dem Telefon zerfällt, und für einen Knopf, dessen Beschriftung über den Rand hinausläuft.
Jeder Build wird vor der Übergabe in einer Sandbox geöffnet, was nicht startet, wird nicht ausgeliefert. Diese Prüfung bestätigt, dass die Seite lädt. Sie öffnet die Seite nicht auf einem Telefon und beurteilt nicht, ob die Überschrift unschön umbricht.
Was geht auf dem Telefon am häufigsten kaputt?
Vier Dinge, und sie wiederholen sich über fast alle Builds hinweg.
| Symptom | Übliche Ursache | Was Sie ändern lassen |
|---|---|---|
| Die Seite lässt sich seitwärts schieben | Breite Tabelle, festes Bildmaß oder eine lange Zeichenkette ohne Leerzeichen | Die Tabelle soll in ihrem eigenen Kasten scrollen |
| Die Überschrift zerfällt | Text für Rechnerbreite geschrieben, dazu lange Komposita | Kürzere Überschrift oder kleinere Schriftgröße auf schmalen Bildschirmen |
| Knöpfe sind schwer zu treffen | Bedienflächen dicht nebeneinander in einer engen Reihe | Größere Flächen mit mehr Abstand dazwischen |
| Die Seite lädt zäh | Ein Foto in voller Auflösung als Titelbild | Bild vorher verkleinern und komprimieren, dann ersetzen |
Die letzte Zeile ist streng genommen kein Layout-Problem, und sie kostet die meisten Besucher. Ein Bild direkt aus der Kamera wiegt oft mehr als der gesamte Rest der Seite zusammen, und kein Prompt repariert eine Datei, die Sie bereits hochgeladen haben.
Die erste Zeile ist die tückischste, weil sie am Rechner unsichtbar bleibt. Im breiten Fenster merkt man nichts. Auf dem Telefon wandert die ganze Seite, und schuld ist meist ein einzelnes Element, das sich weigert zu schrumpfen.
Wie teste ich richtig?
Auf einem echten Telefon, an der veröffentlichten Adresse, im Mobilfunknetz. Jeder Teil dieses Satzes leistet etwas.
| Prüfung | Wie | Warum die Abkürzung scheitert |
|---|---|---|
| Layout | ihr-projekt.zugo.run auf dem eigenen Telefon öffnen |
Ein schmales Fenster am Rechner ist kein Telefon, Schriften werden anders gezeichnet |
| Tempo | Die Seite über Mobilfunk laden, nicht über WLAN | Das Büronetz verdeckt genau die Dateigrößen, auf die es ankommt |
| Bedienflächen | Einhändig benutzen, nur mit dem Daumen | Ein Mauszeiger ist viel genauer als ein Daumen |
| Lesbarkeit | Das Gerät mit ausgestrecktem Arm halten | Was man vorgebeugt am Bildschirm liest, kann unterwegs zu klein sein |
| Formulare | Ein Formular tatsächlich abschicken | Die Tastatur verdeckt Felder, und das zeigt sich nur auf dem Gerät |
Die veröffentlichte Adresse statt der Vorschau zu prüfen, hat einen einfachen Grund: Die Vorschau am Rechner ist eine andere Umgebung, mit anderer Verbindung, anderer Darstellung und anderer Eingabe. Ihre Besucher bekommen die veröffentlichte Seite, also gehört die auf den Prüfstand.
Zwei Personen, zwei Telefone, je fünf Minuten sind aussagekräftiger als jeder Simulator. Bitten Sie sie, die eine Handlung auszuführen, für die es die Seite gibt, und schauen Sie zu, wo der Daumen zögert. Wer dabei auf Schriftgrößen, Kontraste und Bedienflächen systematisch schauen will, findet die Kriterien in Barrierefreiheit.
Was kostet die Behebung?
In fast allen Fällen eine Änderung, denn es geht um den Build und nicht um die Plattform. Abgerechnet wird in US-Dollar.
| Aktion | Credits |
|---|---|
| Einzelner Build: Seite, App oder Spiel | 6 |
| Änderung an einem bestehenden Build | 3 |
| Mehrseitige Plattform, erste drei Seiten | 12 |
| Jede weitere Seite | 3 |
| Build im Hi-Fi-Modus | 12 |
| Änderung im Hi-Fi-Modus | 6 |
Bei 3 Credits pro Änderung ist eine Runde Telefonkorrekturen billig genug, um sie einfach zu machen, statt lange am perfekten Prompt zu feilen. Pro kostet 25 $ im Monat mit 200 Credits, also 66 Änderungen, wenn Sie nur ändern. Am Budget scheitert der Feinschliff selten.
Beschreiben Sie die Behebung so, wie Sie das Problem gesehen haben. "Auf dem Telefon läuft die Preistabelle rechts aus dem Bild, sie soll in ihrem eigenen Kasten scrollen" wirkt besser als "mach es responsiv", denn anpassungsfähig ist der Build bereits, und das eine Element ist es nicht. Wie solche Sätze aufgebaut sind, steht in Nach der Generierung ändern.
Funktionieren 2D-Spiele auf dem Telefon?
Sie laufen im Browser, ja, und dieser Fall verdient einen eigenen Abschnitt, weil er anders scheitert. Ein Spiel, das mit der Tastatur bedient wird, hat auf einem Berührungsbildschirm überhaupt keine Steuerung, solange Sie keine verlangt haben.
Sagen Sie es also im Prompt: Touch-Steuerung ausdrücklich nennen, dazu was ein Tippen und was ein Wischen bewirkt. Danach mit dem Daumen spielen statt die Beschreibung zu lesen. Die Spiele sind 2D und laufen im Browser, das ist eine ehrliche Bandbreite und zugleich eine ehrliche Grenze.
Der zweite telefonspezifische Punkt ist die Bildschirmform. Ein Spielfeld für ein breites Fenster schiebt die Punktanzeige im Hochformat gern an eine unerreichbare Stelle. Ein Hochformat-Layout zu verlangen oder das Spielfeld auf ein festes Seitenverhältnis festzulegen, ist eine normale Änderung. Der größere Zusammenhang steht in Kann KI wirklich ein spielbares Spiel bauen.
Wo sind die ehrlichen Grenzen?
Drei, klar benannt.
Ein Build ist keine native App. Was Sie bekommen, läuft im mobilen Browser. Es lässt sich auf den Startbildschirm legen und ist keine Veröffentlichung im App Store oder bei Google Play, das ist ein eigenes Vorhaben.
Die Sandbox prüft das Laden, nicht das Aussehen. Sie bestätigt, dass der Build geöffnet hat. Sie benotet nicht, ob das Layout stimmt, und sie warnt nicht, wenn eine Überschrift in vier Zeilen zerfällt.
Tiefe Leistungsarbeit ist Entwicklungsarbeit. Ein Dashboard mit vielen Live-Daten oder ein forderndes 2D-Spiel auf einem älteren Telefon hat ein Verhalten, das keine Layout-Regel abdeckt. Dort ersetzt der Builder kein Entwicklungsteam, und der Weg führt über den GitHub-Export zu einem Entwickler.
Dem gegenüber steht ein kurzer Kreislauf: auf dem eigenen Telefon anschauen, das Problem in einem Satz beschreiben, 3 Credits ausgeben, wieder anschauen. Fangen Sie mit einer Seite auf zugo.dev an, veröffentlichen Sie sie und öffnen Sie die Adresse auf dem Telefon, bevor Sie weiteren Inhalt hinzufügen.