Les appareils mobiles représentent déjà une part considérable, voire la majorité, du lectorat en ligne de nombreux sites Web. Il est donc crucial de veiller à ce que votre site ait l’air et fonctionne correctement sur un iPhone ou une tablette. De nombreux services offrent des aperçus de disposition mobile pour une URL donnée, mais Apple a beaucoup simplifié les tests de compatibilité des sites Web mobiles avec Safari 9 sous OS X El Capitan. Une nouvelle fonctionnalité appelée Responsive Design Mode permet de visualiser rapidement à quoi ressemble un site Web sur divers appareils Apple, ainsi que sur les résolutions d'écran courantes des mobiles. Voilà comment cela fonctionne.
Il est important de rappeler que le mode de conception réactif est une nouvelle fonctionnalité exclusive de Safari 9 dans OS X El Capitan. Vous devez donc exécuter au moins ces versions du navigateur et du système d'exploitation pour y accéder. Si votre Mac répond à cette exigence, vous devez d'abord activer le mode développeur de Safari. Pour ce faire, lancez Safari et cliquez sur Safari dans la barre de menus. Ensuite, sélectionnez Préférences> Avancé .
Dans l'onglet Avancé de la fenêtre Préférences de Safari, cochez la case intitulée «Afficher le menu de développement dans la barre de menus». Comme le nom de l'option l'indique, un nouveau menu «Développement» apparaît dans la barre de menus de Safari, à droite de l'écran. "Signets."
Fermez ensuite la fenêtre Préférences Safari et accédez au site Web que vous souhaitez tester en mode Responsive Design. Une fois le site Web entièrement chargé dans votre navigateur, utilisez le raccourci clavier Commande-Option-R pour afficher la fenêtre du navigateur convertie en aperçu de l'une des résolutions de périphérique mobile (vous pouvez également accéder au mode de conception réactif en cliquant sur Développer dans dans la barre de menus Safari et en sélectionnant Entrer en mode de conception réactif ).
Le mode Design responsive de Safari vous permet de prévisualiser l'apparence d'un site Web sur toutes les résolutions de périphériques mobiles d'Apple, de l'iPhone 4S de 3, 5 pouces à l'iPad Pro de 12, 9 pouces. Les utilisateurs ont également la possibilité de sélectionner une résolution «Retina» 1x, 2x ou 3x et de changer l'agent de navigateur pour imiter le comportement des navigateurs les plus courants tels que Chrome, Firefox et Edge.
Pour chaque périphérique et taille d'écran, les utilisateurs peuvent cliquer sur l'icône du périphérique pour basculer entre l'orientation portrait et orientation paysage ou, pour les périphériques comme iPad Air et iPad Pro prenant en charge la vue partagée, vous pouvez cliquer pour faire pivoter les différentes présentations de vues fractionnées.
Si le mode de conception réactif de Safari manque de certaines options d’outils préexistants similaires, l’avoir intégré directement à Safari peut représenter un gain de temps considérable pour les concepteurs Web, ainsi qu’un excellent outil d’apprentissage et de test pour les propriétaires de sites Web qui souhaitent s'assurer que leurs visiteurs mobiles. obtiennent la meilleure expérience quelle que soit la résolution ou la taille de l’écran.
Une fois les tests terminés, vous pouvez quitter le mode Conception responsive en fermant la fenêtre ou l’onglet du navigateur ou en appuyant à nouveau sur le raccourci Commande-Option-R .
