Tables And Frames
OK. First. Frames make navigation HARD if you're not using a
frames-enabled browser. Damn, you gotta hate the way that blind people
still exist, right?
[as an aside here, iframes. Don't do it]
Fine. Let's get frames out of the way:
You have two reasonable choices here: Keep Them or Dump Them.
1) "I'm keeping the frames"
Fine. You think they're really necessary [you /don't/ need navigation
permanantly at the top or the bottom or a side, ok? You /really/ don't. In
this day & age, people know how to work web browsers. They've learnt
that navigation is going to be at the top. They don't mind scrolling up
to find it.]
If you're using hidden frames, just stop it. You're either doing something
you shouldn't, or keeping state. If you're keeping state, that's what
cookies are for. If you're doing something you shouldn't, fucking stop it.
There are two things you can do for accessibility:
a) Each frame can be given a name.
When someone goes to a site without frame names, they see this:
[left.html]
[top.html]
[middle.html]
[bottom.html]
Which very nearly gives any indication of WTF they are.
All you have to do is add something to your frameset akin to:
and do similar for each frame.
And that's it.
Note that part of this is giving each page it's own title. A lot of
pointy-clikky editors don't do this, but what if someone ever clicks on
one of your nav links and clicks "open in new window"? They see the title
on the browser as being "(untitled)". Which is pretty unprofessional.
In this example, left.html should have something in the section like
Navigation for MySite
Easy.
b) noframes tags
The other thing is that there is such a thing as a a <![CDATA[ tag. This
goes outside of your frameset, and you put the BODY of an HTML page in it:
<NOFRAMES>
<BODY>
<H1>You don't appear to support frames</H1>
<P>Luckily, I'm a competent web designer, so here are links to what you
were looking for:</P>
<A HREF="./left.html">Leftside Navigation</A><BR>
<A HREF="./top.html">Some useless eye candy</A><BR>
<A HREF="./middle.html">Some content</A><BR>
<A HREF="./bottom.html">Some more useless eye candy</A><BR>
</BODY>
]]>
2) "How can I get rid of them, then?"
I'm very glad you asked. You can use tables. Just put the content of
each frame into a table. This is easiest to do with frames that're
clearly top-n-bottom, but anything works:
[noting that this code is just an example, and won't even work if your
server doesn't support SSI. And if you're designing webpages and don't
know what SSI is, all your internet priveliges have just been revoked]
Going left and right is pretty much the same. Note that the tables are
basically EXACT replacements of your FRAMESETs. It's even a
no-bloody-brainer. Just remember to get out the head & tail stuff [eg
the and the tags. You /do/ have DOCTYPE tags, right?]
Moving on, we have Tables
I approve of tables. Let's get that straight, too. I use them, they're
great. But just a couple notes:
Browsers that don't support them just put the text in in the order they
come to it. You get a carraige return between cells, but that's it. What
this means is that:
|--------------------------------------|
| Table Head 1 | Table Head 2 |
|--------------------------------------|
| Content cell 1 | Content cell 2 |
|--------------------------------------|
Will come out in the notables browser looking like:
Table Head 1
Table Head 2
Content cell 1
Content cell 2
So, I have three recommendations based on this:
a) Put content horizontally:
|--------------------------------------|
| Table Head 1 | Content cell 1 |
|--------------------------------------|
| Table Head 2 | Content cell 2 |
|--------------------------------------|
So it appears in a notables browser like this:
Table Head 1
Content cell 1
Table Head 2
Content cell 2
b) Simply only ever have one column:
|------------------|
| Table Head 1 |
|------------------|
| Content cell 1 |
|------------------|
| Table Head 2 |
|------------------|
| Content cell 2 |
|------------------|
c) [Most complicated] Put tables side by side:
|---------------------|---------------------|
| |----------------| | |----------------| |
| | Table Head 1 | | | Table Head 2 | |
| |----------------| | |----------------| |
| | Content cell 1 | | | Content cell 2 | |
| |----------------| | |----------------| |
|---------------------|---------------------|
Finally, a note on screen sizes.
We do not all have super-duper-mega-ultra-stupidly-expensive monitors.
Some of us don't like super-duper-mega-ultra-resolutions.
My father is getting worse sighted by the day. He has a 19" monitor. And
he runs it at 800x600.
He's just a random guy who's using the internet. There are many like him.
In order to get the same visibility, if he were using something affordable
like a 17" or 15" monitor, he'd probably be running at 640x480. The
people really do exist. In fact, they're pretty common. It's called
"visually impaired", and you need to take it into account.
Imagine you're trying to sell something. It's gonna be pretty hard for
him to buy it on the web if he can't read it. Literally. By designing a
website that doesn't work below 1024x768 or 1280x1024, you have actually
just lost his custom. Think about it.
There are two real solutions for this problem:
a) Design a webpage that can be resized without problems. This is the
harder of the two options, but it won't take up less than half the screen
space of a 1280x1024 monitor.
b) Put your content into a table that's about 600 pixels wide. Give or
take a few, it doesn't matter, but do remember that in an effort to make
stuff prettier, Microsoft is adding eye candy to the frames of windows at
every possible opportunity, and some browsers have sidebars. Remember the
"Search" thingy in IE that takes up the left hand many-many pixels?
And something I hate to do, but here comes some flat-out abuse:
Your webpage /can/ be made to do this. You may think it can't, but it
can. If the BBC and CNN can both make their pages work perfectly all the
time, I'm pretty certain yours can. If you really don't think they can,
then perhaps you need to rethink your occupation.