I'm working on a few high-end mobile design patterns.The reason is to get a good look at what is possible with mobile websites and mobile web apps. What do I mean with High-end mobile? Think Android and iPhone like mobiles. With a browsers that supports XHTML and a bit of javascript and some sort of user-experience which is not in line with frustrating. Check Mr. Nielsen his blog on useit.com he calls them Full-screen phones

How did I do this? Partly it is based on Barbara Ballard, Little Spring Mobile design Patterns. Some is from iPhone Human Interface Guidelines and the rest I did myself. After extensive research on what's going on. A good overview of realy nice high-end mobile website's you can find on CSSiPhone.

I first looked at how startpage's are designed and later looked on general apperances of certain elements. The picker / spinner below is a general element apperance and the login is a startpage.

Picker / Spinner

Easy select specific input. Maximum of 4 wheels width. On gestural interface this is accessible via flick or drag. On non gestural interface on click upper or lower region it starts spinning on next click it stops spinning. Upper region it spins to north on lower region it spins to south.

Login

Before anyone can acces the site they need to login. Username and password label are in the input field to mimize clutter. A big input button easy to tap with a finger. Try to validate by ajax request if possible. Alert boxes on top of form not under input field.

More coming soon