AVERE UN SITO WEB

COSA SIGNIFICA RESPONSIVE SU MISURA




12 novembre 2019

Cosa significa responsive su misura
Perché avere un sito responsive, significato di responsive e cosa intendo per sito responsive su misura: questo post parla di questo.
Tutti vorremmo un sito che si veda bene anche su mobile, perché ormai usiamo tutti smartphone e tablet per andare in internet, e la parola responsive ormai la conosciamo, ma cosa significa di preciso fare un sito responsive? E perché io parlo di responsive su misura per i miei siti web?

RESPONSIVE: SIGNIFICATO DELLA PAROLA

La parola responsive (che qualcuno traduce in italiano con responsivo ma non suona molto bene) significa "che risponde"; ad un'esigenza, una richiesta, che si adatta.
Il responsive web design è nato quando abbiamo cominciato a usare internet e quindi a guardare i siti web non solo col computer ma anche con telefoni e tablet. Prima c'è stata una fase in cui si sviluppavano app per mobile in alternativa ai siti web, poi si è è sviluppata questa modalità di progettazione che permette al sito di adattarsi in larghezza al dispositivo usato, modificandosi, e anche se le app ci sono ancora possiamo avere siti cui collegarci da qualunque dispositivo.
Quindi avere un sito responsive significa avere un sito che risponde all'esigenza dell'utente in base al dispositivo usato, alle sue dimensioni e alla capacità delle persone di interagire in modo diverso, per esempio tenendo conto del touchscreen.

COME FUNZIONA IL RESPONSIVE WEB DESIGN

Una impaginazione elastica, dove gli elementi si muovono e modificano in base allo spazio a disposizione, spostandosi sotto se lo schermo si restringe, rimpicciolendosi o ingrandendosi, a volte scomparendo per lasciar posto ad altri elementi più adatti. Questo è il responsive web design.

Lo puoi vedere all'azione semplicemente nel tuo browser (da computer): in alto a destra hai tre icone: la x per chiudere la finestra, il trattino per ridurre la finestra a icona e in mezzo due quadrettini sovrapposti. Cliccando lì la finestra si sgancia dalla modalità a tutto schermo e si può rimpicciolire e modificare come si vuole. Facendo questa operazione, cioè stringendo la finestra fino ad arrivare a una proporzione da telefono, con un sito responsive vedrete come funziona, cosa si muove e come. Se invece che due quadretti sovrapposti ce n'è solo uno vuole dire che sei già in modalità modificabile.
Per esempio prova con questo blog, che è responsive, magari dalla home page, cliccando sul logo col pulsante destro e scegliendo "apri in una nuova scheda". Rimpicciolendo la finestra in orizzontale vedrai che ad un certo punto le tre voci del menù in alto su sfondo nero spariscono lasciando il posto ai tre trattini orizzontali (che si chiamano amburger e poi ti spiego perché non li amo). Continuando a rimpicciolire vedrai che (se sei nella home page) sparisce anche la galleria immagini. Rimane l'elenco dei post con il titolo, la categoria, la data, ma ad un certo punto, sempre stringendo, spariscono le prime righe di testo del post e si rimpicciolisce l'immagine. Se invece non sei in home page ma in un post, per esempio questo, vedi che tutto il contenuto (testi e immagini) si adatta alla larghezza. Se ci fosse stata una colonna laterale, si sarebbe spostata in basso.

Puoi vedere bene come funziona anche in alcuni siti che simulano il responsive: per esempio Demonstrating responsive design, ish 2.0 (che a me piace perché è l'unico che simula le risoluzioni ampie), Am I Responsive (le cui immagini ho utilizzato per il mio portfolio decodo), Responsinator.
Basta inserire l'indirizzo del sito che si vuole controllare ed è fatta, sono tutti gratuiti e sono tutti simulatori grafici, cioè mostrano solo come si adatta il sito in larghezza, senza simulare sistema operativo, browser, plugin, quindi testare su dispositivi reali è sempre meglio, almeno i principali.
L'unico servizio online che io conosca che simula i vari dispositivi e sistemi operativi realmente è BrowserStack, a pagamento.

Ma come si realizza un sito responsive? Scrivendo il codice, cioè utilizzando i fogli di stile, che già si utilizzano per tutto lo stile del sito, e impostando delle regole per le varie larghezze dello schermo, cioè per esempio io posso dire ai browser che leggeranno il sito: solo quando lo schermo è più largo di tot pixel di larghezza mostra questa cosa e quest'altra cosa, che prima era sotto, spostala lateralmente.

Spesso ci sono tre impaginazioni diverse: per schermo e tablet landscape, per tablet portrait e smartphone landscape, per smartphone portrait (portrait significa in verticale e landscape in orizzontale). Ma i breakpoint (i punti in cui cambia l'impaginazione) si possono impostare in base alle proprie esigenze, non ci sono regole fisse.

COSA SIGNIFICA RESPONSIVE SU MISURA

Il metodo responsive è davvero affascinante da utilizzare, perché permette di immaginare il sito con diverse impaginazioni che cambiano con un movimento fluido. In un certo senso è una sfida, ci vuole elasticità, e a me piace: bisogna fare in modo che con qualunque impaginazione sia tutto ben visibile e usabile. Purtroppo quasi sempre ormai vengono utilizzati dei template che il responsive lo fanno in automatico, e questo a mio parere porta spesso ad un risultato poco curato. Soprattutto dal punto di vista dell'usabilità.

Quando, per esempio, abbiamo un blog con WordPress e scegliamo un template responsive, quello che succede nella versione mobile è automatico e non lo possiamo modificare se non andando a cercare in ftp dei file molto nascosti sul server.
Perché di solito la parte dei fogli di stile che comprende le media queries che riguardano il responsive non viene inclusa nel file css modificabile da gestionale.
Questo blog per esempio è stato modificato da me, sono andata a ravanare sul server finché ho trovato il codice da modificare per ingrandire il testo dei titoli su smartphone, perché erano poco leggibili e il nome della categoria risultava più grande di quello del post, ho anche aggiunto io il codice che elimina la galleria su mobile, e ingrandito il testo del menù a tendina. Perché mi sono incaponita. Ma non ci dovrebbe essere bisogno di fare modifiche se il responsive fosse curato nei minimi particolari.

Per questo i siti li faccio senza WordPress e senza cms, completamente su misura, fatti a mano, perché siano curati nei particolari e visibili bene su tutti i dspositivi. Quindi il responsive che faccio io è un responsive su misura, dove in teoria si può fare qualunque cosa si desideri, in pratica bisogna trovare la soluzione ottimale che tenga conto soprattutto della esperienza dell'utente.

IL RESPONSIVE SU MISURA RISPETTA LA UX

Ci sono 3 regole di UX (esperienza utente) che sono a mio parere molto importanti e che spesso vengono calpestate con un responsive automatico.

  1. Ogni elemento del sito deve essere leggibile (testo, immagini, titoli, voci dei menù), cioè grande abbastanza per essere visto e utilizzato se si tratta di un link.
  2. Non ci devono essere informazioni importanti nascoste e i contenuti devono essere facilmente individuabili e visibili.
  3. Il menù principale deve contenere poche voci chiare e deve essere subito accessibile.
Quasi tutti i siti che vedo online non rispondono, nella loro versione mobile, a queste tre regole.

Quasi sempre ci sono immagini impostate al 100% in larghezza. Sono immagini che su schermo, giustamente, sono in orizzontale, a volte anche di proporzioni panoramiche per lasciare spazio sotto ai contenuti, quando ci si sposta su dispositivi in verticale rimangono in orizzontale al 100% e risultano poco leggibili.
Nel responsive su misura questo può essere evitato facendo in modo che l'immagine sia sostituita da una di dimensioni adatte, o che venga tagliata lateralmente, non è obbligatorio ma si può fare e io lo faccio sempre con le immagini della parte in alto.

Spesso nei siti il testo su mobile è troppo piccolo e le voci del menù troppo vicine tra loro, impedendo di cliccarci sopra comodamente (ci deve essere spazio di almeno un centimetro per andarci su col dito).

IL PROBLEMA DELL'HAMBURGER

Ma soprattutto, quasi sempre ormai nei siti c'è questo problema dell'hamburger (che da quando ho scoperto che viene chiamato così mi sta ancora più antipatico). Anche in questo blog c'è, sarebbe stato troppo complesso eliminarlo. Ed è comprensibile che ci sia, in un template per blog che non può prevedere quante voci del menù ci saranno. Sono i limiti dei template, che sono schemi fissi standard.
Il menù visibile su schermo viene nascosto per il mobile e sostituito con questo simbolo con tre linee orizzontali (solo ogni tanto si vede ancora la scritta menù) che ricorda vagamente gli strati del famoso panino da fastfood: cliccandoci sopra si apre il menù a tendina, cioè che scende a sovrapporsi al contenuto.

Questo sistema a mio parere crea parecchi problemi e ci sono studi e statistiche che lo dimostrano.
Prima di tutto c'è chi non capisce che deve cliccare lì.
Mi è capitato di vedere persone che rimanevano bloccate non sapendo cosa fare quando si accorgevano che non c'era un menù anche su smartphone come su computer. Ci sono studi che dicono che più della metà delle persone sopra i 40 anni non sa cosa siano quelle tre linee e non sa che ci deve cliccare sopra per accedere al menù. Altri studi dimostrano che quando un menù è nascosto o ha voci nascoste viene utilizzato molto meno di un menù non nascosto (ma era abbastanza intuitivo capirlo anche senza indagini, perché se una cosa non la vedi e non la trovi è ovvio che non la usi).
Poi c'è il problema della sovrapposizione, che è sempre, a mio parere, da evitare, soprattutto quando i menù a tendina non si riesce facilmente a chiuderli e ingombrano completamente lo spazio (e capita spessissimo che la chiusura non sia facile).

Quindi, cosa fare? Io finora ho sempre fatto in modo, nei miei siti, che le voci siano visibili anche su mobile come su schermo, solo impaginate in modo diverso. Ho fatto così per il mio sito e per tutti i miei siti. Gli ultimi li potete vedere nel mio portfolio decodo.
Dato che le voci del menù principale devono essere poche, non è giustificabile che si nascondano, a mio parere. Si trova sempre il modo per impaginarle in modo approppriato anche su mobile. Richiede tempo e cura ma è la differenza tra un sito fatto su misura e uno standard.
Certo utilizzare sempre lo stesso script in tutti i siti, con un menù che si chiude ad hamburger su mobile, è molto comodo, perchè il simbolo è piccolo e prende poco spazio, si fa prima.
Ma non possiamo progettare i siti senza tener conto dell'usabilità, è fondamentale perché i siti funzionino e lo diventa sempre di più perché siamo sempre più distratti, nel web.
Si potrebbe obiettare che il menù visibile finisce col non essere in alto, perché di solito si preferisce lasciare in alto il logo, ma su smartphone, essendo touchscreen, scrollare la pagina ci viene naturale (mentre su desktop ci sono volute decine di anni perchè le persone capissero che dovevano scrollare la pagina per vedere i contenuti sottostanti). Comunque ogni sito è un caso a sè.
La cosa davvero senza senso è utilizzare l'hamburger su desktop, perché non c'è neppure la scusa che manca lo spazio, e gli utenti desktop sono ancora meno avvezzi al simbolo rispetto agli utenti smartphone.

Queste sono le schermate della mia home page www.decodo.it:

Screenshot DECODO responsive su misura

Conoscevi il significato della parola responsive? Sapevi come vengono realizzati i siti negli ultimi anni? Quale dispositivo usi di più per accedere ai siti web?
Se questo post ti è stato utile condividilo e commentalo in Facebook o Linkedin.

[ Photo by Florian Olivo on Unsplash ]

 




Vuoi ricevere la mia newsletter mensile? ISCRIVITI QUI
Avrai un work-book in regalo: "le 9 domande fondamentali", che ti sarà molto utile se vuoi avere un sito internet ma non sai da che parte cominciare, e riceverai informazioni, consigli, offerte riservate.

Hai bisogno di aiuto per il tuo sito web? Visita il mio sito decodo.it con tutti i miei servizi e poi, per cominciare, prenota la tua CONSULENZA ONLINE GRATUITA.



Quanto vale un sito web | Stella Pederzoli Blog
QUANTO VALE UN SITO WEB
30 gennaio 2021