iPhone Web Development Tips and Tricks

This post is all about how to polish your mobile optimized website to work best with the iPhone. Mobile is taking off: it’s now just a little bit more convenient to pick up your phone for something, then to go and sit in front of a computer. That said, mobile is still extremely inconvenient – mobile and web developers can make this easier and that’s the point of this post: a more polished site means higher conversion. Making mobile more convenient is what I’m currently working on as a day job, see the Stripeylines iPhone app.

Whilst developing the mobile optimized version for our iPhone app, StripeyLines, I discovered that our site (such as our login page) needed some tweaking. These were:

1. Stopping auto capitalision on some text input fields (such as usernames)
2. Selecting a suitable keyboard

Autocapitalisation

Auto-capitalisation is supposedly to help users using Apple’s mobile Safari. You don’t want this on any case sensitive fields like: username, userId. To remove apply propriety html to each tag:
<input autocorrect="off"
autocapitalize="off" class="text-field" type="email" name="j_username"
value="">

Nasty eh? It doesn’t appear like this Apple plan to standardise this method. It’s a presentation level, mobile specific style – why isn’t this in CSS? For mobile CSS Apple are following the standards route – why not on this? All their new mobile specific CSS (those ones starting with -webkit) are typically being proposed for future CSS versions.

For more info, on these tags and form designing, see Apple Dev Docs.

Selecting Keyboards

We all know user-names which are email addresses are a good idea (except affiliatewindow.com – shame!). To show an email keyboard, more custom HTML is required. This time Apple has extended the input type to contain the ‘email’ field.

<input type="email" />

To select other keyboards see the Apple Coding How to – documentation, anyone?

Integrating these into the Spring Web Framework

Next week, I’ll take you on the adventure of integrating these tags into the Spring Web Framework.