CREATING WEB PAGES FOR iPHONES

            CONTENTS

1. OVERVIEW & PREPARATION

2. BODY WIDTH

3. THE 'VIEWPORT'

4. AUTOMATIC REDIRECTION

5. THE iPAD

6. 'RESPONSIVE' PAGES

'Responsive' pages

In the previous pages we've looked at the method of providing an alternative page specifically designed for iPhones and other mobiles, and switching to it automatically. There is a simpler alternative, though it's not suitable for all pages: 'responsive' formatting which automatically adjusts the page width, layout and image size to fit the screen viewing it.

This is suitable if your page is reasonably simple, with any images being not too detailed. Tables, frames, and anything done with absolute positioning often won't survive the process. (The following example pages will open in a new window or tab: close it to return to this page.) Example 1, the index page for this site, has a layout achieved with tables to provide the two columns and the boxed sections; example 2 is the mobile version which abandons the tables for a straightforward list and keeps the links well separated to make touching them easier.

When the page is simpler, responsive formatting works well. You can test example 3 by narrowing the width of your browser window as far down as it will go, and seeing the text re-flow and the images shrink once they become wider than the window.
Achieving this is done using CSS styles but is quite straightforward.

Shrinking the width

In order to do this your site must be in a 'container'. Older web sites were written to fill the browser window width; with modern very large monitors this can result in the site being stretched with very long text lines and looking untidy, so many place the site in a fixed-width 'box'; you can see in example 4 what this looks like. Here the box has a different background from the page itself, but you can leave if effectively transparent so that the background for the page shows through. As you will see, reducing the width of the browser window does not reflow the text, which starts to disappear off the right-hand size.

In order to achieve this you need to add a 'div' tag giving the box a name (I've called it 'container' but it can be anything you like) just after the 'body' tag:

<div id="container">

and a closing tag just before the </body> tag at the end of the page:

</div>

Now you need to add the style tag in the 'head' section of the coding to define the width of the box:

<style type="text/css">#container{width:1320px; margin:auto;}</style>

You can set the width to taste, to suit the content and the expected size of the browser window viewing it. The 'margin-auto' style make the box centre itself in the window - without this it will stay on the left. Many websites already have this style, though it may be held in an external CSS file. Of course if you add this in the 'head' it over-rides the external file (though be careful because 'max-width' will not over-ride 'width').

Making the width shrinkable simply involves changing 'width' to 'max-width':

<style type="text/css">#container{max-width:1320px; margin:auto;}</style>

Now if you test your page by narrowing the browser window you will see the text reflow, though any images wider than the window will be cut off on the right, so we now need to make the images responsive as well.

Shrinking the images

Each image is defined by an 'img' tag. Older websites will probably use the simple version of this:

<img src="imagename.jpg" width=248 height=248>

possibly with an 'align' tag to flow the text round it. (Obviously the dimensions would actually be those of the image in question.) In order to be able to shrink it you will have to change to this version:

<img style="width:248px; height:248px;" alt="image name" src="imagename.jpg">

Now all you have to do to make it responsive is to change 'width:248px' to 'max-width:100%' and 'height:248px;' to 'height:auto':

<img style="max-width:100%; height:auto;" alt="image name" src="imagename.jpg">

Now if you test the page you will see the images shrink as necessary; though if they are very detailed or contain small text they may not look too good when they do.

So these two styles will make your page responsive. The first can of course be contained in an external CSS file so that as long as the divs are in place all the pages calling on that file will look the same, and if you change the parameters all pages will change immediately. Images will still have to be done individually since the existing parameters will over-ride anything in the external CSS.

To make all this work on iPhones you need to add the 'viewport' tag in the head section for the reason explained in page 3:

<meta name="viewport" content="width=device-width">




Wrapping long URLS

If you display a very long URL, for example https://phobos.apple.com/WebObjects/MZFinance.woa/wa/publishPodcast (this link doesn't actually work any more) it won't wrap when you shrink the browser width but will stick out over the right-hand side of the container and mess up your layout. Obviously you could just have a short piece of text and place the URL in the link, but if you want to show the actual URL you can use the '<wbr>' tag to provide a point where the browser can break and wrap the text - you do this in the linked text, of course, not the actual URL in the link, so that the code could look like this:

<a href="https://phobos.apple.com/WebObjects/MZFinance.woa/wa/publishPodcast" target="_blank">https://phobos.apple.com/<wbr>WebObjects/MZFinance.woa/<wbr>wa/publishPodcast</a>.

You should experiment with your actual link to see where it's best to place the tags.

Limited responsiveness

Although not applicable to iPhones, it's possible to make a page what you might call 'semi-responsive', so that you specify a maximum width to prevent it stretching to wide windows, and a miminum width for small monitors or tablets to prevent the layout being messed up by phones. That is exactly what has been done with this page - if you shrink the width you will see that it stops reflowing at the point where the header image is about to be clipped on the right. This is actually done in an external CSS file, but the equivalent local tag would be

<style type="text/css">#container{max-width:930px; min-width:720px; margin:auto;}</style>