Nuovo sito Garda Informatica

Abbiamo realizzato il nuovo sito della Garda Informatica sviluppando un CMS proprietario allo stato dell'arte dal punto di vista tecnologico, SEO e UX/UI.

Sviluppare un sito web al giorno d'oggi è difficile se si vuole ottenere il massimo in termini di posizionamento nei risultati di ricerca, di velocità di caricamento delle pagine, di leggibilità dei contenuti su tutti i dispositivi. Bisogna risolvere diverse problematiche a cui la maggior parte delle web agency, puntando tutto sul solo impatto visivo, non dà importanza.

Era da un po' che volevamo cimentarci in questo compito, ma volevamo qualcosa che fosse il più tecnologicamente avanzato, ma allo stesso tempo rapido da utilizzare da chi, come noi, è un tecnico. Detto in un altro modo, per noi è più facile scrivere delle cose in un editor di testo che cliccare su dei bottoni.

Per questo motivo abbiamo deciso che soluzioni come WordPress, che possono andare bene per i neofiti e gli hobbisti, non erano, non sono e probabilmente non saranno mai all'altezza delle nostre aspettative e quindi abbiamo deciso di sviluppare qualcosa di innovativo che ci possa garantire una superiorità tecnologica rispetto alla concorrenza da qui ai prossimi anni.

Audit#

In sintesi#

In sintesi con questo nuovo CMS siamo in grado di realizzare siti web allo stato dell'arte con le seguenti caratteristiche:

• Performance: utilizzo della tecnologia Google Accelerated Mobile Pages (Google AMP) che garantisce tempi di caricamento sensibilimente ridotti.
• Sicurezza: utilizzo del protocollo HTTPS per navigare in assoluta sicurezza.
• Posizionamento (SEO): utilizzo di tutte le linee guida di Google e della nostra esperienza per raggiungere i primi posti nei risultati di ricerca.
• Offline: utilizzo della tecnologia Progressive Web App che consente di installare il sito web sul proprio smartphone come se fosse una App e che consente di consultare le pagine già visitate anche in assenza di connettività internet.
• Accessibilità: utilizzo di tecniche per rendere il sito web accessibilie (anche a coloro che sono affetti da disabilità visive) ed utilizzabile da chiunque e con qualunque dispositivo (PC, tabled, smartphone).
• GDPR ready: utilizzo di tutti gli accorgimenti per il corretto trattamento dei dati sensibili.

Le caratteristiche indicate sono verificabili attraverso lo strumento di auditing Google Lighthouse .

Cosa abbiamo sviluppato?#

Abbiamo sviluppato un CMS (Content Management System ) da zero con le seguenti caratteristiche:

• Completamente AMP (Accelerated Mobile Pages ) in modo che le pagine siano velocissime a caricarsi e siano leggibili sia dallo schermo di un PC desktop sia dallo smartphone.
• Con pieno supporto ai meta dati di schema.org : questi meta dati danno delle informazioni importanti ai motori di ricerca come Google circa il tipo di contenuto delle pagine e possono essere utilizzati dagli stessi motori di ricerca per arricchire i risultati: stelline per il rating, fotografie, anteprime, informazioni di contatto, ecc.
• Privo di database: abbiamo riflettuto sul fatto che per noi è meglio che i contenuti del sito vengano memorizzati in file su disco piuttosto che in un database come MySQL. Questa scelta semplifica e velocizza tutta una serie di attività di normale amministrazione: la pubblicazione di un articolo consiste nella copia di un file, la modifica di un articolo consiste nell'editing di un file con un semplicissimo editor di testo, il backup del sito coincide con il backup dei suoi file, ecc.
• Con tutti gli elementi della SEO al posto giusto: title, meta description, h1, h2, h3, link, sitemap, robots.txt, feed rss, https, come specificato nella guida ufficiale di Google Guida introduttiva all'ottimizzazione per i motori di ricerca (SEO) .
• Orientato alla leggibilità e alla navigazione dei contenuti. La larghezza del testo, il font scelto, la composizione automatica dell'indice o TOC (Table of Contents ) di un articolo.
• Basato su Bootstrap 4 .
• Con diversi automatismi utili: ad esempio scrivo un articolo nel blog di categoria "case history" (che descrive cioè un progetto realizzato) e mi compare automaticamente la relativa card con: immagine, breve descrizione e link nella sezione "portfolio" della pagina del relativo servizio che offriamo (es. "Sviluppo App iOS/Android").
• Con funzionalità avanzate come i calcolatori online che permettono a chiunque di farsi un preventivo di massima rispondendo a delle semplici domande.

Problematiche affrontate#

Formato dei contenuti

Dovendo scrivere i contenuti del sito in semplici file non potevamo scrivere direttamente codice HTML altrimenti la realizzazione di una pagina o di un articolo sarebbe stata troppo impegnativa. Per questo motivo abbiamo deciso di scrivere tutti i contenuti in formato Markdown . Questo formato è una versione semplificata e sintetizzata del codice HTML. In altri termini laddove in HTML, per definire un elenco puntato, bisogna scrivere il seguente codice:

<ul>
<li>Punto primo</li>
<li>Punto secondo</li>
<li>Punto terzo</li>
</ul>

In markdown basterà scrivere il seguente codice:

* Punto primo
* Punto secondo
* Punto terzo

In entrambi i casi si otterrà il seguente risultato:

• Punto primo
• Punto secondo
• Punto terzo

Come è immediato constatare, la versione markdown è la più sintetica e visivamente vicina al risultato finale.

Migrazione dei contenuti dal vecchio sito

Un'altra problematica affrontata è stata la migrazione dei contenuti dal vecchio sito al nuovo. Questa fase, molto delicata, è necessaria nei casi come il nostro in cui esiste già un sito web ed è già ben posizionato sui motori di ricerca. Per non perdere il posizionamento bisogna fare il possibile per preservare e migrare tutti i contenuti dal vecchio sito al nuovo.

Per risolvere questa problematica abbiamo sviluppato un software in grado di estrarre i contenuti (testi, immagini, meta dati, keywords, categorie, date di pubblicazione, ecc.) da un sito WordPress, la piattaforma su cui era basato il nostro vecchio sito, e convertirli nel formato del nostro CMS.

Con l'occasione abbiamo implementato un meccanismo che ci ha permesso di rivedere titoli e categorie degli articoli esistenti in modo da organizzare meglio i contenuti e migliorare ancora una volta il posizionamento nei risultati dei motori di ricerca.

Utilizzo di Bootstrap 4

Da un lato volevamo utilizzare Bootstrap 4 per assicurare al nostro sito il funzionamento in ambiente mobile, un aspetto pulito e moderno, la possibilità di utilizzare diversi componenti già pronti come le card , dall'altro però avevamo il problema che la tecnologia AMP di Google non consente di utilizzare uno stile CSS più grande di 50 KB per singola pagina: Bootstrap 4 nella versione minificata occupa 138 KB (quasi 3 volte tanto).

Per risolvere questo problema abbiamo sviluppato un software che, una volta composta la pagina richiesta dall'utente, è in grado di capire al volo quali parti di Bootstrap 4 servono e di servire solo quelle per rispettare i limiti imposti da AMP.

Vantaggi#

Grazie alle scelte fatte e ad uno sforzo iniziale per lo sviluppo di un CMS nuovo, possiamo essere molto più rapidi ed efficienti nella pubblicazione di nuovi contenuti sapendo che il risultato finale avrà automaticamente determinate caratteristiche utili per la fruizione e il posizionamento nei risultati di ricerca.

Inoltre, essendo i proprietari di questa tecnologia, la possiamo proporre in esclusiva ai nostri clienti nel caso in cui volessero avere un vantaggio competitivo sulla concorrenza difficilmente raggiungibile altrimenti.

Sviluppi futuri#

In futuro abbiamo in mente di espandere il CMS aggiungendo le funzionalità tipiche degli e-commerce come i filtri di ricerca per gli articoli, il carrello, il processo di checkout, ecc.