Hands on: Frames and coding

Why framesets are so bad, and how you can code quickly without errors

In the last column, I made a passing reference to framesets as a navigational tool and suggested they can cause a ‘collective shudder’.

It’s a comment that a number of readers, including John Shore and Roger Bickerton, wrote to ask about.

What’s the problem with them, and is there a particular reason why they’re not terribly good? And why is CSS any better when it’s so plainly beset by problems with compatibility between browsers?

Framing the problem
First, let’s look at the problem with framesets. Typically, they’re used to divide the screen into a number of sections so that navigation information can be present all the time in one area, while others change according to the options selected. Each frame has a name, and each link can specify the frame in which the page it references is opened.

So, for example, you might have a menu down the left-hand side, and each link opens a new page in the right-hand panel. Links within the right-hand panel might let you move around the content in that frame, while those in the left take you to a different section of the site.

But what happens when you press the Back button on your browser? Many people will expect the main content area of the browser to go back to the information it contained previously. However, often that’s not what happens.

Instead, even though you might have gone through several links on the framed site, you could find that clicking the Back button on your browser takes you back to the last site you visited. This is because the main browser window, which the Back button is concerned with navigating, has always contained the same document – the frameset itself.

That’s not the only problem. Framesets can make it difficult for people to link directly to information within your site. The address they’ll typically see in the location bar on their browser will be the frameset address, not the reference to the content they’re reading in the main part of the screen. They can click to open that in a new window and note the URL, but it’s not very elegant. Also, if they go directly to that URL, they won’t see all the navigation for the rest of your site, since they won’t have loaded the frameset.

You can code around that, adding something to each page so that if it’s not referred to by your menu frame for example, the site’s top page is reloaded, but it’s a lot of hassle. And what if you want to have security for some parts of your site? With only the main page in the location bar, users may become confused about whether or not they’re viewing a secure page.

Finally, there’s the mental gymnastics – making sure that everything works properly, with each link targeting the right frame. This process isn’t too complex when you have just two frames, but can be a problem with any more. As you can only change one at a time, when you want to update both – or even more – you have to open a new frameset document, which will need to load appropriate content for all the frames.

Alternatives
So, given that framesets are flawed, what’s the alternative? There are really just two – tables or CSS. Designing every page as a table can also be awkward, however.

And though you can use includes to read in the various parts of the page that refer to the navigation options, it’s not a great solution.

Depending on the page layout, you can easily end up with jumbled code that can make it hard to see what’s going on.

Your pages will almost certainly be easier to maintain if you use CSS, with its separation of formatting and content. It’s also possible to use Div tags to split the code into the elements that will go into the different areas.

A good web-editing tool, such as Dreamweaver, will enable you to keep navigation elements in include files – either for server-side includes or PHP – but still show the finished result when you’re designing, so you can easily keep track of the appropriate navigation elements for each page. Each page will still have a unique URL, making it easy to bookmark, as well as helping to avoid some of the problems that framesets can cause with security.

Having made the case for using CSS to handle this sort of thing, there’s still an elephant in the room. As one of my correspondents this month pointed out, CSS may be a standard – but if it’s a standard, why are there so many problems, with the consequent need to conduct extensive website testing?

Unfortunately, that seems to be a fact of life, at least for the moment. The previously recommended Web Design in a Nutshell, published by O’Reilly, will provide you with a whole section of CSS hacks designed to work around the shortcomings of different browsers.

And now…
For something completely different. Some readers will have seen that we previously looked at top-end web design packages, including Microsoft’s Expression Web and Adobe’s latest Dreamweaver CS3. While the latest Dreamweaver is a neat tool, it’s arguably not worth the upgrade prices that Adobe sees fit to inflict on the UK market.

Also in that article, I briefly mentioned some other useful tools, one of which, HTML-Kit, is worth looking at in more detail here. It’s available as a free download from www.chami.com, although registration entitles you to some extras, including a table designer.

Before looking at what it can do, it’s important to understand what it can’t – it isn’t a design tool, such as Dreamweaver, nor is it really an application development system. It won’t give you those simple actions, such as creating an ‘enter a record’ form, that Dreamweaver can do so effortlessly.

Essentially, HTML-Kit is a text editor designed for web pages. Of course, if that’s all it was, there wouldn’t be anything to rave about. What makes it particularly useful is the huge range of plug-ins available and the fact that it’s a clever text editor that also understands all those little things that can be so annoying when you’re creating web pages – especially when you’re doing them by hand.

For example, to make sure your tags are matched up in HTML, just press Alt & Home in HTML-Kit and you’ll go to the matching tag. This allows you to move from the BODY at the top to the /BODY at the bottom in one go, or you can go to the closing part of a table element, for instance.

Whatever your script language of choice, there are bound to be brackets, and complicated statements with piles of brackets can be a bugbear for any developer.

Just press Ctrl & M to find the matching one – this makes it much easier to make sure you have the correct number of brackets, in the right position, so that your scripts will come up with the correct answers. There are also navigation options to go to specific tags.

You can also check your HTML easily, using Tidy, with errors and warnings highlighted Click a line in the report and you can see the problem code straight away.

But what of those plug-ins I mentioned earlier? There are hundreds of them available, covering tasks such as PHP, Javascript, ASP and more. In essence, they extend HTML-Kit and help you to develop scripts and web pages in the languages of your choice.

For example, you can have online help for PHP/MySQL and add the stubs of commands such as connections to the database with just a couple of clicks. Or, if you’re not too confident, just click a button on the toolbar and you’ll see a display.

Find the PHP function you want and a summary of the options will appear in the panel on the right. Fill in the values in the spaces below the function name, click OK, and the code will be added to your script at the current insert point. It may not be as slick a tool as Dreamweaver, but if you prefer to code yourself, having these hints available is a great timesaver.

Next time, I’ll provide a few more hints and tips using HTML-Kit, with some walk-throughs to help you get started.

Widgets
HTML-Kit’s handy reference is useful, but I do most of my web design work on a Mac. While Dreamweaver has code reference too, I find it more convenient to use the Dashboard feature of OS X. Mostly, I have the PHP Manual widget available, but there are many others, such as references for CSS, XHTML and even ones for launching HTML tidy or testing HTML code fragments, trying out different colours, or writing Regular Expressions. Also indispensable is the W3C Tool Kit widget, giving quick access to the W3C Markup and CSS Validator.

Windows Vista has similar functionality to the Dashboard – courtesy of the Sidebar – so if there are any useful Sidebar tools readers would like to share that are useful for other web development readers, please drop me a line at the usual address.