Safari's Responsive Design Mode


Has anyone played around with the Responsive Design mode in Safari 9? Looks like a great way to test your responsive layouts.

If you’re running El Capitan or the Safari 9 beta, select ‘Responsive Design Mode’ in the Develop menu, or typing: option + ⌘ + r

(El Capitan will be released on the 30th of September).

Continuing the discussion from Tumult Site layout on iOS 9 not working

MacPro 13.3 = iPad
How can I be sure my HTML5 document is responsive?
Knowledge base: Guides from the Tumult Team
Hype 3.5 now available
Continue to next scene?
Only my smallest width layout is showing
Full preview being cut-off
(Greg) #2

I did not know it was there, but it does look like a great way to test set ups. I tried it on this page and it seems to work rather well.

(Jonathan Luna) #3

I just came across it myself and LOVEEEE it! with made me think it would be nice to have layout options to match… or to take it up a step further would be to be able to make your own custom layout. One of the reason i first feel in love with hype was hen i came across an article of some one who was using ibecons to trigger scenes from an image that was being projected. It showed some of the potential of hype being used in a very unique creative way, and having the ability to make custom layouts make hype more personal to the composer and there needs.

(Jonathan Deutsch) #4

When adding a layout, you always make a new one with whatever breakpoint you’d like; Hype just provides the device icons as templates which fill in the breakpoint width value. You can also always modify the breakpoint width from the Scene Inspector.


I love this when testing it out with hype websites and now I realize I can’t make my workflow easier without it. Thanks for sharing!

(Mark Hunte) #6

Oh wow, this is great.


Here’s a nice new tool for quickly testing layouts for a number of devices:


Just tried a few sites - so far Sizzy looks pretty slick - thanks for the info!


thx Daniel