Il mio primo sito

L'esigenza

Su LinkedIn mi serviva un indirizzo da condividere con chi voleva capire meglio che cosa faccio. Il profilo offre un primo quadro; il sito mi permette di accompagnare chi è interessato verso contenuti più specifici. Chi arriva deve orientarsi in pochi secondi, riconoscere i percorsi disponibili e capire subito dove approfondire.

Ho pensato anche a chi arriverà più avanti, quando i miei progetti avranno una storia da raccontare. Possibili partner e investitori devono poter capire che cosa sto costruendo e seguire gli sviluppi, compreso quello che quei progetti genereranno. Per questo ho previsto una struttura che possa accogliere nuovi contenuti senza dover essere ridisegnata ogni volta. Le prossime pagine potranno nascere insieme ai progetti.

Era la prima volta che realizzavo un sito. Ho organizzato il lavoro con il metodo che uso con i clienti: requisiti chiari, scelte motivate e verifiche prima della pubblicazione. Claude si è occupato della costruzione, io ho scritto le regole, valutato le proposte e provato le soluzioni. Per la parte visiva ho lavorato sul sito reale, attivando e disattivando temi a livelli diversi, e ho valutato il risultato sui miei due schermi e sul telefono. Ho pubblicato solo ciò che avevo già visto in anteprima.

Vincoli

Ho fissato subito alcuni limiti: hosting a costo zero, nessun database e nessun cookie. L'accessibilità secondo WCAG 2.2 AA e la qualità visiva dovevano essere rispettate insieme. I contenuti devono restare leggibili anche senza JavaScript e il sito deve funzionare bene su iPhone e iPad. Ho previsto otto lingue, con l'arabo da destra a sinistra e il cinese in forma semplificata.

Bivi

1. Scelta

   La home parte da un selettore 3D a tessere. Sui computer meno potenti passa automaticamente a schede semplici, mentre sul telefono diventa una griglia di icone simile a quella delle app.

   Alternative scartate

   Tessere disposte ad anello; solo menu classico.

   Motivo

   La prima schermata deve orientare subito e lasciare chiaro come proseguire. La presentazione cambia in base al dispositivo, così la navigazione resta veloce anche quando le risorse disponibili sono limitate.

2. Scelta

   Il modulo di contatto richiede una conferma via mail. Il messaggio mi arriva solo dopo che chi scrive apre il link ricevuto.

   Alternative scartate

   Indirizzo mail pubblicato nella pagina; servizio di moduli a pagamento.

   Motivo

   La conferma evita che il modulo venga usato per inviare mail a mio nome a sconosciuti. Ho mantenuto i dati su strumenti che controllo.

3. Scelta

   Per aggiornare i contenuti ho realizzato un editor mio nel sito di prova, accessibile con un codice ricevuto via mail. Ogni modifica genera un'anteprima che controllo prima di pubblicare.

   Alternative scartate

   CMS con database; modifica manuale dei file.

   Motivo

   Posso aggiornare i testi senza intervenire sul codice. L'anteprima mi permette di verificare il risultato prima che una modifica diventi pubblica.

4. Scelta

   Ogni testo è gestito come dato separato dal codice, con una versione per ciascuna delle otto lingue. Se manca una traduzione o una voce del menu supera lo spazio disponibile, la costruzione del sito si ferma.

   Alternative scartate

   Testi inseriti direttamente nelle pagine; CMS esterno.

   Motivo

   Posso aggiornare una frase o aggiungere una lingua senza intervenire sul codice. I controlli individuano le traduzioni mancanti e le voci troppo lunghe prima della pubblicazione.

5. Scelta

   Il riferimento di partenza era un biglietto nero opaco con lamina d'oro. L'ho tradotto in una tessera centrale nera e levigata, con l'icona dorata incastonata e una luce rossa che affiora dietro il bordo, come un cofanetto che si apre: eleganza, lusso e lussuria erano le parole guida. Ho cercato i siti più premiati, preso da ciaoenergy.com l'atmosfera del movimento e della luce come ispirazione, senza copiarne il design, e confrontato il risultato con una versione di prova realizzata con Lovable; da quel confronto ho mantenuto la luce rossa di sfondo. Il rosso resta una luce o indica la pagina attiva, mentre tutti gli elementi cliccabili condividono la stessa finitura laccata.

   Alternative scartate

   Icone bianche; oro piatto; marmo venato, provato e poi eliminato; immagini sulle tessere; navigatore a pallini.

   Motivo

   Volevo un'identità visiva riconoscibile anche prima che si cominciasse a leggere. Ho mantenuto coerenti superfici, luce e colori, limitando ogni elemento a una funzione precisa. Le prove mi hanno aiutato a capire quali soluzioni sostenessero questa direzione e quali la rendessero meno uniforme.

6. Scelta

   Per l'esperienza d'uso ho consultato Nielsen Norman Group, le linee guida W3C su menu e accessibilità e le indicazioni sui caroselli, comprese quelle per le frecce sotto le tessere. Nelle pagine interne, per esempio, le voci del menu restano visibili sul computer perché i menu nascosti vengono usati molto meno.

   Alternative scartate

   Decisioni basate soltanto sul gusto personale.

   Motivo

   Volevo che le scelte che incidono sulla navigazione avessero un riscontro documentato. Ho usato le indicazioni disponibili per decidere come si raggiungono i contenuti e come si interagisce con gli elementi dell'interfaccia.

Risultato

Il sito è online in otto lingue. Il controllo automatico di accessibilità non segnala errori in nessuna pagina. Dopo l'ottimizzazione, la home con il 3D pesa il 57% in meno. A ogni modifica partono test automatici su tutte le pagine, comprese le verifiche alle misure di iPhone e iPad.

I test non coprono tutto, ed è giusto chiarirlo. Ho testato manualmente il sito su iPhone e iPad, e anche con Chrome e Firefox; Safari su Mac non è stato provato in modo sistematico. Una parte dei test su telefoni e tablet viene eseguita in simulazione. Le traduzioni sono attualmente automatiche; in una fase successiva mi affiderò a servizi professionali di traduzione.