Dopo diversi giorni di sperimentazioni, ritocchi e design, ecco Essent10: il tema per Pelican minimale privo di JavaScript

Buongiorno a tutti,

Ero veramente stanco del vecchio tema del mio blog, che per quanto elegante non era assolutamente usabile su dispositivi mobili e non faceva buon uso delle caratteristiche di HTML5 e CSS3. Oltretutto la gestione degli articoli e del tema stesso erano pessime, dato che era una versione modificata (male, mea culpa) del tema "notmyidea" .

Chi mi conosce bene, sa che una delle mie filosofie nella creazione di siti web è "meno JavaScript c'è, più son contento", quindi ho voluto vedere fino a quale folle estremo posso portare questa filosofia, a qualunque costo.

Il risultato di tutto questo è Essent10 (pronunciato "Essentio"): un tema responsive minimale che non fa alcun uso di JavaScript.

Supporto "Dark Mode"

Come tutti i migliori "Lord del lato oscuro", una delle caratteristiche che volevo assolutamente implementare nel tema è il supporto per un "dark mode".

Questo è stato abbastanza semplice grazie alle variabili CSS ed alle nuove "Media Queries Level 5", che comprendono un nuova media query: prefers-color-scheme .

Se l'utente imposta il proprio browser per richiedere al sito di far uso della "dark mode", automaticamente lo schema colori verrà caricato e cambiato. Per evitare di fare uso di JavaScript, non ho implementato un sistema per "cambiare al volo" lo schema colori. Lo ritengo una caratteristica inutile in ogni caso, dato che quando imposto uno schema colori, solitamente resta lo stesso per sempre.

Menu Laterale A Scomparsa

Ho deciso di abbandonare il doppio menu orizzontale (con annessi orrori sul lato usabilità) in favore di un menu laterale a scomparsa.

Tale menu è implementato tramite regole CSS ed una checkbox nascosta, tramite tale hack è possibile avere un menu a scomparsa funzionante senza far uso di JavaScript.

In modalità mobile, il menu sarà inizialmente nascosto e verrà estratto facendo click sul pulsante "hamburger" in alto a sinistra dello schermo.

Alcuni ritengono che il "simbolo hamburger" non vada ad esprimere un menu, con conseguente aumento del carico cognitivo. Personalmente ritengo che tale critica abbia valore per un'utenza meno avvezza all'informatica moderna; il "menu ad hamburger" è stato introdotto nel 2009 ed ormai è diventato un punto cardine delle applicazioni mobili e consente di risolvere un problema abbastanza critico: la mancanza di spazio.

Se il menu non viene sovraccaricato di voci e viene usato come un sistema di "navigazione secondaria", come in questo caso, ritengo il suo uso sia più che accettabile.

Casella di Ricerca

Il tema mette a disposizione una casella di ricerca per aiutare l'utenza a trovare qualcosa all'interno del sito.

In questo caso ho dovuto imbrogliare: la casella di ricerca fa uso di un servizio esterno (DuckDuckGo) per le ricerche interne al sito: una form effettua una richiesta HTTP GET su DuckDuckGo, limitando la ricerca al dominio del sito.

Tale casella è disattivabile e leggermente personalizzabile, con molta probabilità è possibile usare altri motori di ricerca che funzionano in maniera simile a DuckDuckGo.

Una seconda casella di ricerca compare nel menu ad hamburger in modalità mobile (mentre quella nella testata viene nascosta) per risparmiare spazio.

Questo mi consente di avere una funzionalità di ricerca senza PHP o uso di sistema di ricerca statica come Tipue Search (che fa uso di JQuery).

Social

Il tema offre funzionalità di "condivisione sui social" senza JavaScript e senza tracciatori: completamente configurabile da pelicanconf.py , il sistema consente di inserire una casella alla fine di ogni articolo per condividere la pagina o il post su:

• Twitter
• Facebook
• Buffer
• LinkedIn
• Pinterest
• Reddit
• Hacker News
• Email

Permettendo inoltre di decidere se aprire la schermata di condivisione in una nuova tab, il tutto senza includere alcuno script e liberandoci di tracciatori dei vari social network.

Accessibilità

Questo tema cerca di avere un occhio di riguardo per l'accessibilità da diversi dispositivi (mobile, desktop, screen reader, etc...), oltre che cercare di offrire un contenuto ben visibile da parte di persone affette da disturbi della visione.

I colori cercano di essere quanto meglio contrastanti possibile (cercando ove possibile di raggiungere gli standard WCAG AAA), i font sono ben grandi e le righe hanno interlinea maggiorati per semplificare la lettura.

Cosa avrei voluto fare in più

Ci sono alcune cose che avrei voluto aggiungere in questo tema ma che per ragioni di tempo o altro non ho potuto fare.

Ritmo Verticale

Una delle cose che avrei fortemente voluto implementare nel tema è il concetto di "ritmo verticale": un concetto abbastanza nuovo nel web, dove la dimensione dei font e degli interlinea sono specificamente creati per essere consistenti e dare una maggior sensazione di "ordine" nel testo.

Purtroppo calcolare la baseline e tutti i margini per rientrare nel concetto di "ritmo verticale" è un calcolo che, seppur non troppo complesso, si scontra con l'ammontare di energia che voglio spendere per creare questo tema.

Magari più avanti nel tempo, potrei pensare di implementare tale concetto.

Meta Tag Proprietari

Il mio blog ora si appoggia sull'ottimo plugin pelican-seo , che non fa uso di tag proprietari (Ad esempio per le "Twitter Card") in quanto sono considerati tag il cui uso mette a suo modo a repentaglio il concetto di "Internet Aperta", coinvolgendo siti in una "guerra tra corporazioni" che non dovrebbe esistere.

Essendo sostanzialmente d'accordo con il ragionamento dei creatori di pelican-seo, al momento ho preferito evitare di far uso di tali tag (anche se nella versione precedente del blog lo facevo), in favore di "tag aperti" come i classici "meta tag" e JSON-LD.

In futuro potrei appoggiarmi ad un plugin specifico o includere un sotto-template per generare tali tag.

Miglior supporto "dark mode"

Al momento il supporto "dark mode" è un po' instabile, in caso di mancanza di preferenza dovrebbe caricare il tema "chiaro", invece viene caricato il "tema scuro". Vorrei arrivare in fondo alle ragioni per cui questo accade, correggere il problema ed avere la "mente libera" da questo pensiero.

Essendo ancora un "editor's draft" (sostanzialmente una funzionalità ancora sperimentale), potrebbe essere che le combinazioni colori e la media query prefers-color-scheme non si comportino come dovuto.

Eventuali Piani Futuri

Il tema è già online ed utilizzabile, ma ci sono ancora alcune cose che vorrei poter aggiungere per renderlo più "universale" ed appetibile per chi vuole modificarlo o usarlo con esigenze diverse dalle mie.

Miglioramenti di usabilità

Nonostante tutta la mia attenzione per l'usabilità, ho completamente dimenticato alcune cose fondamentali per l'usabilità.

Prima di tutto voglio inserire una voce nascosta "salta la navigazione" per la comodità di utenti facenti uso di screenreader, inoltre voglio generare dinamicamente degli "tab-stop" per chi vuole usare la tastiera per navigare tra i link.

Riordino Template

Andrò ad effettuare un riordino dei template, andando ad inserire i "template parziali" (che contengono pezzi di pagina) in una sottocartella, così da facilitarne la gestione.

Questo è un miglioramento molto semplice da implementare, finché il tema è piccolo, se dovessi aggiungere ulteriori caratteristiche prima di farlo, tale migrazione potrebbe risultare problematica.

Copyright

Al momento il tema non contiene alcuna menzione al copyright sul contenuto del blog o sito web creato. Vorrei quindi aggiungere un paio di opzioni sul file pelicanconf.py che permettano di visualizzare una frase simile a "© Anno Nome" in fondo alla pagina.

Minificazione CSS/JS e Thumbnails

Nei siti web è importante avere risorse piccole: dobbiamo dare per assunto che il traffico sia limitato ed il consumarne il meno possibile è una questione di rispetto verso l'utente.

Inizialmente il tema doveva supportare il plugin pelican-webassets , ma mi sono scontrato con problemi di diversa natura che mi hanno impedito di proseguire per questa strada.

L'idea è quella di riuscire a ripristinare il supporto per pelican-webassets ed effettuare una minificazione dei fogli stile CSS ed eventuali JavaScript che potrebbero essere inclusi in futuro.

Successivamente vorrei integrare il plugin con pelican-image-process per creare thumbnails ed immagini "responsive" tramite i tag HTML5 <picture> .

Lightbox

La prima componente che farà uso di JavaScript sarà una cosiddetta "LightBox": al click su un'immagine vada ad aprire una "finestra modale" in sovrimpressione alla pagina, contenente la versione originale dell'immagine.

Questo potrebbe essere utile dal lato dell'usabilità utente, se ben implementata, ma non è una priorità.

Supporto Disqus

Nell'ambiente dei "blog statici" generati da software come Pelican e Jekyll, Disqus è un servizio molto apprezzato per mettere a disposizione una sezione commenti dedicata ad un certo post.

Vorrei mettere a disposizione dell'utente tale funzionalità, attivabile a scelta, così da offrire la massima libertà possibile.

Supporto Google Analytics e Tag Manager

Anche se personalmente non sono interessato, alcune persone potrebbero trarre vantaggio dall'implementazione di script di Google Analytics (per l'analisi del traffico) oltre che di Google Tag Manager (usato per gestire i tag di tracking ed analisi del traffico).

L'idea è simile a molti temi già esistenti: far inserire all'utente il proprio codice o ID in pelicanconf.py ed automaticamente il sistema si occuperà di inserire gli script necessari nelle pagine.

Conclusioni

Il tema per ora è molto basilare e cambierà nel tempo, ma per il momento incarna per la maggior parte i principi che volevo seguire: usabilità, leggerezza, flessibilità e la riduzione dell'uso di JavaScript.

Non so ancora cosa pensare per quanto concerne il "design" in sé, che potrebbe cambiare in futuro.

Se volete dare un'occhiata al tema, seguite il link al repository github di Essent10 .

Grazie a tutti per aver letto. Alla prossima!

Penaz.