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!
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.
(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.
At the point where everything gets to small ...-> that where a new layout is needed
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.
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.
