How to Activate and Use Responsive Design Mode in Safari 9

01
of 06

Activate and Use Responsive Design Mode in Safari 9

responsive web design
© Scott Orgera.

Being a Web developer in today's world means supporting a bevy of devices and platforms, which can sometimes prove to be a daunting task. Even with the most well-designed code adhering to the latest Web standards, you can still find that portions of your website may not look or act the way you want them to on certain devices or resolutions. When faced with the challenge of supporting such a wide array of scenarios, having the right simulation tools at your disposal can be invaluable.

If you are one of the many programmers who uses a Mac, Safari's developer toolset has always come in handy. With the release of Safari 9 the breadth of this functionality has expanded considerably, mainly due to Responsive Design Mode_ which allows you to preview how your site will render at various screen resolutions as well as on different iPad, iPhone and iPod touch builds.

This tutorial details how to activate Responsive Design Mode as well as how to utilize it for your development needs.

First, open your Safari browser.

02
of 06

Safari Preferences

safari 9 preferences
© Scott Orgera.

Click on Safari in the browser menu, located at the top of the screen. When the drop-down menu appears, select the Preferences option_ circled in the example above.

Please note that you can utilize the following keyboard shortcut in lieu of the aforementioned menu item: COMMAND + COMMA (,)

03
of 06

Show Develop Menu

safari 9 developer tools
© Scott Orgera.

Safari's Preferences dialog should now be displayed, overlaying your browser window. First, click on the Advanced icon_ represented by a gear and located in the upper right-hand corner of the window.

The browser's Advanced Preferences should now be visible. At the bottom is an option accompanied by a checkbox, labeled Show Develop menu in menu bar and circled in the example above. Click on the checkbox once to activate this menu.

04
of 06

Enter Responsive Design Mode

safari 9 simulator
© Scott Orgera.

A new option should now be available in your Safari menu, located at the top of the screen, labeled Develop. Click on this option. When the drop-down menu appears, select Enter Responsive Design Mode_ circled in the example above.

Please note that you can utilize the following keyboard shortcut in lieu of the aforementioned menu item: OPTION + COMMAND + R

05
of 06

Responsive Design Mode

safari 9 iOS simulator
© Scott Orgera.

The active Web page should now be displayed in Responsive Design Mode, as shown in the example above. By selecting one of the iOS devices listed such as the iPhone 6, or one of the designated screen resolutions available such as 800 x 600, you can immediately view how the page will render on that device or in that display resolution.

In addition to the devices and resolutions shown, you can also instruct Safari to simulate a different user agent -- such as one from a different browser -- by clicking on the drop-down menu shown directly above the resolution icons.

06
of 06

Develop Menu: Other Options

safari 9 develop menu
© Scott Orgera.

In addition to Responsive Design Mode, Safari 9's Develop menu offers many other useful options_ some which are listed below.

  • Open Page With: Allows you to open the active Web page in any other browser currently installed on your Mac.
  • User Agent: Changing the user agent causes Web servers to identify your browser as something other than Safari 9.
  • Connect Web Inspector: Safari 9's Web Inspector displays all of a Web page's resources, providing the ability to peruse CSS information, DOM metrics and structure, as well as its native source code.
  • Show Error Console: One of the most widely used options in the Develop Menu, this console displays JavaScript, HTML and XML errors and warnings.
  • Show Page Source: Allows you to view and search the active Web page's source code.
  • Show Page Resources: Selecting this option displays documents, scripts, CSS and other resources from the current page.
  • Show Snippet Editor: Provides the ability to edit and execute fragments of code, as opposed to a complete page. This feature is very useful from a testing perspective.
  • Show Extension Builder: Allows you to build your own Safari extensions by packaging your code accordingly and appending metadata.
  • Start Timeline Recording: Records a number of items including network requests, JavaScript execution, page rendering, and other events for a user-defined period_ all viewable within the WebKit Inspector.
  • Empty Caches: Clicking on this option deletes all stored cache within Safari, not just the standard website cache files.
  • Disable Caches: With caching disabled, resources are downloaded from a website each time an access request is made as opposed to utilizing the local cache.
  • Allow JavaScript from Smart Search Field: Disabled by default for security reasons, this feature allows you to enter URLs containing javascript: in Safari's address bar.
  • Treat SHA-1 Certificates as Insecure: Short for Secure Hash Algorithm, the SHA-1 hash function has been proven to be less secure than originally thought_ hence the addition of this option in Safari 9.

Related Reading

If you found this tutorial useful, be sure to check out our other Safari 9 walkthroughs.