Preload pages and resized tables

[paulajackson]

Hi
Hoping someone out there can advise me.
I'm currently building a website and trying out different things.
Its tucked away at www.production-online.co.uk/revised.htm

The only links I've got working are news and biography buttons.
Its designed for 1024 sized browser at the moment, but I've been playing around with percentages for the cells of the table, so they will resize accordingly depending on how it is viewed. I haven't got it totally correct yet. Is this the right way of doing it or is it simpler to have some code that detects the browser size and loads a correctly designed page. I know this would mean doing the website in three or four different sizes with appropiate images. Is that a good or bad idea?

Also when I go from one page to the other, it takes a little while to load up everything even though it used more or less the same images. When you go back then its seamless and only the "new" elements on that page appear.
Is there some code that preloads all the webpages from a site or will this be too heavy on the user?
Or should I resort to frames which I've been trying to avoid.

Bottom right of the page I've managed to add a little javascript slideshow and wondered if I should do the same with the Swish screen in the centre.

Any tips on how to make it more compact and quicker without getting rid of much on the page, would be well received.

Thanks

Paul

[ronaldb66]

Creating multiple pages for different window sizes sounds like a very bad idea; most sites these days either use the fluid width model (the page size adapts to the window size by using percentage widths) or the fixed width model, where the main content is set at a fixed width that will at least fit in a full size window at 800x600 resolution, and mostly is centered in the window.

A third option would be what has been dubbed the elastic model; basically a fixed width layout, but the width is related to the text size. This does require some of the techniques commonly used in fluid layouts, mainly in the graphic department since a fixed pixel width can't be depended upon anymore.

Take your pick, optimise the design for certain resolutions, and accept that the layout might look slightly "off" in others.

This page takes some time to load because everything is done with images; subjecting your visitors to preloading even more would be a downright crime.
It would be nice to see some actual text on that page; currently, it's an accessibility nightmare and it stands no hope in heck to ever be indexed by a search engine. This is about what Lynx makes of it:
[logo.jpg] [online.jpg]
[currenthead.jpg]

[newsbtn.jpg]
[blogbtn.jpg]
[forumbtn.jpg]
[mailorderbtn.jpg]
[contactbtn.jpg]

[EMBED]
[button2.jpg] [button2.jpg] [button2.jpg] [button2.jpg] [button2.jpg]

[archivehead.jpg]

[biogbtn.jpg]
[gigbtn.jpg]
[recordingsbtn.jpg]
[studiobtn.jpg]
[buttonblank.jpg]

[audiohead.jpg]

[button3.jpg] inspiration clip
[button3.jpg] do you mind clip
[button3.jpg] you don't tempt me clip

[imagehead.jpg]

[button4.jpg]
[button4.jpg]
[button4.jpg]
[button4.jpg]
[button4.jpg]
[button4.jpg]

[pics.jpg]
[pictext.jpg]

Explore some techniques to use images to adorn normal text instead of replacing it; it can still look pretty, and many of the images could be reused, seriously cutting down on your download times.

On a side note: the looping flash movie irritated me almost immediately; it may also pose a serious danger to those susceptible to flashing lights. I'd strongly recommend replacing it by content that draws attention by value, not by annoyance.

[paulajackson]

Hi Ronald

Thanks for the reply.
The swish movie was just a test really whilst I get the layout sorted, and I've to add proper text.
Is there a way of using a blank button but having text written over it? Or maybe have the button has a background image in its cell - and have some script change it on a mouseover.
I'll look more into what you said about the resizing.

Thanks for your comments. Much appreciated.

Best wishes

Paul

[ronaldb66]

Paul,

have the button has a background image
That is exactly what can be accomplished with some clever styles.

You'll find a number of techniques for this on A List Apart (http://www.alistapart.com/); just select the "CSS" category on the right (under "Hots Topics"). Especially the Sliding Doors (http://search.atomz.com/search/?sp-q=sliding+doors&sp-a=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All) articles by Doug Bowman are worth reading.