Orientation Indicator

A handy hint to your visitors.

What is Orientation Indicator?

Orientation Indicator is a feature which takes advantage of the 'orientation' specification. It displays a friendly fade-out message to the users if their devices are not held in the correct position.

Yes, we said 'orientation' specification

Handheld devices can be physically rotated by the user, allowing them to view the content in either Landscape or in Portrait mode.

Modern browsers are capable of recognising the position of the device (and hence the proportions of the screen or window), which creates great opportunities to enchance user experience.

Web developers and designers can take advantage of this feature by assigning different layouts and functions to both viewing modes, but Orientation Indicator takes things a step further.

While we try to make our sites accessible and enjoyable regardless of the users device and browser, the circumstances often set limits.

Orientation Indicator goes out to suggest the users to change the orientation of the device - if required - in order to get the very best of experience.

Why not just stick with Responsive or Adaptive Web Design techniques?

Using media queries and assigning different or modified layouts to different screen sizes is an easy and great tool to ensure cross-device accessibility. But this allows us only to consider the proportions of our content against the screen real estate, mostly relying on the width of the screen.

Why not take it a step further and consider the proportions of the screen itself too?

Portrait vs. Landscape

Both Portrait and Landscape mode gives their own physical context to the displayed content and both have their own preferred use cases.

When holding the device in Portrait mode, we presume that the user is consuming text content, such as an article, a blog, a list of menu options. Material where the higher number of rows makes the content transparent and easy to navigate.

When viewing in Landscape mode it’s pretty likely that the user is consuming media or a web app where browsing makes more sense with greater horizontal width. Also think of applications, where using both thumbs is an advantage.

Can we ever be sure that the visitor picks the best choice of orientation? Sure we cannot. And that doesn’t leave us all happy, since we want to provide the best user experience at all times.

Bad User!

While we cannot hold every visitors hands, we still want to display our sites the best possible way for the chosen orientation. We got a video embedded and user is viewing it in portrait mode? Well, too bad for him wasting all that vertical screen space, at least he got to the content after all. But he missed out on some gorgeous pixels and we don't want this to happen!

The Solution

Let’s give the user a friendly suggestion to switch to the appropriate orientation where it makes sense to do so.

If our site has a piece of content or function that we intend to be viewed in a particular orientation, but the visitor did not make the same choice as we did, the browser can recognise this, and trigger an action, thanks to the orientation media query. This allows us to set an automatic message, suggesting the user to rotate the device to the correct position for better experience, at a price of a 90° move.

Example of a typical Use Case

Let’s say we have a beautiful "cover flow" style image gallery, where we want visitors to browse the images horizontally (especially knowing that most of the photos are landscape proportioned anyway).

We kinda’ make it work in Portrait mode, but we imagine that the full experience comes through only in Landscape view. We provide the poor man’s version for Portrait view, and by using Orientation Indicator we also display a message encouraging the visitor to go for the better experience.

Technical details

Orientation Indicator triggers based on on CSS3 'orientation' media queries. It is entirely made using CSS(3) and HTML(5), but no JavaScript at all.

Does it hurt UX in any way? Nope. For those devices and browsers which don't recognise orientation (or CSS3 animations), the message will never appear. In order to demonstrate the functionality on a vast scale of devices, I did not set further media query specifications, but desktops for instance can be easily excluded by adding some. (Since 'media' detection is not 100% reliable, it's more efficient to rely on screen width or the combination of both.)

The code is small and simple, so it will make almost no effect on the site speed.

Rotate your device for better view.