Responsive Test

I have been doing some tests to help with my CMS project, and I cannot seem to get to grips with Layouts and Flexible Layouts.

Here is a simple test, with break points for iPad Landscape and Portrait, and Desktop. It just looks a mess. Any ideas ?

responsiveTest.hype.zip (394.9 KB)

I recommend starting with different responsive layouts and not adjusting any ‘flexible’ properties until later. Once you define what specific device sizes you want to support, and you get a sense of how text and images look on those devices, you may want to turn on flexible properties (scaling / pinning) to optimize different screen widths.

In Hype Pro, when you have access to Flexible Layouts and Responsive Layouts, use this workflow:

  1. Setup different layouts based on device sizes you want to support
  2. Test on those devices with dummy content
  3. If you are bothered by gaps on either side of a layout when viewing breakpoints inbetween specifically-defined breakpoints (layouts), you can use Flexible Layouts to either scale or pin elements so that there are no gaps between (for example) the iPad Portrait and iPad Landscape sizes.

For your example, I removed much of the flexible properties that adjust the ‘height’ of elements, since this is unnecessarily moving elements around. You typically don’t need to adjust the height of elements based on the height of the viewport – but you do want to adjust images based on the width of the viewport. (I use Window and Viewport interchangeably, but they are essentially the visible size of the browser). Please have a look at the transition between iPad Portrait and iPad Landscape: responsiveTest.hype 3.zip (478.3 KB)

I’m not sure what you have in mind for the top and bottom bars, but you will probably want them to expand flexibly (using Flexible Layouts) based on the width of the viewport. You will not want them to increase in size based on the height of the viewport, so I recommend unchecking the :arrow_up_down: arrows for elements.

I can hear what you are saying. I have tried playing with it all day, to understand it, but i cannot get it to look right. For example the white inbetween the dark and light grey are different sizes, but I understood it that if it was pinned, the distance should be relative.

I think what i am doing wrong here is sliding my browser window to see what it’s doing, as the one thing we can never count on, is what the viewer is doing, or looking at it from.

I shall have more of a play, but just wanted to know if others had the same issues :smile: Thank you for looking at it though.

After much testing and research, the best example of how Hype can cope with modern browsers is learn’t from seeing Lake Nakuru Responsive Page example from the Support/Gallery.

http://tumult.com/hype/gallery/Nakuru/Nakuru.html

1 Like

What are the breakpoints used in this example? http://tumult.com/hype/gallery/Nakuru/Nakuru.html

You can download the project, that might give you some insight.

http://tumult.com/hype/gallery/Nakuru/Nakuru.hype.zip