Un sito per dispositivi mobili

NOTE

HOME

La difficoltà di visualizzazione / Gli interventi per eliminare le non conformità / Passare ad un sito responsive con un CMS / Un sito progettato per essere responsive / Il problema principale. L'orientamento dello schermo

Musica & Memoria e i dispositivi mobili

Quando il sito ha iniziato i primi passi sul web (1999) i telefonini esistevano già, ma non avevano la funzionalità di navigazione sul web. Al massimo alcuni modelli potevano, e non in modo semplice, inviare le email. Il primo telefonino di diffusione relativamente ampia e in grado di navigare sul web è stato il Nokia Communicator 9210 del 2000, primo di una serie di altri modelli con sistema operativo Symbian. Era un prodotto di nicchia con navigazione molto lenta e che non era una funzione centrale. Poi nel 2007 un genio della tecnologia e del marketing di nome Steve Jobs ha pensato di mettere insieme tecnologie già note ma di farle funzionare al massimo, e dopo un paio d'anni è iniziata l'invasione degli smartphone e poi dei tablet, con il contributo fondamentale di un'altra grande compagnia basata sulla innovazione continua (mentre la Nokia rimaneva seduta nella convinzione che essere il numero uno era un punto d'arrivo) e così ora praticamente 2 abitanti della Terra su 3 hanno in mano un dispositivo mobile e spesso più di uno.

E' diventato quindi indispensabile adeguare anche Musica & Memoria all'accesso da parte dei dispositivi mobili, in modo che Google possa classificare le pagine del sito come "mobile friendly", e quindi non penalizzarle nei risultati della ricerca. In questa pagina sono riassunte le azioni fatte per l'adeguamento, e scelte tra le varie possibili, sia per documentazione sia perché potrebbero essere ad altri webmaster o semplici hobbysti del web impegnati nella stessa operazione.

Alla data di aggiornamento di questa pagina tutte le 1592 pagine del sito sono certificate mobile friendly da Google.

Il primo problema. La difficoltà di visualizzazione

I dispositivi mobili sono di tre tipi: smartphone tradizionali (schermo intorno 4"-5"), smartphone evoluti o phablet (schermo da 5" in su) e tablet (schermo da 7" in su). La necessità di una visualizzazione ad hoc che consenta di veicolare efficacemente le informazioni anche su uno schermo piccolo (ma comunque ad alta definizione) riguarda soprattutto il primo tipo, ma i principali motori di ricerca e le direttive sull'usabilità la impongono per tutti i dispositivi.

Le difficoltà in visualizzazione per un sito progettato all'origine per schermi desktop e quindi non "responsive" riguardano sostanzialmente le seguenti caratteristiche che possono essere presenti in una pagina:

1. la presenza di caratteri a dimensione fissa, che diventano troppo piccoli o al limite illeggibili sullo schermo piccolo,
2. la presenza di link vicini (su due righe ad esempio) non facilmente cliccabili usando le dita su uno schermo touch screen,
3. la presenza di immagini a dimensione fissa, superiore a quello dello schermo da 3" (460px) sia per immagini singole, sia per serie di immagini affiancate la cui somma supera il limite dello schermo citato sopra
4. la presenza di embed di YouTube a dimensione fissa;
5. la presenza di tabelle di tabella dati con limiti di scalabilità (dimensione fissa o imposta dalla dimensione dei caratteri o dalla lunghezza delle parole)
6. la presenza di parole di lunghezza eccessiva (in genere si tratta di link)
7. la presenza di annunci pubblicitari di larghezza fissa, superiore alla larghezza dello schermo di uno smartphone.

Test di compatibilità
Per verificare se la pagina presenta uno o più di queste limitazioni la si può sottomettere a un test di compatibilità. E' disponibile gratuitamente ed è fornito da Google. Può essere effettuato anche a vista riducendo progressivamente le dimensioni della finestra su desktop. Se la scalatura in orizzontale effettuata automaticamente dal browser si interrompe e parte della pagina va "fuori dalla finestra" la pagina non è compatibile. Occorrerà cercare a questo punto la parte della pagina che per prima blocca lo scaling.

Test con simulatore
La verifica si può fare anche a vista su uno smartphone. Poiché lo sviluppo di solito si fa su desktop e poiché sarebbe opportuno provare su diversi modelli è molto più pratico utilizzare un simulatore. Anche questo è fornito gratuitamente da Google su Chrome. Si usa la combinazione di tasti CTRL-Maiusc-I e si passa in debug con la possibilità di selezionare lo schermo di diversi modelli. Semplice e senza fronzoli ma efficace, esistono però prodotti più raffinati a pagamento.

Il secondo e principale problema: l'orientamento dello schermo

Oltre a questi vincoli tecnici esiste però un altro problema, ancora più importante e basilare: desktop e tablet hanno un orientamento dello schermo, preferenziale o obbligato, orizzontale (o landscape), mentre smartphone e phablet, quindi device usate anche per parlare, verticale (o portrait). Il secondo orientamento è quello tipico dei contenuti testuali, dal libro ai giornali alle riviste, il primo dei contenuti di tipo immagine, dai quadri (tranne, ovviamente i ritratti o portrait), al cinema alla televisione. Per motivi ignoti sui primi PC è stato scelto l'orientamento orizzontale, pur essendo all'epoca in grado di gestire solo testi, e pur se la loro struttura riprendeva quella della macchina da scrivere, che era "verticale" nel senso che lo era il foglio di carta che si inseriva sul rullo.

La organizzazione del testo, soprattutto se accompagnato da immagini impone regole diverse nei due casi, per esempio immagini landscape a tutto schermo o immagini portrait non con testo a fianco negli schermi verticali. Basta pensare alla organizzazione grafica di una rivista illustrata a confronto con un depliant organizzato in orizzontale.

La conseguenza è che, anche a causa della nostra "educazione grafica" acquisita sin dai primi anni di scuola o di asilo, una organizzazione di contenuti formattati (con titoli ecc.) o di contenuti con testo o immagini non potrà mai è essere efficace nello stesso modo per smartphone e desktop o tablet. Dovrà essere sempre un compromesso e, come in tutti i compromessi, vince il componente più difficile ma più diffuso, ovvero lo smartphone.

Il risultato è che si sono stabilizzati due approcci alternativi:

• Sito responsive: la stessa pagina con la stessa organizzazione per tutti i dispositivi. Il vantaggio è la semplicità di gestione del sito, lo svantaggio è che una delle due visualizzazioni sarà penalizzata. Normalmente è quella desktop, nella quale non tutte le possibilità di comunicazione dei contenuti nella stessa schermata sono utilizzate.

• Pagina alternate: ogni pagina è in due versioni, "canonical" (normalmente la desktop) e "alternate", con una diversa grafica riprogettata per la visione in verticale, a seconda della device usata la presentazione avverrà automaticamente nell'uno o nell'altro formato. E' la soluzione ideale perché sfrutta al meglio entrambi gli orientamenti dello schermo. Lo svantaggio è che le pagine possono apparire diverse e anche essere effettivamente diverse (con meno contenuti quella smartphone). Inoltre, se i due formati non sono creati automaticamente dal CMS usato, ogni aggiornamento ad una pagina deve essere applicato due volte.

Musica & Memoria adotta un mix dei due approcci: pagina alternate per le pagine più viste e più stabili (non soggette ad aggiornamenti frequenti), pagine responsive in tutti gli altri casi.

Gli interventi da fare per eliminare le non conformità

1. Impostazione dimensione schermo e caratteri
Le limitazioni 1) e 2) possono essere risolte impostando la dimensione dello schermo e dichiarando al browser i caratteri come scalabili. In visualizzazione il testo sarà adattato automaticamente alla dimensione dello schermo dal browser e i link saranno cliccabili nella quasi totalità dei casi. E' una configurazione che si applica a livello di pagina e quindi facilmente estendibile a tutte le pagine di un sito, ed è applicata a questo sito da giugno 2015.

Il comando html è il seguente (1):
<meta name=viewport content="width=device-width, initial-scale=1">

Per la limitazione (2) è necessario definire uno stile CSS del tipo seguente,

body
{
font-family: Verdana;
size=2;
}

e richiamarlo in ogni pagine con il comando meta seguente.
<link rel="stylesheet" type="text/css" href="<nome-file>.css"

3. Dimensione immagini variabile in base alla dimensione dello schermo
La limitazione 3) è superabile dichiarando al browser le immagini come flessibili (class="flex") e non imponendo le dimensioni (saranno di default quelle dell'immagine jpg). L'intervento deve essere effettuato per ogni singola immagine ed è quindi più oneroso. Viene applicato gradatamente partendo dalle pagine con più visualizzazioni. Per imporre che lo scaling abbia l'effetto che desideriamo conviene: 1) inserirle in una tabella (al limite dentro un'altra tabella) usando una cella per ogni immagine e, 2) uniformare le dimensioni delle immagini per evitare che nel rimpicciolimento perdano l'allineamento, quindi che abbiano la stessa altezza se sono rettangolari, o le stesse dimensioni se quadrate.

Lo stile CSS da inserire nel file .css è il seguente.
.flex {max-width: 100%}

Per verificare cosa si può ottenere: vedi questo esempio su Musica & Memoria. Per verificare l'effetto basta rimpicciolire progressivamente la finestra del PC su cui si visualizza la pagina

4. Embed YouTube
E' necessario fare ricorso ad un apposito settaggio CSS che consenta un posizionamento relativo e lo scaling della videata embed da YouTube. Il codice CSS è il seguente:

<style>
.rwd-video {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
</style>

Il codice embed di YouTube deve poi essere inserito in un comando "div" come segue:

<div class="rwd-video"> "codice embed" </div>

6. Parole o link espliciti troppo lunghi
I link non possono andare a capo in modo automatico e quindi impongono la loro larghezza a tutto il testo vicino. Semplicemente non devono essere usati mai e quindi già non dovevano esserci. L'indirizzo URL deve essere nel collegamento e non esplicitato nel testo, che deve essere invece descrittivo. Per le parole troppo lunghe (una situazione piuttosto rara) occorre invece inserire dei trattini per indicare al browser che può andare a capo in caso di necessità. Si vedranno anche nella visualizzazione desktop ma non sarà un problema fondamentale perché, appunto, si tratta di casi molto rari.

7. Inserzioni pubblicitarie non progettate per dispositivi mobili
Quelle di formato più gradito sia agli inserzionisti sia ai visitatori su schermi desktop, orizzontali da 720px o quadrate 250x250, non sono ottimizzate per dispositivi mobili. Le pagine possono essere rese comunque compatibili separando il resto del testo dalla inserzione (per esempio inserendo la inserzione in una tabella separata) in modo che lo scaling possa avvenire ugualmente. Il test di Google tollera questa situazione e certifica comunque la pagina come compatibile, almeno alla data di queste note. Dal 2015 Google fornisce comunque annunci responsive, che si adattano automaticamente allo schermo, e quindi la ulteriore soluzione è sostituirli tutti con quelli di nuovo tipo.

Passare ad un sito responsive con un CMS

Rendere il sito pienamente compatibile con i terminali mobili, quindi responsive, è un'operazione che può essere più agevole mediante il ricorso a un CMS (content management system) per la produzione dei contenuti, come Drupal o Joomla. Con questi aggiornati ambienti di sviluppo open source, così come gli altri professionali a pagamento, l'operazione può essere impostata e fatta eseguire al software. La presenza di pagine custom con esigenze particolari e anche il risultato più o meno efficace in base alle scelte comporta comunque un lavoro di adattamento che il webmaster deve fare manualmente o affidare ad una società specializzata

Per Musica & Memoria è stata invece scelta all'origine la realizzazione esclusivamente in HTML puro, una scelta che ha consentito sinora di avere pagine più leggere e quindi con più elevate prestazioni, anche con linee a bassa velocità e di mantenere una indipendenza da produttori di CMS che si sono succeduto negli anni (Musica & Memoria è online dal 1999). Questo ha consentito sino ad oggi di non dover riprogettare il sito nonostante la crescita tecnologica veloce in un periodo di oltre 15 anni. E' stato quindi reso responsive applicando gli interventi elencati in precedenza.

Un sito progettato per essere responsive

Tutto quanto precede riguarda il caso di un sito progettato prima della diffusione massiccia degli smartphone. E' evidente che per un sito che nasce ora la caratteristica di essere responsive diventa un obbligo. Anche perché Google fa automaticamente questa verifica e concede in questo caso l'attributo "mobile friendly" che garantisce un posizionamento più elevato nella ricerca. Quindi è fondamentale per il successo del sito, assieme al fatto che, se leggibile poco e male da uno smartphone, la pagina sarà abbandonata subito se non proprio contenente informazioni fondamentali.

Sono state quindi sviluppate linee guida di progettazione anche grafica dei siti pensate per essere adatte già all'origine per tutti i tipi di dispositivi, come quelle di design definite nel 2015 dal governo italiano e a cui dovranno uniformarsi progressivamente tutti i siti della pubblica amministrazione (design.italia.it). Per un esempio su come si presentano i siti che seguono queste linee guida, a parte i siti del governo centrale, si può vedere il sito del Comune di Venezia.

Il problema principale. L'orientamento dello schermo

Superati i problemi base di visualizzazione rimane sempre un problema di fondo: l'orientamento dello schermo. I libri, i giornali, le riviste hanno da sempre una organizzazione dei contenuti verticale (portrait) per motivi pratici (è più comodo voltare pagina sul lato lungo). Le arti visive (i quadri, le incisioni, gli affreschi), prima, poi il cinema e quindi la televisione poi hanno avuto invece da sempre un orientamento orizzontale (landscape) coerente con la nostra modalità di visione (abbiamo due occhi in orizzontale). I computer, pur gestendo all'inizio soltanto numeri e poi a seguire testi (le immagini e i video sono arrivati molto dopo) hanno seguito, avendo uno schermo, l'orientamento orizzontale di un monitor TV, piuttosto che quello più logico, verticale. Ci sono stati negli anni '70 e '80 sistemi di videoscrittura specializzati con schermo verticale, ma sono spariti presto.

Con l'avvento degli smartphone l'orientamento verticale è arrivato anche nei dispositivi informatici sempre per un motivo molto pratico e banale: usandoli in verticale è possibile tenerli con una sola mano. Già per i tablet la situazione è diversa: richiedono sempre due mani (se non sono appoggiati) e quindi l'orientamento preferito rimane quello orizzontale.

Il vero problema

Questo è il vero problema, perché la stessa organizzazione dei contenuti, se prevedono anche la presenza di immagini o sezioni evidenziate, non può essere ottimale per entrambe le visualizzazioni. Deve essere forzatamente data la priorità a quella più difficile a causa delle sue limitazioni (la grandezza dello schermo) e di conseguenza la visualizzazione su desktop, su schermo grande, non è sfruttata in pieno: caratteri grandi, grandi spazi vuoti, necessità di scorrere in senso verticale anche quando le informazioni da visualizzare non sono molte. Si può vedere un esempio nel sito del Comune di Venezia citato prima. Poco male comunque, il maggior numero di visualizzazioni, anche per Musica & Memoria da metà del 2016, arriva da dispositivi mobili con grande prevalenza dei più diffusi, gli smartphone.

La soluzione ideale, ma più complessa

La visualizzazione verticale sul piccolo schermo di uno smartphone è però comunque penalizzata anche dopo aver apportato tutti gli accorgimenti per renderla mobile friendly: le immagini sono troppo piccole se affiancate tra loro o affiancate da un testo, oppure può essere lasciata (come il testo a dimensioni maggiori) ma è necessario scorrere orizzontalmente.
Con una pagina specializzata per dispositivi mobili tutto viene risolto: lo scorrimento è verticale, tutti i contenuti sono sullo schermo e sono alternate le immagini e il testo o sono visualizzate tutte le immagini. Il visitatore non deve fare nulla, a seconda del dispositivo che usa la visualizzazione sarà impostata nel modo più adatto automaticamente.
Nelle due immagini seguenti sono mostrate le due visualizzazioni alternative e ottimizzate (quella per smartphone è per iPhone 5 o SE). Cliccando si può vedere la pagina originale (restringere la finestra nell'esempio per dispositivi mobili).

Il sistema degli alternate URL

Il sistema è basato su una innovazione nella gestione dei siti introdotta alcuni anni fa e che si chiama CNAME o canonical name. Consiste nella creazione di un dominio di terzo livello (musicaememoria è un dominio di secondo livello, com è un dominio di primo livello) che per convenzione in questo caso si chiama semplicemente "m" e in una configurazione del puntamento (DNS) che consenta l'accesso a questo dominio con URL (indirizzo) diverso in determinate condizioni. Il canonical name serve in particolare ai crawler dei motori di ricerca per sapere che si tratta della stessa pagina in due versioni diverse, con solo alcune differenze nella presentazione grafica (come nell'esempio sopra) in modo da conteggiarle e indirizzarle come una pagina sola.

Attivare un dominio di terzo livello
Alcuni IP provider già forniscono e mettono a disposizione di default il dominio di terzo livello "m". Quando non è così bisogna crearlo nella sezione di gestione dei DNS (creare quindi un CNAME) o in alcuni casi acquistarlo a parte. Dove non è previsto occorre aggiungere nel file di configurazione iniziale .HTACCESS con questi comandi di configurazione:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} m.music-graffiti.com
RewriteCond %{REQUEST_URI} !m/
RewriteRule ^(.*)$ /m/$1 [L]

Controllare però sempre con il vostro provider la modalità specifica, che segue gli stessi passi ma potrebbe richiedere azioni in parte diverse (queste sono del noto provider Tophost).

Attivare l'indirizzamento automatico
Per consentire al browser di poter decidere se utilizzare la versione desktop o quella mobile è sufficiente inserire nella pagina uno script che fa una serie di test che verificano se il visitatore sta usando appunto un desktop o un dispositivo mobile usato preferenzialmente in verticale. Il tutto si realizza normalmente con uno script come questo (per semplicità sono usati dominio e pagina dell'esempio presentato sopra, che ovviamente devono essere sostituiti):

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.music-graffiti.com/beatles_menu_LP.htm">

<script>
if(
navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/IOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/i)
){
location.href="http://m.music.graffiti.com/beatles_menu_LP.htm";
}</script>

In questo caso è impostata una larghezza massima (640px) che fa sì che la pagina alternativa non sia applicata sui tablet, dove non serve.

Anche sulla pagina alternativa bisogna inserire un comando che informa i crawler che la pagina standard (canonical) non è quella, ma un'altra, quella della root. Il codice è questo:

<link rel="canonical" href="https://www.music-graffiti.com/beatles_menu_LP.htm">

Le altre modifiche sul file "alternate"
Poiché la pagina è posizionata su un dominio di terzo livello diverso da quello della radice (root: www) tutti i link interni ad altre pagine o ad immagini non funzionano più. La soluzione più semplice è sostituirli con link esterni, il che produce alcuni effetti sulle statistiche (il numero di visite per pagina può ridursi) e l'impossibilità di inibire il link esterno alle proprie pagine. Effetti collaterali non gravi. Un'altra modifica che potrebbe essere necessaria è una diversa impostazione della larghezza dello schermo. Nella versione per desktop spesso è impostata (come in M&M) una dimensione inferiore a 100% per migliorare l'aspetto sugli schermi 16:9 o 21:9 ormai comuni sui desktop. Sulla versione mobile deve essere invece ovviamente configurata al 100%.

Il contatto

Altro elemento fondamentale per un sito web è il modulo di contatto. Non può essere un semplice link ad una casella email perché sarebbe presto piena di spam, ed è inoltre molto più pulito e gestibile l'inserimento delle richiesta mediante una maschera video, o form, con più campi. Maschera video che deve essere facilmente accessibile ed utilizzabile anche da mobile (con campi di inserimento di dimensioni giuste).
I provider però non forniscono questa funzione come standard e quindi bisogna realizzarla.
Per un buon programmatore PHP è un gioco da ragazzi, ma per gli altri occorre trovare una soluzione già pronta. La migliore disponibile al momento è quella fornita gratuitamente da sourceforge: PHP Form Mail Maker.

Usarlo è semplice ma qualche avvertenza è utile. La cosa da tenere a mente è che quello che creerà (è un generatore di programmi PHP) sono un gruppo di file PHP che bisogna inserire in una directory sul sito. Tra questi ci sono anche i file di amministrazione, che consentono l'editing della form creata e il log dei contatti.

La form php creata interattivamente andrà poi inserita con iframe nella pagina html, a meno di usare direttamente la form, dove è possibile personalizzare intestazione e più di pagina.

Altra informazione riguarda il dominio (della email di registrazione) che deve essere uno per form creta. In altre parole se avete de siti diversi ma "gemelli" (ad esempio un sito in inglese e uno in italiano) servono due form e due amministrazioni separate.

© Alberto Maurizio Truffi per Musica & Memoria / Maggio 2015, Rev. Ottobre 2016, Settembre 2017

CONTATTO

HOME