An introduction to…Mobile Web Content/Coding for iPhone

For this ‘introduction to…’ I am using the Safari Web Content Guide for iPhone OS as my main point of reference, this, along with many other types of useful documentation is made available to registered iPhone developers, and is found online at the iPhone Web App Dev Centre.

If you are planning on creating content for iPhone there are a number of factors that you need to consider.  The iPhone uses the same Safari engine as desktop Macs and PCs, although there are a number of small differences.  These come down to the iPhone specific features that can affect how websites that are primarily written and coded to be viewed on a desktop screen are viewed and interacted with on iPhone.  Fortunately Safari for iPhone supports all the latest web standards, such as:

HTML 4.01
CSS 2.1 and partial CSS3
ECMAScript 3 (JavaScript)
DOM Level 2
AJAX technologies, including XMLHTTPRequest

There are a few other main points outlined in the ‘Creating Compatible Web Content’ chapter of this guide, and they are:

Follow good web design practices

Add a DOCTYPE declaration to HTML Files.  This tells webpages which specification to parse the webpage you have created to.
Separate HTML, CSS and JavaScript into different files.  Webpages are more maintainable if these are all separated into different files.
Used well structured HTML.  It only takes a few broken tags or missing quote to spoil the presentation and layout of your webpage or web app.

Avoid framesets

The lack of scroll bars in Safari on iPhone means that sites with framesets will not be optimized correctly for viewing on iPhone, and thus will mean that these sites may either look wrong, out of proportion or may become unusable.

Use columns and blocks

Taking note from the layout of many online newspaper websites, columns and blocks work much better than framesets within iPhones safari software.  Columns not only make content easier to read on desktop computers, but it also makes it easier on iPhone as well.  Users are able to double tap areas on a webpage, and from this iPhone is able to determine wether the area just tapped is a block or not.  If it is (blocks can be defined using tags that are outlined else were in the guide that I am using for reference), then iPhone zooms into the chosen block, which allows the user to read the information even more easily than before.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: