In iOS 4.2, Apple introduced the ability to access the accelerometer via Mobile Safari. Other native iOS applications offer a feature of auto-scrolling forwards and backwards when an iOS device is tilted. With access to the accelerometer data, I wanted to see if I could recreate this same feature in Mobile Safari.
The initial implementation only took about 4 lines of code and was fairly simple. I just updated the top scroll position of the page based on the y tilt of the device. From there I just added things like reseting the initial tilt of the device when you load the page and allowing to to reset it manually with a button.
You can view the final example on your iOS device here. Keep in mind that you must have iOS 4.2 for this to work.
Here are my slides from a presentation I gave on Mobile UX Design at the Boulder Digital Works. There was a lot of great questions and discussions and it was great to formalize some more thoughts I have on mobile.
Side note: I used a lot of screenshots from iPhone and iPad because it’s what I had access to, but a lot of this stuff applies to other mobile platforms.
Glad to see the success of Apple and the iPhone rubbing off on other companies, especially Microsoft. Looks like the mobile world is just going to get better and better.
