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>