Worauf du achten solltest
Diese Regeln entscheiden, ob ein Tool auf dem Handy zuverlässig läuft. Dazu kommen Erfahrungen aus dem Bau der Galerie-Tools.
Die Grundregeln
Alles in eine Datei
Bilder als SVG im Code oder als Daten-Link einbetten, keine fremden Schriften, Bibliotheken direkt in die Datei kopieren statt per Link einzubinden. Sonst bleibt das Tool offline leer.
Zuerst das Handy
Setze <meta name="viewport" content="width=device-width, initial-scale=1">. Tippflächen mindestens 48 px hoch, Schrift mindestens 16 px, keine Funktion, die nur mit Hover (Mauszeiger) geht.
Daten bewusst speichern
Lege Werte in localStorage ab und speichere nach jeder Änderung. Lege nichts Wichtiges nur im Arbeitsspeicher ab: Es ist weg, sobald das Tool schließt.
Gut lesbar
Hoher Kontrast, klare Beschriftungen, kein Text unter 14 px. Wenn das Tool zur Toolbox passen soll: dunkler Hintergrund, helle Schrift, ein Akzent in Bernstein.
Keine Geheimnisse im Code
Eine Tool-Datei ist lesbarer Text. Wer sie bekommt, sieht alles darin. Gib keine Passwörter, Schlüssel oder privaten Daten in die Datei, bevor du sie weitergibst.
Fremden Tools nicht blind vertrauen
Die Abschottung ist ein Schutz, aber kein Freifahrtschein. Prüfe, woher ein Tool kommt, und schalte erweiterte Erlaubnisse nur ein, wenn du es wirklich brauchst.
Zuerst testen
Öffne neuen Code im Editor und schau ihn dir in der Vorschau an. Probiere die wichtigsten Wege aus, auch ungewöhnliche Eingaben.
Versionen nutzen
Behalte den Namen bei, dann wird die neue Datei zur neuen Version. Die letzten drei Fassungen kannst du zurückholen, wenn eine Änderung etwas kaputt macht.
Lehren aus dem Bau der Galerie
Beim Bau des gemeinsamen Bausatzes für die Galerie-Tools sind uns einige Stolpersteine begegnet, die fast jedes Tool betreffen. Diese Lösungen gelten für deine Tools genauso.
| Thema | Was passiert | So machst du es richtig |
|---|---|---|
| Timer im Hintergrund | Läuft ein Tool im Hintergrund oder ist der Bildschirm aus, drosselt das Handy setInterval. Mitgezählte Sekunden gehen dann nach. | Startzeit merken (Date.now()) und die Restzeit bei jedem Takt daraus berechnen, statt Sekunden mitzuzählen. |
| Sortieren per Ziehen | Ziehen und Ablegen (HTML5 drag and drop) funktioniert auf Android-Touch nicht. | Knöpfe „hoch“ und „runter“ je Eintrag anbieten. |
| Bilder im Backup | Bilder als Blob oder Object-URL landen nicht im Backup der Toolbox. | Bilder verkleinern (zum Beispiel höchstens 512 px, JPEG) und als Daten-Link speichern. |
| Speicher voll oder gesperrt | localStorage kann voll sein oder fehlen. Ohne Absicherung bricht das Tool mit einem Fehler ab. | Jeden Zugriff in try/catch setzen, auf den Arbeitsspeicher zurückfallen und einen Hinweis zeigen, dass gerade nicht gespeichert wird. |
| Neue Fassung, alte Daten | Nach einem Umbau passen gespeicherte Daten nicht mehr zum Code. | Daten mit Versionsnummer speichern ({ v: 2, daten }) und alte Fassungen beim Laden umziehen. |
| Zahlen und Daten | Selbstgebaute Formate sind in anderen Sprachen falsch (Komma, Datum, Mehrzahl). | Intl nutzen: NumberFormat, DateTimeFormat, PluralRules und RelativeTimeFormat. Das ist im Browser eingebaut und läuft offline. |
| Rückfragen nerven | Ständige „Wirklich löschen?“-Fragen werden weggeklickt und schützen dann nicht mehr. | Sofort ausführen und zehn Sekunden lang „Rückgängig“ anbieten. Nur das Löschen ganzer Bestände fragt vorher. |
| alert und confirm | Diese Fenster blockieren das Tool und sehen auf jedem Gerät anders aus. | Eigene Dialoge bauen, die mit Esc schließen und den Fokus zurückgeben. |
| Ton auf dem Handy | Töne starten erst nach einer Berührung. Ein Timer, der von selbst piept, bleibt sonst stumm. | Den Ton (AudioContext) beim ersten Tippen auf „Start“ vorbereiten. |
| Bildschirm geht aus | Bei Timern, Noten oder Rezepten wird das Display dunkel. | Wachhalten anfragen (navigator.wakeLock) und eine Ablehnung ohne Fehler hinnehmen. |
| Code verkleinern | Verkleinerter Code ist für dich und für „Mit KI ändern“ kaum noch lesbar. | Code lesbar lassen. Eine Datei mit rund 60 bis 90 KB ist kein Problem. |
Siehe auch: Bauplan der Galerie · Wenn etwas nicht klappt