Redesenhar um website com 13 anos: como renovar tudo sem partir nada

Muitas empresas têm um website que outrora foi o seu orgulho e que hoje parece um postal da década anterior. Reconstruí-lo parece arriscado: há anos de conteúdos, posicionamentos de pesquisa conquistados com esforço, hábitos dos utilizadores — e código que ninguém quer tocar. Acabámos precisamente esse tipo de projeto — um redesenho completo da comunidade de fotografia SuperSnimki.ru — e eis como correu.

Onde tudo começou

Lançámos o SuperSnimki em 2013. Desde então, o site acumulou mais de 200 000 fotografias de mais de 4700 fotógrafos, além de milhares de artigos e tópicos de fórum. A plataforma funcionava de forma fiável, mas a interface tinha ficado presa à sua época:

A decisão-chave: não reescrever a plataforma

O caminho mais caro e arriscado é o de «vamos reescrever tudo numa nova stack». Recusámo-lo. O motor em Perl, as bases de dados MongoDB e MySQL, a estrutura de URL e os dados mantiveram-se exatamente como estavam. Mudámos o que os utilizadores veem — e tudo o que impedia o site de ser rápido.

Por isso, o redesenho nunca se transformou numa migração: nenhuma ligação deixou de funcionar, os posicionamentos de pesquisa não sofreram, e os utilizadores simplesmente abriram um dia um site familiar e encontraram-no transformado.

Um sistema de design sobre código antigo

Primeiro, definimos o sistema de design como tokens: cores para os temas claro e escuro, uma escala tipográfica, espaçamento numa grelha de 4 px, raios de canto e durações de animação. Todos os 183 modelos do site foram migrados para estes tokens — e por isso o modo escuro funcionou em todo o lado ao mesmo tempo, e não apenas na página inicial.

Um pequeno truque poupou muito tempo: os 130 novos ícones SVG receberam os mesmos nomes de classe dos glifos antigos das fontes de ícones. Não foi preciso reescrever um único modelo por causa dos ícones — simplesmente passaram a ter um aspeto novo.

Uma experiência mobile que parece uma aplicação

Hoje em dia, a maioria do público vê fotografias no telemóvel. Por isso, acrescentámos uma barra de navegação inferior com um botão de carregamento ao centro, um menu deslizante e um novo visualizador de ecrã inteiro com zoom por pinça, deslizes e duplo toque. O site pode ser adicionado ao ecrã inicial, tal como uma aplicação.

Velocidade: retirar mais do que acrescentar

Os redesenhos costumam tornar um site mais pesado. O nosso fez o contrário:

O resultado: a base de código ficou 27 000 linhas mais pequena — apesar de ter ganho funcionalidades.

Novos motivos para voltar

Um bom redesenho não se resume à aparência. Juntamente com ele, acrescentámos aquilo por que as pessoas voltam:

Segurança e SEO pelo caminho

Quando se percorre cada modelo, também se descobrem problemas que passaram despercebidos durante anos. Fechámos vulnerabilidades XSS na pesquisa, nos comentários e no fórum, protegemos as eliminações com tokens CSRF, repusemos os 404 corretos, corrigimos o RSS, alargámos a marcação JSON-LD e acrescentámos imagens ao sitemap.

O que o seu projeto pode retirar disto

O estudo de caso completo, com capturas de ecrã, está no nosso portefólio, e pode ver o site atualizado em funcionamento em supersnimki.ru.

Se o seu site já precisa de uma renovação, mas tocar-lhe parece arriscado, conte-nos sobre o seu projeto e preparamos um plano de redesenho em que nada se perca.