My Philosophy
As a Pano2VR tour developer, it isn't just about building a tour; it’s about designing an experience that lives across an entire ecosystem of devices. From expansive 4K monitors of a desktop setup to the tactile world of tablets and the ultra-compact "letterbox" screens of a smartphone, each device requires a unique conversation with the user. This discipline is known as Responsive UI Design, and it’s the challenge we all face in every build.
In this post I’d like to present my philosopy behind designing for the small smartphone screen.
The Small Screen Challenge
In my experience, the biggest hurdle isn't the desktop or tablet view—it's the smartphone.
While a desktop or an iPad provides a generous canvas, the smartphone presents a unique ergonomic hurdle. On a phone, we are constantly fighting for pixels against what designers call "Browser Chrome"—the address bars and navigation buttons that wrap around a website.
In Portrait, we have enough vertical height to comfortably stack our UI. But in Landscape, the Browser Chrome squeezes the view into a thin "letterbox" strip. Most tours try to force a full set of buttons into that tiny space, resulting in a cluttered mess where the interface actually suffocates the photography.
My Solution: Contextual UI
I believe a virtual tour should be as intuitive as holding a camera. My "Contextual UI" approach treats the phone’s orientation as a functional mode switch—an adaptation of what designers call Orientation-Aware Interface Design. I’ve engineered the interface to react to how you are physically holding your device:
Portrait: My Command Center When the smartphone is held vertically, it’s in "Explore Mode." The navigation, interactive hotspots, and info panels are right at your fingertips (optimized for what we call the "Thumb Zone"). It’s the perfect setup for opeing a popup or changing the language.
iphone in Explore Mode
Landscape Option A: Pure Viewfinder The moment the smartphone is rotated, as in landscape, the interface is hidden, as the goal is pure immersion. I’ve cleared the "chrome" of the UI to give an unobstructed window into the space. No distracting buttons, no overlapping menus—just the panorama, edge-to-edge allowing the user to fully experience the 360˚ panorama.
iPhone in Landscape Option A: Pure Viewfinder
Landscape Option B: The Guided Transition (The "Rotate" State) Alternatively, a "Guided" landscape view can be implement . In this mode, the screen shows a custom image or current node, stylized by a CSS filter—such as a blur, tint, or saturation shift. This can be overlay with a headline, and a clear visual prompt like "Rotate to View Tour." This ensures the user always knows exactly how to get the best interactive experience while maintaining a high-end, branded aesthetic.
iPhone in Guided Transition
Seamless Flow
When you want to dive back into the details, a simple flick of the wrist brings the full command center back into view at the current node.
By treating the smartphone's orientation as an intentional choice, I maximize the beauty of the space without ever sacrificing the utility of the tools.
The Splash Screen & Guided Transition
The "Splash Screen" is the entrance to the virtual tour we are building.
In Pano2VR development, it’s often the very first thing we build, and its ubiquity isn't just a trend—technically, this is our handshake with the browser—a necessary step to unlock immersive features like spatial audio and motion sensors.
In the example below the Splashscreen is displaying a full screen image, title, description, “enter” button, logo and language buttons.
Desktop Splashscreen with fullscreen image
When viewed on a iPad or Tablet the presentation is identical.
Ipad Splashscreen with Fullscreen image
On a Smartphone in portrait mode its very similar however only the central area of the image is visible but for all intents and purposes it’s identical.
iPhone Splashscreen with fullscreen image
However when viewed on a Mobile Phone the available screen size cannot represent all of the elements so the screen automatically displays Landscape Option B: The Guided Transition (Splashscreen)
iPhone Splashscreen in Landscape Option B
In the example below an alternate Splashscreen is displaying the first node in the tour, the title and description, the “enter” button, logo and language buttons.
Desktop Splashscreen showing the first node
On a Smartphone in portrait mode its very similar to the desktop version.
iPhone Splashscreen showing first node
However when viewed on a Smartphone the Landscape Option B: The Guided Transition (Splashscreen) now reflects the same visual settings as the desktop splashscreen.
