Please critique my swan song (Full Version)

All Forums >> [Web Design] >> Site Critiques



Message

JacieClaeys -> Please critique my swan song (8/7/2007 23:32:02)

I have had this site up since 1997 and redone it so many times I have actually forgotten how many. Hopefully, at almost 70 years old, this will be my last time. So I consider it my "swan song". It has taken me 9 months to do it and it "still ain't perfect" DARN.

www.nrgsaver.com
[>:]
My biggest regret on this current site is that, with the tables it isn't as accessible as I would like. I tried for 2 months to find a way to do the products(where the tables start) without tables,using CSS and just could never make it work past the first row.

My biggest concern now is how it looks in different browsers, particularly the drop down menu. I know it is OK in IE6 and FF
I just don't know how the type holds up with different browser settings on type size. Also don't know about IE7.

I set it up for 800x600 because I think most of my customers might be using it. They are folks who are looking for better light ergo maybe the don't see too swell.

Maybe ya'll could take a gander and let me know how it looks in the various and sundry settings and browsers.

Also, would like your comments on any and everything I can do better or any thing you don't like or just looks plain crappy. Since it will be my last, I would like it to be the best if at all possible.

Many thanks
Jacie
PS: Especially thanks to all of you who have helped me along the way. Don't know what I would have done without your CSS help, especially on the menu.



d a v e -> RE: Please critique my swan song (8/8/2007 2:38:39)

what's the address? ;)



Tailslide -> RE: Please critique my swan song (8/8/2007 3:59:18)

Hi Jacie

Is it the Light Bulb site?

You know that tables aren't necessarily inherently bad - they're just often used in a bad way. If a table is marked up properly and preferably used for tabular data then there's nothing wrong with them. I'd say, looking at one of the product pages that it could well be argued that the product list is tabular data and should, therefore be in a table.

As far as making the product tables more accessible - if you really want to add to the tables' accessibility then there are a couple of things that you could do. I think I'd do it like this: 

<table summary="Big Globe Lightbulbs">
  <caption>Product lists for Globe Lightbulbs</caption>
  <thead>
    <tr>
      <th>Item</th>
      <th>Description</th>
      <th>Colour</th>
      <th>Price</th>
      <th>Purchase</th>
     </tr>
   </thead>
   <tbody>
     <tr>
        <td>whatever</td>
        <td>whatever</td>
        <td>whatever</td>
        <td>whatever</td>
        <td>whatever</td>
      </tr>
    </tbody>
</table>


There's a good article on it here: http://www.usability.com.au/resources/tables.cfm

To be honest - I don't think that the tables you've got are really terrible - they linearise reasonably well and seem to make sense then too.

The major issue on the site in my opinion with regards to accessibility is in fact the menu system which you can't get to without use of a mouse. The menu is also after the content in code order which means that someone using a screenreader would have to go through the whole content to get to it.

Again, if you can bear making more amendments I think the easiest way of dealing with this (short of changing the menu which, I'll guess you're not keen on!) would be to add two things.

1. A skip link which appears first in the code order on the page and would take people straight to the navigation if they're using a screenreader. You'd have a link like this: 

<a href="#navigation">Skip to Navigation</a>


and above the navigation you'd do: 

<a id="navigation" name="navigation"> </a>


2. Add a Sitemap - if possible, have the link right next to the skip link so that people can click on that and go to a normal list will all the products on it and use that as an alternative method of navigation.

In summary - I think that the product pages are clear and easy enough to read. The Product listings aren't as inaccessible as you seem to think they are! The only thing I'm not keen on is the menu but again there are ways around that.

Works for me on IE7, Firefox and Opera. On IE6 the last menu item has wrapped. I'll try to check it out later on the mac.



JacieClaeys -> RE: Please critique my swan song (8/8/2007 7:20:16)


quote:

2. Add a Sitemap - if possible, have the link right next to the skip link so that people can click on that and go to a normal list will all the products on it and use that as an alternative method of navigation.

Hi Tailside,
I have a site map currently, again, at the bottom of the page so I could do this easily. It is very wordy so would do nicely for this I hope

Great ideas (both of them)and YES well worth taking the time to do. If the tables are fixable for accessibility then I would like to fix the.

It didn't even dawn on me that with the menu at the bottom of the code, I was adding to the problem not solving it. Between the menu and the tables I still have some work to do.

Thanks ever so much for these suggestions. I will get started on them. I want my visitors to enjoy the site no matter what their situation.



d a v e -> RE: Please critique my swan song (8/8/2007 7:58:49)

you have some extra spaces in your list that make some items appear (further) indented

otherwise looks nice and simple

your alt text should be alternative text for your image, so for the main image (logo) it should contain the same text(meaning in the alt attribute than is in the image) in particular the phone number!



JacieClaeys -> RE: Please critique my swan song (8/8/2007 8:34:42)


quote:


you have some extra spaces in your list that make some items appear (further) indented

Which list do you mean.? The bulleted list on the home page?

Thanks for the heads up on the alt for the logo. I think I must have done that 5 or 6 years ago. See what copy and paste will get you[:D] Will get that changed pronto.



d a v e -> RE: Please critique my swan song (8/8/2007 15:45:23)

yes, the bulleted list on the homepage



Donkey -> RE: Please critique my swan song (8/8/2007 19:39:46)

On larger screens it would look better if it was centered. Use a containing div set to margin: 0 auto; or the old depreciated <center></center> tags would be OK as you are using the transitional doctype. I tried both using the developer toolbar's edit html feature and your top navigation stays left so that would need some attention.

Your fish motif looks a bit ragged I'm sure there are loads of better ones available free on the web. (From a commercial point of view I would leave it off because you are restricting your market considerably - non christians need lightbulbs too)



Tailslide -> RE: Please critique my swan song (8/9/2007 3:12:56)


quote:

ORIGINAL: JacieClaeys
Thanks ever so much for these suggestions. I will get started on them. I want my visitors to enjoy the site no matter what their situation.


Let me know if you need any help with setting up the skip links or the table stuff - I'm around most of the time this week (although obviously quite a few hours ahead of you!).



JacieClaeys -> RE: Please critique my swan song (8/9/2007 11:34:01)


quote:

ORIGINAL: Tailslide

Let me know if you need any help with setting up the skip links or the table stuff - I'm around most of the time this week (although obviously quite a few hours ahead of you!).


Thanks ever so much. I am sure I will need help, even tho I want to try working with it first to see what I can do. I am such a clutz about this stuff. I know just enough to be dangerous.
You would think in 10 years time I would know it backward and forward but I can't write code, but I can fix it, I can't do CSS but I experiment until I get what I want. It is a long and laborious way to do things and then months go by before I need to do something again and I can't remember what I did to get it.

Just too busy running a business to take the time to learn ALL this stuff and that's why this is my "swan song".



JacieClaeys -> RE: Please critique my swan song (8/9/2007 11:50:27)


quote:



On larger screens it would look better if it was centered. Use a containing div set to margin: 0 auto; or the old depreciated <center></center> tags would be OK as you are using the transitional doctype. I tried both using the developer toolbar's edit html feature and your top navigation stays left so that would need some attention.

Thanks Donkey.I will go to work on the centering. I agree with you, it is always better to center. I think I can fix the menu to coincide.
quote:


Your fish motif looks a bit ragged I'm sure there are loads of better ones available free on the web. (From a commercial point of view I would leave it off because you are restricting your market considerably - non christians need lightbulbs too)

You are right. I will go looking for a new fish. I forgot how ragged it has gotten. Leaving it off is not an option, however I don't find that non-christians don't buy because of the fish. Just sent a nice order to Shah Shamir this week. You are correct that
everyone needs light bulbs.



Tailslide -> RE: Please critique my swan song (8/9/2007 12:04:04)


quote:

ORIGINAL: JacieClaeys
I experiment until I get what I want.



Yep that's pretty much what I do too! [:D]



JacieClaeys -> RE: Please critique my swan song (8/10/2007 15:41:44)


quote:

ORIGINAL: Tailslide

Let me know if you need any help with setting up the skip links or the table stuff - I'm around most of the time this week (although obviously quite a few hours ahead of you!).


Ok, I have the Site map updated and on the home page at top left with the "Skip to Navigation" with it.

www.nrgsaver.com

3 questions.

1. What do I need to do about the "Skip to Navigation"?
Do I need to put up a separate page with just the nav links on it or does the screen reader just read the links to them that are on the home page down where skips to. I read the article you provided and it looks like that is what happens, but must admit some of it was greek to me. Without a screen reader I can't tell what happens.

2. Do I need to put this code on every page or just the home page? It would seem I would need it on every page since the same CSS menu is on every page but don't know for sure if that is the case.

3. I am having a problem validating the code where I added the screenreader code. It is telling me that on line 50 .....

unclosed start-tag requires SHORTTAG YES

I have tried everything I can think of to close this tag and nothing works. Can you tell me how to fix this?

Many thanks for all the help ya'll have given me.

Now it is time to start centering the pages per Donkey's suggestion.



JacieClaeys -> RE: Please critique my swan song (9/16/2007 12:15:14)


quote:

ORIGINAL: Donkey

On larger screens it would look better if it was centered. Use a containing div set to margin: 0 auto; or the old depreciated <center></center> tags would be OK as you are using the transitional doctype. I tried both using the developer toolbar's edit html feature and your top navigation stays left so that would need some attention.

OK. I think I have made every correction suggested. The centering with the CSS drop down was the biggest challenge but well worth the effort. I changed the bg color and like it so much better.

I just don't know how the menu is holding up in the different browsers. For a week I had to run the site with the menu and bottom footer all cattywampus in FF but it was OK in IE(now that's a switch isn't it) but now it is fixed at least in my FF and IE.

Anyone with any feedback on how it looks on your machine?

Any checking help is much appreciated.

PS: Tailside......did I do the accessibility correctly? I am working on doing a page for each of the menu headers that will contain links to all the other pages in each catagory but not done yet.
Jacie



Tailslide -> RE: Please critique my swan song (9/16/2007 13:24:30)

Hi - I'm on the mac at the moment so can't really check out the accessibility angle from here. The site looks ok except the menu is offset to the left very slightly - not a disaster to be honest.

As far as the separate pages for the menu items - that's the approach I've used before but if you find that too arduous - just a link to a sitemap with text links fairly early on in the code (which you do via the skiplink) is a major asset. As long as all the pages are accessible and locatable (is that a word?) without having to go to dozens of pages then you're ok in my opinion.

I'll have a proper look tomorrow.



Donkey -> RE: Please critique my swan song (9/16/2007 13:43:12)

Your top and bottom menus aren't centred in FF. I think the problem is that you have used absolute positioning, and placed the code out of it's normal position in the flow of the document.

For the top margin I copied all your code and dropped it into your containing div the one with an ID of "body" (could be confusing). I changed the position to relative and to get it in the correct position I had to use negative top and left values. I'm not sure why, probably to do with positioning elsewhere.

If you try that it will be a start and you need to do something similar with the bottom navigation also to centre it.



JacieClaeys -> RE: Please critique my swan song (9/16/2007 14:02:42)


quote:

ORIGINAL: Tailslide
As far as the separate pages for the menu items - that's the approach I've used before but if you find that too arduous - just a link to a sitemap with text links fairly early on in the code (which you do via the skiplink) is a major asset. As long as all the pages are accessible and locatable (is that a word?) without having to go to dozens of pages then you're ok in my opinion.


I had all those pages done on my old site with the regular menu running down the left. I will probably be able to convert them rather easily. The only ones that will be a problem are the ones we have added new products that weren't available before(like compact fluorescents). They could get pretty crowded.

I have two pages with all the products on them with direct links. The site map and the lobby at http://www.nrgsaver.com/mall/lobby.asp The lobby even has pictures of the products. I think I need to add that page to the Skip Link. I forgot all about it. That way they could either click on the lobby or use the skip link and hit the site map first thing.

I moved my site map to the first link in the skip link so I hope that will help. I ran the site through an accessibility checker and didn't do too bad, but was sure a long way from perfect. It is really difficult when you don't have a reader and you don't know what people are experiencing who are using one.

I ended up having to hard code the menu to make it center and maybe just a minor adjustment in the code a pixel or two will line it up, altho it lines up on my machines in both IE and FF. I was afraid it might be all over the place on other people's machines. I have learned that what I see and what others see can be two entirely different things sometimes.



JacieClaeys -> RE: Please critique my swan song (9/16/2007 14:33:22)


quote:

ORIGINAL: Donkey

Your top and bottom menus aren't centred in FF. I think the problem is that you have used absolute positioning, and placed the code out of it's normal position in the flow of the document.

For the top margin I copied all your code and dropped it into your containing div the one with an ID of "body" (could be confusing). I changed the position to relative and to get it in the correct position I had to use negative top and left values. I'm not sure why, probably to do with positioning elsewhere.

If you try that it will be a start and you need to do something similar with the bottom navigation also to centre it.


FF has always been the problem. IE seems to put it where you want it.

Thanks for the heads up on the positioning. I have thought while struggling with this that I was giving mixed messages between the CSS code and the page code. I even tried the negative values for the left but didn't change it to "relative" but left it at "absolute" which is probably why it didn't work.

I used the Seoconsultant/Tanfa CSS menu which means I don't know diddly squat about how this menu really works or the CSS behind it.

Here is the CSS code for the menu as Tanfa supplies it:

#menuwrap{
background:none;
width:775px;
border-width: 0px;
border-style:solid;
border-color:#D56A00 #FFE7CE #FFD2A6 #FFE7CE;
position:absolute;
top: 163px;
left: 113px;
}

the only thing I changed was the left and width then made them consistent with the page copy.

The CSS "body" code is:
#body {
margin-left: auto;
margin-right: auto;
width:715px;
padding:30px;
background: #FFFFFF;
color: #000000;
text-align: left;
}
which I had to do in order to center the body.

I wish I had a better way to learn these things than search and destroy. There just not enough hours in the day to learn what I need to learn.

I will go back to the drawing board with your suggestions about getting things in the right order and see what I can do. You are right about the menu and the bottom. They seem to be hinged at the hip. When one moves so does the other.

Many thanks for your help. I never would have made the pages better without you all, and from an aesthetic point they look so much better centered. I had never looked at them in 1024 and 51% of my customers are using it.



JacieClaeys -> RE: Please critique my swan song (9/19/2007 14:44:29)


quote:

ORIGINAL: Donkey

Your top and bottom menus aren't centred in FF. I think the problem is that you have used absolute positioning, and placed the code out of it's normal position in the flow of the document.

For the top margin I copied all your code and dropped it into your containing div the one with an ID of "body" (could be confusing). I changed the position to relative and to get it in the correct position I had to use negative top and left values. I'm not sure why, probably to do with positioning elsewhere.



Ok, Now I am ready for a Donkey Test Drive. On my machines it centers both top and bottom and in 800 and 1024 AND in IE and FF.

http://www.nrgsaver.com/checker/index.htm

What I ultimately had to do, for anyone else who might come upon this problem,(I wasn't the only one as a Google search proved out), was because the top measurement had to be absolute, in order to place the menu on the page under the logo, I finally wrote another div that was margin: 0 auto and placed the WHOLE menu inside of it. I guess my new motto should be "When in doubt write another div"[:)]



d a v e -> RE: Please critique my swan song (9/19/2007 14:49:12)

you've resized your logo in the html but it's not exactly the same size so it badly distorts the text ;)

otherwise it's looking more presentable!

btw do you stock fish shaped bulbs :) (yes i know what the symbol stands for... )



JacieClaeys -> RE: Please critique my swan song (9/19/2007 15:39:45)

Thanks for the heads up Dave. I have redone the html and resent the logo. Does it look ok now?



d a v e -> RE: Please critique my swan song (9/19/2007 16:22:08)

yep. well actually the tex edges look a little fuzzy but i guess that's because it only weighs 24k ;)



JacieClaeys -> RE: Please critique my swan song (9/19/2007 16:31:13)

Do you mean the text inside the logo? Such as the name and town etc?



d a v e -> RE: Please critique my swan song (9/19/2007 16:33:41)

yes



JacieClaeys -> RE: Please critique my swan song (9/19/2007 16:46:59)

Ok...its back to PSP. Many Thanks



Donkey -> RE: Please critique my swan song (9/19/2007 19:19:33)

It looks a lot better now, although Dave is right about the text in the header. As the text looks fairly standard (i.e. you are using fonts likely to be available on most computers) you could try taking all text out of the image and instead absolutely positioning divs containing text inside a containing div for the image. That way they will always be in the same place in relation to the image, and as it is text not a graphic it can be resized by the user easily.



JacieClaeys -> RE: Please critique my swan song (9/19/2007 20:52:29)

I can't tell you how much I appreciate all the suggestions and the critique. If you all had not been willing to look at it, I would never have known my menu was all over the page, the pages not centered, and a dozen other things I just never thought about. When you don't do this type of work for a living, the things that are second nature to you, is a gauntlet to hurdle for me.

I am thinking now that the home page looks very bland. I am thinking of finding a nice photo of the Piney Woods, which is where we are located, and muting it and using it as a background for the body of the page. That should prove to be another challenge.

I'm off to correct the code on my 90 pages so the menu is right on all of them, then I will get to work on the logo.

Thanks to all of you



markhawker -> RE: Please critique my swan song (10/8/2007 12:18:00)

Jacie! You're back! Glad to see you're still working on your site [:D]



JacieClaeys -> RE: Please critique my swan song (10/8/2007 15:45:26)

Hi Mark,

I am just like a bad penny. Keep coming back.[:)]

Last week proved to be my greatest challenge yet. Someone hijacked my home page and one other page that isn't accessible to the site and put a virus and (I think this is the case anyway) a bunch of code that I think was meant to use my email for spamming. It had a bunch of pharmacutical code involved.

I found the code on the home page easy enough, and deleted it and uploaded it again. This went on for 5 days because they had code hidden elsewhere that looped and renewed it. So I had to go thru the code on all 100+ pages and finally found it and got rid of it. I learned alot about security from it all but not nearly enough. It is really tough keeping ahead of these guys. If they only used all those brains for something worthwhile no telling what good things it would produce.

Glad to see you are still around too Mark.



Tailslide -> RE: Please critique my swan song (10/9/2007 2:37:54)

Good god Jacie - how on earth did that happen?



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125