- Sean Graham
Is Your Website Mobile Responsive
Check to see how your website looks on different mobile devices. Website viewing on mobile devices is huge and growing more each year, but the experience can come with some hurdles if the website you are viewing hasn’t been updated for mobile responsiveness. Making sure that your website looks and functions properly on an iPhone or any mobile device is crucial. How do I test my website? Apple has made testing your website for mobile readiness much easier with Safari 9 in OS X El Capitan (10.11). A new feature called Responsive Design Mode can quickly preview what a website looks like on a variety of resolutions and mobile devices.
Here’s how it works.
You’ll need to first enable Safari’s Developer Mode. To do so, launch Safari and click Safari in the Menu Bar, then select Preferences > Advanced.
In the Advanced tab of Safari’s Preferences window, check the box labeled “Show Develop Menu in Menu Bar.” You’ll then see a new “Develop” menu appear in the Safari Menu bar next to “Bookmarks.” Next, close the Safari Preferences window and navigate to a website you’d like to test in Responsive Design Mode. Once the website is fully loaded in your browser, use the keyboard shortcut Command-Option-R and you’ll see the browser window convert into a preview of one of several mobile device resolutions. This can also be done by clicking Develop in the Safari Menu Bar and selecting Enter Responsive Design Mode. Safari Responsive Design Mode lets you preview how a website looks on all of Apple’s mobile device resolutions, from the smaller screen iPhone 4S to the larger screen iPad Pro.
iPhone Portrait View
For each device and screen size, you can click on the device icon to change between landscape and portrait orientation. For devices like the iPad Air and iPad Pro which support split view, you can click to rotate between various split view layouts.
iPad Split View/Landscape
iPad Split View/Portrait View
You can exit Responsive Design Mode by either closing the browser window or by pressing the shortcut Command-Option-R again. This is a great tool built into Safari that not many people are aware of. If you already have a website or are looking to have a website built, make sure that your website is Mobile Responsive.