started summer knowing nothing and wanted to learn! This is what I came up with!

[sam_h]

Hi one and all, firstly thank you to anyone who may have (without realising it!) helped me during this project.....forums like this have been so useful

 

I am looking to add some dynamic php pages to the site, and this forum has been class...so thank you!

 

I set myself a task this summer to learn web-design, from coding through to graphic design from scratch (didn't know a script from a sausage to start with!)....and this site is the result

 

http://onyahead.com

 

I have grown to quite like it now and am looking to pursue the project further and am interested in people's thoughts about it, specifically:

 

Usability

Design

Clarity

SEO qualities (or lack of)

 

regards and thank you!

 

Sam

[Fadion]

First of all congrats. You've created a really nice design. Overall I like it, being the design and the way you handled content. But critiques are always welcome, right?

 

Main Page

- I like the handwritten "i was inspired into...", but the next "get your football fix" doesn't look quite good. Also some letters like the "g" and "y" are cut out.

- The "ONYAHEAD.com" text is nice, but a bit more work on it could make it stand out more. Some details on the letters outside (cut them out a bit) should look nice.

- The three columns are a bit stuck to each other and make them difficult to read. In IE7 they look better, but in FF3 not. Also some padding could go well.

- The links that trigger the slide-in animation could be toggle links. Meaning that they open and hide the content, while you can leave the hide link at the end. I was a bit confused in the beginning as the content was long and i couldn't see the [hide] link, but clicking on the links at the beginning triggered the slide-in again.

 

Sub Pages

- Not much to say here, except that the Quick Links at the bottom should be more visible

[sam_h]

thank you for your feedback...I will set to looking at making the appropriate changes

how do you think it is from a SEO perspective?

[TheFilmGod]

SEO is average. You only use the <h3> heading. This is improper... you should use them in correct order and not skip numbers like that. You do not have alternative text for images. Everything looks pretty good on par.

[sam_h]

SEO is average. You only use the <h3> heading. This is improper... you should use them in correct order and not skip numbers like that.

 

just a quick question in regard to that, i use <h1> tags elsewhere on the site (in all of the blogs as headings)...i have tried to use the same CSS styles throughout the rest of the site (ie on the homepage). does that make a difference?

[DarkWater]

I really think it came out spectacular for someone who just started.  Good job putting everything together, you have potential. =)  Some things I'd fix:

 

1) http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fonyahead.com%2F

Fix those.  Some people obsessively care and actually won't enjoy visiting your page.  Crazy, but true.

 

2) Use semantically correct headings, as TheFilmGod said.  You need to have, usually, one <h1> tag, then sub-headings, increasing in number (<h1>, <h2>, <h3>, etc) as they become (potentially) less and less significant and more nested.

 

3) Fix the links for the slide-ins to not make them reload the slide-ins, as GuiltyGear said.

 

4) I like the clean(er) URLs.  Most sites don't bother these days, but it's important.

 

I'd also suggest like, more content.  But otherwise, GREAT job.  Really.

[DarkWater]

Ah, one more thing.  There's no easy way to get back to the home page other than the back button!  You might want to make the banner into a link to the home page.

[TheFilmGod]

I know you just started out... but I will seriously treat you as a pro. You code better than 50% of the people on these forums. Did you read a good css book to learn how to code? What was your strategy... you should tell us so others can learn.

 

Anyway, there are some problems w/ semantics. You can not nest an image within a heading. I don't think this is invalid or necessarily incorrect, but I don't think that's logical from a "heading text" view. You must enclose every text w/ a < p> or some heading, or some other text block tag. This is a very basic rule. You MUST have alternate text on ALL images. Otherwise, your site will not validate.

[DarkWater]

I know you just started out... but I will seriously treat you as a pro. You code better than 50% of the people on these forums. Did you read a good css book to learn how to code? What was your strategy... you should tell us so others can learn.

 

Anyway, there are some problems w/ semantics. You can not nest an image within a heading. I don't think this is invalid or necessarily incorrect, but I don't think that's logical from a "heading text" view. You must enclose every text w/ a < p> or some heading, or some other text block tag. This is a very basic rule. You MUST have alternate text on ALL images. Otherwise, your site will not validate.

 

Yeah, that really came out nicely for someone who just started.  I've never seen something that's actually not completely repulsive come from someone who just started this stuff, but I really have to hand it to him...it came out nice.  But yeah, there's semantics issues and I already gave you a validation link.  Fix those.

 

P.S: I would never get to use the word "semantic" if not for the W3C.  What a cool word.  Finally, something to thank them for.

[sam_h]

Thank you everyone so much for your feedback....I'm pleased you have liked the site!

 

@ DarkWater, I will go through your points. I've not really looked into validation yet, but I am beginning to realise that it might possible just be important!!

 

As for point 3, I used the scriptalicious javascript library to create the slide-in (which for me was obviously a new experience!) and I couldn't work out how to make it a 'toggle link' (which I think is what someone reffered to it as)...hence my inclusion of a [hide] link. Do you have any pointer re this?

 

@TheFilmGod, firstly thank you very much! It all started about may time this year when I started a Wordpress blog on WestHam football news. I had a play around with that and soon realised that if I really wanted to personalise the template I was using I would have to dabble with the php. Didn't have a clue at first but then got really into it....trial and error, seeing what worked and what didn't. That also greatly helped me with grasping the basics of CSS. I started with a very basic original template and then played around with it....probably not the right way to do it, but I got hooked!

 

Things progressed and I moved onto beginning my own site from scratch.....greatest thing I ever did in regards to this was download the 'sumbleupon' toolbar. Someday I would just sit there stumbling through web development sites, bookmarking anything I thought could be useful. So a lot of reading yes, but not a single book as yet....although I did have a look at some in a shop today!

 

Currently I am learning the basics of using mySQL and PHP to generate some dynamic content that shows some 'network' stats...once again, something completely new, but I continue to be astounded at the potential of the internet....and the generosity of people who write tutorial and people who contribute on forums like this, MASSIVE help and couldn't do any of it without you!

 

(if any of you happened to look through the style sheet for my site and wondered why there are a lot of styles on there that are not currently being used, they are just things that I have tested and not liked but not got round to taking them out of the sheet!)

 

Sam

[DarkWater]

For toggle in script.aculo.us (which I LOVE):

 

<a href="#" onclick="Effect.toggle('your_div', 'slide'); return false;">Toggle</a>

 

Also, if you ever need help with something that you get stuck on, feel free to PM me.  That site really impressed me for someone who just started, even though it didn't have anything amazing.  It was very presentable and appealing.

[sam_h]

thank you very much Darkwater.....what are you like with mySQL queries?!! 

 

I will try to implement that toggle script...i have seen a few js libraries, but scriptalicious is special!! at least it stood out to me anyway...

[DarkWater]

I'm quite proficient at MySQL queries, so they're not a problem for me.  Why?

[sam_h]

Have dropped you a PM darkwater

 

Thank you everyone for your help and encouragement, will get onto the changes as soon as I have 5mins!!

 

Sam

[sam_h]

Hi people, I have made most of the changes you suggested above.

 

With regards to validation, it now validates down to 2 errors although I am not so sure how to correct these.

 

Another thing, I made some changes to the drop-columns. I think I have improved them in terms of their alignment and cross-browser compatability (in IE there used to be a stupid break that appeared directly beneath the header image)

 

Also changed the heading tags as appropriate

 

Thank you so much for your help and encouragement! (been working on a dynamic page that displays network stats...theres not too much to it and the css corners don't display well in IE, but I am probably a bit too excited about the mySQL/PHP code I got together with everyone's help here to display the stats! Thank you!! the subdirectory is /about.php if you are interested!)

 

Sam

[DarkWater]

For the first validation error, it says that you need an alt attribute on every img tag, and it's absolutely right. =P  Simply add an alt="" and add a little description that will display if the image can't load.  The second one is because you're only supposed to use IDs once, and you use "left" twice.  Change it to a class and use class="left" instead if you plan on using it more than once.

[sam_h]

oh, i thought I had done all the alt tags! must have missed some!

 

cheers darkwater, will read around the topic of classes etc, I've not quite got to grips with them yet!

[DarkWater]

Not PHP classes, just to let you know.  CSS classes.  They're like reusable IDs.  For example, let's say you want to have 32pt font and an obnoxious 15px dashed red border to certain <h2> tags.  You certainly wouldn't make 20 IDs for that.  You'd do:

 

style.css

.obnoxious {
   font-size: 32pt;
   border: 15px dashed red;
}

 

HTML file:

<h2 class="obnoxious">This is obnoxious!</h2>
Some text...
<h2 class="obnoxious">This too!</h2>

[sam_h]

Hi again!

 

So i've been away for a bit and worked through everyone's suggestions. I have put together some dynamic php pages such as latest news and comments and also my about page.

 

There a still a couple of things I've not got round to changing, but I was hoping for some advice re:my navigation system for pages other than the homepage.

 

have a quick look at onyahead.com/latestnews.php

 

I found that right hand grey space a pretty difficult space to use, and I have tried with this page to make a 'tabbed effect' system out of CSS. It's obviously by no means perfect and there are a few things that I myself would like to change, but if anyone has any ideas as to how I could improve the tabs or generally create a better nav system, they would be welcomed! (or even a better way to use that grey space?!)

 

(I also realise that the green footer (which I am hoping to actually make out of a vector grass image one day!) does not align as I would wish. I am trying to work out how to make it cross the whole width of my #outer div...any ideas?! It works on html pages, but not php!)

 

Thanks, Sam

 

(also, my page rank has since become 2 for my homepage and 3 for my main blog, happy days!!)

[DarkWater]

That navigation ruined the color scheme of the entire page.

[sam_h]

more than happy to change that! i do agree they are pretty horrible, just the colours i went for when i tested the idea, just not round the changing it yet!

[cupidstoejam]

Sam,

I dont have the time to go back and see what everybody else has said. So you may see some repeats. First thing I do when building a website, is reset all my browser styles. Then I construct meaninful markup making use of H elements. The way your markup is constructed (XHTML) will go a long way when it comes to validation and accessibility. W3 has a great checklist for accessability... http://www.w3.org/TR/WCAG10/full-checklist.html. I ALWAYS do all my XHTML before styles so I can see how it will look to a screen-reader. All XHTML should validate before you start to style. I would also research the different <!DOCTYPE that can be used. These are just some helpful ideas to push you further along.

 

1. The first thing I did to your site, was check to see if it validated. All your pages did!! That was very impressive!!

 

2. I see that your H1 element can be used in a better way. "read footbal news" should be your h2, not h1. H1 should be your masthead. see the below link for more info on image replacment. http://www.mezzoblue.com/tests/revised-image-replacement/ Screenreaders need to read your H1 as the title of the page, or logo.

 

3. Inline styles should be avoided. Try and keep content separate from design. This is why CSS was established.

 

4. I think your masthead image is way too large. You want all your important content to appear "above the fold". With lower screen rez, all good content appears below the fold.

 

This is enough for now. I very very pleased with the progress you have made. You code better then many good designers I've seen with many more years under thier belt then you. Hell, some of them dont make good use of meta data, unlike you. Good work Sam, keep up the research. When you get more comfortable with CSS, I recommend buying this book by Andy Clarke  http://www.transcendingcss.com/. Good luck Sam!

 

 

 

 

 

[sam_h]

thanks for the reply cupid...and also the encouragement!

 

could you explain to me briefly what the difference it between Image Replacement and using an alt tag because from what I have just read about IR, it appears to do something similar?

 

As for the inline styles, for some reason it was the only way that I could seem to remove the border around my img links....I do now know a touch more about CSS so will have a try that way around.

 

 

[cupidstoejam]

Screen readers need to be able to understand webpage structure to properly convery the information to the user. If an image has just an "alt" tag, that tells the screen-reader that its just an image. If you tell the screenreader that that image is a heading, it will be easy for the user to understand the structure better. screenreaders voice the content to the user. If its an H element, the reader says "heading 1" ...short pause... "Welcome to my site, or whatever". Its important to the user who makes use of screenreader, to have a very well structured page to understand the site better. The average person will not see a difference at all. I would research accessibility compliance. Soon, it will be the law. You can actually be sued for discrimination, but unlikely.

 

to take the border off an image link...

a img {border: 0;}

 

or, whats really cool...This will make a border appear on hover. The transparent tag is a must, or you page would jump on hover to compensate for the border that wasnt there before.

a img {border:3px solid transparent;}

a img:hover {border:3px solid red;}

 

 

[sam_h]

apart from the colour scheme being bad, I generally wasn't happy with the navigation system I posted above.

 

I went away and put together the following:

 

http://onyahead.com/latestnews_test.php

 

Just focussing mainly on the navigation, what are people's views?

 

I have a few of my own doubts/concerns but was interested to know if anyone has any more before I implement it across my site.

 

Sam

 

(as for the accessability issues and the semantics of the headings,....they are next on my list!)