13 yıllık bir web sitesini hiçbir şeyi bozmadan yenilemek

Birçok şirketin, bir zamanlar gurur kaynağı olan ama bugün on yıl öncesinden kalma bir kartpostal gibi görünen bir web sitesi var. Yeniden inşa etmek riskli görünür: yıllara yayılan içerik, zorlukla kazanılmış arama sıralamaları, kullanıcı alışkanlıkları — ve kimsenin dokunmak istemediği kod. Tam da bu türden bir projeyi yeni tamamladık — SuperSnimki.ru fotoğraf topluluğunun tam kapsamlı bir yeniden tasarımı — ve nasıl ilerlediğini anlatıyoruz.

Her şey nerede başladı

SuperSnimki'yi 2013'te yayına aldık. O tarihten beri site, 4.700'den fazla fotoğrafçıdan gelen 200.000'den fazla fotoğraf ile binlerce makale ve forum konusu biriktirdi. Platform güvenilir çalışıyordu, ancak arayüz kendi dönemine sıkışıp kalmıştı:

Kilit karar: platformu yeniden yazmamak

En pahalı ve en riskli yol "her şeyi yeni bir teknoloji yığınında baştan yazalım" yaklaşımıdır. Buna hayır dedik. Perl motoru, MongoDB ve MySQL veritabanları, URL yapısı ve veriler olduğu gibi kaldı. Kullanıcıların gördüğünü değiştirdik — ve sitenin hızlı olmasını engelleyen her şeyi.

Bu yüzden yeniden tasarım hiçbir zaman bir göçe dönüşmedi: tek bir bağlantı bozulmadı, arama sıralamaları zarar görmedi ve kullanıcılar bir gün tanıdık bir siteyi açıp onun dönüştüğünü gördü.

Eski kodun üzerine bir tasarım sistemi

Önce tasarım sistemini jeton olarak tanımladık: açık ve koyu temalar için renkler, bir yazı tipi ölçeği, 4 px'lik ızgaraya göre boşluklar, köşe yarıçapları ve animasyon süreleri. Sitenin 183 şablonunun tamamı bu jetonlara taşındı — bu yüzden karanlık mod yalnızca ana sayfada değil, her yerde aynı anda çalıştı.

Çok zaman kazandıran küçük bir numara: 130 yeni SVG simgesi, eski simge yazı tipi glifleriyle aynı sınıf adlarını aldı. Simgeler için tek bir şablonu bile yeniden yazmak zorunda kalmadık — sadece yeni görünmeye başladılar.

Bir uygulama gibi hissettiren mobil deneyim

Bugünlerde izleyicinin çoğu fotoğrafları telefondan inceliyor. Bu yüzden ortasında yükleme düğmesi bulunan bir alt navigasyon çubuğu, kayan bir menü ve parmakla yakınlaştırma, kaydırma ve çift dokunma destekli yeni bir tam ekran görüntüleyici ekledik. Site, tıpkı bir uygulama gibi ana ekrana eklenebiliyor.

Hız: eklediğinizden fazlasını kaldırın

Yeniden tasarımlar çoğu zaman siteyi daha ağır hale getirir. Bizimki tersini yaptı:

Sonuç: kod tabanı 27.000 satır daha küçük — özellik kazanmasına rağmen.

Geri dönmek için yeni nedenler

İyi bir yeniden tasarım yalnızca görünümle ilgili değildir. Beraberinde insanların geri dönme nedenlerini de ekledik:

Yol boyunca güvenlik ve SEO

Her şablonu gözden geçirirken, yıllardır fark edilmemiş sorunları da görürsünüz. Arama, yorumlar ve forumdaki XSS açıklarını kapattık, silme işlemlerini CSRF belirteçleriyle koruduk, doğru 404'leri geri getirdik, RSS'i düzelttik, JSON-LD işaretlemesini genişlettik ve site haritasına görselleri ekledik.

Projeniz bundan neler alabilir

Ekran görüntülerinin olduğu tam vaka çalışmasını portföyümüzde bulabilirsiniz; güncellenmiş siteyi ise supersnimki.ru adresinde canlı olarak görebilirsiniz.

Web siteniz yenilenmeyi bekliyor ama dokunmak korkutucu geliyorsa, projenizi bize anlatın; hiçbir şeyin kaybolmadığı bir yeniden tasarım planı hazırlayalım.