Designing for the next generation of devices – don’t get left behind
Posted in Design on: Thursday, February 4, 2010 by 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.
In the AroundMe app the orientation switches from list mode to the rather nice augmented reality mode.
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.
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.
10 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Perfectly logical idea, suppose the issue is dealing with variations in resolutions between mobile devices, the major benefit of designing for the iphone / touch is that you know that everyone has the same hardware.
The rather splendid Engage chaps did a good stab at this : http://www.engageinteractive.co.uk/blog/2008/05/16/how-to-create-an-iphone-website/
Well, of course I knew if I said I’d never seen a site changing depending on orientation then examples would appear !
But, excellent! I’m glad they are our there and I’m extremely relieved there is actually a nice term for it – Orientation Specific Content, or OSC. This engageinteractive post was last May too, so presumably there must be many more.
They have even included a very nice tutorial, which I’ll have a go at:
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
This stuff has me really thinking about layers of complexity added to design. I like the functionality, utility and increased user-experience that such designs provide, but find myself wondering about the additional steps/processes (and potential expenses to the the client) required to render things in such a way. Overall, though it’s something that absolutely must be taken in to consideration, and at least addressed with new potential clients that could make use of such a feature.
Great article. You bring up some very interesting points and as designers we should begin to take much more interest in mobile design, as this is the futureof computing and the internet. We are entering an exciting time as designers, its not just a visual game anymore.
I think it would be kinda nice to see browsers, especially mobile versions of webkit (i.e. iPhone/iPod Touch/iPad implementing something like conditional comments, because when you’re talking different stylesheets and javascript for different devices, you really need an efficient way of telling them apart. You don’t want to load 5 different stylesheets for example.
The issue of load time is an interesting one. My first thought was well it doesn’t matter because they are only on wi-fi, but when using public wi-fi or even 3G size once again becomes an issue, which is why 2 separate stylesheets might not be such a great idea.
Interesting article though, got me thinking. I personally can’t wait to get my hands on an iPad, simply to see what the browsing on them is like.
This is exactly why I was excited by the iPad. Apps that use the large format will be visually stunning. As a musician, I could imagine a performance app that changed its modes based on orientation and even allowed the “compass” turn effect to function like a knob. Turn it to 11! Cheers :)
It took me two months of using my iPhone to realize the calculator had a scientific mode, which it enters when the display is in landscape mode. The only reason I realized this was because I looked at a screen-shot in a magazine.
So yes, it’s not always obvious when tilting the screen will change functionality, even in a default Apple app.
Ha! Well, now I have to admit something :) I’ve never looked at the iPhone’s calculator in landscape orientation either ! Can’t believe it becomes a scientific calculator – this maybe because I’m so used to calculator’s being ‘portrait’ in shape.
This has me really believing now, that whatever we do with orientation, it can’t be at all crucial to the purpose of the website – merely a convenience and it’s going to need some *Very* clear and obvious signposting as to what is happening.
Great post. I think there’s a lot of potential for different treatments based on orientation. The iPad is where it makes the most sense and you can tell Apple feels that way too. Notice that the default apps on iPhone don’t change based on orientation, but on iPad they do.
Your experience with Around Me is similar to my experience using Gowalla and I think we’re seeing an anti-pattern here that Apple alludes to in their iPad HIG. If you completely change the view when changing the orientation it can be disorienting (no pun intended). The native iPad apps reveal a split-pane of the same view when in landscape. This is logical and less disorienting.
Mobile website is still in it’s infancy. This is an area which is due big growth in the next couple of years. Once companies have finished playing around with promo iPhone apps, they might concentrate on providing their website content on the mobile medium in a way that’s easy for the user to navigate and read.