Activity 2: Multiple formats

Today, many websites are being brought out in multiple formats for different devices. As an example, view the regular Facebook site and compare it to the version developed for iPhone users In a normal browser it is difficult to see what the iPhone version really looks like.

When you view both the regular and iPhone versions at iPhone emulation site - you can easily understand the need for different website formats.

The problems associated with viewing the regular Facebook site on an iPhone is that the site is designed for a much bigger screen. This makes it impossible to see the whole site without having to scroll around on each page. Additionally as the normal site contains a lot of graphics etc that make the pages bigger it means that it will be slower to load and in turn add to the data costs.

A number of other websites also have dedicated iPhone versions of their sites including –

Digg -
Picasa Web Albums - -
eBay -

Some issues a developer of an iPhone version website need to consider include –

The iPhone uses Safari as it’s web browser, which is nice since Safari is a compliant, high-performance browser with some pretty cool features that designers can take advantage of. There are 2 areas though that are going to be new to web designers. The first is that the input device with an iPhone is not a mouse, but rather a pair of the users fingers. The second issue is the display size, which offers two variations on the size of the screen- either a wide-screen (short and wide) or a portrait screen (thin and tall).

Let’s start by taking a look at the input device. With a mouse, you have a cursor that is always on the screen, waiting to be pushed around and clicked. With the iPhone, you don’t have this, but rather have a touch-screen interface. What does that mean? Well, you will want to avoid using things like mouseover events since they don’t exist, and also to design with the user in mind. Rather than thinking in terms of a mouse and clicks, you’ll need to accommodate the following input events for iPhone users:

    * Double Tap - Causes the browser to zoom in and center on a document
    * Touch and Hold - Causes an information bubble to appear.
    * Drag - Moves the viewport or pans.
    * Flick - Scroll up or down.
    * Pinch Open or Pinch Closed - Zooms in or out (respectively)

One important thing to note is that Safari for the iPhone does not include scroll bars, either vertical or horizontal, so keep an eye on how your pages scroll. My advice is that if your iPhone-specific web page has to scroll, it should only scroll vertically and not in two dimensions. Also, keep in mind that different users have different sized fingers, so it’s really important to be aware of “link density” on a page. Don’t cram too many links into a small space, or users will have a difficult time selecting them. Rather, the design theory should center around discrete and large buttons that can be easily labeled and clicked

The iPhone version of Safari does not have windows in the traditional sense that we think of them in the desktop world where you can resize them and they have scroll bars. Instead, the iPhone shows Safari “windows” as full-screen, or 320px x 480px.

Another area that designers will want to take a look at is how text wraps and is formatted. Using compliant standards in your design is the first step, and then make sure not to use absolute positioning for your page elements.

Finally, the screen is small, and is also used for input when needed. When designing forms, make sure to account for the “keyboard” that will appear on the screen when the user is inputting data to a web form. Essentially, you have about 140px of visible space to design your forms in,


 Marketing | Multiple Formats| Alternative Input & Outpu