Building mobile websites (especially for iPhone)
Lately we were involved in some “mobile” projects, and since the iPhone is the most successful mobile device, we have focused mostly on developing “for” iPhone (this sounds almost as funny as those ’90s websites “optimized for Internet Explorer at 800×600 pixels”, huh?
).
So, if you’re also involved (or would like to be) in developing mobile websites, you should know some tricks that will make your “mobile programmer” life a bit easier.
First of all – the device. It’s kind of hard to build stuff that you cannot test periodically (and accurately), and owning an iPhone (or more) is not always possible. So… you need an emulator of some sort. And here comes Genuitec’s “iPhone Emulator for Windows” (as they call it) – MobiOne.
Personally I found it very user-friendly, complete and “honest” from the first test I’ve put it through. It’s true that it’s not a “complete” emulator (as Google’s Android one – that is quite a hustle to use, by the way) – meaning that you cannot install and test iPhone applications on it, but other than that… there’s nothing I can ask of it. It comes with an accelerometer emulator, some JavaScript libraries that could be used to interact with its “mobile functionality”, and since its latest version (milestone 6, at the time this article was written), it has even a “designer mode” (useful if you’re interested in drawing some iPhone-type interfaces for future projects – or for pitching on investors
). I’ll let you discover the rest of its functionality on you own…
Next: if you develop in php (as we do), you may also need a quick and reliable way of determining if the client accessing your website / web application comes from a mobile device or not. Well, we found that the “mobile_device_detect()” function from http://detectmobilebrowsers.mobi/ does this job brilliantly. It could be used very simple (just call the function and evaluate its response) or with various parameters, for very accurate results. Enjoy!
If you, as we did, find that the default mobile browser’s screen size is not enough for all your fancy web pages, you may use a nice trick to hide the browser’s address bar (well, you’ll save about 60 pixels in height!). Just add the
<meta name=”apple-mobile-web-app-capable” content=”yes” />
tag in your page’s head, and you’re all set. It doesn’t even mess up your valid HTML code
There are more tips and tricks related to mobile web development that we know and use, but… if you’re interested in more, ask us to write a “part two” on this topic. That’s it for now…!