Come si realizza un sito web: le fasi di lavoro dal primo contatto alla messa online

Chi mi chiede un preventivo di solito vuole sapere due cose prima ancora del prezzo: quanto tempo servirà e quanta parte del lavoro dovrà fare in prima persona. Qui descrivo come si realizza un sito web nel modo in cui lavoro io, dalla prima richiesta alla messa online, con le fasi nell’ordine in cui avvengono e i punti in cui il progetto si ferma ad aspettare qualcosa. È lo stesso procedimento che uso per ogni realizzazione di siti web a Firenze e nel resto della Toscana, quasi sempre in videochiamata.

I numeri di partenza sono quelli che trovi già sul sito: un sito one page parte da 700 € e va online in media in 2-4 settimane, un e-commerce con WooCommerce parte da 1.800 € e richiede 3-6 settimane. Le voci che fanno cambiare il prezzo sono nella FAQ su quanto costa un sito web a Firenze, i tempi nella risposta sui tempi di realizzazione di un sito WordPress. Il resto dell’articolo racconta cosa succede dentro quelle settimane.

Prima del preventivo: obiettivo, pagine, lingue e materiale

Il primo contatto arriva dal modulo della pagina di richiesta di preventivo, dal telefono, da WhatsApp o per email. Nel modulo i campi obbligatori sono quattro, e per partire bastano il tipo di sito e due righe sul progetto. Rispondo entro 48 ore; se manca un dato che mi serve, lo chiedo in quella risposta.

Per stimare il lavoro mi servono poche informazioni, le stesse che ho raccolto nella FAQ su cosa serve per richiedere un preventivo:

• cosa deve fare chi arriva sul sito: telefonarti, scriverti, prenotare o comprare. Da qui dipendono i pulsanti, i moduli e la posizione dei contatti in ogni pagina;
• una pagina o più pagine: un one page che scorre in verticale oppure un sito con una pagina per ogni argomento;
• le lingue: con WPML ogni lingua è una versione completa del sito, con indirizzi, title, meta description e moduli propri;
• il materiale che hai già: logo, foto, testi, dominio e hosting.

L’ultimo punto pesa sui tempi più degli altri. Durante il progetto ti chiedo tre cose: una call iniziale, il materiale e un controllo del sito prima della pubblicazione. Di queste, la più lunga di solito è preparare i testi, come spiego nella risposta su quanto tempo devi dedicare al sito. Un sito con testi già scritti e foto pronte parte subito; se i testi sono ancora da scrivere, c’è una fase in più, e quella fase dipende da te.

La videochiamata e il preventivo scritto

Dopo la prima risposta ci sentiamo in videochiamata. Mi racconti l’attività e i clienti che vuoi raggiungere; se hai già un sito lo apriamo con lo schermo condiviso e guardiamo cosa funziona e cosa no. Se il sito attuale riceve visite da Google, conviene verificare subito di avere gli accessi al dominio, all’hosting e a Search Console: senza, non si sa quali pagine portano traffico e vanno protette nel nuovo progetto.

Poi ti mando il preventivo scritto: cosa comprende il sito, il prezzo, i tempi e la manutenzione annuale. Non ha costi e non ti impegna. Se lo accetti, lo firmi e mi mandi il materiale per email, con Google Drive o con WeTransfer, sempre in formato digitale: i dettagli sono nella FAQ su come inviare testi, foto e logo.

Analisi e struttura: la mappa delle pagine

Prima di disegnare qualsiasi cosa scrivo la mappa delle pagine: l’elenco delle pagine del sito, come sono collegate tra loro e, per ognuna, la ricerca principale a cui deve rispondere. Una pagina che prova a rispondere a tre ricerche diverse di solito non soddisfa bene nessuna delle tre, e due pagine che rispondono alla stessa ricerca si fanno concorrenza su Google. Ho scritto a parte quali pagine servono al sito di un’attività e quando conviene una pagina per ogni servizio invece di una pagina unica.

Prendiamo come esempio una trattoria in Oltrarno che vuole un sito di quattro pagine. La mappa potrebbe essere questa:

Pagina	Ricerca principale	Cosa deve fare chi la apre
Home	trattoria Oltrarno Firenze	Capire che cucina fai, dove sei e quando sei aperto
Menu	menu trattoria fiorentina	Leggere piatti e prezzi senza scaricare un PDF
Cene di gruppo	cena aziendale Firenze	Sapere quanti posti ci sono e chiedere la disponibilità
Prenota	prenotare trattoria Oltrarno	Telefonare o scrivere su WhatsApp con un tocco

Le ricerche si scelgono partendo da come le scrivono i clienti, non da come il titolare chiama il servizio: la pagina può intitolarsi «Cene di gruppo», ma chi organizza la cena di fine anno scrive «cena aziendale». Dalla stessa tabella escono gli indirizzi delle pagine (/menu/, /cene-di-gruppo/), l’H1 di ognuna e le voci del menu di navigazione.

Quando le aree di lavoro sono molte, la mappa cresce in profondità. Nel sito di Giusti Studio Legale, a Firenze, ognuna delle dodici aree di competenza ha la sua pagina, e anche ogni avvocato ha una pagina con gli ambiti di cui si occupa e il curriculum: chi deve affidare una causa vuole sapere chi la seguirà.

La bozza grafica della home e delle pagine tipo

Con la mappa approvata preparo la bozza grafica della home e delle pagine tipo, cioè i modelli che si ripetono. In un sito con sei servizi, le sei pagine dei servizi hanno la stessa struttura (titolo, descrizione, cosa comprende, contatto in fondo) e cambiano solo nei contenuti: approvata la bozza di una, la struttura vale per tutte. È anche il modo in cui verranno costruite nel tema, con un unico template.

La bozza la guardiamo insieme in videochiamata, con lo schermo condiviso, e decidiamo cosa cambiare. Qui si fissano colori, caratteri, la prima schermata della home e la posizione dei contatti, sia da computer sia da smartphone. È il momento giusto per cambiare idea: spostare una sezione nella bozza è una modifica al disegno, spostarla quando il tema è già sviluppato vuol dire riscrivere il componente e ricontrollare la pagina su tutti i dispositivi.

Se mancano foto adatte posso preparare illustrazioni con l’intelligenza artificiale; per i servizi fotografici e i video lavoro con alcuni collaboratori. Conviene deciderlo in questa fase, perché le dimensioni delle immagini dipendono dalla grafica.

Lo sviluppo del tema WordPress e dei campi modificabili

Approvata la grafica, scrivo il tema WordPress da zero, senza temi comprati e senza page builder come Elementor o Divi. Il tema è diviso in componenti: l’intestazione, la fascia dei servizi, la galleria dei lavori, il modulo di contatto. Ogni componente è un file a sé che i template richiamano dove serve, quindi la fascia dei contatti compare uguale in tutte le pagine e una correzione si fa in un punto solo. Le differenze rispetto a un tema già pronto le ho spiegate nell’articolo su tema WordPress commerciale o tema custom.

Per ogni sezione preparo nel pannello i campi modificabili con Advanced Custom Fields (ACF): per esempio titolo, testo, immagine e scritta del pulsante. Nel codice ogni campo viene controllato prima di essere mostrato: se lo lasci vuoto, l’elemento non compare, così non resta in pagina un titolo vuoto o un pulsante senza testo. Alla consegna ricevi un utente WordPress personale; cosa potrai cambiare da solo l’ho raccontato in testi e immagini che puoi modificare da solo.

Lo sviluppo avviene in un ambiente separato, lo staging, che Google non deve indicizzare. Puoi vedere il sito mentre prende forma e segnalarmi cosa cambiare: le correzioni le raccolgo e le faccio io. Carico gli script solo nelle pagine che li usano, per cui la libreria dello slider non viene scaricata in una pagina che non ha uno slider. Il resto del metodo è nella pagina sulla realizzazione di siti WordPress.

Testi, foto e SEO di base pagina per pagina

Quando arrivano i contenuti li inserisco pagina per pagina insieme alla SEO di base: title e meta description delle pagine principali, un solo H1 per pagina, titoli in ordine, immagini WebP e dati strutturati schema.org con nome, indirizzo, telefono e zona in cui lavori. L’elenco completo è nella FAQ su cosa comprende la SEO nella realizzazione del sito.

Il title è il titolo della pagina che Google mostra nei risultati, e in WordPress lo scrivo nel campo «Titolo SEO» di Yoast. Un confronto sulla home di uno studio di architettura immaginario:

• prima: «Home | Studio Rossi», 19 caratteri, che non dicono cosa fa lo studio né dove lavora;
• dopo: «Studio di architettura a Firenze | Studio Rossi», 47 caratteri, con servizio, città e nome.

Google accorcia i title troppo lunghi in base allo spazio disponibile sullo schermo; tenerli intorno ai 60 caratteri, con servizio e città all’inizio, evita che la parte che interessa finisca dopo i puntini.

Per le immagini il lavoro riguarda soprattutto le dimensioni. Una foto scattata con lo smartphone misura spesso 4000 × 3000 pixel, cioè 12 milioni di pixel. Se nella pagina occupa al massimo 1600 × 1200 pixel, cioè 1,92 milioni, l’84% dei pixel scaricati non serve. La ridimensiono, la converto in WebP e lascio a WordPress le versioni più piccole che, con l’attributo srcset, il browser dello smartphone sceglie al posto di quella grande.

Nei siti in più lingue le traduzioni puoi darmele tu, oppure le preparo io con l’aiuto dell’intelligenza artificiale e le rivedo prima della pubblicazione. Ogni pagina tradotta ha il suo title e la sua meta description.

I controlli prima della messa online

Prima di pubblicare ti chiedo di guardare tutto il sito, da computer e da telefono. Io intanto seguo una lista di controlli prima della pubblicazione; per un sito vetrina sono questi:

1. Indicizzazione riattivata: in Impostazioni → Lettura l’opzione «Scoraggia i motori di ricerca dall’effettuare l’indicizzazione di questo sito» va tolta, e nessuna pagina da mostrare su Google deve avere il noindex.
2. Title e meta description compilati in Yoast per le pagine principali, senza testi uguali tra due pagine.
3. Un solo H1 per pagina e titoli H2 e H3 in ordine, senza salti di livello.
4. Immagini in WebP, ciascuna con il testo alternativo.
5. Prova su smartphone di ogni pagina: menu, pulsanti, tabelle e moduli usabili senza zoom.
6. Link di contatto funzionanti: tel: con il prefisso +39, https://wa.me/ per WhatsApp e mailto: per l’email, provati toccandoli dal telefono.
7. Modulo di contatto inviato almeno una volta, con la mail arrivata nella casella giusta e non nello spam.
8. Redirect 301 dai vecchi indirizzi, se il sito ne sostituisce uno esistente, verificati su un campione di URL.
9. Canonical e link interni che puntano al dominio definitivo, senza riferimenti all’indirizzo di staging.
10. Banner dei cookie e informativa coerenti con quello che il sito carica davvero, per esempio una mappa di Google o uno strumento di statistica.

L’ottavo punto è quello che fa più danni quando manca. Se una pagina che compariva su Google passa da /chi-siamo.html a /studio/ e il vecchio indirizzo restituisce un errore 404, per Google la pagina è sparita e quella nuova riparte quasi da zero. La mappatura dei vecchi indirizzi l’ho descritta passo per passo in come rifare il sito senza perdere posizioni. Per il sesto punto, nel sito della trattoria La Toppa il numero è in apertura e si prenota anche dal pulsante WhatsApp: sono i primi due link da provare.

La messa online, Search Console e il primo mese

Il sito va online su hosting e dominio intestati a te: se un giorno cambi fornitore, non devi chiedere a nessuno di trasferirti la proprietà. Il giorno della pubblicazione invio la sitemap a Google Search Console. Con Yoast l’indirizzo è /sitemap_index.xml, da inserire nel menu Sitemap, alla voce «Aggiungi una nuova sitemap».

Nelle settimane successive guardo tre rapporti:

• Pagine, nella sezione Indicizzazione: quali pagine sono indicizzate e, per quelle escluse, il motivo;
• Rendimento: per quali ricerche compaiono le pagine, con impressioni, clic e posizione media;
• Controllo URL: serve a chiedere l’indicizzazione di una pagina importante che dopo qualche giorno non risulta ancora nell’indice.

I tempi con cui un sito nuovo compare nelle ricerche dipendono da quanto spesso Google lo visita e dalla concorrenza sulle ricerche che interessano, come spiego in quanto tempo serve per comparire su Google. Nel primo mese controllo che le pagine entrino nell’indice; le posizioni si valutano dopo.

Quanto dura ogni fase: il calendario di un sito vetrina di sei pagine

Prendiamo uno studio professionale che chiede un sito vetrina di sei pagine (home, studio, tre servizi, contatti) in una sola lingua, con testi e foto forniti dallo studio. Un calendario di quattro settimane, dentro le 2-4 settimane che indico per un sito vetrina, potrebbe essere questo:

Settimana	Cosa faccio io	Cosa serve dal cliente
1	Risposta, videochiamata, preventivo scritto, mappa delle pagine	Firma del preventivo
2	Bozza della home e della pagina servizio, revisione in videochiamata	Approvazione della bozza
3	Sviluppo del tema e dei campi, inserimento dei contenuti, SEO di base	Testi e foto già consegnati a inizio settimana
4	Controlli, correzioni, messa online, sitemap in Search Console	Controllo del sito prima della pubblicazione

Le date vere le trovi nel preventivo, con la stima dei tempi concordata prima di iniziare. La tabella serve a vedere dove il progetto dipende dal cliente: nella colonna di destra. Se i testi arrivano a fine quarta settimana invece che a inizio terza, lo sviluppo del tema può andare avanti, ma inserimento dei contenuti, SEO e controlli slittano di conseguenza. Due settimane di ritardo sui testi portano la messa online da quattro a circa sei settimane.

Per un e-commerce il calendario si allunga a 3-6 settimane, perché oltre alle pagine ci sono i prodotti da caricare e le email degli ordini da preparare e provare.

Dove si perde più tempo

I punti in cui un progetto si ferma più facilmente sono quasi tutti fuori dal codice:

• i testi: conviene scrivere per prima la pagina del servizio principale, che poi fa da modello per le altre pagine di servizio;
• le foto: se non ci sono, decidere presto tra servizio fotografico e illustrazioni evita di fermare lo sviluppo con i riquadri vuoti;
• gli accessi: se il dominio è stato registrato a nome di chi ha fatto il sito precedente, recuperarlo può richiedere tempo, e senza dominio il sito non va online;
• le decisioni rimandate: una sezione spostata a tema già sviluppato è un componente da riscrivere e una pagina da ricontrollare;
• le traduzioni: la seconda lingua si può controllare solo quando i testi tradotti sono nel sito, quindi conviene consegnarli insieme a quelli in italiano.

Dopo la consegna: manutenzione e nuove modifiche

Con la messa online il sito entra nella manutenzione annuale, prevista per ogni sito che realizzo e scritta nel preventivo: comprende gli aggiornamenti di WordPress e dei plugin e le modifiche ordinarie ai contenuti, come cambiare un testo, sostituire una foto o pubblicare un articolo. Nuove sezioni, funzioni in più o cambi importanti alla grafica si valutano con un preventivo a parte. Perché gli aggiornamenti vanno seguiti da qualcuno l’ho spiegato nell’articolo sulla manutenzione di un sito WordPress.

Se stai per chiedere un preventivo, la cosa più utile da preparare è l’elenco delle pagine che immagini, con accanto cosa deve fare chi le visita: è il punto da cui parte la mappa. Puoi mandarmelo dal modulo del preventivo per il sito web, oppure chiamarmi o scrivermi su WhatsApp, tutti i giorni dalle 8 alle 20.

Email
alessio.piazzini@gmail.com

Telefono e WhatsApp
+39 393 438 5449 · scrivimi su WhatsApp