Ostohlo — il nostro sito, costruito secondo gli stessi standard

01Panoramica del progetto

ostohlo.com è il sito dello studio, ed è in questa lista per lo stesso motivo degli altri: è stato progettato, costruito e viene mantenuto nel modo in cui costruiamo per i clienti. Le pagine vivono in un database e vengono renderizzate dal nostro motore; i modelli rimangono in file; l'interfaccia è un sistema di design scritto da zero piuttosto che un tema acquistato da qualche parte.

È anche un prodotto funzionante, non un biglietto da visita. Ci sono strumenti gratuiti che non richiedono registrazione, un estimatore di progetti, un programma partner a tre livelli con il proprio cruscotto e un blog che si riempie dalla nostra piattaforma in tre lingue.

02Perché un sito di studio è difficile

Un sito studio non ha un proprietario che si lamenta. È scritto tra i progetti dei clienti, e ogni scorciatoia in esso sopravvive per anni: una lingua che è rimasta indietro, una pagina che nessuno osa modificare perché è HTML scritto a mano, una galleria di lavori che ha smesso di corrispondere al lavoro.

Avevamo esattamente quella storia. Il sito è iniziato come file statici, e la prima migrazione in un database ha mostrato il costo di ciò: confrontando il testo visibile si diceva che tutto corrispondeva, mentre centinaia di pagine avevano silenziosamente perso il loro pacchetto di fogli di stile. Da allora la regola qui è che un cambiamento è provato da una misurazione, non dall'aspetto corretto della pagina.

03Obiettivi del progetto

• contenuto in un database e modelli in file, quindi un cambiamento di testo non richiede uno sviluppatore;
• tre lingue che non divergono mai: una chiave aggiunta a una viene aggiunta a tutte e tre nello stesso compito;
• un sistema di design tutto nostro — movimento, scene WebGL e tipografia che appartengono a questo marchio;
• strumenti che sono genuinamente utili e genuinamente gratuiti, senza nulla memorizzato lato server;
• un programma partner con numeri reali in un cruscotto, non una promessa su una pagina di atterraggio;
• qualità misurabile: layout fino a 320 px, dati strutturati puliti, nessun link interrotto.

04Il motore: pagine in un database

Ogni pagina — un servizio, uno studio di caso, un articolo, un testo legale — è una riga: percorso, lingua, titolo, descrizione, corpo, dati strutturati, flag di pubblicazione. Un punto di ingresso lo rende con un modello scelto per tipo, e l'intestazione e il piè di pagina condivisi provengono da file che un generatore scrive, quindi il chrome di trecento pagine cambia in un solo posto.

La sottigliezza è nel file system, non nel codice: il server web distribuisce qualsiasi file che esiste su disco e solo allora passa all'applicazione. Mettere un file con il nome di una vecchia pagina nella directory pubblica disattiverebbe silenziosamente quella pagina dal database — che è esattamente il tipo di errore che non lascia traccia da nessuna parte.

05Tre lingue, l'inglese alla radice

L'inglese si trova alla radice, il russo sotto /ru/, l'ucraino sotto /uk/. Quale lingua si trova alla radice è scritto in esattamente un posto nel codice, e il front end conosce lo stesso fatto da una costante — un controllo li confronta, perché due risposte a quella domanda è come nascono i siti tradotti a metà.

Le stringhe dell'interfaccia sono un dizionario con pacchetti per lingua, e la regola è assoluta: una chiave aggiunta a una lingua viene aggiunta a tutte e tre nella stessa attività. Una chiave mancante non genera un errore, mostra la lingua sbagliata a un lettore — il tipo di silenzio più costoso.

06Un sistema di design tutto nostro

L'attuale interfaccia è la quarta generazione di questo sito, ed è scritta da zero: token, tipografia, componenti, movimento e un insieme di scene WebGL che si trovano dietro i blocchi principali. Le fonti vivono in un unico posto e vengono compilate in pacchetti hashati; modificare il file compilato a mano verrebbe semplicemente perso alla prossima compilazione, quindi non c'è nulla su cui discutere.

Il movimento è sempre attivo qui — nessun gate per il movimento ridotto — che è una decisione deliberata del proprietario, e comporta un dovere: tutto deve comunque essere leggibile e raggiungibile a 320 px, e ogni animazione di apparizione deve effettivamente finire. Entrambi vengono controllati da una sonda che scorre la pagina due volte e aspetta il rivelarsi, perché un blocco che non appare mai è invisibile a uno screenshot scattato troppo presto.

07Strumenti gratuiti che non memorizzano nulla

Sette piccoli strumenti: un generatore di password e un controllo delle perdite, un generatore di QR, un costruttore di UTM, un creatore di slug, un contatore di caratteri e un controllore di telefoni. Nessuna registrazione, nessun account, e — la parte che conta — nessun storage lato server. Ciò che uno strumento ricorda, lo ricorda nel browser del visitatore, e solo le impostazioni, mai il contenuto.

Il controllo delle perdite è l'esempio più chiaro: non invia mai la password. Solo un breve prefisso del suo hash lascia il browser, e la risposta viene assemblata localmente, che è la differenza tra uno strumento utile e un modo splendidamente progettato per raccogliere password.

08Programma partner con un vero dashboard

Tre livelli di referral: un partner guadagna sui clienti che porta, sui partner che quei clienti portano e sul livello sottostante. Il dashboard mostra cosa è realmente accaduto — clic per campagna, registrazioni, accantonamenti — ed è raggiungibile tramite un link con un token piuttosto che con una password che nessuno ricorderebbe.

Il token viene rimosso dall'indirizzo prima che la prima richiesta venga inviata, le richieste non portano credenziali e nessun referrer, e la modalità demo non tocca mai il server. Un cabinet per partner è un luogo dove vengono mostrati i soldi; non dovrebbe essere il luogo dove un link fa trapelare l'account.

09Un blog che si riempie da solo

Gli articoli arrivano da Astrina — la nostra piattaforma — attraverso un endpoint firmato: un materiale, tre versioni linguistiche, ciascuna che atterra nel proprio albero linguistico con alternati reciproci. Le immagini vengono estratte e memorizzate localmente piuttosto che collegate, e la scheda indice del blog per quell'articolo è scritta nello stesso passaggio.

L'automazione come questa è dove avviene un danno silenzioso, quindi l'assunzione normalizza ciò che riceve: i link interni vengono riscritti nella lingua dell'articolo, e i link lasciati come markdown grezzo vengono trasformati in link reali. La regola è semplice: un lettore della versione russa non deve mai essere inviato alla pagina inglese tramite un link che sembra semplicemente corretto nella sorgente.

10SEO, GEO e i lettori automatici

Ogni pagina porta un titolo, una descrizione, un indirizzo canonico, alternati reciproci per tutte e tre le lingue più un predefinito, Open Graph e dati strutturati — e tutto ciò è stampato da un unico luogo, perché le pagine che sono responsabili dei propri meta tag sono pagine che li dimenticano.

Per i lettori automatici c'è un file di riepilogo che elenca le sezioni, i prodotti e le lingue, assemblato dal database piuttosto che scritto a mano: quello scritto a mano aveva dichiarato il numero sbagliato di prodotti per mesi. Le sitemap — pagine e immagini — vengono ricostruite ogni notte, e qualsiasi cosa che è cambiata viene annunciata ai motori di ricerca nella stessa esecuzione.

11Moduli, email e il mondo esterno

Il modulo breve è l'unico posto sul sito dove inizia il denaro, quindi è il più protetto: un metodo di autorizzazione, un honeypot, limiti di frequenza per indirizzo e globali, controlli di dimensione su ogni campo, e un allegato che viene accettato dal suo vero tipo di contenuto piuttosto che dal suo nome. La richiesta viene scritta nel database prima che venga inviato qualsiasi cosa, perché una lettera persa non deve significare un cliente perso.

Tutto ciò che il sito invia all'esterno — email, notifiche, chiamate esterne — passa attraverso un proxy e fallisce in chiusura se quel proxy è inattivo. L'indirizzo del server non raggiunge terze parti, e le lettere vengono inviate da una casella di posta che i record del dominio autorizzano effettivamente.

12Stack tecnologico

• PHP 8.4 e MariaDB: pagine nel database, modelli in file, un punto di accesso;
• un sistema di design tutto nostro — token, componenti, movimento, scene WebGL, compilati in pacchetti hashati;
• tre lingue con pacchetti di dizionario per lingua e un controllo di parità;
• strumenti gratuiti scritti nel browser, senza nulla memorizzato lato server;
• un motore partner con tre livelli di referral e un cruscotto basato su token;
• un intake firmato per articoli da Astrina, la nostra analisi, la nostra rete pubblicitaria solo nel blog.

13Il risultato

Un sito dove una modifica di testo è una modifica in un pannello, non un deployment; dove tre lingue rimangono a livello perché la regola è applicata nello stesso compito; dove la sezione di lavoro è generata da un unico registro, quindi aggiungere un caso non può lasciare metà del sito a rivendicare un vecchio conteggio.

E un sito che è misurato come un progetto cliente: ogni indirizzo pubblicato risponde, link interni senza reindirizzamenti o errori, un titolo e una descrizione per pagina, immagini dichiarate nel proprio sitemap, e layout controllato fino a 320 px in tutte e tre le lingue.

14Lezioni apprese

Fare il proprio sito secondo lo standard che vendi è scomodo, e questo è il punto: ogni scorciatoia che avresti preso qui è una che potresti prendere per un cliente. Il nostro ci ha insegnato tre cose.Metti il contenuto dove le persone che lo scrivono possono raggiungerlo. Rendi le lingue una regola, non un'intenzione — qualsiasi altra cosa si allontana entro un mese. Prova i cambiamenti con misurazioni: questo sito una volta ha superato un confronto visivo mentre centinaia delle sue pagine avevano perso i loro stili.

Se vuoi un sito che sia un prodotto piuttosto che un volantino — con strumenti, un cruscotto, diverse lingue e un'interfaccia che appartiene a te — questo è esattamente ciò che facciamo.