Fw

Wordpress Creative Developer

Fedeweb Responsive: Scelte, Difficoltà e Considerazioni

  • User Experience
  • -

Non lavorare fa bene e non è la prima volta che lo dico. E’ in questi momenti che si cresce e che si può provare a sperimentare e lavorare su progetti personali o semplicemente studiare.

Durante le feste natalizie mi sono messo a lavorare su Fedeweb, cercando di migliorare la user experience su smartphone e tablet.

Fedeweb Diventa Responsive

In questo articolo voglio condividere con te quali sono state le scelte fatte e le difficoltà riscontrate.

Le scelte

Quando si deve adattare un sito al responsive bisogna fare delle scelte, dato che non tutti gli elementi sono importanti nella navigazione mobile.

Ho escluso quindi alcuni elementi ritenuti superflui, e trasformato altri in modo da renderli facili da usare anche da mobile.

Cosa ho escluso

Nel mio caso ho escluso dalla versione mobile la sidebar, il footer e il motore di ricerca, elementi che non ho ritenuto importanti nella navigazione da smartphone.

Inoltre ho escluso gli annunci adsense negli articoli per facilitarne la fruizione.

Il menu

Il sito ha due menu di navigazione, uno per le pagine che riguardano il mio lavoro di web designer freelance, l’altro che permette di navigare tra le categorie principali del sito.

Al momento ho scelto di mantenere il primo menu, trasformandolo in un menu a tendina.

Realizzazione e Testing

Realizzare un sito responsive, dal punto di vista dello sviluppo, non è difficile. Esistono framework come bootstrap, che facilitano la vita allo sviluppatore.

Invece, rendere un sito responsive in un momento successivo è molto più complicato e richiede uno sforzo maggiore, come nel mio caso.

Realizzazione

Per la realizzazione ho utilizzato le media queries, dove ho scelto come breakpoints le risoluzioni di 320px, 480px e 768px. Non entro nel dettaglio dato che esistono tutorial e guide di ogni genere sull’argomento.

Per il menu di navigazione ho seguito un tutorial di onetrapixel, dove viene spieagato come realizzare un menu responsive.

Testing

Il testing è importante farlo direttamente con i dispositivi. E’ vero che basta ridimensionare la finestra, per vedere come reagisce il sito, ma su desktop non ci si rende conto di tutti gli aspetti che entrano in gioco nella navigazione mobile.

Ad esempio l’hover sugli elementi di navigazione su smartphone non hanno nessuna efficacia e anzi obbligano l’utente a fare due volte tap sullo stesso elemento.

Nel mio caso ho fatto entrambi i test, quindi sia ridimensionando la finestra, sia testandolo su iPhone 4s, iPad 2 e Samsung Galaxy S.

Conclusioni

Avere dei progetti personali su cui lavorare e sperimentare ci permette poi di proporre le soluzioni migliori al cliente.

A mio modo di vedere oggi la soluzione di realizzare un sito responsive non è più una voce extra in un preventivo, ma una parte integrante e necessaria.

Infine un consiglio nell’approccio a realizzare un sito responsive: pensalo prima mobile e poi estendilo. E’ molto più facile aggiungere degli elementi che toglierli, e ti aiuta a focalizzarti su quali sono i contenuti più importanti del sito.

1 commento

  1. […] avere reso il sito responsive, FedeWeb entra ancora di più nel mondo mobile con un‘app per iPhone e […]

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *