Progettazione sito esempio

La progettazione del nostro sito come esempio concreto

Per il lavoro di rifacimento del nostro sito siamo partiti dalla constatazione di alcune problematiche relative alla versione precedente e dalla volontà di sviluppare ulteriormente alcune funzionalità che avevamo in precedenza parzialmente sacrificato.

tuawebagency-versione--responsive

Come accennato l’idea di base era quella di unire due tipologie di sito. Da una parte il classico sito Aziendale in cui offrono servizi e/o prodotti (nel nostro caso specifico Realizzazione di Siti Internet). Dall’altra un Portale di News ohe riguardassero il mondo di Internet in generale e più nello specifico le risorse che riteniamo possano essere utili a chi con il Web lavora.

Quindi tre tipologie di Targets come visitatori del sito: potenziali clienti interessati ai nostri servizi, pubblico “generalista” interessato a potenziali links utili ed infine pubblico “specialistico” come ad esempio Grafici, Web Designer ecc. che fossero interessati a risorse specifiche come fonts, immagini, templates e cosi via.

Vi era inoltre un’esigenza legata alla volontà da un lato di operare un Restyling Visivo per quanto riguardava il Template (la veste grafica del sito) e dall’altra di rendere il sito visibile in modo corretto con i più recenti dispositivi come smartphone e tablets. Sempre più utenti infatti non navigano più dal classico PC a postazione fissa ma da supporti mobili e la versione precedente del sito non veniva visualizzata al meglio su tali dispositivi.

Inoltre il sito doveva essere “Cross Browser” ovvero visibile su tutti i più importanti Browser utilizzati per navigare su Internet (es. Internet Explorer / Firefox / Opera / Google Chrome ecc.)

Per comprendere meglio come un sito “NON RESPONSIVE” possa limitarne la fruizione da parte di visitatori che non navighino da PC fisso o quantomeno da Notebook con un monitor abbastanza ampio vi proponiamo due video.

Nel primo video andiamo a testare la versione precedente del sito e quella nuova attraverso il sito http://quirktools.com/screenfly

Si tratta di un sito che consente di simulare la navigazione attraverso le principali tipologie di strumenti a disposizione al momento. Vale a dire i classici Pc e Notebook, i Tablet, i Cellulari / Smarthpone ed infine le c.d. Web Tv.

Nel video testiamo prima la vecchia versione del sito. Come si potrà notare su Tablet e Cellulari (in misura ancora maggiore) si perdono intere parti del sito, a partire dal menu principale per continuare con la parte contenutistica. E si è costretti a muoversi continuamente verso destra e ritornare a sinistra per cercare di vedere parti del sito non immediatamente visibili.

Nella nuova versione del sito invece tutto questo non avviene. Il sito offre un menu a scomparsa che riproduce le voci del menu principale nella parte alta del sito e consente di scorrere verso il basso senza dover muoversi a destra e sinistra. Testi ed immagini di adattano ai dispositivi mobili incolonnandosi dall’alto verso il basso. Inoltre abbiamo fatto in modo che alcune sezioni del sito non apparissero in modo da semplificare e velocizzare la navigazione del sito stesso in modalità mobile.

Tutto questo lo possiamo vedere ancora meglio nel secondo video che mostra una navigazione più approfondita attraverso il sito http://www.responsinator.com che consente la simulazione su Iphone 5.

In questo caso abbiamo esplorato le singole pagine partendo dall’alto per mostrare come avvenga la visualizzazione corretta dei singoli elementi. Abbiamo anche esplorato pagine ulteriori rispetto alla prima per consentirvi di verificare come anche in tal caso l’impianto strutturale rimanga perfettamente fruibile.

Un altro obiettivo fondamentale nel nostro progetto era legato al voler rendere il sito Multilingue in un’ottica di maggior diffusione possibile a livello S.E.O. delle nostre News e quindi di una miglior indicizzazione del sito sui motori di ricerca. Il che avrebbe comportato un aumento dei visitatori e di conseguenza dei potenziali clienti.
Volevamo inoltre fornire un esempio concreto di sito Multilingue proprio ad eventuali clienti che avessero bisogno di tale tipologia di sito Internet.

Partendo da queste premesse abbiamo provveduto all’installazione dell’ultima versione di Joomla (il CMS che utilizziamo abitualmente per i nostri lavoro in un’area riservata del Server che ospita il nostro Dominio Internet. In questo modo abbiamo potuto lavorare tranquillamente mentre la vecchia versione del sito continuava ad essere fruibile dai visitatori.

Abbiamo provveduto al lavoro preliminare consistente nel tracciare un’alberatura del sito (ovvero la struttura che avrebbe dovuto assumere partendo dall’Homepage con tutte le pagine e sottopagine interne). E’ un lavoro che si fa su carta prima di partire con la creazione online delle varie sezioni e voci di menu. Ed è fondamentale per avere un’idea chiara di quella che sarà la struttura logica del sito. Il rischio che si corre saltando questa fase è l’illogicità del progetto ed un risultato finale confusionario.

alberatura-sito
Abbiamo inoltre definito quelle che erano le funzionalità che volevamo implementare sul sito. Ad esempio una Newsletter che ci consentisse di aggiornare periodicamente i visitatori che lo desiderassero. Per ognuna di queste funzionalità abbiamo quindi scelto una “Estensione” di Joomla dedicata al compito specifico.

Ogni “Estensione” è esattamente quello che ci si potrebbe aspettare a livello intuitivo. Cioè un programma (più o meno complesso) che si va ad installare sul nucleo centrale per ampliare le sue funzioni. È il discorso sulla Modularità ed Estensibilità che abbiamo già accennato. Si parte dalla base e poi si amplia col tempo, si inseriscono gli “Optionals” per così dire.

Ovviamente far questo non è operazione banale. Innanzitutto occorre scegliere tra migliaia di “Estensioni” (per farsene un’idea si può visitare il seguente sito: http://extensions.joomla.org), poi bisogna installarle, configurarle e testarle. Verificando di volta in volta se soddisfano le nostre esigenze o meno. Ed in caso negativo disinstallarle e procedere con una diversa soluzione.

Tutto questo è stato fatto però in una fase successiva. Al momento ci serviva definire in sede progettuale quali fossero le funzionalità ed a grandi linee di cosa ci saremmo avvalsi per soddisfarle.

Fatto questo abbiamo quindi dovuto scegliere un Template che fosse di nostro gusto dal punto di vista estetico. Avevamo la volontà di usare un fondo chiaro, possibilmente bianco, per enfatizzare al meglio testi ed immagini. Ed i colori di base per la c.d. “Tipografia” dovevano armonizzarsi con i colori del nostro Logo: blu ed arancione. Sul blu abbiamo deciso di operare con sfumature più tenui sulla “Tipografia” in modo che comunque il blu più scuro del Logo potesse risaltare.

base-template-favthemes

Inoltre era essenziale il Template fosse anche di tipo “Responsive”. Cioè che si potesse visualizzare anche da dispositivi “Mobile” come Cellulari, Tablets ecc. Una volta che abbiamo accertato questo abbiamo provveduto all’installazione del Template, alla sua configurazione e alla sua personalizzazione.

Infatti vi erano alcuni elementi che volevamo apparissero in modo differente. Ad esempio volevamo che alcuni titoli apparissero centrati piuttosto che a sinistra. Per altre parti di testo volevamo un colore diverso da quello originale. Si tratta di quel genere di modifiche che alcuni clienti chiedono talvolta per ottenere un livello di personalizzazione ulteriore dell’aspetto del proprio sito rispetto a quello che il Template stesso, per quanto potente e flessibile, consentirebbe di default.

Abbiamo operato lavorando sui CSS ovvero i c.d. “fogli di stile” in modo da tenere separata la forma dal contenuto.In pratica i CSS servono per gestire tutto il layout (l’aspetto estetico e visivo) di un sito Internet.

Grazie ad essi si riesce ad intervenire sulla formattazione del testo, sul posizionamento degli elementi grafici e sulla disposizione che questi elementi avranno rispetto a diversi media e dispositivi come tablets, smartphone ecc. L’argomento è decisamente tecnico ma se siete curiosi vi consigliamo questo link che tratta le basi dell’argomento: http://www.html.it/guide/guida-css-di-base

Ricapitolando: siamo partiti definendo su carta la tipologia di sito che volevamo realizzare, il target di visitatori a cui si sarebbe rivolto, le funzionalità che volevamo inserire e quale tipo di “Estensioni” erano in grado di consentirle. Abbiamo quindi scelto il Template fra quelli che di base erano coerenti con l’impostazione visiva che volevamo adottare. Siamo andati ad installare la versione base di Joomla ed a quel punto abbiamo iniziato a lavorarci sopra sulla base delle nostre linee progettuali.

Abbiamo cominciato con l’installare il Template ed effettuare le modifiche più opportune tramite i CSS per arrivare al risultato desiderato. Operando su colori, tipologia di Font, dimensioni ecc.
Quindi abbiamo ricreato la struttura gerarchica disegnata su carta con i vari Menu (partendo da quello Principale che si vede in alto nella pagina sotto il logo e proseguendo con quelli laterali) con tutte le loro singole voci e sottovoci.

Abbiamo continuato installando e testando le “Estensioni” che avevamo scelto in precedenza. Una precisazione importante a tal proposito va fatta. Uno dei “desiderata” che avevamo espresso in fase progettuale era quello inerente la simbiosi tra sito Aziendale e parte di Portale Contenutistico.

k2-joomla-estensione

Proprio per integrare tale parte abbiamo utilizzato un’estensione molto potente, complessa e flessibile che si chiama K2. Il sito ufficiale di riferimento è: http://www.getk2.org Questa stessa estensione prevede a sua volta decine di possibili componenti aggiuntivi come si può vedere nella sezione EXTEND dello stesso sito.

Questo per farvi capire da un lato l’estrema potenza e flessibilità non solo di Joomla ma anche delle sue “Estensioni”. E dall’altro quanto possa essere complessa la realizzazione di un Sito Internet se fatto in modo professionale. Nello specifico K2 serve a personalizzare in maniera completa gli articoli che andiamo a scrivere e rendere possibile una loro completa personalizzazione sia in fase di realizzazione che in fase espositiva. Arrivando ad avere una visualizzazione del tutto analoga a quella che si può vedere nei siti delle principali Testate Giornalistiche online. Senza addentrarci oltre in questo argomento possiamo a questo punto tornare al nostro progetto.

Come detto la nostra struttura era ormai completata. Mancava però tutta la parte Contenutistica, ovvero testi, immagini, video.

E la c.d. parte S.E.O. (Search Engine Optimization). Cioè quella parte che l’utente non vede ma i Motori di Ricerca si, relativa alle parole chiave ed alla descrizione della pagina che consentano una migliore indicizzazione del sito da parte dei Motori di Ricerca stessi.

A differenza di quanto fanno in molti noi prepariamo la parte Contenutistica in locale. Elaboriamo i testi su un programma di Wordprocessing (usiamo Libreoffice Writer). Anche questo testo è stato scritto usando tale programma.

In questo modo abbiamo potuto verificare la correttezza ortografica dei testi prima di pubblicarli, oltre che tenere sotto controllo la lunghezza in termini di parole e caratteri dei testi stessi.
La scrittura deve rispettare alcuni criteri di leggibilità tipici del Web, come ad esempio scrivere paragrafi non troppo lunghi e cercando di andare a capo ogni 3 / 4 righe.

Alla fine del testo delle singole pagine abbiamo definito la Descrizione e le Parole Chiave riferite al testo scritto. La c.d. parte S.E.O. di cui dicevamo.

La fase successiva era quella relativa alle immagini e video da inserire nei singoli testi. Per i video avremmo provveduto in seguito, rientrando nel nostro caso questo discorso all’interno della strategia di diffusione del sito online tramite vari canali incluso Youtube.

Per le immagini invece siamo andati a sceglierle da siti Royalty Free. Una volta salvate sul nostro PC abbiamo provveduto ad elaborarle compiendo il lavoro di ottimizzazione per il Web e rendendole uniformi nelle dimensioni per adattarsi al layout impostato.

Fatto questo abbiamo riempito le pagine vuote create in precedenza con i testi e le foto preparati ed ottimizzati. Si tratta della c.d. fase di “Web Content Editing”. Per farlo abbiamo utilizzato l’Editor di Testi incorporato in Joomla provvedendo tramite lo stesso a formattare il testo evidenziando le parti più significative. Ed inserendo le immagini in modo che si integrassero al meglio come allineamento e distanze dal testo stesso.

Infine abbiamo incluso gli elementi S.E.O. nelle singole pagine sempre attraverso il nostro Pannello di Controllo Riservato.

Ora il sito era pronto per essere pubblicato e, compiuti gli ultimi test di rito, abbiamo proceduto alla pubblicazione ed alla condivisione del “lieto evento”.

Ci sarebbe in realtà molto altro da dire ad esempio sulla fase successiva alla pubblicazione del sito e sul lavoro di Social Marketing intrapreso per aumentarne la diffusione. Ma da una parte non vorremmo stancarvi troppo (a proposito complimenti se siete arrivati a leggere fino a questo punto) e dall’altra…mica vorrete che vi sveliamo tutti i nostri segreti?

Select Language

Pin It on Pinterest

Shares
Share This