1. OVERVIEW & PREPARATION
2. BODY WIDTH
3. THE 'VIEWPORT'
4. AUTOMATIC REDIRECTION
5. THE iPAD
6. 'RESPONSIVE' PAGES
the previous pages we've looked at the method of providing
alternative page specifically designed for iPhones and
and switching to it automatically. There is a simpler
though it's not suitable for all pages: 'responsive'
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
being not too detailed. Tables, frames, and anything done
positioning often won't survive the process. (The
will open in a new window or tab: close it to return to
this page.) Example
, 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
list and keeps the links well separated to make touching
When the page is simpler, responsive formatting works
well. You can
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
wider than the window.
Achieving this is done using CSS styles but is quite
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
monitors this can result in the site being stretched with
text lines and looking untidy, so many place the site in a
'box'; you can see in example
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,
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:
and a closing tag just before the </body> tag at the
end of the
Now you need to add the style tag in the 'head' section of
to define the width of the box:
You can set the width to taste, to suit the content and
size of the browser window viewing it. The 'margin-auto'
style make the
centre itself in the window - without this it will stay on
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'
over-rides the external file (though be careful because
will not over-ride 'width').
Making the width shrinkable simply involves changing
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
the simple version of this:
src="imagename.jpg" width=248 height=248>
possibly with an 'align' tag to flow the text round it.
dimensions would actually be those of the image in
question.) In order
able to shrink it you will have to change to this version:
style="width:248px; height:248px;" alt="image name"
Now all you have to do to make it responsive is to change
to 'max-width:100%' and 'height:248px;' to 'height:auto':
style="max-width:100%; height:auto;" alt="image name"
if you test the page you will see the images shrink as
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
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.
still have to be done individually since the existing
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
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
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
'<wbr>' tag to provide a point where the browser can
wrap the text - you do this in the linked text, of course,
actual URL in the link, so that the code could look like
You should experiment with your actual link to see where
it's best to
place the tags.
Although not applicable to iPhones, it's possible to make
a page what
you might call 'semi-responsive', so that you specify a
to prevent it stretching to wide windows, and a miminum
width for small
monitors or tablets to prevent the layout being messed up
That is exactly what has been done with this page - if you
width you will see that it stops reflowing at the point
header image is about to be clipped on the right. This is
in an external CSS file, but the equivalent local tag