CREATING WEB PAGES FOR iPHONES

            CONTENTS

1. OVERVIEW & PREPARATION

2. BODY WIDTH

3. THE 'VIEWPORT'

4. AUTOMATIC REDIRECTION

5. THE iPAD

6. 'RESPONSIVE' PAGES

Websites on the move: Overview

You see more and more people surfing the web while on trains, on buses, or walking into lampposts; so it's worthwhile considering creating mobile versions of your web pages to increase your audience. Of course, because of the very much smaller screen, pages have to be structured carefully and have to be a lot simpler. There are various complicated ways of doing this, but this article aims to explain how to do it reasonably simply: your pages will need not to be too complicated, and you will need a little basic knowledge of HTML and CSS

Since the methods involve adding tags to the page code, you need to be able to access it to do this, something which is not possible in all website creation methods. Online services generally won't allow you to do this, and some programs - though they may allow HTML 'snippets' - don't allow you access to the 'head' section. However, some programs allow you to add tags to both the head and the body of the code, and others allow you full access to the code to modify it how you like.

This article is written with the Apple iPhone in mind (and the iPod Touch will behave the same), but the general method is suitable for any mobile phone - though other operating systems may behave differently in some ways.

This page will deal with initial preparation, then the following five will cover aspects of the process as follows:

Page 2: Constraining the width of the page to suit the phone's screen, so that users don't have to scroll sideways

Page 3: Forcing the iPhone to fill the screen with the reduced width page, so as not to have to zoom.

Page 4: Ensuring that visitors are directed to the correct page depending on whether they are using a computer or a phone.

Page 5: Special arrangements for the iPad.

Page 6: 'Responsive' pages - not suitable in all cases, but a simpler solution in which a simple page will adjust to the screen width.

Preparation

For the purposes of this exercise I've chosen an earlier version another of my Tech Notes pages (since modified) to use as a demo (the version seen here has a header in a yellow box which obviously isn't part of the actual page); it has a reasonably long slab of text and a single image (don't worry about the actual content). You can see the page here (with a link back to this page):


In common with many web pages it has a fixed-width container, with a patterned background surround, so that the layout of the page isn't upset on modern very large monitors. You will notice that if you resize the browser window the text doesn't wrap. The first thing you need to do is to remove this container so that its contents alone form the page content. Similarly if you have a sidebar you need to remove it, or place its contents above or below the main content.

In this case the only image is only 286 px wide so it's already suitable. The effective width of the iPhone screen is 320 px, so ideally you don't want any image to be wider than that (a larger image will be displayed but will require horizontal scrolling, so you should only do this if the image isn't sufficiently clear at 320 px wide). The image also has text wrapped round it to the right (align="right") and you need to remove this so that the image appears on its own line with text only above and below (and a line space between them). You can see the result of doing this here: