Orientation Indicator

Orientation Indicator shows a message to the visitor if the device is not held correctly

Built using Mobile, HTML5, CSS3,


More About This Demo From The Author

Orientation Indicator takes advantage of the 'orientation' specification.

If the designer thinks that either landscape or portrait view is more relevant than the other to a particular page, Orientation Indicator can help to guide the user to the correct position for better experience.

The message itself is displayed for a few seconds only, so it does not force the user to take action. It's more like a friendly suggestion.

While developing it, I kept in mind older browsers and made sure that it will cause no inconvenience or broken design in any case. For the sake of the demo I did not disable Desktop browsers, but in real life this functionality is for handheld devices. Desktop can be excluded by using CSS assignment or accurate Media Queries.

Anybody can easily implement it to their sites by downloading the code package (containing a few lines of HTML and a CSS file for both orientations).

The index page is a demo itself, but also provides further details for anyone interested in this functionality. I also added some other demo pages, which you can reach from the main menu.

About this Demo

Download the Source 2246.02 KB · ZIP File

This demo is released under the Public Domain (where applicable by law) license.