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 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
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:
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 the coding
to define the width of the box:
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
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
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:
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
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 'width:248px'
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 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
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
Wrapping long URLS
If you display a very long URL, for example https://phobos.apple.com/WebObjects/MZFinance.woa/wa/publishPodcast
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:
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 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