Els dispositius mòbils ja inclouen una gran quantitat de lectors en línia, si no la majoria, per a molts llocs web, de manera que és crucial que el vostre lloc sembli i funcioni correctament en un iPhone o tauleta. Hi ha molts serveis que ofereixen vista prèvia de la disposició mòbil per a un URL determinat, però Apple va fer que els llocs web de prova de preparació per a mòbils siguin molt més fàcils amb Safari 9 a OS X El Capitan. Una nova funció anomenada Mode de disseny responsable pot visualitzar prèviament el que sembla un lloc web en diversos dispositius Apple, així com en resolucions de pantalla mòbils habituals. Aquí teniu el funcionament.
És important reiterar que el mode de disseny responsiu és una característica nova exclusiva de Safari 9 a OS X El Capitan, per la qual cosa haureu d’executar com a mínim aquestes versions del navegador i del sistema operatiu per accedir-hi. Si el vostre Mac compleix aquest requisit, primer haureu d’activar el mode de desenvolupador de Safari. Per fer-ho, engegueu Safari i feu clic a Safari a la barra de menús. A continuació, seleccioneu Preferències> Avançat .
A la pestanya Avançada de la finestra Preferències de Safari, marqueu la casella amb el nom "Mostra el menú de desenvolupament a la barra de menús". Com el nom de l'opció indica, apareixerà un nou menú "Desenvolupar" a la barra del menú Safari a la dreta de "Punts d'interès".
A continuació, tanqueu la finestra Preferències de safari i aneu a un lloc web que vulgueu provar en mode de disseny responsable. Un cop el lloc web estigui completament carregat al navegador, utilitzeu la drecera del teclat Command-Option-R i veureu que la finestra del navegador es converteix en una vista prèvia d’una de diverses resolucions de dispositius mòbils (també podeu accedir al mode de disseny responsiu fent clic a Desenvolupar a a la barra de menús Safari i seleccionant Enter Mode de disseny sensible ).
El mode de disseny responsable de Safari us permet previsualitzar com es veu un lloc web a totes les resolucions de dispositius mòbils d'Apple, des de l'iPhone 4S de 3, 5 polzades fins a l'iPad Pro de 12, 9 polzades. Els usuaris també tenen l'opció de seleccionar una resolució "Retina" 1x, 2x o 3x i canviar l'agent del navegador per imitar el comportament dels navegadors més populars com Chrome, Firefox i Edge.
Per a cada dispositiu i mida de pantalla, els usuaris poden fer clic a la icona del dispositiu per canviar entre retratar i orientar el paisatge o, per a dispositius com l'iPad Air i l'iPad Pro que admetin la visualització dividida, podeu fer clic per girar entre diversos dissenys de vista dividida.
Si bé el mode de disseny responsiu de Safari no té algunes de les opcions d’eines preexistents similars, tenir-lo incorporat directament a Safari pot ser un estalvi de temps enorme per als dissenyadors web i una excel·lent eina d’aprenentatge i prova per als propietaris de llocs web que volen assegurar-se que els seus visitants mòbils. obteniu la millor experiència independentment de la resolució o la mida de la pantalla.
Un cop acabades les proves, podeu deixar el mode de disseny responsiu tancant la finestra o la pestanya del navegador o prement de nou la drecera Comandament-Opció-R .
