windsports.co.za

[johnflower]

I built this site as a favour for a friend. It's www.windsports.co.za

[Connie]

Very colorful, it evokes summer feelings!

For my feeling, the fonts are too big.

There are some errors, which you might fix, see here: http://validator.w3.org/check?uri=http%3...ator%2F1.2

There are some CSS problems with the fonts, you use font families which are not common,

font-family "Pacifico" is not available on most computers

more info here for example: http://randsco.com/index.php/2009/07/04/p680

I miss a contact form on the site ;=)

[johnflower]

Hi Connie,

Thanks for the input.

I reduced the font size.
I'm using Google fonts. Won't that work?

Fixed the errors.

I'll see if I can add a contact form.

Thanks!

[yojoe]

Mine 2 cents:
1. give the text blocks more space to breath.
2. less transparency in header section, as along with menu, because they are barely visible.
2a. colours for menu buttons could be surely a bit more contrasting

[johnflower]

yo yojoe!

thanks for the feedback. added some line height and margins.

made the menu text a little more visible.

changed the heading.

what you think now?

[yojoe]

Way better now !
Although 10-15px top margin to <h2> for content container, a bit darker backg color for hover effect, and aligning "Topline kitesurfing and windsurfing equipment" to the right (to reveal menu) should finalize it

[johnflower]

Interesting tactic with the tag-line.

Right, sir, I have made the changes. Anything else? I'm all ears. :-)

And the h2 you refer to is actually h1. I'm very proud of that h1 ;-)

Thanks for your input!

[johnflower]

I also changed the BG image to stretch, as explained in this great post: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

Seems to work quite well.

[yojoe]

Actually I meant those

<h2>
Expert advice</h2>
<h2>
Kitesurfing equipment</h2>

and so on. <h1> was good since beginning
Paragraphs could have a small left indent.
and ul.nav-top li a:hover {} could have non transparent background or a dark-red
Hovered gray colour is imo a bit too dark. Maybe adding text-shadow would be a good idea for hover effect as well.

That's all I wanted to say

[polyfragmented]

Way to go, John!

I would consider changing the sidebar "pseudo headings" to real ones like h2 or h3. You started out nicely with the semantic page content headings already. (H1->H2->...)

The content headings have a nice bold font to separate them from the above paragraphs, but they sit exactly between paragraphs. I'd decrease the bottom-margin of headings so that they visually stick more to their paragraph right below.

[johnflower]

Guys, I'm feeling you here. This is good. All this help is fantastic!

@poly, I have to disagree about the sidebar headings though. I never use the h headings in a sidebar, if I can help it. In fact, it's one of the things I feel designers/developers get wrong. I think headings are meant to form part of the document only. If you were to check the headings structure with something like the Firefox web dev bar, and you have headings in the sidebar, you'll notice that very often it breaks the structure of a document (strictly speaking). However, this is a personal preference (albeit it one I would stick by come hole or high water).
I'm with you on the headings needing to be a tad bit closer to the content though. I've done that. You think it needs to be closer?

Any other input, welcome. I appreciate it a lot.

Thanks!

@yojoe,
I've added a very slight indent to the paragraph text. It does seem to look a bit better.
I've added more margin the the paragraph tags. It seems to make the blocks have more space, like you said it would.
What do you think of the blu buttons?


Thanks again for your input guys. It is appreciated a lot. I don't consider myself much of a designer :-(.

[yojoe]

hmm...with that visible hover colour make left&right padding of those buttons a bit wider - 7px.
I honestly can't decide if blue is better than an orange taken from sidebar

just noticed it that the bar between header and menu menu is more transparent.
I'd set the same transparency for both, as the black font merges a bit with the background photo.
Or maybe go with a slightly visible 1 px border, splitting the header and the text ?

Couple small changes, and you raised greatly navigation visibility and usability, along with page readibility.
Nice & simple

[johnflower]

I like the blue ;-) I increased the padding. It seems to look better.

I added a dashed line. I think it looks nice with the heading font. I also reduced the size of the tagline, and made it darker.

I added an HD monitor to my laptop, so now I have two screens to check sites with. The difference between the two are quite amazing. I wonder how many sites I've designed before, that looked fine on my laptop screen, but horrible on other screens. A real eye opener.

[polyfragmented]

@poly, I have to disagree about the sidebar headings though. I never use the h headings in a sidebar, if I can help it. In fact, it's one of the things I feel designers/developers get wrong. I think headings are meant to form part of the document only. If you were to check the headings structure with something like the Firefox web dev bar, and you have headings in the sidebar, you'll notice that very often it breaks the structure of a document (strictly speaking).

Just a quick reply for an exchange of opinions. I guess one way of finding out would be to use a screenreader and check if using headings for sidebars imposes navigational problems for impaired users. I don't see where else it would really matter right now.

As to breaking the structure of a document, it may appear that way, but since an HTML is structurally linear, using headlines for sidebars (below main content) makes perfect sense to me. I admit that the topic is not as straight-forward as I'd like it to be though. A web searched showed ambiguous results.

I'm with you on the headings needing to be a tad bit closer to the content though. I've done that. You think it needs to be closer?

I personally like it much better now!

[johnflower]

Thanks for the reply poly!

I think, on the sidebar heading issue, if you were to use h headings, I think one would have to begin with the h1 heading, strictly speaking. Well, that's the way I've got it broken down in my head, in any case. The other option is if a special sidebar heading is introduced to html.

I won't be starting a revolution about it though. These are personal preferences, and I certainly won't impose it on any other designer or developer (unless, of course, they're working on one of my sites).

Thanks again for your input, and everyone's help. Much appreciated!

[polyfragmented]

John,

I won't be starting a revolution about it though. These are personal preferences, and I certainly won't impose it on any other designer or developer (unless, of course, they're working on one of my sites).!

After some research, I'm coming to the conclusion that even the veteran webdesigners I asked or read about have no definitive answer to the heading question.

I do see your point to some degree now though. It does make sense to confine headings to the main content in some cases.

Keep up the good work on your site! Rock on.

[johnflower]

I think I should perhaps consider starting a revolution. I could start a movement and call it "Changing of Heading Organization Priorities", or CHOP, for short. Hehe. All welcome to join!

Thanks poly. To be honest, I have become almost religious about the whole heading thing. I think what did it for me was seeing people use headings to style content, instead of CSS. The logical conclusion, looking back at why the web was started (web pages, for me, are basically Word documents, online, with some nice pictures), I kinda chose my stance on where I am now.

As always, thanks for the input ;-)