10 articoli per scoprire se il vostro progetto WordPress è di valore – 6. Responsività

Uno degli indicatori che ci permettono facilmente di definire un progetto WordPress di valore è il fatto che questo deve poter essere fruibile da ogni tipo di interfaccia si usi.

Possiamo trovarci in navigazione attraverso il nostro smartphone o il nostro tablet, essere al tavolo da lavoro con il nostro laptop o il nostro desktop ma l’esperienza di navigazione del nostro progetto WordPress deve essere soddisfacente allo stesso modo da ognuna di queste interfacce di navigazione. Questa caratteristica è chiamata: responsività o design responsivo.

Non solo design

Inizialmente il design responsivo faceva esclusivamente riferimento alla grafica. Un progetto caratterizzato quindi da design responsivo era quindi un progetto le cui pagine web si adattavano perfettamente ad ogni schermo su cui queste venissero caricate. Con il passare del tempo e l’evolversi del web questo significato è stato molto ampliato da fatto che le grafiche erano fortemente legate ai contenuti e quindi un design responsivo è divenuta essere una caratteristica che coinvolge anche le logiche e le funzionalità di un progetto.

Web design responsivo nelle grafiche

E’ interessare notare come fino a qualche anno fa non esistessero smartphone e tablet, un tempo avevamo cellulari e palmari. Il web design, ovvero la progettazione si grafica che logica, di un sito web, avveniva automaticamente, quindi, per periferiche desktop, anche il laptop (il portatile) era pensato semplicemente come un desktop con lo schermo un po’ più piccolo, nulla di speciale dal punto di vista del web design.

Quando col passare del tempo (primi anni del 2000) i laptop confermarono la loro praticità nei confronti dei desktop e l’internet finì dentro i piccoli schermi dei primi smartphone e dei primi tablet, ci si rese conto che si doveva iniziare a considerare schermi con notevole differenza di grandezza e che quindi il web design doveva considerare una versione “ridotta” del prodotto che ormai era solito creare.
Le grafiche venivano quindi spogliate di elementi fino a riuscire a forzarle all’interno di schermi piccoli ed angusti e si considerava questa “versione” del prodotto qualcosa che potesse essere molto soddisfacente anche solo per il fatto che si fosse riusciti a rendere il progetto tale da poter essere navigato da uno smartphone.
Col trascorrere di altri (pochi) anni ci rese però conto che questa non poteva essere una strategia a lungo termine per due semplici ragioni: la prima è che sempre di più il pubblico prediligeva lo smartphone ed il tablet ai computer laptop e desktop e la seconda era che un progetto di logica e grafica non doveva essere sacrificato per queste periferiche ma in loro doveva trovare una sua versione specifica e confortevole.

Ecco che quindi la produzione web traslò il suo punto di vista e si rese conto che si era tanto più bravi quanto più si riusciva a considerare che il progetto si “aprisse” in presenza di uno smartphone diversamente da come si sarebbe “aperto” per un desktop. Era quindi il progetto ad avere una logica nella grafica, a riconoscere in autonomia la periferica su cui le pagine venivano aperte e a dare il meglio di sé adattandosi allo schermo in questione.

Tralasciando tutti gli aspetti tecnici di questa evoluzione del web possiamo arrivare immediatamente alla generazione successiva, quella che potremmo far coincidere con la nascita dei maggiori social, ovvero la generazione in cui, da una parte, la navigazione smartphone e desktop risulta essere oltre l’80% della navigazione web e, dall’altra, dove non solo la grafica deve adattarsi alla periferica su cui viene caricata ma anche la logica stessa del progetto, fornendo ad esempio più o meno funzionalità in base alla quantità di connessione di cui può usufruire.

Presto anche questo collo di bottiglia rappresentato dall’ampiezza di connessione che permette più o meno funzionalità, sparirà del tutto in quanto la connessione all’internet sarà globale e uniforme e permetterà una banda sempre più ampia della necessità dell’utente medio.

Web design responsivo per le logiche

Comprendere un Web design responsivo per quanto concerne le grafiche è semplice, con un esempio possiamo dire che se l’immagine del logo dell’azienda il cui sito stiamo visitando, sullo schermo del desktop è di 4 centimetri, sullo schermo dello smartphone deve ridursi ed essere, ad esempio, di un solo centimetro. Altrettanto semplice può essere comprendere la responsività delle logiche. Con un esempio altrettanto immediato possiamo dire che se aprendo un sito abbiamo un numero di telefono in vista, per contattare l’azieda il cui sito stiamo visitando, questo, nella versione mobile sarà semplicemente un piccolo pulsante con l’immagine di una cornetta del telefono posta probabilmente sulla destra dello schermo, in modo tale che l’utente possa premerla con il pollice destro e direttamente avviare la telefonata.

Il progetto WordPress di valore: responsività sia grafica che logica

Tutto quello che abbiamo detto descrive quindi un progetto web che sia stato curato con attenzione nei confronti del concetto di Web design responsivo. WordPress concede numerosi strumenti perché tutto questo sia possibile quindi è legittimo pensare che il vostro progetto wordpress abbia esattamente le caratteristiche descritte finora.

Il modo più semplice per verificare questo è prendere uno smartphone, un tablet, un laptop ed un desktop (se siete imprenditori o professionisti in genere non sarà improbabile che abbiate almeno 3 su 4 degli strumenti elencati) e fare una prova di navigazione del vostro sito da ognuno.
Una volta entrati in fase di test vi basterà ricordare qualche piccolo promemoria per verificare la bontà del vostro progetto:

  • Non si devono verificare brusche interruzioni di pagine
  • I pulsanti devono essere tutti raggiungibili facilmente
  • La pagina non deve risultare più larga di quanto non sia il vostro schermo
  • Ogni elemento visivo deve essere correttamente proporzionato agli altri elementi
  • Non deve mai mancare nulla a livello di funzionalità, possono essere disposte graficamente in modo diverso ma ogni opportunità deve essere data all’utente in qualunque tipo di navigazione.
Menu
Scopri di più