There are several different tablets and phones in my household. There does not seem no be a way, that I can organize my layouts to serve them all. If the website looks great in the vertical layout of my iPhone, it looks screwed-up in the horizontal – or it looks screwed up somewhere else on some other platform.
I only have two basic layouts. One is for horizontal viewing and the other for vertical viewing. With Hype 3.5 I can scale these layouts to fit any window, but I cannot orient them correctly for any window.
It would be great, if there was a method to automatically send the correct layout to the viewer - no matter what hardware he uses, and no matter how he chooses to orient his device.
But I just have to wonder if you shouldn’t try adding more layouts in your case. Experimentation is not fun but…
I know that I struggled hard literally up to yesterday, in fact, sent an e-mail to Daniel, Steve, and Jonathan complaining about how the tutorials, but then realized that I was not understanding the sizing part of Pinning and Sizing. It just took some experimentation to understand it and I think there could be some improvement in the tutorials with more examples and explanation.
One huge mistake I made was to try to experiment on a file with over 100 elements, that will make your head explode. Build a simple file and work it one element and one change at a time. The Safari Develop menu “Enter Responsive Design Mode” is a BIG help. You can do a lot of quick testing with it.
The relationship between Responsive and Flexible in Hype is a bit tricky to understand.
Sorry Daniel, Steve, and Jonathan , frustration got the better of me for a bit. As I have said before Hype support is the best of any app! I am looking to build the rest of my career in Hype.
The website is www.idesign.li – as you can se, it is a simple scalable thing, but there are still some settings, that are wrong.
When viewed in horizontal mode on my iPhone 5, the scene is cut in a stange way, and I have not yet found the reason.
It would be nice, if I could use javascript to adjust the content to the device orientation as suggested by Michael, but I have insufficient knowledge to do it from scratch. Can anyone suggest a script?
Well, I was thinking about putting this in "A Book About Hype", but I didn't get around to it. This is mobile specific. I tried to keep the examples to both desktop and mobile.
Here's a tutorial online about "window.orientation"
But also, you could just detect the width of a flexible background element. I haven't test this, but here's an off-the-top-of-my-head idea...
var width = hypeDocument.getElementProperty(background, 'width');
var height = hypeDocument.getElementProperty(background, 'height');
if (width > height) {
var orientation = "landscape";
} else {
var orientation = "portrait";
}
From a general point of view: I agree with @Photics advice to use a few Responsive Layouts and make as much use as the Flexible Layout to move content around as possible.
I do understand that the current responsive layout paradigm is heavily based on width and there are times when you want the layout choice to instead be based on height or a width and height (a best fit). We haven’t yet thought of a good way to address this in Hype but it is on the radar as a problem to solve .
I am having the same issue as @KaareBaekgaard. I have a very complex site (an online comic that pan and zooms on each panel per page, each page is a scene). I have a portrait layout and landscape layout for each page and want to use the layouts based on orientation, not a breakpoint (as it will vary by device and adding more layouts is not an option). I know of several methods to determine the orientation and can see how to load a scene based on that but not how to load a layout based on orientation instead of width (breakpoint). Is there JS code I can run on a HypeSceneLoad event that determines the layout to display regardless of breakpoint width? Alternatively, is there a way to update the layout breakpoints on document load based on device?
layouts within hype respond on width. nothing more. nothing less.
So in your case there is no benefit in using different layouts. simply create different scenes and call the ones that fits your needs …
Yes, I understand that except it gets much more complicated using different scenes when toggling orientation and you must use more JS to traverse the scenes based on orientation instead of layout-based scenes that can simply use the next or previous scene transitions. Using scenes-only defeats the purpose of responsive design in the first place.
This is not just one but a series of comics (hundreds), each with at least 24 pages (so, 48 layouts) and each layout contains at least 3 timelines with complex animations to move the comic page around and an enclosing cropping div (plus many other features). Complex. This issue could be solved by having the option to associate layouts with an orientation regardless of screen width.
yes, you would have to write your own previous/next scene-function. i don’t know your exact dependencies, but so far it’s just a question of how to organize your stuff.
perhaps someelse has a brilliant idea to use hypes layouts instead …
My solution, while not optimal, works for the time being. I set the fixed breakpoint in my landscape layouts to a specific number that will be easily searchable (e.g., 9876; more on this in a moment). Then, in my HTML head, I have a function that determines the device screen dimensions and returns a value of the smaller of the two as a global variable (actually, the smaller dimension +1). After exporting my Hype document to a folder, I modify the x_hype_generated_script.js replacing the fixed breakpoints (from the specific value noted above) with the global variable. Now, the breakpoints are set on a device basis automatically. A note of caution here: if you do this yourself, be very careful when replacing the breakpoint values as the JS is minimized and the value could be the same as an internal ID used by Hype for something else.
As noted before, it would be helpful if the layout breakpoints could be specified as they are currently but also be associated with an orientation, the returned value of a JS function, or a global JS variable (essentially what I’m doing now with the manual post-export search and replace).
It would be great if we had something that solved problems like having to determine between a iPad Pro and a desktop.
I have not found anything that works well.
In most cases you can use the flexible layouts but if you have elements you want to hide or display (like buttons) depending on device things get harder to do.
Easier to post a demo document with exported folder than code. Here’s a link to a demo document with the exported folder and the manually modified x_hype_generated_script.js file:
I’ve set the breakpoint for the portrait layouts to 1 and the landscape to 9876 (which is then replaced in the exported JS document).
In the code that determines the screen size, I only do this for mobile devices (there’s a basic function included for checking if it is a mobile device) as the variable is only set once when the document loads. Since laptop/desktop screens & browser windows can be resized post load, I just return a default width for the breakpoint. This could be modified to adjust the breakpoint on a screen or window resize.
The layouts are targeted to iPad dimensions.
Each layout includes a full layout group whose flexible layout is pined on all sides and set to expand vertically and horizontally using the Shrink to Fit zoom contents option. This means that on an iPad (or a device with the same screen ratio), the layouts will fit perfectly. On other devices with different ratios, you’ll get letterboxing (landscape) or pillarboxing (portrait) with the layout centered in the browser window.
All of this is to just use 2 layouts per scene depending on orientation, You could add further code for modifying layouts based on actual device or, if this is not granular enough, of course, add more layouts.
This is definitely a clever solution; in thinking about it I’m not sure specifically how else I’d go about it. In thinking about solving the problem within Hype, about the best I can think of is adding extra predicates to what may trigger a breakpoint/layout. I don’t want the rules to be too complex, though I suppose there is the option for a code callback. I’m open to suggestions on what you might want to see within the app itself to support a wide range of determining which layout to use.
I’d had a big issue with Freeway, as it takes an opposite approach to breakpoints - working top-down and making everything collide. Another issue was that I was trimming Hype load times by using a transparent background and setting fixed height backgrounds in Freeway. Things were all over the place. In the end, I adjusted the breakpoints in Hype to compensate for the Freeway quirk and set all layouts but my phone / portrait layout to identical heights.
.