Love for my iPhone users
I've spent some time this afternoon making my site more friendly for iPhone users. I also fixed a bug from my last roll out of changes: namely if tabbing through the comments field, it would automatically add http:// to the URL field (even if you didn't want to enter a URL).
A cool thing about the iPhone is that it supports HTML5 input element type attributes. This is especially cool because of the iPhone's on-screen keyboard. Now when entering the email into the comment input, the iPhone will show a slightly modified keyboard, that has a quick touch @ symbol. This is very cool. The same thing also works with the URL - it will show a quick .com button. This makes it much easier to enter the necessary details.
The problem however is I did not want to enter these values in my HTML because I am using XHTML 1.1 and it would not validate. At first I tried to change the attributes using jQuery, but it threw an exception telling me I could not change the type attribute. This sort of made sense, as I could see all sorts of confusion from changing type from text to checkbox etc... So I came up with a quick solution, and that is, detect for the iPhone, and add another input element directly beneath it, modify it's type and then remove the original. It ain't so pretty, but it works.
Another thing I did is detect the iPhone using user agent sniffing (more on that later), and display a better format site using nothing but CSS. Basically I hide the top and bottom strips and the sidebar, and jack up the font size so it's readable without horizontal scrolling (something that makes me feel ill). The good thing about sniffing for the iPhone user agent is that it would seem even more difficult for anyone using an iPhone to fake this, even though it could be considered that my visitors probably could much easier, being developers.
If you have any more recommendations on how to make this site more iPhone friendly, don't hestitate to let me know!
Comments
No comments yet.
Leave a Comment
Note: Your comment may require approval before it is posted to the site.