IPhone OS and the Internet
From MobileDesign
This article goes into detail on current and possible future concepts for designing applications and websites for the iPhone OS.
Contents |
[edit] Website design for Safari on the iPhone OS
Also known as "iPhonification" or "iphonifying" a website.
To be prudent, your website (especially if it is a blog) should have a separate "iPhone view" that shares the same data and provides nearly the same services as the desktop/laptop version of your website.
[edit] External Links
Designing websites for Safari on the iPhone OS has taken multiple routes since the OS was introduced in the forms of the iPhone and iPod touch. Here are a few galleries of examples:
Apple has also provided a few tidbits for the iPhone website designer:
- iPhone Human Interface Guidelines for Web Applications
- Safari Web Content Guide for iPhone
- Sample Code: Internet & Web - Web Content
A few templates (mostly designed for periodical blog entries):
- Create iPhone Web Apps With Knox iPhone Template (Proprietary, just basic JS)
- WPTouch (for Wordpress)
- iWPhone (for Wordpress)
- NewsPressed Mobile (for Wordpress)
- iUI (for Drupal)
- Joomla Mobile Dark Theme (for Joomla)
- iMia (for MiaCMS, Mambo, and Joomla)
[edit] Network-dependent native applications
In such a case as imported data from an external service over a network, it makes sense to develop your application to reformat the data in a way that would be usable through the above means.
[edit] RSS and web syndication
This is especially true for RSS feeds and RSS reader applications, since RSS, Atom and other web syndication formats are meant to strip a specific type of data from a website's presentation and transport the data to a reader that can represent the data in a manner that is specific to the application's interface rather than the website's interface.
[edit] Content
Also, it helps to make sure that whatever content is being linked within any item in the feed can be presented in a manner that is compatible with any natively-installed application on the iPhone OS. That is, if you make a podcast or vidcast aggregator, please make sure that your linked content is playable with QuickTime, which is natively installed on the OS; if it is Flash video, Theora video, Real video, Windows Media video, DivX video, or whatever else that you're linking to, it won't be playable.
If it is a Broadcatching feed, at least have a BitTorrent app installed (at current, Transmission is the only app available, and it is command line). Archive packages typically won't download in Safari, but, as with Installer.app, it can be made possible in a native application.
[edit] Embedded replies in RSS?
Finally, while one already has "comment feeds" as an RSS extension that is already in use by some web CMSs, no one has actually taken on the idea of embedded comment field forms in RSS feeds, in the case that one may want to reply to a particular post in the feed without having to view the website, say, with text or even an embedded video/audio/picture artifact. This would be an exceptional help in RSS reading/viewing, giving an incentive to take a proactive approach to the device on the part of the user.
[edit] Update notifications
If an application receives information content from over a network, then it is considered best practice to place some indication that the application has received recent content somewhere within the application's button icon on the home screen. This can take the form of a tiny, catchy "flash" at the top-right corner of the icon that tells the number of updates that have been gathered by the application, with the numbers being replaced with some word or symbol that indicates that the number of updates that can be indicated in the "flash" symbol has been acceded (such as "..." or "more").
This approach may work best for applications such as email/webmail/IM clients or RSS clients.
[edit] The trouble with Hyperlinks in a wall of text
Because it is designed primarily for screen-input with the fingers, the iPhone OS usually treats an on-screen object as a button. Thus, most widgets in any application (be it web-based or native) is designed for access with large, distinguishable buttons.
However, when it comes to what is often called a "wall-o'-text" rather than a series of "linked" buttons, trying to find the information that one may want can be painful. Even if it is formatted to be W3C-valid, Wikipedia, for example, doesn't look or feel in any wise like an iPhone application. Trying to tap an in-text hyperlink (that consists of a text URL and a text indication) feels like a hit-and-miss, even if you do get it right the first time.
[edit] Hyperlink as a button?
Text size and readability aside, It could be a better practice for design of a wall of text if, say, your in-text hyperlinks were formatted as recognizably-dark in-text "buttons" with colored light text so that the user can "hit it and go" and feel correct with the finger's touch.
This could be accomplished in a web application or web-dependent application using CSS.

