Welcome!

[manycheese]

Hi,
I'm a second year digital media development student and im trying to create a portfolio site to try and showcase my coding and design so that I can get an internship starting next summer.

I was just wondering if some people could give me some feedback/adive on the design and coding.

the address is: http://www.maxhurl.co.uk

Dont be afraid to be too harsh its important I get this right.

Thanks,
Max

[Andy]

• There's no H1. The content of the H1 should also be reflected in the title.
• Improper use of headings. Headings should introduce new sections to the page.
• Does not work with JavaScript disabled. Make things work without JavaScript, then add that on as an enhancement.
• Use anchor tags for links, not headings.
• Don't use <b>.
• Move scripts to the bottom, just before </body> to prevent blocking of parallel downloads.

Try and code it to be design-agnostic, please.

[manycheese]

• There's no H1. The content of the H1 should also be reflected in the title.
• Improper use of headings. Headings should introduce new sections to the page.
• Does not work with JavaScript disabled. Make things work without JavaScript, then add that on as an enhancement.
• Use anchor tags for links, not headings.
• Don't use <b>.
• Move scripts to the bottom, just before </body> to prevent blocking of parallel downloads.

Try and code it to be design-agnostic, please.

Firstly thanks for the response!
I've tried to change all the stuff you mentioned:

I added a hidden h1 tag... thanks for reminding me about that!

It does work without javascript but only if you load up the page with it disabled and not if you disable it after loading the page with javascript enabled.

I removed the <b> tags and replaced with <span class="bold"> is this an acceptable work around?

I also moved the scripts to the bottom of the page and got a ajax based twitter feed to try and sort out the slow loading time.

thanks,
Max

[Andy]

It does work without javascript but only if you load up the page with it disabled and not if you disable it after loading the page with javascript enabled.

Actually, it is disabled. The issue is not that but how your site is built.

Instead of hiding the navigation menu through CSS, you should instead be dynamically generating it through JavaScript otherwise it will still be visible on some browsing mediums.

[manycheese]

Hi andy,
I've got the navigation dynamically creating now.

i was just wondering if you could explain what mediums it may have caused a problem on?

[Andy]

Hi andy,
I've got the navigation dynamically creating now.

i was just wondering if you could explain what mediums it may have caused a problem on?

Text-based browsers, screen readers, mobile phones etc.

Why are you still using H4 for links? Seriously, dude. If I had a disability, I'd be completely unable to use it.

[manycheese]

Well I sorted out the links...

but do you or anyone have any comments on the design of the site?

[Andy]

Well I sorted out the links...

No, you didn't. You merely substituted the headings for paragraph tags, which is still wrong.

I've already told you to use the anchor tag (<a>).

[manycheese]

opps sorry that was very noobish of me... I dont really know what i was thinking then.

i think i did deserve the silly star trek gif.

Now I have finally changed the p's to A's

[Andy]

Now I have finally changed the p's to A's

Great. Third time's the charm, I guess.

You'd also want to make the arrowheads anchors as well. Give them some text content and hide it with CSS (negative text-indent) so they are accessible.

Also, you might want to return false on your click events so that the links do not follow the url (#).

[manycheese]

ooh I havent ever come across how to hide the '#' in the url worked a charm.

I gave some text to the arrows. I should of really of noticed that one as well... I think after all your advice im going to start assesing my sites for html accessibility a lot more.
Thanks!

[Andy]

You should change this:

Code: Select all

<a href="#"><div class="scrollButtons" id="fwd">Forwards</div></a>

into this:

Code: Select all

<a id="fwd" class="scrollButtons" href="#">Forwards</a>

..as block-level elements shouldn't go inside of inline-level elements.

Also, you might want to add overflow: hidden; so the dotted outline doesn't stretch to the far left of the screen when it receives focus.

I think after all your advice im going to start assesing my sites for html accessibility a lot more.
Thanks!

Great.

Glad I could make a difference.