Przeprojektowanie 13-letniej strony: jak odświeżyć wszystko bez psucia czegokolwiek

Wiele firm ma stronę, która kiedyś była ich dumą, a dziś wygląda jak pocztówka z poprzedniej dekady. Przebudowa wydaje się ryzykowna: są lata treści, wypracowane przez lata pozycje w wyszukiwarce, przyzwyczajenia użytkowników — i kod, którego nikt nie chce ruszać. Właśnie zakończyliśmy taki projekt — kompleksowe przeprojektowanie społeczności fotograficznej SuperSnimki.ru — i oto jak przebiegł.

Od czego wszystko się zaczęło

SuperSnimki uruchomiliśmy w 2013 roku. Od tego czasu serwis zgromadził ponad 200 000 zdjęć od ponad 4700 fotografów, a także tysiące artykułów i wątków na forum. Platforma działała niezawodnie, ale interfejs utknął w swojej epoce:

Kluczowa decyzja: nie przepisywać platformy

Najdroższa i najbardziej ryzykowna droga to „przepiszmy wszystko na nowym stosie technologicznym”. Odrzuciliśmy ją. Silnik w Perlu, bazy MongoDB i MySQL, struktura adresów URL oraz dane pozostały dokładnie takie, jakie były. Zmieniliśmy to, co widzą użytkownicy, oraz wszystko, co utrudniało szybkie działanie strony.

Dlatego przeprojektowanie nigdy nie przerodziło się w migrację: ani jeden link nie przestał działać, pozycje w wyszukiwarce nie ucierpiały, a użytkownicy pewnego dnia po prostu weszli na znaną stronę, która stała się zupełnie inna.

System designu na bazie starego kodu

Najpierw zdefiniowaliśmy system designu jako tokeny: kolory dla jasnego i ciemnego motywu, skalę typograficzną, odstępy na siatce 4 px, promienie zaokrągleń i czasy animacji. Wszystkie 183 szablony strony przeniesiono na te tokeny — dlatego tryb ciemny działał od razu wszędzie, a nie tylko na stronie głównej.

Jeden drobny trik zaoszczędził sporo czasu: 130 nowych ikon SVG otrzymało te same nazwy klas, co dawne glify z czcionki ikon. Nie musieliśmy przepisywać ani jednego szablonu pod kątem ikon — po prostu zaczęły wyglądać nowocześnie.

Doświadczenie mobilne jak w aplikacji

Dziś większość odbiorców przegląda zdjęcia na telefonach. Dodaliśmy więc dolny pasek nawigacji z przyciskiem dodawania w środku, wysuwane menu oraz nową przeglądarkę zdjęć na pełnym ekranie ze powiększaniem dwoma palcami, przesuwaniem i dwukrotnym dotknięciem. Stronę można dodać do ekranu głównego, tak jak aplikację.

Szybkość: usuwać więcej, niż dodawać

Przeprojektowania często zwiększają ciężar strony. Nasze zrobiło odwrotnie:

Efekt: baza kodu jest mniejsza o 27 000 linii — mimo że zyskała nowe funkcje.

Nowe powody, by wracać

Dobre przeprojektowanie to nie tylko wygląd. Razem z nim dodaliśmy to, dla czego ludzie wracają:

Bezpieczeństwo i SEO przy okazji

Przeglądając każdy szablon, wychwytuje się również to, co przez lata pozostawało niezauważone. Zamknęliśmy luki XSS w wyszukiwarce, komentarzach i na forum, zabezpieczyliśmy usuwanie tokenami CSRF, przywróciliśmy poprawne błędy 404, naprawiliśmy RSS, rozszerzyliśmy znaczniki JSON-LD i dodaliśmy obrazy do mapy witryny.

Co z tego może wynieść Państwa projekt

Pełne studium przypadku z zrzutami ekranu znajduje się w naszym portfolio, a zaktualizowaną stronę można zobaczyć na żywo pod adresem supersnimki.ru.

Jeśli Państwa strona wymaga odświeżenia, ale jej ruszanie budzi obawy, opowiedzcie nam o projekcie — przygotujemy plan przeprojektowania, w którym nic się nie zgubi.