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

2 Likes

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.

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.

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.

2 Likes

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!

1 Like

Oh wow, this is great.

Here’s a nice new tool for quickly testing layouts for a number of devices: https://sizzy.co/?url=https%3A%2F%2Ftumult.com%2Fhype%2Fdocumentation%2F3.0%2F

1 Like

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

1 Like

thx Daniel

1 Like

There is a real-time responsive layout viewer add-on extension on Mozilla Firefox called:
ResponsiveViewer



I downloaded the Developer Edition of Firefox. Then, I downloaded the ReponsiveViewer extension by skmail. I tested it with one hype document and it renders fine. I hope this helps guys… All the best

4 Likes