Mobile

Using Orientation on Your Mobile Sites

Zsombor Markus
Share

Orientation and Device Orientation. What’s the Difference?

Before we start, I think it would be useful to clarify that “orientation” is not the same as “device orientation.” Orientation by itself simply involves the proportions of the browser window, allowing you to assign different properties to “portrait” and “landscape” mode through CSS media queries.

orientaiton

Orientation:

  • recognizes only two angles (landscape and portrait),
  • distinguishes the two “orientations” fairly easily,
  • detects “orientation” without requiring a lot of processing resources,
  • looks quite static, but is useful for traditional websites.

Device Orientation is vastly different; it involves accessing the motion data of the hosting device on a much deeper level. Device orientation allows you to create real-time 3D orientation functionality. We’ve seen this in many native games (such as Jenga for iOS, demonstrated by Steve Jobs) where you can control events by changing the angle of the device. Device orientation capabilities now available as part of the HTML5 specification.device orientationDevice orientation:

  • recognizes all angles,
  • requires advanced coding skills,
  • requires more processing resources,
  • has a dynamic look,
  • is useful for special functionality.

In this post, I am sticking to the traditional use cases, highlighting some of the great opportunities offered by CSS orientation media queries.

It’s About Enhancements

There has been a lot of discussion about responsive design that enables optimized experiences for all different screen sizes. The most important tools for achieving a responsive design are relative values and screen-width media queries. But, there’s a bit more to it!

When a user is browsing on a tablet or mobile device, you can never be 100% sure what the physical position of the device is. Landscape and portrait view are different from each other in many ways. One could be better than the other in certain situations, but it’s up to the visitor’s to choose. In many cases, a user can even lock the orientation on their preferred landscape or portrait setting. If you want to provide the best possible user experience, you will need to cater to both orientations.

How To Start Using Orientation

Before moving on to the use cases, here’s the basic CSS you will need to begin orientation media queries.

/* Portrait */
@media screen and (orientation:portrait) {
.yourclass { property: value; }
}
/* end of Portrait */

/* Landscape */
@media screen and (orientation:landscape) {
.yourclass { property: value; }
}
/*end of Landscape*/

Navigation

Vertical scrolling seems to be natural to portrait mode, but it’s not as natural for landscape mode. You might want to consider using a vertical content layout, adding a content slider or implementing auto-scrolling functionality.

Tailor-Made Elements

Relying only on screen-width media queries, there might be a few layout elements that you need to shift downwards or disappear if the proportions of the screen are no longer in your favor. Using orientation, you can simply adjust the size or appearance of a single element to fit the given orientation better. Create alternatives to the sidebar, re-scale your ads or even recolor elements if they work better in different surroundings.

tailor made elements

Menus

You might want to re-think your menu layout for both orientations. Menu items are more accessible in a horizontal layout when it comes to landscape mode. Portrait view might provide you with a little less of screen width, so just go ahead and place the menu items underneath each other. Maybe even in two columns, as long as your fingers can aim at them comfortably.

One Thumb, Two Thumbs

While holding a device in portrait position, the visitor is likely to be using just one thumb to navigate. Landscape is more welcoming for two hands at the same time. You can take advantage of this prediction by adding relevant navigation and functionality that anticipates hand positioning. If your site functions as a web app, adding multi-touch enhancements could be especially exciting.

browsing with two hands VS one hand

Guiding The User

If you are pretty sure that a certain piece of content is more enjoyable in either landscape or portrait orientation (like a widescreen video), you might want to guide the user to the optimal position. Sending a friendly fade-out message to the user, advising to turn the device to the correct position can be a benefit for both of you.

Images

By images, I am referring to the ones that are constant, perpetual part of your layout. Your design could be easier on the eyes if you keep the proportions of the screen in mind. When selecting your image material, you could assign a photo of the Eiffel Tower to portrait mode and another one of London Bridge to landscape view. So, they both compliment the selected orientation well without having to compromise the layout much.

Support

Orientation is recognized by the latest versions of most mobile browsers, including: Opera, Safari, Firefox, Dolphin, and the native Android browser. It is pretty solid mobile browser coverage. Strangely enough, some desktop browsers also recognize it, including the latest versions of Safari, Firefox and Chrome. In some cases, it’s better to exclude non-handheld devices through CSS assignment or specific media queries.

Do you make the most of CSS media queries to design proper orientations? Do you have any examples of well-designed orientation to share?

CSS Master, 3rd Edition