Fase 2 – Progettazione del sito web

Passo 2.1 – Progettazione dell’architettura tecnica

2.1.1 – Configurazione degli ambienti

Effettuare le scelte di seguito indicate, anche in base ai requisiti e vincoli espressi dal Committente.

Ambiente di produzione

• Nome del dominio;
• provider di dominio;
• provider del servizio di hosting (per i criteri nella scelta, vedere lo specifico paragrafo di seguito);
• ambiente di hosting (Linux/Windows):
• piattaforma CMS/e-commerce/e-learning, temi e plugin;
• linguaggi di programmazione di back end e di front end.

Criteri nella scelta del nome del dominio

Nella scelta del nome di dominio, prendere in considerazione i seguenti aspetti:

• l’indicizzazione su Google non può essere fatta per domini di terzo livello (es. miosito.libero.it);
• per il dominio di primo livello (TLD – Top Level Domain):
  • il TLD .it può aiutare il sito a posizionarsi nelle query di ricerca fatte da utenti italiani;
  • i TLD .it e .com sono più economici rispetto agli altri TLD (.info, .online, ecc.);
• Per i nomi di dominio a chiave esatta (EMD – Exact Match Domain): nel passato si riteneva che la presenza di keyword nel nome del dominio ne migliorasse il posizionamento su Google. Dall’algoritmo Google Hummingbird in poi, questa caratteristica è meno rilevante. Al contrario, la presenza di keyword in un eventuale sottodominio sembra posizionare meglio lo stesso.

Criteri nella scelta del provider di servizi di hosting

Nella scelta del provider dei servizi di hosting, valutare le seguenti caratteristiche:

• risorse messe a disposizione: larghezza di banda, spazio disco (SSD), numero e dimensione database;
• disponibilità di un pannello di controllo (CPanel);
• possibilità di definire dei sottodomini;
• scelta dell’ambiente (Linux o Windows);
• possibilità di reindirizzare le pagine (tipicamente tramite dichiarazioni mod_rewrite nel file .htaccess in ambiente Linux);
• presenza del linguaggio PHP, con possibilità di scelta della versione, di attivazione di estensioni non standard (mbstring, pdo, zip, ecc.) e di modifica delle opzioni del file php.ini (upload_max_filesize, max_execution_time, ecc.);
• per il database:
  • presenza del dbms MySql,
  • accesso ad una pagina di amministrazione del DB (phpMyAdmin),
  • possibilità di accesso al database da remoto;
• disponibilità del servizio SSL (possibilmente in modo gratuito) per l’utilizzo del protocollo HTTPS;
• possibilità di comprimere i file prima di inviarli al browser;
• gestione dell’header http if-modified-since. Questo header, inviato da Google nell’indicizzazione delle pagine, Indica al server di restituire la risorsa solo se è stata modificata dopo una certa data. Se la risorsa non è cambiata, il server risponde con 304 Not Modified, evitando di inviare nuovamente il contenuto.
• supporto alla codifica di caratteri UTF-8; che rappresenta lo standard di codifica più utilizzato sul web e supporta praticamente tutte le lingue e i simboli del mondo. È compatibile con ASCII, il che significa che i caratteri standard (A-Z, 0-9, punteggiatura) vengono interpretati correttamente senza conversione.
• possibilità di accedere al web server tramite FTP, anche utilizzando account diversi;
• disponibilità di accesso al web server tramite SSH;
• accesso ai log di errore;
• disponibilità di statistiche sul consumo di risorse;
• disponibilità di statistiche sugli accessi al sito.
• costi, rispetto ad altri provider.

Ambiente di sviluppo

• gerarchia delle directory del sito;
• strumenti per la gestione delle immagini (PhotoShop, IrfanView) e relativi plugin (ad es. gestione immagini WebP, compressione per il web);
• strumenti di sviluppo:
  • IDE (NetBeans);
  • text editor (Notepad++, Brackets, Sublime Text) e relativi plugin (ad es. nppFTP);
  • debugging (xDebug);
  • controllo delle versioni (GIT, CVS, SVN-Subversion);
  • controllo delle dipendenze (Composer);
  • gestione delle traduzioni (POEdit);
  • preprocessing (Koala)
  • compressione di file css e js;
  • miglioramento dell’aspetto del codice (linters);
  • test delle espressioni regolari (Regex Coach);
• strumenti per l’operatività in produzione:
  • client FTP (FileZilla client),
  • client SSH (PuTTY),
  • amministrazione DB (MySql workbench).

Ambiente di test

• utilizzo o meno di una macchina virtuale (Oracle VM VirtualBox);
• sistema operativo, web server, DB server, FTP server (in conformità all’ambiente di produzione);

2.1.2 – Prestazioni – checklist degli accorgimenti

Check list degli accorgimenti da adottare per migliorare le prestazioni del sito:

• scelta del provider di hosting;
• caching delle pagine HTML lato server (tramite .htaccess o tramite plugin WordPress);
• caching dei risultati delle query (persistent object cache, ad esempio tramite Redis Cache o Memcached)
• compressione dei file prima dell’invio al client (compressione Gzip);
• uso della cache del browser (tramite la data di scadenza dei contenuti);
• utilizzo di file javascript e css compressi (minifizzati);
• riduzione delle chiamate http al server, ad esempio tramite l’impiego di fogli di immagini (image sprite);
• uso di CDN (un browser carica due item per volta dalla stessa fonte);
• utilizzo di immagini ottimizzate per il web.

Risorse online

• Per l’ottimizzazione di WordPress, vedi l’articolo Performance / Optimization sul sito developer.wordpress.org (in lingua inglese).

2.1.3 – Sicurezza e protezione dei dati – checklist degli accorgimenti

Checklist degli accorgimenti da adottare per migliorare la sicurezza del sito:

• rendere il sito accessibile unicamente tramite protocollo HTTPS (è necessario che l’hosting renda disponibile quest’opzione). Questa caratteristica è anche un fattore di ranking Google;
• proteggere l’accesso all’area riservata (back-end) tramite strong password;
• utilizzare una utenza WordPress di amministrazione diversa da “admin” e un prefisso del database diverso da “wp_”);
• personalizzare l’indirizzo della form di login;
• limitare il numero di tentativi di accesso ammessi all’area riservata del sito, per scoraggiare tentativi di attacco “brute force”;);
• criptare le password salvate su database;
• proteggere dallo spam la form di contatto e i commenti agli articoli del sito;
• mascherare i riferimenti nei contatti per evitare l’utilizzo improprio di telefono e casella di posta;
• definire frequenza del backup periodico dell’intero sito (file e database);
• definire frequenza degli aggiornamenti software (ambienti di sviluppo/test/produzione)

Risorse online

• Le migliori pratiche di sicurezza su WordPress (in lingua francese)
• Per l’ottimizzazione di WordPress, vedi l’articolo Security sul sito developer.wordpress.org (in lingua inglese).

---

2.1.4 – Versionamento e distribuzione

Questo passo è utile soprattutto quando il sito è sviluppato direttamente in PHP, ad esempio tramite il framework PHP Laravel, invece che tramite una piattaforma CMS.

• Scegliere lo strumento (VCS o DVCS) per la gestione della configurazione (GIT, VCS, SVN, Mercurial, Subversion): Questi tool sono noti anche come strumenti SCM (che viene interpreato a volte come Source Code Management e a volte come Software Configuration Management).
• Scegliere il modello di flusso (GIT Flow, GitHub Flow, Trunk Based Development).
• Scegliere un repository SSOT (GitHub).
• Definire lo standard per Type e Scope del messaggoi di commit.
• Scegliere gli standard da applicare ed i tools da adottare per la gestione automatica delle release:
  • workflow automation/git hooks → Husky
  • linting del messaggio di commit → commitlint
  • automazione della release → shipmark
• Scegliere i tool per le attività di controllo qualità del codice pre-commit (linters)
• Definire il workflow di Integrazione (jobs e steps)
• Definire il workflow di Deploy (jobs e steps)

Passo 2.2 – Adeguamento ai requisiti di legge

2.2.1 – Protezione dei dati personali (GDPR)

Per quanto riguarda la legge sulla protezione dei dati personali (“GDPR”), adottare i seguenti accorgimenti:

• nel caso di raccolta di dati personali riguardanti gli utenti del sito, prevedere la pagina con l’informativa sulla privacy;
• nel caso in cui il sito registri cookie sul dispositivo dell’utente, prevedere la pagina con la cookie policy e il banner su ciascuna pagina del sito, per permettere agli utenti di esprimere il consenso sull’utilizzo dei cookie (il banner verrà nascosto dopo che l’utente avrà manifestato la sua preferenza);
• utilizzare solo i cookies per i quali l’utente ha prestato il consenso;
• proteggere i dati gestiti (accesso, conservazione), vedere a tal proposito il punto 2.1.3;
• anonimizzare gli IP address degli utenti che interagiscono con il sito.

2.2.2 – Diritto d’autore (copyright)

Per quanto riguarda la legge sul diritto d’autore, adottare i seguenti accorgimenti:

• utilizzare solo contenuti testuali originali;
• utilizzare foto e immagini originali o rese disponibili in internet senza vincoli di diritto d’autore;
• dichiarare i contenuti del sito di proprietà e non duplicabili senza consenso.

---

Passo 2.3 – Progettazione dei contenuti

Questa sezione della progettazione del sito web si preoccupa di organizzarne i contenuti per renderli facilmente accessibili agli utenti. Si devono prima di tutto definire i contenuti che si vogliono pubblicare, per poi categorizzarli in una gerarchia logica.

La classificazione di singoli elementi informativi all’interno di una gerarchia prende il nome di “architettura delle informazioni”.

2.3.1 – Analisi delle keyword

• A seguito dei colloqui iniziali con il Committente dovrebbero essere già disponibili i seguenti dati:
  • il settore merceologico del sito in Google My Business (di cosa si occupa l’azienda);
  • le categorie di prodotto e i servizi offerti (eventuali cataloghi, brochure, flyer);
  • i tratti caratteristici dell’azienda: motto (sarà la tag line del sito), Unique Value Proposition (UVP);
  • i possibili termini di ricerca (keyword) con cui si vorrebbe essere trovati su Google per ciascun intento;
• definire gli intenti di ricerca di interesse (search intent: go, know, do);
• per ciascun intento: individuazione keyword e loro sinonimi; il percorso logico da applicare è quello del Content Marketing:
  • Qual è il mercato a cui mi voglio rivolgere (fascia di età, sesso, stato sociale, cultura)?
  • Quali sono le attese, le necessità e i comportamenti caratteristici delle persone che costituiscono il mercato di riferimento?
  • Quali caratteristiche deve avere il mio prodotto/servizio per soddisfare le necessità del mercato?
  • scrivere contenuti di valore per attirare, coinvolgere e fidelizzare un pubblico sulla base delle sue necessità e delle caratteristiche del mio prodotto/servizio
• definizione keyword di coda lunga correlate (LTK = Long Tail Keyword), utilizzando ad esempio le previsioni di ricerca Google, il riquadro People Also Ask nelle SERP di Google, lo Strumento di pianificazione delle parole chiave (“Keyword Tool”) di Google ADS, i siti answer the public o BuzzSumo);
• ricerca keyword correlate semanticamente (LSI = Latent Semantic Index);
• individuazione delle LTK più utilizzate (“search volume”) e meno competitive (in base alla “keyword difficulty”);
• se previsto dai requisiti ed è disponibile uno specifico budget: analisi delle keyword con cui sono posizionati i concorrenti (competitors analysis);
• selezione delle LTK per cui predisporre i contenuti;
• individuazione delle pagine:
  • istituzionali per l’intento di ricerca “GO”,
  • informative (blog) per l’intento di ricerca “KNOW”,
  • transazionali (landing pages) per l’intento di ricerca “DO”;
• definizione delle tipologie di contenuto da utilizzare su ciascuna pagina, ad esempio:
  • Testi → Articoli approfonditi su argomenti rilevanti per il pubblico target.
  • Video → Contenuti visivi per spiegare concetti, mostrare prodotti o raccontare storie.
  • Infografiche → Dati e informazioni presentati in modo visivo e accattivante.
  • E-book & Whitepaper → Materiali più dettagliati per educare o guidare l’utente.
• predisposizione di un piano editoriale per il blog (elenco delle pagine da pubblicare, associate alle long tail keyword selezionate e alla data prevista di pubblicazione).

2.3.2 – Mappa del sito web

• Individuazione delle possibili tassonomie per l’organizzazione gerarchica dei contenuti del sito;
• scelta della tassonomia finale;
• predisposizione della mappa del sito, sulla base del piano editoriale e della tassonomia individuata.

Risorse

2.3.3 – Gestione delle lingue

Nel caso di sito multilingua, i paesi e le lingue per cui dev’esser predisposto il sito dovrebbero essere già stati recepiti durante le interviste al Committente, scegliere:

• modalità di fruizione delle lingue (sottodominio, sottocartella);
• il plugin multilingue (WPML).

---

Passo 2.4 – Progettazione dei template di pagina

I template di pagina indicano quali tipologie di contenuto devono essere inserite in quale sezione della pagina web, per ciascuna tipologia di pagina.

2.4.1 – Tipologie di contenuto

Navigazione

Gli elementi di navigazione forniscono all’utente le indicazioni sulla struttura del sito e su dove si trova.

La presenza di link ad altre pagine del sito favorisce la permanenza degli utenti all’interno del dominio, con effetti positivi sulla user search experience.
Gli elementi tipici sono i seguenti:

• menu principale di navigazione;
• search box;
• selettore della lingua;
• breadcrumb (se integrata con i dati strutturati, la breadcrumb può influenzare l’aspetto degli snippet sulla SERP);
• bottoni di spostamento all’interno del sito (ad esempio: per saperne di più, leggi tutto);
• menu di archivi dei post (per categoria, per data, per autore);
• indice dei contenuti della pagina;
• link ai post precedente e successivo nell’ambito della stessa categoria;
• griglia o slider degli articoli correlati;
• collegamento all’informativa sulla privacy e la cookie policy;
• icone dei social collegati al sito;

Informazione

Sono i contenuti tipici della pagina: la descrizione dei servizi nella home page, la descrizione dell’azienda nella pagina chi siamo, il corpo dell’articolo nelle pagine dei post.

Coinvolgimento dell’utente (engagement)

Sono elementi che permettano all’utente di interagire con le pagine del sito per:

• effettuare una ricerca interna al sito;
• inserire commenti agli articoli;
• esprimere like o recensire la pagina;
• condividere la pagina sui propri social (utilizzo di microdati);

Conversione

Sono elementi che permettano all’utente di interagire con il Committente (conversioni) e sono quindi un sottoinsieme degli elementi di coinvolgimento:

• call-to-action;
• modulo di contatto, riferimenti telefonici e di posta elettronica;
• possibilità di interagire in chat con un robot;
• newsletter opt-in;
• comparsa di una finestra modal all’uscita dalla pagina;
• box di offerta di contenuti gratuiti, da inviare tramite mail.

Estetici

Sono elementi grafici che migliorano l’aspetto delle pagine:

• sfondi
• immagini

2.4.2 – Layout di pagina

La progettazione dei layout di pagina definisce dove collocare le diverse tipologie di contenuto all’interno delle diverse pagine. Scegliere se predisporre un prototipo da presentare al Committente o realizzare su carta i diversi wireframe per gli specifici layout.

• definizione del layout della pagina (wireframe), posizionando i contenuti nelle diverse sezioni (top bar, header, footer, corpo centrale, eventuali sidebar sinistra e destra);
• Layout specifici per i diversi intenti di ricerca:
  • GO: home page, contatti, chi siamo, pagine servizio, pagine prodotto;
  • KNOW: pagine di categoria, articoli/prodotti;
  • DO: landing pages; end point e-commerce (account, shop, wishlist, carrello, checkout, spedizione, pagamento, condizioni d’uso e di restituzione, i miei ordini);
  • altro: pagina di cortesia, pagina di errore https, pagina 404, pagina risultati di ricerca; informativa privacy, cookie policy,
• gestione di contenuti nascosti (comparsa su click, comparsa allo scroll, accordion, tabs)
• i layout devono essere progettati per i diversi dispositivi con cui si può accedere al sito (smartphone, tablet, desktop).

2.4.3 – Template HTML

L’articolo Template HTML5 descrive gli quali sono gli elementi HTML che costituiscono il template.

---

Passo 2.5 – Design dell’interfaccia utente

2.5.1 – Accorgimenti per l’usabilità del sito

Al fine di migliorare l’usabilità del sito, vanno prese in considerazione le seguenti caratteristiche:

Caratteristica	Accorgimenti adottati
Leggibilità	– contenuto centrato sulla pagina; – limitazione della larghezza dei contenuti testuali a circa 80 caratteri; – utilizzo di un font sufficientemente grande e di facile lettura; – suddivisione degli articoli in paragrafi; – utilizzo di frasi di lunghezza limitata; – correttezza ortografica degli articoli.
Organizzazione delle informazioni	– utilizzo delle categorie per organizzare i contenuti del blog in una gerarchia. – accorgimenti di “gerarchia visuale”: più spazio/enfasi agli argomenti principali)
Standardizzazione della posizione dei contenuti e della navigazione nel sito ( i diversi elementi vengono collocati dove ci si aspetta che siano, a scapito dell’originalità)	– posizionamento del logo in alto a sinistra, collegato al link alla home page; – posizionamento del menu principale nella parte alta dello schermo; – posizionamento della breadcrumb al di sotto del menu; – presenza di una casella per la ricerca di contenuti all’interno del sito; – posizionamento del link alla privacy policy nel footer; – inserimento dei link ai social media nell’header e/o nel footer; – presenza di una pagina Contatti con: – riferimenti (telefono, fax, email), – localizzazione geografica (Google Map), – modulo di contatto per fissare un appuntamento.
Esaustività	– Articoli possibilmente composti da almeno 300 parole ;
Grafica	– utilizzo di fotografie o altri contenuti multimediali; – utilizzo di icone.
Omogeneità grafica	– adozione di una palette limitata di colori, mantenuta sull’intero sito in modo che la navigazione sia omogenea, basata sul colore del logo e su colori coerenti con il contenuto del sito; – utilizzo di uno/due colori per titoli, stili puntati, icone, link.
Animazione	– utilizzo, dove appropriato, di animazioni per la comparsa dei contenuti durante lo scorrimento della pagina; – utilizzo, dove appropriato, di animazioni al posizionamento e al click del mouse su bottoni, immagini e link presenti sul sito;
Accessibilità (da parte di utenti con disabilità)	– utilizzo di un testo alternativo per le immagini; – utilizzo di colori contrastanti (rapporto di 4,5:1 per il testo normale e di 3:1 per il testo più grande (grassetto 18px o standard 24px e oltre – vedi WCAG Guideline 1.4.3) verificato su  WebAIM Contrast Checker; – possibilità di selezionare la grandezza dei caratteri; – possibilità di selezionare un tema “dark”. Vedere anche le Linee guida per l’accessibilità dei contenuti Web (WCAG) 2.1

2.5.2 – Ottimizzazione per i dispositivi mobili (responsive design)

Lo scopo della progettazione responsive è quello di adattare le pagine del sito ai diversi dispositivi. Le attività d progettazione sono le seguenti:

• definire le categorie di dispositivo (generalmente: smartphone, tablet, desktop);
• associare ogni categoria di dispositivo ad uno specifico valore (in pixel) di larghezza della finestra di visualizzazione. Ciascun valore costituisce un punto di interruzione (breakpoint), al raggiungimento di tale valore, i contenuti della pagina vengono riformattati e ridimensionati (vedere punto 2.4.2).

Da valutare (ma può essere fatto anche sede di Ottimizzazione), se adottare o meno le pagine AMP di Google.

2.5.3 – Graphic design (aspetti statici del sito web)

Definizione dell’aspetto estetico delle pagine del sito:

• ampiezza delle sezioni, separazioni e spazi vuoti per aiutare l’utente del sito ad individuare i diversi contenuti della pagina (sulla base delle indicazioni provenienti dall’architettura dell’informazione);
• palette di colori del sito, partendo dal logo e dall’eventuale brand identity del Committente;
• font, colore e grandezza dei caratteri tipografici per titoli e paragrafi (per ciascun device);
• elementi grafici (icone, colori, gradienti) per:
  • titoli, link, elenchi, citazioni, didascalie, testi in evidenza (strong, em), acronimi e qualunque altra tipologia di testo;
  • sfondo della pagina, sfondo delle sezioni, barre di scorrimento;
• background generale del sito;
• inserimento di infografiche, foto e immagini.

2.5.4 – Interazione con l’utente (aspetti dinamici del sito web)

Definizione degli aspetti di interazione per guidare l’utente nella navigazione della pagina:

• comportamento della pagina a caricamento (preloader);
• funzionamento dell’header (slider);
• effetti al mouse over e al click su: voci di menu, menu a discesa, bottoni, form, link, immagini;
• scroll verticale della pagina: comportamento del menu principale allo scroll, ingresso di contenuti, smooth scroll, pulsante Torna su.

---

Passo 2.6 – Verifica del sistema di controllo

Il sistema di controllo permette il monitoraggio nel tempo dell’efficacia del sito web rispetto agli obiettivi definiti in fase di Specifica. Le attività di monitoraggio predefinite riguardano i seguenti ambiti:

• scansione (crawling) ed indicizzazione (indexing) delle pagine del sito;
• posizionamento delle pagine sulla SERP a fronte delle keyword individuate nell’Analisi delle keyword;
• efficacia degli snippet sulla SERP;
• user search experience;
• tasso di conversione.

In fase di Progettazione si deve:

• verificare l’adeguatezza del sistema di controllo predefinito rispetto agli obiettivi del sito ed eventualmente modificarlo per renderlo adeguato (tutte le modifiche al sistema di controllo predefinito generano un impatto sulle attività della Fase di Ottimizzazione);
• prevedere tutte le interazioni che devono essere considerate come conversioni.

---

Passo 2.7 – Realizzazione del prototipo

Laddove previsto, realizzazione di un prototipo grafico per fornire al Committente un’idea generale dell’aspetto (layout, grafica) e del comportamento (interazione) del sito.

Testi e immagini fittizi

Se non si hanno a disposizione i testi definitivi è possibile inserire del testo “segnaposto” per valutare la leggibilità, lo spazio e l’aspetto generale del layout. Per evitare confusione tra testo reale e testo segnaposto è prassi utilizzare nel secondo caso il “lorem ipsum”, un testo in lingua latina privo di significato, derivato da un frammento di un’opera di Cicerone, ma intenzionalmente modificato. Per generare il testo lorem ipsum è possibile utilizzare dei tool online, come il sito https://it.lipsum.com/.

Come per i testi, è possibile inserire in un layout di esempio anche delle immagini fittizie. A tale scopo il sito https://picsum.photos/ permette di generare delle immagini casuali delle dimensioni desiderate.

---

Passo 2.8 – Approvazione del progetto

• eventuale aggiornamento di tempi e costi, dovuti a nuovi elementi manifestatisi nel corso della progettazione;
• presentazione al Committente del progetto (documento Specifiche aggiornato, documento di progetto, eventuale prototipo del sito);
• gestione di eventuali ricicli dovuti a osservazioni del Committente;
• gestione delle versioni dei risultati prodotti;
• approvazione formale del progetto da parte del Committente (OK alla fase di Realizzazione).