Il progetto di un sito web è di norma realizzato secondo le seguenti fasi di sviluppo:
Colloquio preliminare con il cliente nel quale si fa una stesura generale del lavoro in base alle sue esigenze e si fa un preventivo di spesa.
Tracciare un’alberatura del sito, che è una mappa (sitemap) con la struttura gerarchica delle pagine di cui sarà composto il sito. È fondamentale che l’utente finale sappia sempre in che punto si trova durante la navigazione (seguire le cosiddette "briciole di pane"). Per cui già in partenza bisogna ideare una struttura chiara ed organica che favorisca l’accessibilità e usabilità del sito internet. Si crea poi sulla carta una pre-bozza (wireframe) con il layout (impostazione grafica) da utilizzare per il sito. Si pianifica il materiale multimediale (fotografie, audio, video) e contenuti testuali, che sarà impiegato per la realizzazione del progetto. Queste fasi iniziali saranno pianificate insieme al cliente in base a ciò che egli vuole fare.
Preparazione di una o più bozze grafiche a seconda delle richieste del cliente. La bozza grafica costituisce la rappresentazione mediante disegni, immagini e contenuti testuali di quello che sarà la veste grafica (layout) del sito web. Questa fase si realizza al computer coi programmi di grafica più noti, e deve essere approvata dal cliente.
Con i programmi di scrittura più noti, avviene la fase di scrittura del codice, che rappresenta il vero e proprio montaggio del sito web. Questa fase può essere tranquillamente sviluppata dal web designer e/o programmatore nel suo studio, senza che ci sia alcuna pubblicazione on-line. Il cliente potrà visionarne la crescita intermedia secondo quanto concordato con il web designer.
Quando il cliente ha approvato il montaggio finale del sito, sarà acquistato in internet un dominio con il nome del sito scelto. Esistono delle società di "accoglienza" (hosting), che forniscono dei servizi e uno spazio web presso i loro server, con prezzi diversificati a seconda delle esigenze del cliente. Il cliente sarà aiutato dal web designer nella scelta della migliore offerta per lui.
Il sito sarà trasferito dal web designer dalla piattaforma locale al server online, e sarà pubblicato a tutti gli effetti. Tutti gli utenti fruitori della rete internet e del www lo possono visualizzare e interagire con esso, ed è per questo molto importante che esso rispetti la normativa vigente in materia di copyright e tutela della privacy.
A lavoro compiuto seguirà una fase da concordare con il cliente, che va dal monitoraggio del sito, ad esempio con un’analisi statistica delle pagine visitate, o anche dalla pianificazione di un’eventuale campagna a pagamento per migliorare ulteriormente il suo posizionamento nei motori di ricerca.
In internet a volte si vedono dei siti web con una grafica spaziale, ma quando l’utente inizia ad interagire con essi si allontana dopo poco tempo perchè sono poveri di contenuti, o la navigazione risulta confusionaria perchè non c’è un chiaro filo conduttore che lega le varie pagine. O l’utente nell’attesa di un caricamento troppo lungo di immagini seppur belle e di alta qualità, si spazientisce ed esce dalla navigazione su quel sito. Altre volte il sito è ricco di contenuti testuali, molto interessanti da leggere, ma il carattere (font) usato è poco leggibile. O l’impostazione grafica (layout) della pagina in generale è brutta da vedere, per cui l’utente al primo colpo d’occhio (che è sempre fondamentale per attrarre l’attenzione sul proprio sito) percepisce questo peggior senso estetico ed abbandona il sito dopo pochissimi istanti di navigazione. La via giusta sta nel mezzo, come recita un’antico proverbio latino. Fare un sito fatto bene vuol dire creare nel progetto un giusto equilibrio tra la componente grafica, e la struttura dello stesso. La grafica non deve essere fine a sè stessa, ma funzionale agli obiettivi prefissati. La struttura deve essere lineare e pulita. Quando l’utente interagisce col sito, esso deve rispondere esattamente secondo quanto l’utente si aspetterebbe. E senza lungaggini e caricamenti inutili. La scelta dei contenuti testuali, immagini o contenuti multimediali è fondamentale per prolungare l’attenzione di quel colpo d’occhio iniziale. L’accessibilità e l’usabilità del sito sono due parole chiave che il web designer deve sempre tenere a mente. Come anche la regolamentazione che le riguarda. Ad esempio è importante far attenzione che il fruitore del sito web potrebbe anche essere una persona con disabilità. Per questo il sito web deve prevedere la possibilità che tale soggetto possa attraverso un apposito lettore (screen reader) leggere i contenuti presenti qualora non vedente o ipovedente. Negli addetti al settore si parla molto di ottimizzazione SEO (search engine optimization). Fare un sito fatto bene vuol dire anche tener conto di tutti quei fattori che possono migliorare la sua posizione nei risultati di un qualsiasi motore di ricerca. Nessuno conosce esattamente quali siano tutti gli algoritmi che utilizzano i motori di ricerca per scandagliare le pagine di un sito web, e che peso effettivamente abbiano nel posizionamento delle pagine. Tranne chi li ha creati. Senza considerare il fatto che ne escono sempre di nuovi. Ci sono esperti del settore che dedicano molto tempo e prove per cogliere più segreti possibili. Il web designer deve avere una conoscenza adeguata per scegliere al meglio ad esempio le parole chiave digitate nella barra di ricerca che rinviano alle pagine del sito, o le descrizioni che appaiono nel risultato della ricerca sotto il nome delle pagine elencate. O quali elementi nella scrittura del codice siano obsoleti e poco compatibili. O errati per una corretta visualizzazione delle pagine, non solo dal punto di vista dell’utente finale, ma anche del browser che deve interpretare quello che il web designer ha scritto. C’è un lavoro in "background" che l’utente fruitore di internet non vedrà, ma che è fondamentale perchè il sito abbia successo.
Esistono due fondamentali tipologie di siti web: i siti statici e i siti dinamici. Il sito statico è un sito dove i contenuti sono esposti come in una vetrina di un negozio, ma il proprietario del sito non può modificarli in alcun modo, se non con l’ausilio del web designer che gliel’ha creato. I contenuti inoltre rimangono sempre gli stessi sulle stesse pagine. È una tipologia di siti che si adatta alle richieste di un cliente non particolarmente esigente, nel senso che il suo scopo è quello di avere una "vetrina" sul mondo del web, per dare una maggiore visibilità alla sua attività, o per per comunicare ad un bacino più ampio di utenti offerti da internet, la sua linea di pensiero o una serie di contenuti del gruppo di cui fa parte. Non ha l’esigenza di cambiare spesso quei contenuti, e quando necessario, si avvale della manutenzione offerta dal web designer. Il costo finale sarà inferiore rispetto a un sito dinamico. Il sito dinamico è un sito dove c’è sempre quella "vetrina" di cui parlavamo. Ma rispetto a prima richiede una continua revisione e un costante aggiornamento da parte del proprietario del sito web, per il quale il web designer e/o programmatore crea un’apposita area riservata, denominata back-end, nella quale solo chi ha le credenziali d’accesso come nome utente (username) e password, può avere accesso tramite login (autenticazione).
Quest’area amministrativa non è visibile all’utente che naviga sul sito, ed è collegata ad un archivio che contiene tutti i dati (database) che riguardano i contenuti visualizzabili. Nel sito dinamico i contenuti cambiano sulla stessa pagina in base alle scelte effettuate dall’ utente. O rinviano a risultati diversi a seconda delle scelte. Dall’archivio saranno richiamati di volta in volta i dati adatti allo scopo. Tutto questo avviene in maniera dinamica e automatica. Questa tipologia di siti è adatta ad un cliente che ha delle esigenze più elevate rispetto al precedente. Ed i costi saranno maggiori proporzionalmente agli obiettivi prefissati nel progetto. Essi possono essere:
aggiungere diverse lingue oltre la lingua italiana;
avere una sezione di news/blog con le notizie che cambiano costantemente;
avere un motore di ricerca interno al sito per una ricerca più immediata sulle proprie pagine;
aggiornare o rimuovere personalmente la lista dei propri prodotti;
acquistare o vendere prodotti tramite internet;
gestire una newsletter con l’invio della mail in automatico agli utenti registrati
Al giorno d’oggi grazie soprattutto ai social media (facebook, twitter, youtube...), e allo sviluppo di cellulari e tablet sempre più tecnologici e versatili, la navigazione in internet si sta diffondendo sempre di più su questo tipo di strumenti. I computer desktop e portatili hanno un ruolo perlopiù legato all’attività lavorativa all’interno di uno studio, azienda o a casa propria. Sicuramente continuerà il loro sviluppo, ma sarà dedicato ad un determinato target di utenti. Il web designer che progetta un sito web non può non tenere conto di questa realtà, che rappresenta non solo il presente, ma soprattutto il futuro della rete internet. Egli dovrà quindi ripensare il proprio progetto in base ai dispositivi sui quali assieme al cliente decide di puntare maggiormente, e in base al bacino di utenza verso il quale il cliente vuole indirizzare il proprio messaggio. È nato quindi in questi ultimi anni il responsive design, o adaptive design (adattivo), che si adatta in base al media utilizzato. Realizzare un sito web di questo tipo prevede un costo maggiore per il cliente, perchè il web designer dovrà sviluppare lo stesso sito con impostazioni grafiche (layout) differenti, a seconda del dispositivo sul quale il sito sarà visualizzato. Per realizzare un buon sito responsive il web designer dovrà tener conto di alcuni fattori:
procedere dall’universale al particolare (o viceversa): il cliente vuole puntare di più su un’utenza che fruisce del servizio internet su computer desktop/ portatili? O smartphone e tablet? In base alla scelta fatta il web designer pianificherà il proprio progetto con una serie di contenuti pensati ad hoc per quel dispositivo. Se parte dalla versione desktop ci saranno una serie di contenuti, come audio e video multimediali, che dovrebbe togliere nella versione smartphone, data la maggior lentezza delle connessioni internet mobili e la piccolezza degli schermi dei dispositivi. Se parte dal particolare, cioè dai dispositivi più piccoli, userà ad esempio una dimensione di carattere (font) maggiore per aumentarne la leggibilità, via via restringendola per una visione più ampia su un wide screen da tavolo. Oppure prevederà l’inserimento di una funzione per la geolocalizzazione, per sapere dove l’utente si trova in un determinato momento, inutile se l’utente tiene il computer sempre a casa sulla sua scrivania o in ufficio. Nella progettazione terrà conto di un uso maggiore del touch screen nei dispositivi mobili, rispetto alla preferenza di mouse e tastiera nella versione desktop.
fissare dei breakpoint, cioè dei limiti delle dimensioni del sito web, in base alla grandezza del dispositivo, o alla dimensione della finestra del browser. A seconda delle dimensioni raggiunte nella visualizzazione, il sito cambierà il proprio layout a seconda delle stesse. Da qui il termine adattivo e versatile. Per gli addetti al settore le media quieries dei CSS3 sono uno strumento molto potente per raggiungere questo obiettivo.
Nell’offerta della costruzione di siti internet, si possono trovare a volte dei prezzi molto bassi, e il cliente sarà naturalmente attratto dagli stessi. Perchè infatti spendere di più quando si può avere un sito web che costa la metà o un terzo? Perchè rivolgesi ad un web designer professionista, quando in internet si trovano offerte con un modello di sito già pronto, che costano molto meno, e alle quali potrei metter mano da solo? E avere il sito fatto in poco tempo? Queste sono alcune delle domande che il cliente può porsi. Per adempiere a questo scopo in internet c’è un fiorire di modelli di siti già pronti, attraverso i cosiddetti CMS (content management system). Grazie ad esempio a Wordpress, Drupal, Joomla e altri, il web designer può realizzare il sito in meno tempo, e abbattere i costi del lavoro. Questa pratica offre sicuramente dei vantaggi. Ma bisognerebbe fare alcune considerazioni. Ad esempio i modelli che si trovano, seppur alcuni molto belli, sono molto spesso simili tra loro, mancano di profondità, di personalizzazione che un web designer professionista riesce a dare. Magari l’occhio di un cliente inesperto fa fatica a comprendere questo. E il web designer pur di guadagnare (meno) in meno tempo, accetta di buon grado questa soluzione. Sono scelte che l’uno e l’altro dovranno fare. Un’altra limitazione è che i modelli già pronti, mancano di tutto quel lavoro che deve essere fatto in "background" dal web designer per ottimizzare l’indicizzazione del sito web nel motore di ricerca. Esistono si potrà obiettare dei validi plugin ("ampliamenti") che si possono inserire nel modello per migliorarne il posizionamento in un motore di ricerca. O per diversificare l’offerta. Richiedono però dei costi aggiuntivi e un tempo maggiore, proporzionalmente alla complessità del sito, in base agli obiettivi che vuole raggiungere il cliente con il progetto. Questi modelli infine offrono la possibilità ad un soggetto totalmente inesperto di costruire il proprio sito da solo. Appena però si verifica un problema del posizionamento degli elementi, o vuole sperimentare una maggior personalizzazione degli stessi, o c’è un errore nella programmazione o un problema tecnico di qualsiasi tipo come farà? A chi si dovrà rivolgere?