Serve una Mano? - CSI Polisportiva casalecchio

Febbraio 2021

A grande richiesta (e del tutto non richiesta) parte oggi una nuova rubrica che mi farà perdere un sacco di tempo.

Questa rubrica la chiameremo Serve una Mano? e mi darà l'occasione di far vedere concretamente come sarebbe possibile migliorare qualche sito nel quale mi imbatto, più o meno per caso.

Partiamo con la Polisportiva CSI di Casalecchio. Conta, secondo il sito della polisportiva, 1700 soci. Considerando che Casalecchio ha circa 36mila abitanti - di cui 35mila over 70 (non è vero) - e che il loro grosso concorrente è la Masi con circa 8mila associati, non è affatto male. Quindi la domanda 'perchè vuoi tenerti un sito brutto?' viene quasi spontanea.

Con sito brutto non voglio dire che sia semplicemente e soggettivamente poco gradevole alla vista. I gusti son gusti. Quello che intendo è:

  • è il 2022
  • esistono gli smartphone
  • gli smartphone rappresentano il 60% circa del traffico internet
  • è il 2022
  • esistono tecnologie interessantissime, funzionalità utili a chi amministra il sito e a chi lo visita, facili e potenti
  • un sito dovrebbe essere navigabile senza farci venire mal di testa
  • se una funzione viene mostrata, si presuppone che tale funzione.. funzioni

Andiamo per gradi. Il sito CSI non utilizza un layout responsive, quindi la dimensione delle pagine è sempre la stessa, indipendentemente dallo schermo del dispositivo utilizzato. Se si ha uno schermo molto grande, la pagina apparirà come la vedete nell'immagine qui sopra, scendendo con la risoluzione l'immagine sulla destra (che viene ripetuta dando origine a fastidiosi effetti speciali) viene parzialmente nascosta. Il contenuto importante è tutto sulla sinistra, nell'area con lo sfondo bianco, pur lasciando fuori metà del menu di navigazione e soprattutto un elemento fondamentale, l'accesso all'area soci.

Che succede se il nostro visitatore ha uno schermo un po' piccino? questo:

É sparito l'accesso all'area soci in basso, e non è possibile utilizzare la voce nel menu perché anche quello è mozzato (più dettagli tra poco). Questo problema credo sia stato in qualche modo affrontato, dicendo al blocco giallo in basso a destra di rimanere sempre in basso a destra. Però: avendo una pagina a dimensione fissa, il blocco non può spostarsi oltre un certo limite e quindi viene tagliato fuori, dato che il margine di riferimento è esterno alla dimensione della pagina.

Da cellulare non va meglio, infatti. Il blocco deve rimanere all'interno dello schermo, ma il menu è comunque tagliato. Ingrandire la pagina con il pinch non serve, il menù è perso per sempre. Se può sembrare un problema da poco, che solo io e altri tre fanatici del web design potremmo notare, mettiamoci nei panni di un visitatore che ha davvero bisogno di entrare nella sua area soci, e ha bisogno di farlo col suo smartphone perché non ha un computer a portata di mano. Il nostro povero socio non può accedere. Se cerchiamo di ingrandire l'area per l'accesso, le dimensioni e il margine di riferimento creano una situazione per cui più cerchiamo di ingrandire il blocco, più questo si sposta fuori dallo schermo.

C'è una soluzione? Si potrebbe essere tentati di indovinare col dito, senza ingrandire la pagina, il punto esatto nel quale scrivere i codici d'accesso. Potrebbe funzionare. In realtà ci troviamo di fronte allo stesso problema, forse peggiore: il focus è sull'area di testo, ci appare la tastiera, ma non possiamo vedere cosa stiamo scrivendo. Di nuovo, quel blocco fondamentale ai soci è inservibile.

Link a video dimostrativo.

Il problema della dimensione fissa si ripresenta in altre pagine, e affligge elementi fondamentali per la navigazione. Ad esempio qui:

Le voci 'area soci' e 'basket' devono andare a capo per il solito motivo, una dimensione fissa. Come se non bastasse, il testo giallo su sfondo bianco non aiuta a trovare l'elemento del menu.

Affrontiamo la questione colori. Il giallo, il blu, il bianco. Non discuto sui gusti, ma come devo aver già scritto da qualche parte, è il 2022. Questi colori, diciamo classici, andavano più che benissimo nel 1998, quando il web aveva 16 colori di base, più qualche esotica tinta, per un totale di 256 colori. Ad oggi, con lo standard sRGB, possiamo utilizzare (ed essere abbastanza sicuri che tutti li vedranno nello stesso modo) 16.7 milioni di colori diversi. Sedicimilionisettecentomila. Il mio consiglio è di osare un po', possiamo permettercelo. Il che non significa, però, di usare un blu #0804f3 in un menu e un blu #060cf2 in un altro. Sono simili ma non uguali, non sono lo stesso colore. Se il nostro brand usa un colore, dovrebbe sempre usare lo stesso, non ogni tanto qualcosa di simile. É un piccolo errore, una svista, ma comunica brutalmente che il nostro lavoro è fatto un po' a caso.

Un altro elemento che dovrebbe interessarci molto è la tipografia. I caratteri. Nel nostro foglio di stile vediamo che è stato specificata una scelta:

font-family: Comfortaa, Verdana, Arial, sans-serif;
font-size: 14px;

Due problemi:

Uno, la dimensione del testo è espressa in pixel, mandando a quel paese le preferenze dei nostri visitatori con piccoli problemi di vista.

Due, abbiamo dichiarato nel CSS che il carattere da visualizzare dovrebbe essere il Comfortaa, che è una font di Google, ma non abbiamo messo da nessuna parte una singola riga di codice funzionante che possa andare a pescare il carattere dal server. Le righe presenti non funzionano, e la richiesta è bloccata. Quindi: se uno ha per puro caso il carattere installato sul computer, vedrà il testo con quel carattere. Altrimenti col Verdana, se l'hai installato. E poi al limite con l'Arial, se l'hai installato. Mal che vada, con una qualsiasi quarta scelta, basta che sia sans.

La questione tipografica non ancora conclusa:

Abbiamo un carattere, non so quale, per il logo.

Abbiamo un secondo carattere, di cui abbiamo appena parlato, sia per le intestazioni che per il corpo.

Abbiamo un terzo carattere, il famigerato Comfortaa, ma è presente come immagine e non come testo.

Abbiamo un quarto carattere, non so quale, per un amichevole invito scritto a mano.

...

La mia politica è massimo due. Probabilmente si potrebbe optare per un carattere utilizzato nelle intestazioni, magari il nostro Comfortaa, e un altro carattere per il corpo. Obiezione vostro onore, il logo utilizza un terzo carattere, come la risolviamo?

Soluzione uno, scopriamo che carattere è e utilizziamolo nelle intestazioni. Personalmente, però, trovo questo carattere poco elegante e poco leggibile. Altra opinione personale, fa molto 1998. Soluzione due, cambiamo il logo.

Eh, vabbè, addirittura, é il nostro logo dal 1998 e siamo molto affezionati e abbiamo tutti i biglietti da visita fatti così e la carta intestata fatta così e le tessere dei soci e gli adesivi. Permettetemi, ma cambiare il proprio marchio non è una cosa rara. Cambiare per il meglio dovrebbe essere un'idea da valutare seriamente. Un'opportunità per rinnovarsi. Dare una spolverata, e buttare quello che non ci piace più, è normale. Anzi direi sano. Lo hanno fatto tutti, Google, Apple, Nike, Coca-Cola, Audi, Twitter, Adidas, Shell, Volkswagen, tutti. Per i motivi più diversi, ma è pratica comune.

Si ma noi mica siamo la Coca-Cola, mica siamo la Apple. Non importa quanto fatturate, non importa che abbiate 1700 soci o 8000, è giusto avere un'identità a prescindere, ed è giusto perché il vostro marchio è la vostra faccia. Una faccia che a differenza dei connotati coi quali siete nati potete decidere quale debba essere. Potete decidere di cambiare faccia, se quella vecchia non vi piace più, se non rispecchia più chi o cosa siete, se vi annoia, se avete voglia di qualcosa di nuovo, più moderno, più pulito, più curato. Certo, non è un processo immediato, ma ne vale la pena.

Sul sito di CSI ci sono altri piccoli problemi, alcuni di usabilità, altri di esperienza utente, altri ancora tecnici. La home è estremamente veloce a caricarsi, ed è un bene, ma una qualsiasi pagina del 1998 lo è. Quello che, come ultima nota, mi interessa sottolineare, non è quanto in fretta si carica la pagina, ma quanto più in fretta potrebbe caricarsi.

Qui sopra c'è un pezzetto di quello che in gergo viene chiamato waterfall. Un elenco di richieste che il browser fa al server, una dopo l'altra, affinché tutti gli elementi della pagina vengano caricati. CSS, immagini, JavaScript, font, tutto quanto. Quelle righe color caffellatte sono i tempi morti, preziosi millisecondi nei quali il browser non carica l'elemento perché bloccato da qualcosa. Magari l'esecuzione di JavaScript, o magari aspetta solo una connessione HTTP/1 o HTTP/2 disponibile. Questi enormi bandoni marroni, se sommati, significano tempo prezioso. Il problema è in parte dato da una policy sulla cache praticamente assente, che potrebbe salvare qualcosa come 3.84MB di dati. Altri 3.33MB potrebbero essere risparmiati utilizzando formati corretti per le immagini. Non voglio scendere nel dettaglio, ma un report completo è qui, nel caso.

Prima di passare alla parte interessante di tutta questa disamina, ecco come appare su smartphone la homepage completa, e una galleria dei problemi che le immagini di sfondo con dimensioni diverse possono causare.

Se i nostri amici responsabili della comunicazione della Polisportiva CSI stanno ancora leggendo, e hanno digerito tutte le mie critiche gratuite, ho un regalo. Gratuito. Basta un click sull'immagine qui sotto.

Nota: ogni link in questa pagina porta alla home, quindi inutile cliccarci, tutto sommato è una bozza. Ma è una bozza funzionante, fatta in venti minuti (compreso il logotipo) con un po' di criterio.

Un solo carattere, correttamente caricato da Google. Margini e spazi coerenti, già tutto pronto per i dispositivi mobili, palette colori limitata, nessuna dimensione fissa e nessuna misura fissata in pixel, alcune semplici animazioni, lightbox sulle immagini di dimensioni quasi corrette, e qui c'è il report.

È un'idea, dalla quale eventualmente partire. Mancano sicuramente tante cose, e una sezione news è la mancanza più evidente. Poi forse quel particolare tono di azzurro non piace, o gli angoli arrotondati sono troppo arrotondati, e il logo ha bisogno di più cura.. Sono cose che si aggiustano, e se si ha voglia di migliorare un po', sono a disposizione. Basta contattarmi.

Aggiornamento: avevo mezz'ora libera e ho pensato che è giusto dare più di un'opzione. Quindi eccone un'altra.

Qui finisce la prima puntata di Serve una Mano?, non so quando sarà la prossima ma so che si parlerà di cibo cinese.

sta roba è

ISCRIVITI AL BLOG

Nanni Claudio
via G. Sozzi, 15
40033
Casalecchio di Reno
Bologna
3497787430
C.F. NNNCLD79M15A944Y
P.IVA 03594351201