Designing for the next generation of devices – don't get left behind

Leigh Howells

I believe we live in a world where the hand-held web device equipped with an accelerometer is going to become more and more prevalent, and quickly.

As far as I have experienced there is little or no current use being made of the accelerometer on web sites when viewed on an iPhone. The accelerometer when triggered in the iPhone’s Safari browser at the moment does little for our general browsing experience beyond giving us a little more horizontal space when in landscape mode. But I believe we live in a world where the hand-held web device equipped with accelerometer is going to become more and more prevalent, and quickly.

Current Acceptance

We accept a limited browsing experience on our mobiles as merely providing a useful, mobile version of the web we see on our main machines. We work within the inherent limitations and reach out for information despite the hardware and software (Flash anyone?) constraints, finding ways to work around things and get to what we want. We certainly don’t expect anything fancy to start happening depending on screen orientation.

But look at how the accelerometer is being used in many iPhone apps to change information and design being presented to us. Tilting between portrait/landscape in apps changes the layout of many interfaces, sometimes shows completely different information, or completely different functionality.

In Awesome Note for example, changing orientation swaps the layout around to fit more comfortably in the new dimensions.

Screenshots of Awesome Notes

In the AroundMe app the orientation switches from list mode to the rather nice augmented reality mode.

Screenshots of the Aroundme app

So what will happen when we scale a capacitive touch screen device with an accelerometer up to iPad dimensions? What new and creative uses can be made of a device that presents our designs in 2 different orientations, both landscape and portrait? Surely the iPad (and other tablet devices) won’t just limit us to a wider view in landscape mode?

Sports Illustrated

The video below shows that a lot of serious consideration is being given to the future of tablet displays by some very big players in the media industry, and a lot of creative thought is being given to changes in screen orientation in tablet applications.

New Considerations

So, apart from obviously requiring a switch function in the browser and our code to detect orientation, will we be creating horizontal and vertical stylesheets for the iPad ? (and other tablets too I presume). Will we change the content or functionality depending on orientation? I think the answer to both is most likely to be yes. Layout would most certainly be useful to adapt; in landscape mode we may opt for a 3 column layout, whilst in portrait restrict to 2 columns.

Illustration of multiple=

In terms of functionality maybe an ecommerce site could add a constantly visible basket column when in landscape mode, or a photo gallery switch between full screen and thumbnail views depending on orientation.

Clear Guidance

One little warning on this however, changing functionality will require clear guidance, to avoid complete confusion. In the AroundMe app shown above it took me quite a while to discover that changing to landscape mode gave the augmented reality feature. It wasn’t indicated anywhere in the application and I simply didn’t try landscape mode as it was mostly list-based and there seemed no advantage to switching.

In summary then the accelerometer poses a new and creative extra dimension for the future of the web. We should start to consider the creative possibilities and consequences today.

If you recognise that the mobile web is important and you need help deciding on a strategy, then book a mobile consultancy clinic.

Book a consultancy clinic or contact Rob about a more in-depth review.