Best Practice

[JoergKrak]

Good evening!
I'd like to start an entry here that will (hopefully) be filled with best practices. I really enjoy working with Pano2VR, but I'm a bit of a novice when it comes to web technology.
For example, it took me a while to figure out that, in addition to 100% width, there's also "vw." I've watched many tutorials that were very helpful – but what's the best way to do it in everyday practice?
And yet, I still have problems with how best to set up skins (to make them responsive, for example). I think one of the biggest problems is designing for desktop and mobile simultaneously.
It would be great if you could share your experiences and best practices with me here (for everyone).
With multiple graphics in a container: who gets which width settings? The container, each individual graphic, is a vw and vh sufficient, or is it better...? How do I better query a mobile phone: Has touch or mobile? Do I really have to check whether the screen is in landscape mode for every displayed element?

Any tips and tricks that help us all work more easily and quickly are welcome! (I love the keyboard shortcut alt+click on hotspots to switch nodes...)
Best regards!

Jörg

[JoergKrak]

I'd like to be a bit more specific, but it's an example I come across again and again. I have a green box with a logo at the top and text underneath:

Example.png (490.79 KiB) Viewed 9240 times

This box should automatically adjust its size. On a desktop, it should be relatively large, on a mobile phone in portrait format, of course, narrower, and in landscape format, the text should be next to the logo. The text is translated, so it has different lengths.

I have a container with the individual elements.
- Do I specify the size only for the container, or...?
- Is it best to work with CSS and calculate vh and vw (because of the proportions), or to use fixed pixel sizes?
- Is it better to implement the size via "scaling" or make the height and width specifications responsive?
- What's the best way to implement the spacing in the box?
- On a mobile phone in landscape format. Is it better to create two separate containers? How do I then calculate the position of the text?

The iPhone topic keeps coming up: Is there a reference somewhere that tells me which details I need to pay attention to and where any display issues might arise?

There are so many ways to create responsive skins - which are the best practices?

Thank you very much for any answers!

Jörg

[Tony]

Hi Jörg,

Here's my take on it. This is my method but remember there are many different solutions within Pano2VR.

Online Version: https://p2vr.s3.ap-southeast-2.amazonaw ... index.html

First off some screenshots: top to bottom: iPhone Portrait, iPhone Landscape, Google Pixel 5 Portrait, iPad Landscape and finally a browser.

iphone_15_pro_port.jpg (229.34 KiB) Viewed 9183 times

iphone_15_pro_land.jpg (230.43 KiB) Viewed 9183 times

pixel5_port.jpg (336.83 KiB) Viewed 9183 times

ipad_pro_land.jpg (309.43 KiB) Viewed 9183 times

browser.jpg (433.79 KiB) Viewed 9183 times

In the skin I have 3 elements, background (rectangle), Gaucho Foto (svg) and the text (text box)

The svg and text box are children of the background.

The background sizes are all managed by CSS using vh or vw. The size for the browser/ipad versions is Width: 50vh and Height; calc(50vh*1.8 ), the size for the mobile versions iOS and Android in Portrait is Width: 40vh and Height; calc(40vh*1.8 ) and in Landscape Width: 80vw and Height; calc(80vw*0.373 )

Note: there is an extra space in the calc equations befor the closing ) as it showed an emoji if I didn't put it in.

The Gaucho Foto is an svg, because it allows for raster free scaling and always looks sharp at any size. It's default size is Width: 100% and Height: 38.8%. For iPhone/Android in landscape its size is Width: 54% and Height: 99%

Finally the text box default size is Width: 99% and Height: 55%. For iPhone/Android in landscape its size is Width: 44% and Height: 93% also its positioning changes to accomodate the landscape orientation.

That's about it.

Oh two things. I'm using a CSS "Clamp" to resize the fonts as the viewport changes size. font-size: clamp(.8rem, 2vmax, 5rem); This gives us smalller text on the mobile devices and scaling text on the browser.

I also modified the embedded CSS to slim down and color the scrollbar. .

ggskin_text>div::-webkit-scrollbar {
width: 6px;
}
.ggskin_text>div::-webkit-scrollbar-track {
background: ##4b6c71;
}
.ggskin_text>div::-webkit-scrollbar-thumb {
background: ##6b9ba1;
}

I find having non-fixed sizing makes it much easier to manage different devices.

Cheers,

Tony

[JoergKrak]

Hi Toni,
first of all I would like to thank you for your response. When I learned to use Pano2vr I of course found all your tutorials and they were very helpful to understand a lot of things. I really appreciate all the work you are doing to help others. And even my question - I feel honored.
Unfortunately I am no developer, no programmer, just a fotographer.

Things I think about:

• Is there a way to make the background resizing according to the other 2 elements? By resizing the browser window of your online example into a portrait format there is a lot of background extending beyond the text.

• The text resizes in a browser when changing the browser with, but not when changing the height?

• Wouldn´t it be better to change the text position not only on mobile phones, but also in a landscape browser window?

I tried to realize the same as you did, but:

• As the svg is relative in percentage to the height of the background its proportions do change as well? Looks like keeping aspect ratios is one of the biggest problems - what if I create a container with two backgrounds (one for the logo, second for the text) This way I could rearange them for landscape and make them fixed sizes scaling the whole container according to vh/vw?

• How did you calc the position of the textbox in portrait and landscape mode?

Could you kindly post the skin file?

Thanks a lot again for all your efforts!

Jörg

[Tony]

Hi Jorg,

Updated version: https://p2vr.s3.ap-southeast-2.amazonaw ... index.html

Is there a way to make the background resizing according to the other 2 elements? By resizing the browser window of your online example into a portrait format there is a lot of background extending beyond the text.

I've added in a trigger that changes the background sizes CSS when the aspect ratio of the browser window is >1. The text changes color slightly to show the different Class being applied to it.

Light Green: portrait and Bright Green: landscape.

The text resizes in a browser when changing the browser with, but not when changing the height?

I've added CSS that changes the "Clamp" setting when the aspect ratio of the browser window is >1 so the text changes size when scaling the browser window landscape or portrait.

Wouldn´t it be better to change the text position not only on mobile phones, but also in a landscape browser window?

Optional. I've added a button to the bottom right corner of the browser window. In the default state the info box is always portrait but if you click the button then it becomes responsive and has both the portrait and landscape orientation.

As the svg is relative in percentage to the height of the background its proportions do change as well? Looks like keeping aspect ratios is one of the biggest problems - what if I create a container with two backgrounds (one for the logo, second for the text) This way I could rearange them for landscape and make them fixed sizes scaling the whole container according to vh/vw?

What do you think of the new landscape version, does this answer your query.

How did you calc the position of the textbox in portrait and landscape mode?

Width: 50vh Height: calc(50vh*1. however the new "landscape" option for browser uses Width: 80vw Height: calc(80vw*0.373) when the aspect ratio of the browser is >1.

Tony

[JoergKrak]

Hi Tony,

thanks again for all you effort! Your final output - with the landscape option is perfect.

But I couldn´t realize it in my project - with this lot of calculations, percentages and... I´m overwhelmed (beeing no web/html/css... professional). I also get frustrated when thinking of developing new, different boxes for my clients.

Finally I made a 600x600 square container with two boxes, only altering the position of the text-box when in landscape mode. As the responsive resizing of the container did not have any impact I scaled the container into some of the most important scenarios i know:

Screenshot 2025-08-18 140837.png (37.41 KiB) Viewed 8973 times

It is not perfect, but simple.

The result can be seen, if you click the little info-button in the menu: https://www.gauchofoto.com/360/VR2a/index.html

What do you think?

Thankful greetings

Jörg