Mobile first design sitiweb responsive: prima lo smartphone!

Introduzione al Design Mobile-First

In passato i siti web erano progettati per i computer desktop, non per cattiveria o ignoranza, ma semplicemente perché ancora non erano presenti sul mercato i device moderni, come i telefonini android o iPhone, tablet vari, iPad e chi più ne ha più ne metta..

Il design “mobile first” quindi, è nato più recentemente e significa che il tuo sito web è costruito per funzionare prima su uno smartphone o un tablet e poi si adatta a schermi più grandi in un secondo momento. 

Questo approccio è molto più flessibile del vecchio “modus operandi” perché ci si concentra prima da uno schermo più piccolo e poi si va via via ingrandendo prima di aggiungere funzioni come menu e pulsanti. Con il mobile first design quindi, si parte da ciò che è più importante: il contenuto!

Perché progettare sempre mobile-first

Il Mobile first design è un ottimo modo per iniziare un progetto perché ti aiuta a capire di cosa ha bisogno il tuo sito e come deve essere costruito, permettondoti di concentrare sugli elementi che costituiscono il contenuto e la loro impaginazione!

Il mobile-first è anche molto pratico perché consente di testare i progetti come sono nella vita reale, quindi non solo su browser desktop o laptop, ma anche su telefoni e tablet (e persino sugli orologi).

In fin dei conti se ci pensi, una significante parte del traffico moderno è rappresentato da questa fascia di dispositivi, mobile e tablet, e questa è la ragione per cui la tua piattaforma deve essere responsive e adattarsi al device dei tuoi utenti. 

Ciò che conta è di permettere ai tuoi utenti di interagire in modo fluido e funzionale tramite una UI che sia responsive e funzionale! Quando fai design mobile-first devi concentrarti sui contenuti e fare ipotesi e test su come i tuoi utenti interagiranno con il tuo sito web, app o ecommerce, in base alle dimensioni dello schermo o alle impostazioni di risoluzione.

Utilizzate i principi di progettazione mobile-first

La progettazione mobile-first è una filosofia, un processo, una mentalità!

Si tratta di scomporre il sito nelle sue parti più piccole per facilitare l’accesso ai dispositivi mobili. Si tratta anche di assicurarsi che questi componenti lavorino insieme per creare un’esperienza reattiva per tutti i browser e dimensioni di schermo.

Mantenere la semplicità

Se vuoi che il tuo sito sia bello da vedere sia su mobile che su desktop il consiglio è di mantenerlo semplice. Utilizza uno schema di colori e un layout semplice, utilizza caratteri e font-size leggibili e una navigazione minimalista e funzionale..

Concentratevi sui contenuti

La cosa più importante è concentrarsi sui contenuti, non sul layout. Se c’è molto testo (ad esempio, lunghe descrizioni di prodotti), utilizza caratteri di grandi dimensioni in modo che gli utenti possano leggerli facilmente senza dover ingrandire o rimpicciolire la finestra del browser. Se ci sono molte immagini in una singola pagina (ad esempio le foto dei prodotti), prendi in considerazione l’utilizzo di GIF, perché si caricano molto più velocemente delle fotografie statiche quando vengono caricate nei browser mobile.

Utilizzare un layout reattivo

Il design reattivo è un modo per far funzionare il sito su qualsiasi dimensione schermo. Utilizza griglie fluide e immagini flessibili, in modo da poter ridimensionare la finestra del browser o visualizzare il sito in diversi modi senza perdere troppe delll’aspetto e dell’atmosfera.

CSS Media Queries

Quando si progetta un sito responsive, è probabile che si vogliano usare le media queries (CSS3). Sono più facili da implementare e da capire rispetto alle larghezze fisse, che possono portare a risultati inaspettati quando vengono visualizzate sui dispositivi mobili con i loro display più piccoli.

Questi sotto sono i breakpoints più frequenti per le media queries, sono gli stessi che vengono utilizzati da Bootstrap!

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Conosci già Bootstrap?

Bootstrap è un framework di sviluppo open source e gratuito ed è utilissimo per progettare e sviluppare siti web. Grazie alla sua raccolta di classi e sintassi per i vari modelli di progettazione, ti consente di progettare responsive e mobile-first!

I web designer e gli sviluppatori web amano Bootstrap perché è flessibile e facile da usare. I suoi principali vantaggi sono che è responsive nel design e che mantiene un’ampia compatibilità con i browser.

Bootstrap offre un perfetto punto di partenza, solido e minimal, per i tuoi progetti di web design. Ti permette di strutturare lo scheletro del sito e la grafica senza dover toccare una riga di codice, ti consente di risparmiare tempo, è pratico e agevole. Inoltre, è un ottimo alleato per rendere responsive i tuoi siti web.

Progettare per gli schermi tattili

Progettare per gli schermi tattili è molto di più che assicurarsi che il sito sia bello sui dispositivi mobili. Significa anche progettare per l’utente, il suo contesto, la sua esperienza e le sue aspettative, nonché il modo in cui interagirà con i vostri contenuti (e viceversa).

Oggi, la maggior parte dei contenuti Web è progettata pensando a input da tastiera e mouse. Tuttavia, i dispositivi con touch screen (soprattutto i dispositivi mobile e quelli portatili) possono elaborare direttamente l’input basato sul tocco utilizzando Touch Events.

Se ci pensi, programmando solo per tastiera e mouse, la tua piattaforma o sitoweb non supporterà l’input simultaneo dell’utente, come ad esempio la famosa two-finger gesture usata così tanto spesso nelle applicazioni mobile.

Ricorda che il touch supporta più input simultanei (anche in posizioni diverse sulla superficie touch dello schermo), potresti quindi pensare di aggiungere il supporto a queste gesture migliorando così l’esperienza dell’utente e anche della navigazione mobile del tuo sito web o ecommerce.

Se pianifichi prima le funzionalità di base su mobile, il tuo sito funzionerà ovunque e potrai aggiungere gli extra per desktop dove hai lo spazio necessario

L’idea alla base di questo approccio è che se si progettano prima le funzionalità di base per i dispositivi mobile, si saprà che il sito funziona ovunque e si potranno aggiungere gli extra per i quali solo i siti desktop hanno spazio.

Questo modo di progettare ottimizzando per i dispositivi mobile, è una garanzia!

Conclusione

Sebbene l’approccio mobile-first sia una buona, anzi ottima idea, non è certo un concetto nuovo!

In effetti, è già in circolazione da molto tempo ma nonostante questo, non è così diffuso e non tutti i siti sono reattivi e responsive, ne tanto meno supportano il touch. 

L’obiettivo del responsive design è creare un sito che funzioni bene su tutti i dispositivi senza sacrificare nessuna funzionalità o contenuto.

Per iniziare questo processo, consigliamo di utilizzare Google Chrome come browser di scelta, in quanto è dotato di molti strumenti necessari per la progettazione di siti web mobile first, come la modalità di emulazione CSS, che imita la visualizzazione di un sito web su schermi più piccoli, come quelli di telefoni o tablet, pur consentendo agli utenti di accedere a tutto ciò di cui hanno bisogno dal browser del computer desktop (e viceversa).

Speriamo l’articolo ti sia tornato utile, contattaci se vuoi discutere del tuo progetto responsive.