Use Safari’s Responsive Design Mode in El Capitan

El Capitan’s Safari has a great new tool for web designers. In the Develop menu, there is now an Enter Responsive Design Mode menu item. (To turn on the Develop menu, go to Safari > Preferences, and check Show Develop menu in menu bar.) When you switch to this mode, you see the current web page in the following display.

Responsive design mode

You can view the web page easily as it displays on a range of iOS devices, as well as other browser resolutions, by clicking the icons above the page display. You can also choose the user agent (which web browser is being emulated), and choose to view your assets in 1x, 2x, or 3x.

If you design websites, this is a big time-saver. You no longer have to manually resize windows, or view sites on other devices.

24 thoughts on “Use Safari’s Responsive Design Mode in El Capitan

  1. Exists on Chrome since years, and has many more options, like speed throttling. Will probably come to safari in 3 years after Apple figures out how to copy it…

    • This is a textbook Apple performance. They aren’t inventing a new responsive design tools – they’re emulating their competition – but their version is a much nicer presentation. Asset selector is a nice touch, too.

    • Keep selling your soul. Safari’s version is much more refined then Chrome and it’s developer tools have a much easier time targeting classes, ids among other things. Chrome is a bloated nightmare anymore.

  2. Exists on Chrome since years, and has many more options, like speed throttling. Will probably come to safari in 3 years after Apple figures out how to copy it…

    • This is a textbook Apple performance. They aren’t inventing a new responsive design tools – they’re emulating their competition – but their version is a much nicer presentation. Asset selector is a nice touch, too.

    • Keep selling your soul. Safari’s version is much more refined then Chrome and it’s developer tools have a much easier time targeting classes, ids among other things. Chrome is a bloated nightmare anymore.

    • I wouldn’t mess with taking screenshots of simulated screens. It’s not meant to render everything perfectly; it’s only meant to view representations of sizes. (in other words, fonts look horrible/chunky. If you’re wanting screenshots to show clients, then personally, I like showing all other device widths represented; it shows you’re testing, and that’s awesome.

    • I wouldn’t mess with taking screenshots of simulated screens. It’s not meant to render everything perfectly; it’s only meant to view representations of sizes. (in other words, fonts look horrible/chunky. If you’re wanting screenshots to show clients, then personally, I like showing all other device widths represented; it shows you’re testing, and that’s awesome.

  3. Anybody knows, how can I bring back default resolution values? Is there simple way or I need to do it manually with each preset?

  4. Anybody knows, how can I bring back default resolution values? Is there simple way or I need to do it manually with each preset?

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.