I dispositivi mobili comprendono già un'enorme fetta, se non la maggior parte, di lettori online per molti siti Web, quindi è fondamentale assicurarsi che il tuo sito appaia e funzioni correttamente su un iPhone o tablet. Esistono molti servizi che offrono anteprime del layout mobile per un determinato URL, ma Apple ha reso i test dei siti Web per la prontezza mobile molto più facili con Safari 9 in OS X El Capitan. Una nuova funzionalità chiamata Responsive Design Mode può visualizzare rapidamente in anteprima l'aspetto di un sito Web su una varietà di dispositivi Apple e le risoluzioni dello schermo mobile più comuni. Ecco come funziona.
È importante ribadire che la Modalità progettazione reattiva è una nuova funzionalità esclusiva di Safari 9 in OS X El Capitan, quindi per accedervi devi eseguire almeno queste versioni di browser e sistema operativo. Se il tuo Mac soddisfa questo requisito, devi prima abilitare la Modalità sviluppatore di Safari. Per fare ciò, avvia Safari e fai clic su Safari nella barra dei menu. Quindi selezionare Preferenze> Avanzate .
Nella scheda Avanzate della finestra Preferenze di Safari, seleziona la casella "Mostra menu Sviluppo nella barra dei menu". Come suggerisce il nome dell'opzione, vedrai apparire un nuovo menu "Sviluppo" nella barra dei menu Safari a destra di “Bookmarks”.
Successivamente, chiudi la finestra Preferenze di Safari e accedi a un sito Web che desideri testare in Modalità progettazione reattiva. Una volta che il sito Web è completamente caricato nel tuo browser, utilizza la scorciatoia da tastiera Comando-Opzione-R e vedrai la finestra del browser convertirsi in un'anteprima di una delle diverse risoluzioni del dispositivo mobile (puoi anche accedere alla modalità Progettazione reattiva facendo clic su Sviluppa in la barra dei menu di Safari e selezionando Enter Responsive Design Mode ).
Safari Responsive Design Mode ti consente di visualizzare in anteprima l'aspetto di un sito Web su tutte le risoluzioni dei dispositivi mobili di Apple, dall'iPhone 4S da 3, 5 pollici all'iPad Pro da 12, 9 pollici. Gli utenti hanno anche la possibilità di selezionare una risoluzione "Retina" 1x, 2x o 3x e modificare l'agente del browser per imitare il comportamento dei browser più diffusi come Chrome, Firefox e Edge.
Per ogni dispositivo e dimensione dello schermo, gli utenti possono fare clic sull'icona del dispositivo per cambiare tra orientamento verticale e orizzontale o, per dispositivi come iPad Air e iPad Pro che supportano la vista divisa, è possibile fare clic per ruotare tra i vari layout della vista divisa.
Mentre Safari Responsive Design Mode non ha alcune delle opzioni di strumenti preesistenti simili, averlo integrato direttamente in Safari può essere un enorme risparmio di tempo per i web designer e un ottimo strumento di apprendimento e test per i proprietari di siti Web che vogliono assicurarsi che i loro visitatori mobili stanno ottenendo la migliore esperienza indipendentemente dalla risoluzione o dalle dimensioni dello schermo.
Una volta terminato il test, puoi uscire dalla modalità Progettazione reattiva chiudendo la finestra o la scheda del browser o premendo nuovamente il collegamento Comando-Opzione-R .
