Please be honest, but nice :)

[LEVS Viking]

Hi. I'm the new webmaster for my organization's site... I just completely revamped it and brought it to Powweb. I'm a self-taught HTML writer (I usually have HTMLgoodies.com open while I'm writing the code), so you'll probably see lots of mistakes if you look behind the scenes. I used Photoshop for the main page, then copied the header HTML for the rest of the pages...

Anyway, please take a look at my site, and let me know what you think. I tried getting the members to critique it, but they're too blown away by what it looks like now to nit-pick. (I'll be honest, though - I don't know how much I'll change per your comments, but I'll take everything into consideration.)

Here you go: Leif Ericson Viking Ship, Inc. (http://www.vikingship.org)

Nervously awaiting your response :eek:
Karen

[B&T]

Very nice. And since you are not really looking for change, I will just make one suggestion. Use this meta tag to get rid of the IE image toolbar when you mouse over the main picture on your home page.

<meta http-equiv="imagetoolbar" content="no">

[(jj)]

Oh yeah, you wanted a critique didn't you! I got caught up reading about the ships and your organization that I almost forgot why I'd went to the site. :D

The only thing that I noticed is that the pages are just a bit wide for those with 800x600, however, the text was all within an 800 resolution so there was no scrolling neccessary to read the information. That and I'm not sure how fast the site will load for dialup users, it seemed to take a while to load for me on DSL.

I think you've done a great job with the site, I'll be back again when you get the Gallery up :)

[YvetteKuhns]

The website is beautiful. I love the color scheme. Any comments would be nitpicking.

The entire website appears to the left in higher resolutions. It may look better centered. On the home page, the text that appears when mousing over the shields is centered and may look better aligned to the left.

You can select a number like 700 for the table height for your main table, so all of your pages are the same height (unless your contents takes up more than 700 pixels in height). The pages with less contents would look better.

Normally, there is copyright info at the bottom of each page. And the contact information was found after clicking a link on the About Us page. Again, this is simply nitpicking.

Very nice! :)

[FAK3R]

Not much to say except that it's a very nice site. :D

[LEVS Viking]

Hi all - I had a brain fart the day after I posted this, and lost my password, then had probs getting a new one... I didn't mean to "ignore" your very good comments. Also, I meant to clarify my original post - when I said that I might not make every change, that was more about the fact that I had just spent a lot of time getting this approved by our board, and if y'all had said to change the site to green and orange, I was going to put my foot down. ;)

That being said.... Now that I'm back, I have a few questions, 'cause I like the suggestions you gave me so far.

1) I'm not sure what the meta tag thing is, or what you're seeing, but I'll do what you suggested. In fact, I was also thinking of making the photos of our ship & crew un-clickable, because I've found our pictures posted throughout the WWW. (Most of the time it's ok, 'cause it's about an event we've been to, however one site used our picture in their site, then "copyrighted" it and made it unclickable. That's hypocritical, in my mind.)

2) As for the width being a bit too wide - I planned on the site to be 800 pixels wide - Photoshop added the "buffer" (the dark blue bit on the left and top) and I don't know how to get rid of it. Any suggestions?

3) I'd like to center the page as per Yvette's suggestion, but I don't know how. Teach me?

4) For the copyright info - good idea (see #1's gripe). Question though - how much legal footing do you have if someone does copy stuff? Isn't there some legal process you have to do to actually have the "Copyright XXXX to YYYY" on the site? Also, how long do you generally suggest copyrighting it?

Anyway, thanks for the reviews. Feel free to nitpick, now that you've been nice. :) I was told about two errors at the last event we went to. From the event goers. :( I wish my org. had nitpicked BEFORE the event!!!

[YvetteKuhns]

I'm not sure what the meta tag thing is, or what you're seeing, but I'll do what you suggested.

Just include <meta http-equiv="imagetoolbar" content="no"> with the other meta tags at the top of your source code, so visitors using Internet Explorer do not see the image toolbar that appears when the mouse points at an image.

I'd like to center the page

Just beneath the opening BODY tag and just above the closing BODY tag, include the opening and closing CENTER tag to center everything. Once you center the page, you may find that you may not need to adjust the width.

As for copyrights, anything you create is your creation and you own the copyright unless/until you sell it or die. The best way to protect your work is to keep original copies and continuously backup work. If anyone else claims to have created the work, you can compare the original creation date stamp on the files (not date last modified).

[Skunkboy]

I don't see anything really distracting on the site. I may center the main table instead of having it right justified or perhaps widen it a little bit more; but, that's just my personal taste.

The only thing I can think of that I would do differently on all pages is link to a contact page using a cgi-form instead of having your e-mail address out in the open (but that's personal taste).

Another nice touch would be to add custom error pages. Check here and the net in general for creating a .htaccess file as this is where the error page settings are at.

http://help.powweb.com/tutorials/htaccess/customerrors.php

[LEVS Viking]

Interesting, Skunkboy... How would I create the custom error pages? same way I do the other stuff? what do I name them, and where do I put them?


(BTW - were you telling me that 'cause you found some errors???)


Forgot to ask: how do I get rid of the slight margin at the TOP of the pages?

[Marko Peric]

Great looking site, it loads fast, and it seems that you've put everyone else's suggestions to good use already. You might want to change your copyright dates, though, since it currently says "Copyright 1992 - 2009." People generally don't put up copyright notices with future dates on them.

[Skunkboy]

I often look at sites from a dial-up user's view but forgot to do that with yours - your main page's graphic is nearly 80k which will take about a minute if not more to load your page... often times if it takes more than 20 seconds to load a page, especially the first one, a user will leave.

If you'd like to create custom error pages, this tutorial will assist you in doing so using the .htaccess file. http://help.powweb.com/tutorials/htaccess/customerrors.php

As far as your gap up top, I looked at your code and can't find it... then again I don't know some of the scripting you've got in there. Something is forcing a linebreak before your table.

[LEVS Viking]

Thanks for the input, Marko - is there any script to automatically change the dates, so I don't have to change 'em every year? (I'm lazy ;) )

Skunkboy - I know that the page takes a while to load, in fact, I had my dad (a member of this org) test it out, 'cause he has 24kb dialup.... He said that it took about 1.5 minutes, but that's what he's used to. (I'd go nuts waiting that long) When I designed this look, I took it to the board members and asked them if they'd be ok with the time it took, and they ok'd it anyway.

[YvetteKuhns]

How would I create the custom error pages? same way I do the other stuff? what do I name them, and where do I put them?

You can create a custom error page just as you would any other page in html. You can name the page any name you haven't used, but I simply name the page 404.html, because that is the error you get that directs you to this page. I can see it appear in my webstats which reminds me to check my error log.

The file would go in htdocs or whatever your main directory is. Create an .htaccess file if you do not have one. If you do, add the line:

ErrorDocument 404 /404.html

which means that the page named 404.html will appear when there is a 404 error. Be sure to create/edit the .htaccess file in Notepad and upload in ASCII mode to the htdocs folder.

[YvetteKuhns]

is there any script to automatically change the dates, so I don't have to change 'em every year?

http://www.htmlgoodies.com/beyond/js2000.html

This Javascript code will print the current year. So you can include your original copyright date 1992 to the current year by including the function Javascript in the head of your document and the following line in the body of the document where you want the copyright to appear.

document.write("Copyright 1992 - " + TheYear + ". ")

Remember that this will only work for those with Javascript enabled. There are other scripts that can do the same thing in php or other programming languages.

[(jj)]

<snip>
Skunkboy - I know that the page takes a while to load, in fact, I had my dad (a member of this org) test it out, 'cause he has 24kb dialup.... He said that it took about 1.5 minutes, but that's what he's used to. (I'd go nuts waiting that long) When I designed this look, I took it to the board members and asked them if they'd be ok with the time it took, and they ok'd it anyway.

If you converted the image to .jpg format before slicing it would be much smaller and page time would be faster. Gif's are better only when the color count is low, when you are working with full color photos it is always best to use the jpeg format.

[LEVS Viking]

Hi JJ -

Could I change the GIFs to JPG after the fact? (Just save them into the new format) Or, would I have to start from the Photoshop file?

[KRaNiX]

u can change them the way u want, but seeing as the gifs are limited to 256 colors, u may want to use the original image before slicing to get the full color range available to JPG

[(jj)]

It would be best to re-slice using the original image as a jpeg. I know, more work than you wanted :D but it would help those still stuck on dialup connections.

[XJnick]

Hi,

Your site looks nice and clean! Other than some of the *.GIF images which take awhile to load, everything looks great. :D

[LEVS Viking]

I was afraid you'd say that... Maybe this weekend I'll fix those pictures.

Actually, I've got a somewhat related question for you - I was looking at the webstats, and it looks like the majority of the folks that come to the main page leave after 30 seconds. That's bad, right? Is there any way to find out what type of connection the user has? (i.e., dialup or a faster connection) Or what the avg length of time it takes for the first page to come up?

[YvetteKuhns]

I was looking at the webstats, and it looks like the majority of the folks that come to the main page leave after 30 seconds.

No one using dialup waited for your site to load.

Is there any way to find out what type of connection the user has? (i.e., dialup or a faster connection)

You could make two versions of your website and allow the visitor to choose the dialup or the high-speed version of your website.

) Or what the avg length of time it takes for the first page to come up?

I try to keep sites loading in 7 seconds whenever possible, but sites that require more images will take longer.

You could save your images as progressive jpgs that will look blurry, then "load" the details and look clearer. That way the visitor will see something appear and watch as the images come into focus.

Image slicing should show smaller portions appear like a puzzle until your entire image is viewable. Slicing is common for porn sites, so people cannot right-click to steal images! But the reason for slicing is to have a few images of a smaller file size load faster instead of waiting for one large image to slowly load.

You can simulate rectangular buttons and text effects using CSS or find other ways to reduce the amount of images which slow your load time. But if you do not want to make changes to the appearance of the website, then you will want to slice images and/or use progressive jpgs.

[LEVS Viking]

Is there a special way to save the JPGs to be "progressive"? (I'm using Photoshop) <--- figured this out on my own...


-and-

Is there a script that can determine the speed, and then automatically point them to the alternate version of the first page? (That's the slowest page to load) I don't think I'd like to create two completely different sites, but I'd be willing to create a text only first page...

[YvetteKuhns]

Is there a special way to save the JPGs to be "progressive"? (I'm using Photoshop)

Yes, save Optimized for Web as a JPG and select Progressive.

Is there a script that can determine the speed, and then automatically point them to the alternate version of the first page? (That's the slowest page to load) I don't think I'd like to create two completely different sites, but I'd be willing to create a text only first page...

I don't think you can determine the speed accurately, but you can create a simple fast loading index page that allows the visitor to choose one version or the other.

[LEVS Viking]

Argh! Adobe ImageReady (the version I have) doesn't allow you to save the optimized page as HTML & JPG, just HTML & GIF. Guess I have to save each slice as a jpg separately... yuck.

[YvetteKuhns]

I just opened Photoshop and ImageReady and noticed that you are correct. You can only save optimized as gif or gif and html in ImageReady. You could use the ruler to manually slice in Photoshop if you really want jpg format.

If you have the original image before you sliced it, you can try to save optimized for web in Photoshop and check the box for Progressive. Just try it to compare the load time with the image slices. Photoshop shows the file size and load time.

[LEVS Viking]

Yvette, thanks for all of your help, btw. And everyone, I appreciate your continued comments.


Anyhoo, I was able to figure out how to use ImageReady to create JPGs, and I uploaded the new (hopefully improved) page to:

JPG version of first page (http://www.vikingship.org/JPG/index2.html)

I'm aware of the missing graphics in the header - I linked them to the gifs from the original index page, which aren't in the same folder. According to my dad, who has the slowest connection that I know of (24Kb if he's lucky):
The original index page loaded in 3'59"... too long.

The 2nd index page loaded in 1'12", but was incomplete in that the upper heading bar was "X"'d out and the pictures didn't come up as you scrolled at the bottom.

In the original index page, I had pre-loaded all of the mouseover graphics for that big picture in the middle. In this new version, the big picture is chopped up. Will pre-loading the pictures slow down what speed I gained by making the graphics JPG?

[YvetteKuhns]

Each button image will slow down your load time, but not by much since those images have small file sizes. You can simulate buttons using CSS which will add almost no additional load time.

See the buttons at http://www.slfba.org and view the source code. I left the style code in the page to show people here, but you can save the code between the style tags in an external page and refer to it using one line of code in the HEAD of the document. The code for a#menu is called in the a tags in the links table like this:

<a id="menu" href="index.htm">

to simulate buttons.

Preloading your images does help for dialup users.

[magagnon]

I took a look at your source code and geez .. you got a LOT of javascript code in there ! :)

You might want to put that code in a an include file:

<script language="JavaScript" src="your file" type="text/JavaScript"></script>

This might save you some bandwith

Just my two cents..

[YvetteKuhns]

I agree that the Javascript should be in an external page. It would save load time and reduce the file size for each page.

[LEVS Viking]

That's a good idea... The Javascript was written by Photoshop - I have no idea how to write java. Can anyone walk me through what I'd cut out, and what form of file the "include" file would be?

Thanks - you all are AWESOME!!!

[YvetteKuhns]

First, copy and paste the entire Javascript code from your web page to Notepad and save as filename.js . Remove the beginning and ending script tags and the comment code and resave the file.

Include this line to refer to an external Javascript file:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>