In questo articolo vediamo alcune tecniche per rendere le nostre pagine web “responsive”, ovvero capaci di adattarsi allo schermo/dispositivo su cui vengono visualizzate per consentire una fruizione più comoda, mantenendo inalterata l’esperienza utente, che si usi ad esempio un pc con schermo grande, un tablet con uno schermo medio o uno smartphone con schermo piccolo. Vediamo come.
Un sito web responsive è un sito che è capace di adattare la propria grafica, il proprio design a seconda del dispositivo su cui viene effettuato il rendering. ll problema di avere un sito responsive è quello di garantire la migliore esperienza di navigazione per gli utenti che usano schermi anche molto differenti tra loro in dimensioni e risoluzioni video come tablet, smartphone e schermi pc. A seconda dello schermo, potrebbe essere quindi importante dare rilevanza a determinati oggetti, disporli in un ordine differente, nascondere o modificare alcune porzioni di menù o informazioni che non sono facili da utilizzare su un dispositivo touch piuttosto che usando un mouse. Se il codice per fare questo procedimento di modifica layout vedremo essere abbastanza banale, la parte di progettazione invece potrebbe essere alquanto complessa e richiedere un feedback utente sull’usabilità delle modifiche fatte.
Per fare i nostri test, dobbiamo però ricorrere ad uno stratagemma: molti dei lettori probabilmente staranno facendo e sviluppando i prossimi frammenti di codice su un pc tradizionale mentre noi vogliamo vedere il comportamento su telefonino. Occorre quindi una sorta di emulazione del dispositivo che vogliamo testare. Un sistema grezzo e spartano è quello di sviluppare sempre per il nostro browser preferito, per poi ridimensionarlo col bottone “quadratino” nello spigolo in alto a destra, tra il riduci ad icona e il chiudi finestra, e rimpicciolirlo a piacere per vedere cosa accade. Se invece usate Firefox come browser, cliccando nell’hamburgher menù in alto a destra c’è la voce Sviluppo web->Modalità di visualizzazione., dove potete scegliere la risoluzione che preferite e fare test semplici ed efficaci. Basta ricliccare la voce per disattivare la visualizzazione ridotta. Esistono decine di estensioni per ogni browser che fanno meglio o peggio questa funzionalità, a voi la scelta.
Il primo concetto che dobbiamo sapere è “ci serve davvero spostare e cambiare qualcosa?”. Ni, nel senso che un primo passaggio molto semplice per far si che il nostro sito web si adatti al dispositivo lo possiamo fare aggiungendo la nostra pagina HTML il seguente tag nella parte head. Tutti gli oggetti, se possibile, verranno ridimensionati e scalati secondo le dimensioni percentuali dello schermo. Questo ci permette di vedere la stessa identica pagina come se fossimo su un pc desktop, ma già potete immaginare quanto sia scomodo con link e menù a tendina vari da dover cliccare. Esempi odi codice è il seguente
<head>
<title>Esempio adattivo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>Il viewport è l’area di visualizzazione che vedete risponde al device-width. Non è un mistero, anche se inutile o quasi, che posso usare quell’attributo per forzare, su qualsiasi browser, una visualizzazione con una risoluzione scelta. Non vediamo un esempio di come si comporta questa modalità, lasciamo al lettore qualche test inserendo questo tag meta o meno nella propria pagina di prova. Una variante interessante è la possibilità di zoommare da parte dell’utente che va specificata modificando il meta tag così:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">Questi due tag sono sostanzialmente gratis, converrebbe abituarsi ad inserirlo in ogni pagina che realizziamo come si fa per il charset.
Veniamo al sodo: vogliamo creare uno stile di esempio per uno schermo standard con risoluzione almeno 1280×1024 pixel ed uno a bassa risoluzione che magari simuli un telefono con schermo al massimo di 320×480 pixel. Come buona pratica, usiamo sempre fogli di stile esterni, non immergiamo mai codice CSS nelle nostre pagine o cerchiamo di evitare tale pratica poco scalabile e aggiornabile.
Ci creeremo due fogli di stile che ci richiameremo con la funzionalità di selezione “media” in cui indichiamo le parole screen per indicare la tipologia di media (screen, print per gestire schermi e stampa i principali, speech, all i meno utilizzati per i browser per i non vedenti e un tutt’uno con all)
<link rel="stylesheet" media="screen and (min-width: 1280px)" href="css/pcstyle.css">
<link rel="stylesheet" media="screen and (max-width: 340px)" href="css/telefonostyle.css">Per comprendere l’uso dei due fogli di stile facciamo un test semplicissimo: disegniamo due quadrati nella nostra pagina da pc, uno di fianco all’altro, mentre nella versione telefono i due quadrati cambiano colore e si spostano uno sotto l’altro. Il codice della nostra pagina HTML è semplicissimo: due contenitori div con un testo al loro interno, tutto centrato. Nella figura, un estratto esemplificativo
Il codice HTML è semplice e sarà l’unica costante del nostro test: a variare saranno i fogli di stile!
index.html
<!DOCTYPE html>
<html lang="it">
<head>
<title>Test Responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (min-width: 1280px)" href="css/pcstyle.css">
<link rel="stylesheet" media="screen and (max-width: 340px)" href="css/telefonostyle.css">
</head>
<body>
<div id="contenitore">
<h1>Test Responsive</h1>
<div id="quadrato1">TEST 1</div>
<div id="quadrato2">TEST 2</div>
</div>
</body>
</html>Il trucco è tutto nei due tag link con media che filtrano in automatico il CSS da caricare a seconda della dimensione dello schermo. Il CSS per pc ad alta risoluzione, presenta dei selettori abbastanza standard per gli esercizi visti anche su queste pagine. Notiamo la dimensione dei quadrati con l’allineamento a sinistra.
pcstyle.css
body
{
background-color: #f3f3f3;
}
#contenitore
{
max-width: 300px;
margin: auto;
}
#quadrato1, #quadrato2
{
width: 100px;
height: 100px;
border: 1px solid #333;
display: block;
float: left;
color: whitesmoke;
padding: 5px 5px 5px 5px;
text-align: center;
}
#quadrato1
{
background-color: red;
}
#quadrato2
{
background-color: green;
margin: 0 0 0 50px;
}Per quello a schermo piccolo con bassa risoluzione invece cambiamo principalmete le dimensioni dei quadrati, il float e i margini che ora occorrono da sopra e non da sinistra.
telefonostyle.css
body
{
background-color: #f3f3f3;
}
#contenitore
{
max-width: 320px;
margin: auto;
}
#quadrato1, #quadrato2
{
width: 60px;
height: 60px;
border: 1px solid #333;
display: block;
color: whitesmoke;
padding: 2px 2px 2px 2px;
text-align: center;
}
#quadrato1
{
background-color: red;
}
#quadrato2
{
background-color: green;
margin: 0 0 0 0;
}Otteniamo qualcosa di simile a quanto segue:
L’esempio magari non è dei più realistici ed usabili, ma ci mostra con semplicità come funziona l’attributo media. Il lettore attento può già intravedere limiti e complicazioni di questa tecnica. Nel nostro progetto ad esempio potevamo raggruppare alcuni stili css comuni ad entrambi i display in un unico css principale che vine caricato senza “media”e lasciare poi solo i cambi specifici negli altri due fogli di stile. Un buon sito che punta alla massima usabilità dovrebbe avere soluzioni personalizzate almeno per una stand di telefonino, pc e tablet. Lo sviluppo e la progettazione diventano lunghi proprio perché è necessario individuare quali strategie sono meglio con un display piuttosto che un altro.
Ultima modifica 27 Gennaio 2022