Restyling di un sito con 13 anni di storia: rinnovare tutto senza rompere nulla

28 settembre 2026

Molte aziende hanno un sito che un tempo era il loro fiore all’occhiello e che oggi sembra una cartolina dal decennio scorso. Rifarlo fa paura: dentro ci sono anni di contenuti, posizionamenti sui motori di ricerca, abitudini degli utenti — e codice che nessuno vuole toccare. Abbiamo appena concluso proprio un progetto del genere — il restyling completo della community fotografica SuperSnimki.ru — ed ecco com’è andata.

SuperSnimki dopo il restyling

Da dove siamo partiti

Abbiamo lanciato SuperSnimki nel 2013. Da allora sul sito si sono accumulate oltre 200.000 fotografie di più di 4.700 autori, oltre a migliaia di articoli e discussioni sul forum. La piattaforma funzionava in modo stabile, ma l’interfaccia era rimasta ferma alla sua epoca:

gli stili venivano compilati direttamente sul server da uno strumento obsoleto;
le icone erano sparse in tre diversi icon font;
il JavaScript principale pesava 674 KB — e circa metà erano librerie inutilizzate da tempo;
mancavano sia il tema scuro sia una navigazione mobile comoda;
alcuni problemi erano invisibili: il feed RSS non funzionava dalla fine del 2024, e le foto eliminate restituivano un redirect invece di un onesto 404.

La decisione chiave: non riscrivere la piattaforma

La strada più costosa e rischiosa è «riscriviamo tutto su uno stack nuovo». L’abbiamo scartata. Il motore in Perl, i database MongoDB e MySQL, la struttura degli URL e i dati sono rimasti invariati. Abbiamo cambiato ciò che vede l’utente — e ciò che impediva al sito di essere veloce.

Grazie a questo, il restyling non si è trasformato in una migrazione: nessun link si è rotto, i posizionamenti non ne hanno risentito, e gli utenti un giorno hanno semplicemente ritrovato il sito di sempre con un volto nuovo.

Prima e dopo: il forum

Un design system sopra il codice esistente

Per prima cosa abbiamo descritto il design system sotto forma di token: colori per il tema chiaro e il tema scuro, scala tipografica, spaziature a passo di 4 px, raggi degli angoli, durate delle animazioni. Tutti i 183 template del sito sono stati portati su questi token — per questo il tema scuro ha funzionato subito ovunque, e non solo in home page.

Un piccolo accorgimento ci ha fatto risparmiare parecchio tempo: le 130 nuove icone SVG hanno ricevuto gli stessi nomi di classe delle vecchie icone dei font. Non è stato necessario riscrivere i template per le icone — hanno semplicemente cambiato aspetto.

Prima e dopo: il magazine

Una versione mobile come un’app

Oggi gran parte del pubblico guarda le foto dallo smartphone. Per questo sono arrivati una barra di navigazione in basso con il pulsante di caricamento al centro, un menu a scomparsa e un nuovo visualizzatore a schermo intero: zoom a due dita, swipe, doppio tap. Il sito si può aggiungere alla schermata Home proprio come un’app.

Versione mobile

Velocità: togliere più di quanto si aggiunge

Spesso un restyling rende il sito più pesante. Da noi è successo il contrario:

il bundle JS principale è dimagrito del 68% — da 674 a 213 KB;
eliminate 51 librerie obsolete, mentre editor, mappe e grafici si caricano solo quando servono;
agli smartphone arrivano foto di dimensione media, e mentre lo scatto si carica, al suo posto si vede il suo colore medio;
la ricerca negli articoli, che con le parole più comuni richiedeva fino a 30 secondi, ora si risolve con una sola query veloce.

Alla fine il codice del progetto si è alleggerito di 27.000 righe, nonostante le funzionalità siano aumentate.

Nuovi motivi per tornare

Un buon restyling non riguarda solo l’aspetto. Insieme alla nuova veste abbiamo aggiunto ciò per cui le persone tornano:

un magazine con moderazione, area personale dell’autore e una lettura confortevole — con indice e barra di avanzamento;
un catalogo dell’attrezzatura fotografica collegato a scatti reali tramite EXIF: si vede con cosa fotografano davvero gli autori del sito;
«Il tuo anno in foto» — una pagina con le statistiche e gli scatti migliori dell’autore, che viene voglia di condividere;
strumenti di IA: analisi delle foto, traduzione degli articoli, compilazione automatica delle schede prodotto nello shop e importazione delle nuove fotocamere.

Prima e dopo: il catalogo dell’attrezzatura fotografica

Sicurezza e SEO, già che c’eravamo

Quando si passano in rassegna tutti i template, emerge anche ciò che per anni era passato inosservato. Abbiamo chiuso vulnerabilità XSS nella ricerca, nei commenti e nel forum, protetto le eliminazioni con token CSRF, ripristinato i veri 404, sistemato l’RSS, arricchito il markup JSON-LD e aggiunto le immagini alla sitemap.

Tema scuro

Cosa può portarsi a casa il tuo progetto

1.
Un restyling non è un motivo per riscrivere tutto. Se la piattaforma funziona, rinnova l’interfaccia partendo da ciò che c’è: più veloce, più economico e senza rischi per la SEO.
2.
Parti dal design system. I token rendono il tema scuro, uno stile coerente e le modifiche future quasi gratuiti.
3.
Elimina senza paura. Le vecchie librerie e il codice inutilizzato sono il modo più semplice per velocizzare un sito.
4.
Usa il restyling come un audit. È il momento migliore per scovare vulnerabilità e funzioni che si sono rotte in silenzio.
5.
Crea motivi per tornare. Un nuovo look attira l’attenzione, le nuove funzionalità la trattengono.

Il case study dettagliato con le schermate è nel nostro portfolio, mentre il sito rinnovato si può vedere dal vivo su supersnimki.ru.

Se anche il tuo sito ha bisogno di una rinfrescata ma hai paura di metterci mano, raccontaci il tuo progetto: ti proporremo un piano di restyling senza perdite.