Option for device dependand responsive layouts


I’d like to suggest an option to trigger responsive layouts by device rather then only screenWidth.
The current behaviour of responsiveness follows the established way things are done with CSS media queries these days. But we are talking javascript here and Hype switches entire stages so I would like to have an option to switch layout based on a device logic. Inside of the respective device category the sceenWidth kicks in again (for portrait/landscape etc.). Currently the device is shown when making a responsive layout but only as a reference to the screenWidth used on such a device. The new option would be to take this choice serious (at least optinal to the current way).

Devices(-Categories) to differentiate:

  • Phone
  • Table
  • Web

My reasoning:
I just think that a page designed for Web doesn’t have to be fluid as one can expect the user to scale the ViewPort to see the intended Layout for the medium.

One reason that all pages start to look the same is that everybody is thinking in the framework of design that needs to fold itself up. I like the thought that, in reasonable sized projects/apps, one chooses to take every device serious with it’s limits and benefits (screen estate etc.). I know one can export layouts in the advanced tab and then write some JS to switch the entire hypeDocument on device detection.

Implementing it into Hype also would have the pitfall on how to preview a certain device if not using reflect or so. But I think it’s interesting talkingpoint to discuss to have the option built in to Hype. I’ll try to come up with a JS solution until then, as a workaround.

Anybody else have thoughts along these lines?

1 Like