venerdì 30 ottobre 2015

Soluzione cellulare

Da più di dieci anni che faccio da webmaster; l'anno prossimo addirittura saranno venti. Mi sento un po' esaurito e svogliato. Quello che per un lungo periodo mi teneva in barca sono i soldi; guadagnarli più possibile. Era lo scopo del lavoro, anche se c'erano molti effetti collaterali piacevoli, come per esempio essere il primo nei motori di ricerca. Era una grande soddisfazione perché mi confermava la mia bravura, oppure fortuna, e dopo portava comunque verso il guadagno. Messo in scrigno un gruzzolo, sono arrivati i tempi duri, tantissima concorrenza, più giovane e per questo probabilmente più creativa e stimolata. E con la scusa di aver già raggiunto una certa meta prefissata, in quanto già appagato, ho trovato la scusa per rilassarmi, per lavorare di meno, per trascurare le indagini sui fenomeni legati a questa professione. Perché il sapere è tutto e io ultimamente utilizzo la base di qualche anno fa, senza aggiornamenti sulle nuove tendenze e regole.

Nel primavere passata mi è arrivata un'e-mail dal signore G che mi informa che un mio certo sito non è ottimizzato per i telefoni di nuova generazione. Avendo sentito anche la notizia che in Italia, da poco, il numero delle persone che navigano dagli smartphone ha superato quello degli utenti sui PC i notebook, ho concluso che dovrei muovermi in questa direzione e che questo potrebbe essere il modo per migliorare la redditività. Mi è stato consigliato anche l'indirizzo https://developers.google.com/speed/pagespeed/insights/ per la verifica delle pagine. Basta inserire l'URL della pagina che si vuole verificare e Google analizza tutti gli aspetti importanti per un utente con un telefonino di ultima generazione. Alla fine dà un voto all'esperienza utente che va da 1 a 100. Se il voto è alto, da 85 a 100 compare il colore verde. Se si va da 70 a 85 siamo in area gialla, cioè attenzione. Se il voto è ancora più basso spunta un rosso preoccupante. Nel caso del giallo e del rosso, Google abbatte il punteggio del sito e lo arretra nei risultati della ricerca per coloro che usano il loro App sui telefoni mobili.

E le mie pagine erano tutte nella zona rossa. Male, molto male. Visto che le mie posizioni anche nella ricerca standard, quella per i PC, non erano molto buone, qui praticamente significava che nessuno che usa un cellulare non può trovare il mio sito. Di questo fatto non me ne fregava gran che, specialmente perché io non possiedo e non ho mai avuto un cellulare. Ma iniziavo a capire che bisogna estendere la presenza anche su questo campo. E così mi sono dato da fare. C'è una riga chiave nella testata del codice delle pagine:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Con questa si dice al cellulare di rappresentare la pagina in modo migliore possibile per la schermata dello stesso, usando la piena larghezza dell'apparecchio, mantenendo la scala 1:1. Sembra un po' tutto contradditorio e ho messo un bel po' di tempo ad arrivarci, sperimentando le varie soluzioni. In alte parole, con il commando soprastante si dice a stringere tutto in una finestra, diminuendo la scala soltanto a proporzione della larghezza dello schermo. Se si ha un testo puro, oppure le tabelle non fissate come larghezze ed una grandezza dei caratteri sufficiente per essere visibile quando si diminuisce il testo, va bene tutto. Ma questo non è quasi mai il caso. Se avete una pagina fissa con la larghezza superiore a quella del cellulare, una parte rimane fuori schermo e vi beccate un voto semaforico giallo o rosso. Altro problema sono le immagini e video che avendo la larghezza fissa, non rientrano nel viewport.

Alla fine della storia, ho sistemato tre siti. Per tutti ho applicato le tabelle variabili, fissando il rapporto tra le varie colonne come percentuali, non pixel. Per le foto e video ho dovuto inserire il codice javascript per variare la larghezza in funzione allo schermo dove sono rappresentate. Qui ho avuto delle grande difficoltà. Sono riuscito trovare velocemente il codice che mi serviva e quello funzionava su Chrome, ma non su Internet Explorer 8, quello vecchio che uso ancora proprio per la compatibilità verso basso. Persi due, tre giorni, per puro caso ho trovato la soluzione: all'inizio della pagina occorre inserire e così funziona su entrambi i browser. Tantissima fatica, ma il risultato non si è visto, penso per pura colpa mia: semplicemente mancano le altre ottimizzazioni per Google.