In diesem Beitrag geht es um eine Unternehmensseite, die viele Jahre treu gelaufen ist. Das Layout war komplett in Tabellen aufgebaut. Es gab feste Spalten, feste Breiten und kaum Spielraum für andere Geräte. Auf großen Monitoren sah das noch halbwegs geordnet aus. Auf kleineren Bildschirmen wirkte die Seite schnell gedrängt und schwer lesbar.
Ausgangslage: starre Tabellen und feste Breiten
Die Startseite bestand aus mehreren verschachtelten Tabellen. Jede Box war über Zellen gesteuert. Schon kleine Änderungen brauchten viel Zeit. Sollte ein Bild etwas größer werden, musste die ganze Zeile neu angepasst werden. Mobile Geräte waren beim ursprünglichen Entwurf kein Thema. Die Seite war auf einen Desktop mit klassischer Auflösung ausgelegt.
Für Nutzerinnen und Nutzer war das Ergebnis klar spürbar. Auf dem Smartphone musste man viel zoomen und hin und her wischen. Links lagen eng beieinander. Texte brachen an merkwürdigen Stellen um. Die Seite erfüllte zwar ihren Zweck, aber sie fühlte sich nicht mehr zeitgemäß an. Der Kunde bekam auch erste Hinweise von Bescuhern, die im Alltag nur noch mit dem Handy online gingen.
Planung des Relaunch: Ziele statt Pixel schieben
Vor der tehnischen Umsetzung stand eine einfache Frage. Was soll die Seite heute leisten. Früher stand die reine Präsenz im Vordergrund. Man war online, und das reichte vielen Firmen schon. Jetzt sollten über die Seite mehr Anfragen kommen. Inhalte sollten auf allen Geräten gut lesbar sein. Die Navigation sollte übersichtlicher werden und weniger Ebenen haben.
Gemeinsam mit dem Kunden haben wir die wichtigsten Bereiche geordnet. Welche Leistungen sind heute noch relevant. Welche Unterseiten können wegfallen. Wo fehlen Beispiele oder aktuelle Referenzen. Aus dem alten Tabellenaufbau wurde Schritt für Schrit eine klare Struktur mit wenigen Haupteinstiegen. Erst danach ging es um Farben, Abstände und einzelne Module.
Vom Tabellenlayout zu flexiblen Modulen
In einem ersten Schritt wurde das alte Layout 1:1 in ein modernes Markup übertragen. Tabellen wichen semantischen Elementen. Aus einer großen Startseite mit vielen Boxen wurden klar getrennte Abschnitte. Überschriften, Texte und Bilder bekamen feste Rollen. So ließ sich später leichter steuern, wie diese Bereiche auf kleineren Geräten reagieren.
Dann kamen die Breakpoints ins Spiel. Für verschiedene Bildschirmbreiten wurden einfache Regeln definiert. Auf dem Desktop durften mehrere Spalten nebeneinander stehen. Auf dem Tablet sollte es nur noch zwei Spalten geben. Auf dem Smartphone wurden viele Elemente untereinander angeordnet. Es ging nicht darum, die alte Optik genau nachzubauen. Wichtiger war, dass Inhalte in jeder Ansicht gut nutzbar bleiben.
Inhalte aufräumen und lesbarer machen
Beim Umbau fiel auf, wie viel Text sich im Lauf der Jahre angesammelt hatte. Viele Absätze wiederholten sich. Manche Informationen waren veraltet. Im alten Tabellenlayout war das nie richtig aufgefallen, weil die Seite sowieso sehr voll war. Im neuen Aufbau störten solche Dopplungen sofort.
Zusammen mit dem Kunden wurden Texte gekürzt und geordnet. Wichtige Aussagen kamen nach oben. Nebensätze mit wenig Mehrwert verschwanden. Beispiele aus der Praxis wurden aktualisiert. Aus langen Listen wurden kurze Blöcke, die Nutzern beim Querlesen helfen. Die neue Strukutur machte es leichter, später selbst neue Inhalte in gleicher Form hinzuzufügen.
Testen auf echten Geräten statt nur im Browser
Ein großer Teil der Arbeit fand nicht am großen Bildschirm statt. Viel wichtiger war der Test auf echten Geräten. Wir haben uns die Seite auf mehreren Smartphones und Tablets angeschaut. So wurde deutlich, wo Buttons zu dicht lagen, wo Text noch zu klein war oder wo Abstände fehlten.
Diese Tests haben auch gezeigt, wie Menschen die Seite wirklich nutzen. Manche Besucher kamen direkt über eine Unterseite. Andere nutzten fast nur die Navigation. Wieder andere suchten nur schnell eine Telefonnummer. Solche Beobachtungen halfen, Kleinigkeiten nachzubessern, die im Entwurf auf dem Desktop noch logisch wirkten, im Alltag aber nicht so gut funktionierten.
Was andere Projekte aus diesem Relaunch lernen können
Dieser Relaunch war kein Großprojekt mit riesigem Budget. Es war ein typischer Fall aus dem Mittelstand. Gerade deshalb eignet er sich als Beipiel. Viele Unternehmen stehen vor ähnlichen Fragen. Die alte Seite funktioniert noch irgendwie, passt aber nicht mehr zum Nutzungsverhalten ihrer Kundschaft.
Die wichitgste Erkenntnis ist, klein anzufangen und trotzdem klar zu planen. Es muss nicht sofort jede Funktion komplett neu gedacht werden. Wichtig ist, dass das Grundgerüst stimmt und Inhalte auf allen Geräten gut ankommen. Danach lassen sich nach und nach weitere Elemente verbessern.
TXT-Files hält solche Fälle fest, damit andere Teams nicht bei null starten müssen. Wer vor einem eigenen Relaunch steht, kann aus diesen Schilderungen Hinweise ziehen. Man sieht, welche Schritte nötig sind, wo Stolpersteine liegen und warum es sich lohnt, auch ältere Seiten noch einmal mit frischem Blick zu prüfen.