Effective Usage of Mobile Orientation

21st of September, 2011 03:35 PM

During my development of my first mobile website (see previous post) I discussed the problems with the order of image loading in all (?) browsers today. When it comes to mobile development, another big thing to think about that differs from desktop web development is orientation. Initially, I didn't see much to it except that I had to make sure my site had to look the same regardless if in portrait or landscape orientation. But...

Using orientation to hide/show different content

To me, having developed websites for more than 15 years (crazy how time flies), my natural reaction to different external properties/settings of my users' browsers is to just make it look the same. The big difference from before is that people expected to use, and did not easily, change their setup of their browsers. The property that affects developers the most is probably different screen resolution. However, this is more or less a fixed setting of the user.

With orientation, the user can switch, easily, and it's not at all foreign to the user to rotate to experience something different. With limited space, especially width in the portrait format, the developer really has to think about what to include and not on a mobile version of a desktop website. During my development of a mobile version of an e-commerce site, I discovered that the limited width in the portrait format together with quite long product names made it impossible to include images in any listview.

Example: images on an e-commerce site

The article name is far more important to show than an image of the products, especially because it's going to be quite hard to see the image anyway. I do know though that the customers of the site find images very important too. My solution to the problem was to show images in the landscape format while hiding them in portrait, thus making full use of whatever space is available to me. 

Taking it further

In the above case it's important to have high accessibility of the site, and thus it's not a radical move to show images whenever in landscape mode. It simply provides a neat user experience but nothing more and it was done through CSS3 media queries (max-width/min-width). However, it would be interesting to see implementations where two completely different pages were shown based on orientation. E-mail inbox shown in portrait mode, compose new e-mail in landscape. Not the best idea maybe, but you see my point. I know several apps have implemented this kind of perspective on orientation, but I definitely believe more can be done in the area. Especially on mobile websites.

Orientation creates a new dimension for web developers to use and is definitely an aspect that I will think hard about in my current and next projects!

The Weblog

Carl-Johan Blomqvist