I thought about asking this in the javascript forum instead, but the question isn't how to accomplish something with js - it's whether that's a good idea.

My page layout needs a little bit of work, but in general I have a banner at the top and the main navigation at left. I used images to replace the text to get fancy effects and rollovers, and then alt tags so the user will get some text explaining what's in each gallery if s/he hovers the mouse over one of them. Some of this text is pretty long, but it's because I'm trying to give the viewer a better idea what's behind each link.

The problem is, this takes up 4 or 5 KB, on pages that are from 7 to 15 KB on average. Not the images themselves, just the markup. And it comes earlier in the html than the content itself does. So I've been thinking for a while about taknig this out of each html page, and calling a method in an external javascript file to fill out the nav bar during the page load event. Any decent browser should request the js file once and cache it, so this should reduce bandwidth / make my pages load faster.

On the downside, this would be a bit more difficult to edit, but I wonder if there's any other drawback I'm not seeing?

Example: http://forrestcroce.com/Photos/Refle...nBigBasin.html

Thanks,



Forrest

Your first step would be to reduce the image file sizes. The images (I am not talking about the gallery images but the ones used in the design) are not optimized for web at all. The header mountain image is 65 KB, which could effectively be scaled down to 14 KB without losing any quality. Same case for all the images I saw on the home page.

Now to answer your question, I find it unncessary to use added description with the links. People who are interested will click on the links anyways. You can better your chance by getting a better design for your site. Frankly, the overall site design could be much more professional looking.

Another good suggestion is, instead of fancy(?) image links, use text links. That will increase your chance of ranking high in search engines. Use title for your web pages. Add some more texts as contents on the home page. Describe what your site is about and what you are offering.

Thanks for the advice, Quantum Cloud, and for offering more than I asked about - it gives me some important thinking. I agree that the site could use a more professional design, but rather than buying a template or hiring a designer, I'm trying to evolve it in that direction myself.

I'll have to give some serious thought to reducing the text behind the gallery links, making it less descriptive and more conscience. You're probably right, that people will either visit the galleries, or not, regardless of the mouse-over text. And that would help the page size some.

The one part I don't agree with is that images can be shrunk that much without loosing quality. Especially on a site devoted to photography, I don't want to squeeze the jpegs too hard ... although ultimately I need to get a more attractive banner than that one anyway. And you're right that 65 KB seems a bit excessive - but does it make much difference? Shouldn't the browser download it once and then pull it from cache afterwards?

Sounds good. But you should seriously think about the image optimization also. Check this out: http://www.testversions.com/test.html

The original image is 304 KB, optimized 122 KB. Less than half the size, same jpg format but almost no differences in quality. If you are using photoshop what you need to do is when saveing choose oprion Save for web, then play with different quality settings. From my experience, jpg at 35-40 quality gives excellent balance between size and quality for web purpose. In the above example, I used 50 in the quality scale.

I'd strongly suggest using CSS for a vertical nav menu

Originally Posted by travelagent

I'd strongly suggest using CSS for a vertical nav menu

This is GREAT! I've been thinking the left have is just like a list, and wondering if it would be possible to mark it up that way, but still have a lot of control over how it's presented. This will take some thinking and experimentation, but I see potential here.

I'm an ASP.NET programmer, and know a lot about rendering HTML with server-side data and logic, but I'm trying to learn the finer art of design. My web site is decent, but it's slowly evolving, and I think something based on some of these examples could help a lot.

Originally Posted by quantumcloud

Sounds good. But you should seriously think about the image optimization also. Check this out: http://www.testversions.com/test.html

The original image is 304 KB, optimized 122 KB. Less than half the size, same jpg format but almost no differences in quality. If you are using photoshop what you need to do is when saveing choose oprion Save for web, then play with different quality settings. From my experience, jpg at 35-40 quality gives excellent balance between size and quality for web purpose. In the above example, I used 50 in the quality scale.

Interesting. I really wouldn't have thought you could push that far, and I have to look really close to tell the difference. I'll have to do some more testing with more detailed images, but still, I'm really amazed.

I've always been using Save As in Photoshop, where you get 12 jpeg options, and I've never been happy below 7, even then prefer 9 to 10 for full sized images. Do you have any thoughts on what the difference between save and - For Web is? Other than having finer grained control, to throw out more and more data until it gets to the point where it's hurting the image, and then back off a little?