Request for comments

[phoneguyv]

I'm in the process of re-doing the website for a diveshop that I have recently become a partner in. The current site is real out of date as far as content goes.

This will be the home page.

http://www.valenzuelam.com/ssd

I've only got this page uploaded so far while I get comments from the other partners.

I'm mostly interested in markup feedback but I don't mind design criticism. My goal is for a quick loading simple page that can then lead to the bulk of the information with similar style.

I know the links on the left don't do anything with IE but I don't mind that. I'll consider it my very modest contribution to introducing others to Opera/Firefox. I'll have a links page informing people of these other browsers among other things.

I've done a fair amound of research in building the head of the document as well as how content is used by search engines. Wrong terminology I know but you more experienced people get the idea of what I'm trying to say.

As for design, I'll tweak the text to follow the curves a little. I'll also be putting three more small graphics on the right to balance out against the left side.

If there are any lightweight mods you can recommend I'm open to suggestions.

Thanks in advance,

V

 

[TamedTech]

Hey Buddy,

With regards to mark-up, you can validate it against W3C Standards, you have quite a few issues, but i'm sure you'll iron them out quickly.

XHTML

http://validator.w3.org/check?verbose=1&uri=http://www.valenzuelam.com/ssd/

Your CSS doesnt havnt quite so many error's but its worth cecking out.

CSS

http://jigsaw.w3.org/css-validator/...http://www.valenzuelam.com/ssd/styles/ssd.css

You've made a very solid start though, and YAY, no tables for layout, good man ... I hate tables! and you've also used an unordered list for your navigation.

You're definatly on the right track, just have a go at making that code valid. And make sure you check how the page loads in all the browsers, such as IE, FireFox and Opera.

Thanks,

Rob

 

[BillyRayPreachersSon]

It's looking pretty good from here.

Mark-up wise, I'd suggest that the footer lines don't really need to be H1 or H2 elements - maybe an H2 and P elements, or even just P elements.

The left-hand menu is odd in that the BG only appears in Firefox when hovering on a link, and not at all in IE. This seems weird - maybe it should be on all the time?

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[phoneguyv]

Thanks for your time and comments. I appologize for not having cleaned up some of the left over CSS that was from earlier revisions. I think a couple of the errors fell from that category.

The 'script' thing was something I read that said adding it will take out the jittering way IE loads or reloads. It didn't work and I forgot to take it out.

Wow, those validators are wonderful. Now I have more studying to find out what it all means. I'm sure it will be worth the effort.

As for the menu on the left, I hashed out how I'd like the default to be for IE and can't say I'm fixed on this being the final product or not. I may add some of the work arounds I've read about to make IE view the page as does Firefox/Opera. If I had an easy way for IE to see the 'hovered' look all the time and the others to see it as it is now I'd do it but that would probably add a lot to it all and that would defeat the purpose.

The reason for the footer being H1 and H2 is I read the search engines put more value in those than in a P for example. Is that true? Can it cause any problems doing it the way I have?

I want the end result to allow an easy change of style sheets to change the look. Hopefully when I'm done with getting the markup validated and a decision on it's final look, I'll have several style sheets that will be rotated frequently.

Thanks again for the comments.

V

 

[ChrisHunt]

That's coming along nicely. A few tweaks and observations in no particular order...

You've got your main page header/title/logo thingy displayed as a background image instead of an <img> element. That means you can't deliver [tt]alt[/tt] text to those who don't see images (search engine spiders, for instance). Consider using an <img> instead.

You're using absolute positioning to place each paragraph of your content. Is that really necessary? It's gonna be a PITA to maintain the site if you have to do it for every paragraph of every page. It also means that if you resize the text, the paragraphs run over eachother. I'd rework the graphics so that the sides of the whatever-sea-creture it-is are more vertical, so you can use a repeating background to represent it. Then you can have a content area that you can just pour anything into without having to worry about positioning it.

I expected that PADI logo to be clickable, maybe another case to use an <img> instead of a background image.

Black and white is a harsh colour combination to work with, and doesn't really say "scuba" to me. It may be a cliche, but I'd look to use more sea blues and greens. I'd also try using a sans-serif font instead of Times.

Markup-wise, there are places where you're going the long way round to apply your CSS. As a rule of thumb, if you find yourself applying a [tt]class[/tt] to every element, you're probably doing something wrong. For example, in your menu:

<div id=linkbox>
  <ul>
    <li class=nav><a href="pages/main.html" title="[...]">Main</a></li>
...

You don't need to have that [tt]class="nav"[/tt] on every <li>. Get rid of them, and change your CSS rule to

[red]#linkbox li[/red] {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 42px 0 27px;
}

By the way, I'd call that first link "Home" instead of "Main".

The "jittering" way IE loads may be due to how you've linked to your CSS. Instead of doing an [tt]@import[/tt], do this instead:

<link rel="stylesheet" type="text/css" href="styles/ssd.css" />

The import method was how we used to do it so as not to confuse Netscape v4. That browser's pretty much dead now (unless your server logs say different!) so you can use the <link> method instead.

If you want your [tt]#linkbox:hover[/tt] rule to work in IE, there are Javascripts out there which will make IE apply :hover properly to all elements. Mind you, I think I'd make those fronds visible all the time rather than just appearing on hover anyway.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[phoneguyv]

Chris,

Thanks - that's what I need to hear.

As for each list item having a class="nav", my original thought was to have a different hover image drop down to each link that the mouse was over. Then I realized I was way in over my head. I thought about z-index (if that's the correct terminology) as an option but decided to save that for a later revision, if it's possible. Anyway, thanks for pointing out that I forgot to remove them.

The padi logo image will be a link along with two or three others. After a week or so of tweaking images and puting this together (late at night after my day job) I decided to see if I was even on the right track. Thanks for the suggestion though, it reinforces ideas I had.

Thanks also for pointing out the use of <img> instead of background images. I meant to ask that in the initial post but forgot. I was curious about how relevant and important that is and you've answered that for me.

I'll take a look at implementing your color ideas. My thought was to keep the distractions to a minimum, but then you can obviously see my day job doesn't have anything to do with design! I lowered the opacity on the photo and am considering doing it to the padi logo and the others I put on the right side. Maybe more color is the answer instead of less.

Now I've got plenty to keep me going for a few days getting this in shape. Thanks again,

V