Mobiele apparaten omvatten al een groot deel, zo niet de meerderheid, van online lezers voor veel websites, dus het is van cruciaal belang dat uw site er goed uitziet en werkt op een iPhone of tablet. Er zijn veel services die voorvertoningen van de mobiele lay-out bieden voor een bepaalde URL, maar Apple maakte het testen van websites voor mobiele gereedheid veel eenvoudiger met Safari 9 in OS X El Capitan. Een nieuwe functie genaamd Responsive Design Mode geeft snel een voorbeeld van hoe een website eruitziet op verschillende Apple-apparaten, evenals veelgebruikte mobiele schermresoluties. Dit is hoe het werkt.
Het is belangrijk om te herhalen dat Responsive Design Mode een nieuwe functie is die exclusief is voor Safari 9 in OS X El Capitan, dus je moet minstens deze versies van de browser en het besturingssysteem gebruiken om toegang te krijgen. Als uw Mac aan deze vereiste voldoet, moet u eerst de ontwikkelaarsmodus van Safari inschakelen. Start Safari en klik op Safari in de menubalk. Selecteer vervolgens Voorkeuren> Geavanceerd .
Vink op het tabblad Geavanceerd van het Safari-voorkeurenvenster het vakje aan met het label "Ontwikkelmenu tonen in menubalk". Zoals de naam van de optie impliceert, ziet u een nieuw "Ontwikkelen" -menu verschijnen in de Safari-menubalk rechts van “Bookmarks.”
Sluit vervolgens het Safari-voorkeurenvenster en navigeer naar een website die u wilt testen in de Responsive Design-modus. Zodra de website volledig in uw browser is geladen, gebruikt u de sneltoets Command-Option-R en ziet u het browservenster omzetten in een voorbeeld van een van de verschillende resoluties van mobiele apparaten (u kunt ook toegang krijgen tot de Responsieve ontwerpmodus door te klikken op Ontwikkelen in de Safari-menubalk en selecteer Enter Responsive Design Mode ).
Met Safari Responsive Design Mode kunt u een voorbeeld bekijken van hoe een website eruitziet op alle resoluties van Apple's mobiele apparaten, van de 3, 5-inch iPhone 4S tot de 12, 9-inch iPad Pro. Gebruikers hebben ook de optie om een 1x, 2x of 3x Retina-resolutie te selecteren en de browser-agent te wijzigen om het gedrag van de meeste populaire browsers zoals Chrome, Firefox en Edge na te bootsen.
Voor elk apparaat en schermgrootte kunnen gebruikers op het apparaatpictogram klikken om te wisselen tussen de staande en liggende stand of, voor apparaten zoals de iPad Air en iPad Pro die gesplitste weergave ondersteunen, kunt u klikken om te roteren tussen verschillende lay-outs met gesplitste weergave.
Hoewel Safari Responsive Design Mode enkele van de opties van vergelijkbare reeds bestaande tools mist, kan het hebben van het direct in Safari ingebouwd een enorme tijdsbesparing zijn voor webontwerpers, en een geweldige leer- en testtool voor website-eigenaren die ervoor willen zorgen dat hun mobiele bezoekers krijgen de beste ervaring ongeacht de schermresolutie of -grootte.
Als u klaar bent met testen, kunt u de Responsive Design-modus verlaten door het browservenster of -tabblad te sluiten of nogmaals op de sneltoets Command-Option-R te drukken.
