Developing Applications and Websites Keeping in Mind Screen Orientations.

Being a web and app developer

Being a developer is hectic task in itself and when the app or website is to be designed for smartphones or tablets, the task increases tenfold making the task even more hectic.

Two main Screen Orientations present in mobile phones
 message to change screen orientations
Surely these kind of message would irritate you if you are a user and you would be ashamed of this as a developer
message to change screen orientations
OOPS!! this would not work in landscape mode!

A lot of things have to be taken care of. There are many devices having different screen resolutions and sizes. There are different versions of their OSs and a lot of other things. One among them is the problem of screen orientation.
While developing an application or website for mobile, the developers should not only try to adjust the screen size according to different sized devices but also should keep in mind the most common issue these days with mobiles and tablets, and the problem is of screen orientation. Smartphones come with two orientation modes viz., landscape and portrait modes, to give users a better experience. So, developers should try to make their applications or websites compatible with both these modes. Though this task is tedious, it is very useful. But many developers just get too lazy and don’t care about solving the issue of the screen orientation. Mostly devices like smartphones have an option of automatic rotation of screen. So, this means that both the modes have got equal importance. But still there are many websites and apps that just work in their default mode set by their developers and that mode is mostly portrait mode.
There are two categories of the websites that don’t support both the modes. Based on their reaction when the screen is rotated, the two categories are first that don’t rotate at all and second are those like the e-commerce site flipcart that when rotated give a message that they are not designed for landscape mode yet. Both the kind of sites simply irritate the users.

What does orientation mean actually?

Before moving on any further, first let us understand what does orientation mean actually. With the manufacturing of smartphones, the screen started getting rectangular in shape unlike the earlier phones that were mostly square in shape. Since these screens are rectangular, users have the facility of viewing the screen either horizontally when the longer parallel sides are parallel to the ground, this mode being known as landscape mode, also users can view the screen vertically when the longer parallel sides are vertical to the ground and this mode is known aces portrait mode.
Viewing videos is mostly more comfortable in landscape mode whereas for tasks like chatting when we need to make use of virtual keyboard, then the portrait mode is better. Mostly devices provide the facility of auto rotation. Rotation of the screen when the device is rotated is controlled by accelerometer. The accelerometer embedded in our smart devices is typically used to align the screen depending on the orientation of the device, i.e. when switching between portrait and landscape modes. This capability provides great opportunities to create better user experiences because it offers an additional layout with a simple turn of a device, and without pressing any buttons.

Device orientation in different sites or applications

The application of video watching site, you-tube presents screen orientation in a very good way. The user can watch the videos in landscape mode that provides a wider screen and also an unobtrusive view. When viewing videos in the portrait mode, the viewers can have a look at the video description and comments of other users on the video, along with watching the video. This is a very ideal example of screen orientation feature.
However, using orientation to display a secondary interface can be confusing for users. For instance, in CardMunch (a business-card reader by LinkedIn), users can convert business-card images into address book contacts using the smartphone’s camera. Rotating CardMunch to landscape mode changes the interface altogether to a carousel overview of all of users’ saved cards.

CardMunch orientations
Different orientations in CardMunch

Types of screen orientations.

FLUID Link

This interface simply adjusts to the new orientation’s size.
In Skype’s mobile interface, the icons change position when the screen moves from portrait to landscape.

Portrait mode skype
Skype mobile interface Portrait mode
Landscape mode skype
Skype mobile interface landscape mode

EXTENDED Link

This interface adjusts to the screen’s size, adding or subtracting layout components according to the dimensions of the chosen orientation. For example, IMDb for the iPad uses the wider screen in landscape mode to add a filmography on the left. This list is also accessible in portrait mode by clicking the “All filmography” button in the middle-right of the screen.
There are many other websites too that have this kind of interface.

landscape and portrait modes in IMDb
Filmography option in IMDb in landscape and portrait modes

Providing visual elements and functionality in any orientation ultimately gives convenience to the user. However, not forcing the user to hold the device a certain way is crucial, especially if the desired functionality does not appear in the default orientation.

COMPLEMENTARY Link

With this interface, a changed orientation triggers an auxiliary screen with relevant supplementary information. An example would be a mobile financial application that displays data in the default portrait mode, and then provides a visual graph when the user rotates to landscape mode. The orientations show similar or complementary data and depend on each other.

 

CONTINUOUS Link

Like YouTube, a continuous design enables the user to access a secondary interface by a simple rotation of the device. An example would be using a smartphone as a remote control for a smart TV. Rotating the device to landscape mode would reveal a full program guide, while also maintaining functionality for changing channels, browsing programs and recording future episodes.

Full menu in landscape mode
Smartphone as remote in landscape mode having full menu
Portrait mode of smartphone as remote
Smartphone as a remote in portrait mode

Making the user aware.

With all these kinds of orientations, especially in interface like extended, one mode has a clearer view than the other and more features or options appear in one mode. But if the user has no clue about how to view all the options and hence which orientation to prefer, this may lead to the feature being of no use to the user. This is like in a family one family member buys and keeps a lot of pens somewhere, but when other members need them, they are not aware of the presence of the pens or their location. The presence of pens turns absolutely useless as they couldn’t be brought into use and new pens had to be brought anyways.
Therefore, the developer should provide some hint of which orientation to use. The hint could be in form of screen orientation icon somewhere on the screen or the users could be directly asked to change the orientation.

Changing screen orientation.

This method is what would be expected from a mobile API; a simple orientation change event on the window:

// Listen for orientation changes
window.addEventListener(“orientationchange”, function() {
// Announce the new orientation number
alert(screen.orientation);
}, false);
During these changes, the window.orientation property may change. A value of 0 means portrait view, -90 means a the device is landscape rotated to the right, and 90 means the device is landscape rotated to the left.

Orientations with alignments
Different orientation options and their values according to alignments with axes

Resize Event

Some devices haven’t provided the orientationchange event, but do fire the window’s resize event:

// Listen for resize changes
window.addEventListener(“resize”, function() {
// Get screen size (inner/outerWidth, inner/outerHeight)

}, false);
A bit less obvious than the orientationchange event, but works very well.

Resize event
This is how resize event works- not obvious like screen orientation but is still capable for changing orientation by changing size

Screen Sizing

There are a few properties you can retrieve from the window object to get screen size and what I consider “virtual” screen size:

outerWidth, outerHeight: the real pixel real estate
innerWidth, innerHeight: the virtual pixel real estate
These don’t give you the orientation, of course, but using some simple math, you can find out if the window is currently wider or taller.

Media Queries

We can identify orientation by CSS media queries as well:

/* portrait */
@media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
}
If you’d like to get clever, you can code a periodical “watcher” with JavaScript to check the background color of a block and fire your own orientation change.

Changing screen orientations by CSS media queries
An example of iphone 5 to understand the working of CSS media queries to change screen orientation

matchMedia

The native window.matchMedia method allows for live media-querying. We can use the media queries above to find out if we’re in portrait or landscape view:

// Find matches
var mql = window.matchMedia(“(orientation: portrait)”);

// If there are matches, we’re in portrait
if(mql.matches)

{
// Portrait orientation
} else

{
// Landscape orientation
}

// Add a media query change listener
mql.addListener(function(m) {
if(m.matches) {
// Changed to portrait
}
else {
// Changed to landscape
}
});

Screen orientation by match media query
This is how this method works, by choosing appropriate screen size which belongs to particular screen orientation

 

I hope this article helped you in understanding this crucial problem and also have a solution for it.

Leave a Reply

Your email address will not be published. Required fields are marked *