Chiudiamo il nostro percorso con una serie di link a risorse utili.
Strumenti per i test
Il test diretto con i vari dispositivi che si intende supportare è insostituibile, ma nello sviluppo di un sito responsivo sono fondamentali anche altre tipologie di tool. Pensiamo soprattutto a quelli che consentono di verificare le variazioni nella resa del layout e dei suoi componenti in corrispondenza dei breakpoint e al variare della larghezza dello schermo. Possiamo suddividere questi strumenti in due gruppi.
Bookmarklet
Il primo gruppo comprende una serie di bookmarklet da installare come riferimento sulla barra dei preferiti del browser e da usare quando si sia caricata la pagina da testare.
- Media query Bookmarklet: da usare per verificare con una precisione al pixel le dimensioni della finestra e per individuare la media query attualmente in uso; calcola le dimensioni anche in em, cosa utile se si desidera usare questa unità di misura al posto del pixel.
- Resizer: è la bookmarklet che abbiamo utilizzato per sviluppare il nostro progetto. Una volta caricata, possiamo testare facilmente la pagina in base ad una serie di modelli predefiniti corrispondenti alle principali categorie di device, potendo aggiungere anche dimensioni personalizzate per allargare la gamma. Gestisce la modifica on-the-fly dell'orientamento ed esegue nell'area di visualizzazione anche il codice Javascript.
- Design: uno strumento di straordinaria utilità non solo per il responsive design. Mette a disposizione con un click quattro strumenti: una griglia configurabile in sovrimpressione, un righello, un tool per calcolare la distanza in pixel tra due punti e un altro per individuare le coordinate di un punto sulla pagina.
Siti e servizi online
Il secondo gruppo comprende invece dei servizi disponibili online. In questi casi, una volta caricata la pagina del servizio, si inserisce in un campo di testo l'URL del sito da testare. È evidente che questa soluzione non è da privilegiare se si vuole testare una versione locale della pagina o del sito. Se la necessità è questa, e quasi sempre lo è in fase di sviluppo, le bookmarklet sono la risposta.
Tutti i servizi che segnaliamo offrono la possibilità di valutare il design rispetto a varie combinazioni nelle dimensioni dello schermo, quasi sempre con riferimento a dispositivi precisi (iPhone, iPad, Samsung Galaxy S3, Amazon Kindle, etc.).
- ResponsivePx
- The Responsinator
- Screenfly
- Screenquerie.es (l'unico che consente di caricare siti locali dall'url
http://localhost...)
Siti di riferimento
Iniziamo questa rassegna con una serie di siti che raccolgono pattern di design per il mobile, utilissimi quindi come fonte di ispirazione per l'impostazione del proprio progetto e per la scelta tra soluzioni di interfaccia alternative:
Avere a disposizione una gamma appena accettabile di dispositivi reali su cui svolgere i test è impensabile. Può però risultare utile farsi almeno un'idea delle specifiche hardware, specie per quel che riguarda gli schermi (risoluzione, dimensioni fisiche, larghezza della viewport, etc.). Ecco tre pagine da tenere d'occhio:
- Media features of the most common devices: una raccolta ricchissima che raggruppa le caratteristiche dei media di un gran numero di browser e dispositivi.
- What's my Viewport Size?: apparentemente una paginetta anonima che restituisce la dimensione della finestra del browser quando la si visita. Ma l'autore, Matt Stow, ha raccolto i dati in un foglio di calcolo, costruendo così uno straordinario database. Se volete sapere le dimensioni della viewport di questo o quel dispositivo è la risorsa da avere sempre sottomano. Ricordiamo che la dimensione della viewport è quella su cui si basano le media query con
min-widthemax-width, e che nulla ha a che fare con le dimensioni dello schermo (calcolate invece condevice-width). - List of displays by pixel density: un paginone di Wikipedia che elenca svariati modelli di schermo con l'indicazione della loro risoluzione.