How many Responsive Layouts required to set up one’s site?

I have been in the Abyss of this forum, attempting to understand: number of Responsive layouts required to set up one’s site.
I understand, there is no longer a need to inject “Detect Display/ Device JavaScript codes.”
I have created 2 layouts:
iPhone 12 Pro Max: 428 X 926 px
Desktop: 1400 X 2500 px

It seems that I have to create, at least 2 more Responsive layouts: Laptop & iPad.
Lastly. I used “Flexible layout (Shrink to fit),” based on the article (Jonathan, January 2016): Proportionally scaling a Tumult Hype document based on the browser width
But, once my scenes are viewed in “ Safari’s Responsive Design Mode,”
For various devices, all text and images in each scene are misaligned.
I am at a loss!

1 Like

Is this an external requirement for the project?

There's no specific rules of thumb on the amount of Responsive Layouts you need. Hype itself has defaults for 4 basic sizes (iPhone, iPad Portrait, iPad Landscape, Desktop), but these are just common general size classes folks tend to deal with. In general, I'd say if you find a layout difficult to achieve with the Flexible Layout options, then one should look into a Responsive Layout where it starts to break down. The fewer responsive layouts you have, the easier your document will be to work with.

Feel free to post a zip of your .hype document along with the dimensions you are testing against and what elements specifically do not align how you would like for further advice.

Did you see this recent conversation... https://forums.tumult.com/t/responsive-behavior-for-pages-developed-with-the-hype-4-standard/20370/2 ...maybe that helps?

Hello Jonathan,
Thank you for the reply!
Here is the link to the project:
https://drive.google.com/file/d/1l834m1bfPts1Z0VG7-K58aK-e147orlJ/view?usp=sharing

I would appreciate your sage guidance!

Best,
M

(upload://9b46LGatW2wkizpgYK94Njb40zv.png)
you'd group all elements of a scene and set a scaling-setting to the the group that includes to scale its contents.

image
At the point where everything gets to small ...-> that where a new layout is needed :slight_smile:

2 Likes

I'm in agreement - the original layout is 1600px wide which is plenty wide even for a Desktop version, so I'd probably make at least a phone and iPad Landscape layout to even things out, and probably use the group scaling to deal with the items in between.

Thank you very much Hans-Gerd & Jonathan!

With all due respect to the code gurus, I am a graphic and UX / UI designer and mine is 100% visual, I discovered Hype many years ago and I felt so comfortable with this tool that I use it in all my projects.
Every day I discover new features and use, I know that this learning quota is full of blood, sweat and tears but with the help of the forum and 2 main people at Tumult and I manage to use it very well.

Not everything is code and not everything is visual. At this moment I am preparing a complex and large project which takes me away from the forum a bit but in a few days I will share some templates that can help a lot to progress faster for new and intermediate users.

But I think more importantly than the templates is to develop a list of steps to follow to establish a work structure that guarantees the success of the project.

I have taken the time to look for resources, work methods.
Tips and tricks that will help.

But to motivate I comment that such a template that adapts to any format and / or device in a single screen size If that is possible ... I will share a template.

Another will have multiple BreakPoints but include tablets and phones that will display correctly on each device or resolution.

But guys it is necessary before starting the project in Hype you must know resolution, devices, image optimization, when to use SVG, PNG and JPG.

But the most powerful tool of Hypes are Symbols if you master this feature you will make strides like no one else.

I apologize and invite you to have a patience and in a few days I will release this material in a basic way but 100% tested and easy to use approach.

6 Likes

looking forward to this ! :slight_smile:

Thank you for your message! That is very helpful!