Optimierung für mobile Geräte

Das Ziel war nicht, die Website neu zu gestalten. Mobile sollte dazukommen, ohne das ruhige Desktop-Design, die statische HTML-Struktur und den manuellen Git-Deploy auf den VPS zu verlieren.

Ausgangslage

Die Website ist klein und statisch. Genau das soll auch so bleiben. Es gibt kein CMS, kein Framework und keine Build-Pipeline. Dadurch ist jede Änderung direkt sichtbar, aber man muss auch sauber arbeiten, weil HTML, CSS und JavaScript unmittelbar miteinander verbunden sind.

index.html
about.html
projects.html
projects/manga-vault.html
blog.html
blog/*.html
assets/css/style.css
assets/js/ascii-globe.js

Als Referenz diente mein iPhone 15 Pro. Wichtig war dabei nicht die physische Displayauflösung, sondern die CSS-Viewport-Größe. Für Layouttests war deshalb 393 x 852 der richtige Wert.

Der Plan

Ich wollte nicht global alles anfassen und danach hoffen, dass es passt. Stattdessen ging ich Seite für Seite vor: erst Startseite, dann About, dann Projects, Manga Vault und zuletzt Blog.

• Desktop-Layout erhalten.
• Mobile-Regeln zentral in CSS ergänzen.
• Nur dann HTML oder JavaScript anfassen, wenn CSS nicht reicht.
• Jede wichtige Ansicht im Codex Browser und auf dem echten iPhone prüfen.
• Stabile Zwischenstände committen und per git pull auf dem VPS deployen.

Seite für Seite

Auf der Startseite ging es vor allem um die Navigation und das Hero-Bild. Die mobile Version sollte nicht wie ein zufälliger Ausschnitt wirken, sondern weiterhin den gleichen ruhigen Einstieg bieten.

Auf der Projects-Seite war die Manga-Vault-Karte der wichtigste Punkt. Drei Cover sollten auch mobil sichtbar bleiben, ohne dass die Karte gequetscht wirkt. Manga Vault selbst bekam eine kompakte Zwei-Spalten-Darstellung, damit die Rangliste auf dem Smartphone nicht endlos breit oder übergroß wird.

Der Blog war ein anderer Fall. Die Explorer-Tabelle funktioniert auf Desktop gut, aber auf dem Smartphone wird sie zu eng. Deshalb bleibt die Tabelle für Desktop erhalten, während Mobile eine Kartenansicht mit Titel, Kurzbeschreibung, Thema und Aktualisierungsdatum nutzt.

Die About-Seite war der harte Test

Die About-Seite hatte den schwierigsten Teil: den rotierenden ASCII-Globus. Im Desktop-Browser sah er korrekt aus. Im Codex Browser mit iPhone-Breite sah er irgendwann ebenfalls gut aus. Auf dem echten iPhone wurde er aber zuerst zusammengedrückt, später sogar instabil.

Das Problem war nicht die Auflösung. Es lag an iOS WebKit und sehr kleiner Monospace-Schrift. Auf dem iPhone verwenden Safari, Brave, Chrome und Firefox dieselbe WebKit-Engine. Deshalb war der Fehler nicht auf einen einzelnen Browser beschränkt.

Viewport: 393 x 852
Engine:   iOS WebKit
Symptom:  ASCII-Globus oval oder instabil
Ursache:  Schriftmetriken und Layoutmessung
Fix:      stabiler quadratischer Rahmen

Der robuste Fix war, den Globus nicht mehr direkt aus dem sichtbaren ASCII-Block heraus zu formen. Stattdessen bekam er einen stabilen quadratischen Rahmen. Der ASCII-Text liegt in einer maskierten Ebene, während die Labels außerhalb dieser Maske bleiben. Dadurch bleibt die Kugel rund, und die Labels können weiterhin über den Rand laufen und dort verschwinden.

Weltkarte und Antarktis

Der Globus nutzt eine einfache Weltkartenlogik im JavaScript. Kontinente und Wasser werden aus Polygonen in ein ASCII-Raster übersetzt. Das ist bewusst keine perfekte Karte, sondern eine stilisierte Version, die in ASCII lesbar bleiben muss.

Nach der iPhone-Korrektur wurde auch die Antarktis dezenter gemacht. Sie bleibt erkennbar, nimmt unten im Globus aber weniger visuelles Gewicht ein. Die Weltkartenlogik selbst bleibt wichtig, weil sie dem Globus seine Form und Lesbarkeit gibt.

Was ich daraus mitnehme

Die wichtigste Lektion war: Responsive Design endet nicht im Emulator. Für normale Layoutfragen war der Codex Browser extrem hilfreich. Für den ASCII-Globus musste aber ein echtes iPhone entscheiden, ob der Fix wirklich funktioniert.

Ebenfalls wichtig war die Reihenfolge. Erst messen, dann ändern. Erst CSS probieren, dann JavaScript anfassen. Und wenn ein Fix stabil ist, committen, pushen und auf dem VPS kontrolliert pullen.

lokal testen
git add
git commit
git push origin main
ssh auf VPS
cd /var/www/newwaves.dev
git pull
git status

Ergebnis

Die wichtigsten Seiten sind jetzt mobil sauber nutzbar: Startseite, About, Projects, Manga Vault und Blog. Die Desktop-Version bleibt erhalten, der Deploy-Workflow bleibt simpel, und der ASCII-Globus funktioniert auf echten iPhones rund und stabil.

Am Ende war die Mobile-Optimierung weniger ein einzelner CSS-Block und mehr ein kontrollierter Prozess: Seite für Seite, Screenshot für Screenshot, Commit für Commit.