Website-Redesign nach 13 Jahren: Alles erneuern, ohne etwas kaputt zu machen
Viele Unternehmen haben eine Website, die einmal ihr ganzer Stolz war und heute wie ein Gruß aus dem letzten Jahrzehnt wirkt. Sie umzubauen, macht Angst: Darin stecken Jahre an Inhalten, Suchmaschinen-Rankings, Gewohnheiten der Nutzer – und Code, den niemand anfassen möchte. Genau so ein Projekt haben wir gerade abgeschlossen: das komplette Redesign der Foto-Community SuperSnimki.ru. Hier erzählen wir, wie es gelaufen ist.
Wie alles begann
SuperSnimki haben wir 2013 gestartet. Seitdem sind auf der Seite mehr als 200.000 Fotos von über 4.700 Fotografinnen und Fotografen zusammengekommen, dazu Tausende Artikel und Forendiskussionen. Die Plattform lief stabil, doch die Oberfläche war in ihrer Zeit stehen geblieben:
Die wichtigste Entscheidung: die Plattform nicht neu schreiben
Der teuerste und riskanteste Weg lautet: „Wir schreiben alles auf einem neuen Stack neu.“ Den haben wir bewusst nicht gewählt. Die Perl-Engine, die Datenbanken MongoDB und MySQL, die URL-Struktur und sämtliche Daten blieben unverändert. Geändert haben wir, was die Nutzer sehen – und alles, was die Seite ausbremste.
Deshalb wurde aus dem Redesign keine Migration: Kein einziger Link ging kaputt, die Rankings litten nicht, und die Nutzer öffneten eines Tages einfach die vertraute Seite im neuen Gewand.
Ein Designsystem auf dem alten Code
Zuerst haben wir das Designsystem in Form von Tokens beschrieben: Farben für das helle und das dunkle Theme, eine Typografie-Skala, Abstände im 4-px-Raster, Eckenradien und Animationsdauern. Alle 183 Templates der Website wurden auf diese Tokens umgestellt – deshalb funktionierte der Dark Mode sofort überall und nicht nur auf der Startseite.
Ein kleiner Kniff, der viel Zeit gespart hat: Die 130 neuen SVG-Icons bekamen dieselben Klassennamen wie die alten Icons aus den Fonts. Für die Icons musste kein einziges Template umgeschrieben werden – sie sahen einfach plötzlich neu aus.
Eine mobile Version wie eine App
Der Großteil des Publikums schaut sich Fotos heute auf dem Smartphone an. Deshalb gibt es jetzt eine untere Navigationsleiste mit dem Upload-Button in der Mitte, ein ausfahrbares Menü und einen neuen Vollbild-Viewer mit Pinch-to-Zoom, Wischgesten und Doppeltipp. Die Seite lässt sich wie eine App zum Homescreen hinzufügen.
Geschwindigkeit: mehr entfernen als hinzufügen
Ein Redesign macht eine Website oft schwerer. Bei uns war es umgekehrt:
Unterm Strich ist der Code des Projekts um 27.000 Zeilen schlanker geworden – obwohl Funktionen hinzugekommen sind.
Neue Gründe wiederzukommen
Bei einem guten Redesign geht es nicht nur um die Optik. Gleichzeitig haben wir ergänzt, wofür Menschen zurückkehren:
Sicherheit und SEO gleich mit
Wer jedes Template durchgeht, entdeckt auch, was jahrelang unbemerkt geblieben ist. Wir haben XSS-Lücken in Suche, Kommentaren und Forum geschlossen, Löschvorgänge durch CSRF-Tokens abgesichert, echte 404-Seiten zurückgebracht, RSS repariert, das JSON-LD-Markup ergänzt und die Sitemap um Bilder erweitert.
Was Sie für Ihr Projekt mitnehmen können
Die ausführliche Fallstudie mit Screenshots finden Sie in unserem Portfolio, die erneuerte Website können Sie live auf supersnimki.ru erleben.
Braucht auch Ihre Website eine Auffrischung, aber Sie trauen sich nicht recht heran? Erzählen Sie uns von Ihrem Projekt – wir schlagen Ihnen einen Redesign-Plan ohne Verluste vor.