A tutorial on…Creating a Compatible Web Page for iPhone (Configuring the Viewport & CSS for iPhone)

Configuring The Viewport

The viewport is essentially the visible area of the screen of any given browser.  The viewport for safari will be different on a desktop computer and iPhone, but then it will be different depending on wether the iPhone is viewing the screen in either Portrait or Landscape orientation, thanks to iPhones built-in accelerometer.

For example, the iPhone has a screen with a resolution of 320 pixels in width by 480 pixels in height, and these two values alternate according to wether it is in portrait or landscape viewing mode.  However, not all the screen is available for viewing web content.  This brief tutorial shows you how to configure the viewport for your iPhone compatible webpage.

Safari adds controls both above and below the web content, which shrinks the viewable area down to 320 x 356 pixels if in portrait mode, and to 480 x 208 if in landscape mode.

The status bar, which is ever present no matter what iPhone is doing (unless displaying video playback), takes up a height of 20 pixels across the top of the screen.

The URL text field, which appears at the top of a web page, accounts for another 60 pixels.  Although the URL field disappears when the webpage is scrolled down, it can be displayed at any time, so it is not recommended to use these extra pixels when creating webpages for iPhone.

Finally, the bottom of the screen is home to the button bar, which displays buttons for various commands within safari (forward & back buttons for browsing webpages, a ‘+’ button which brings up options such as ‘bookmark this page’ and ‘add to home screen’, and finally the ‘multiple page button, which allows users to open multiple webpages within safari.

Remember safari on iPhone doesn’t have scroll bars so scrolling is done by use of touching anywhere on the webpage and ‘flicking’ up or down.  Also note that pressing the status bar will return to the top of the current webpage, this is also true for some other applications as well.

Taking all this into account, this leaves us with our visible area of 320 x 356 pixels in which to lovingly create our iPhone compatible content.  This information is very useful and well worth knowing should anyone be considering creating a webpage specifically for iPhone in the future.  Look at the picture to the right to see how the iPhone viewport displays Safari in portrait mode.

CSS

Configuring the Viewport may be the main way to optimizing content for iPhone, but style sheets can offer further scope for optimizing content and layout.

By now myself and the others in my class all know the basics of CSS, but for those who don’t know, Cascading Style Sheets (CSS) are a great way of separating presentation details from the main HTML, and by using external CSS files you can apply standard presentation details and layouts by the use of one file and a small piece of HTML text linking to the desired file.

Using CSS to arrange information and text on a web page into columns makes reading them on iPhone even easier, and so I will be taking this into consideration when coding my web app.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: