I have finished my portfolio after all the great feedback from all of the members and would like to know what you think of the final piece and if there are any minor changes that I need to do to make it top notch quality..

 

Cheers,

Luke

A link wouldn't go amiss !!!

Lol im such and idiot, did this last time i posted it as well.. you think id learn

 

http://www.alternativestuff.co.uk - My portfolio

 

looking forward to your comments

Like the site design, the colour scheme and the logo look great, its got a nice,playful feel to it which i like?!!? Not totally convinced with the black/grey repeating background , seems a little distracting , maybe you could try a subtle gradient or something instead ?? Well done with the validation though (any chance of making it 'strict'? ....sorry im a picky bugger!) Well done though , you have kept the design clean and simple and it works !!

Looking better, just a couple of things:

 

I still get a flicker on the link hover images.

 

Also your validation links to http://validator.w3.org/check?uri=referer and to my knowledge that only work if the browser sends the referer header. These links dont work for me so its proberbly better to use the following instead:

 

XHTML

 <p>
 <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alternativestuff.co.uk%2F">
 <img src="http://www.w3.org/Icons/valid-xhtml10-blue"
 alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>

 

CSS

 <p>
 <a href="http://jigsaw.w3.org/css-validator/validator?uri=www.alternativestuff.co.uk%2Fstyle.css&
 profile=css21&usermedium=all&warning=1">
 <img style="border:0;width:88px;height:31px"
 src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
 </a>
</p>

slimboy I'm not too sure about the background either, that's one of the little things i need to fix

 

AJReading I believe the images are too large and need to shrink the file size somehow so they load faster... and I'll go change the validation things now

Yeah sorry , u do have the flicker on your nav...its just down to the way a lot of browsers cache images when you are using CSS rollovers .. its easily fixed though .. what you do basically is have just one single image file saved in (ie; photoshop) , with your normal state image and your hover state image side by side, then you use code in your stylesheet, something along these lines ........

 

 

#nav {


width: 113px;

background: url(../images/button_states.png) no-repeat;

  	}

#nav a:hover {

background-position: -113px;

}

 

 

all you are basically doing is moving one/single image file to the left or right, so no swapping of images, hence no flicker !!!

 

if you get stuck give me a shout !

Thanks mate, I understand what you mean and will got on it later. But now I'll just fix the validation.

 

P.S what are the disadvantages and advantages of strict etc etc?

Strict is exactly as its name suggests, it wont validate until your mark-up meets every guideline, for example, strict wont validate if you use any deprecated tags or properties. If you use strict then your mark-up will be as clean and proper as possible.

 

Edit: Doctypes were covered recently in there thread, you should check it out:

 

http://www.webdesignerforum.co.uk/index.ph...ost&p=37380

Hey Luke, glad to see you got the navigation floated and centred in the end!

 

Good job on getting the website to validate as well.

 

My only suggestion is that the background is very "in your face". Diagonal lines are well known for attracting attention (think black and white caution colours!) so if you made the background a little less vibrant it would probably look a lot better and not fight for attention with the user.

A nice website though the background is quite 'in your face'. Try perhaps using a more subtle one.

 

I also recommend you change your navigation as at the moment it's dependent on CSS for it to appear. If you view your website with CSS disabled or in a text-only browser, there is no way to navigate through your website.

 

Here is a recommended solution:

 

<ul id="navigation">
<li><img src="location" alt="alt text to display here" width="#" height="#" /></li>
</ul>

 

That way, when CSS is disabled you can still navigate through the website. Obviously your list would go on for as many navigation items there are.

 

If you choose to stick with your current navigation, you may want to change your rollovers to prevent the slight jitter. Here is a good explanation of how to do it.

 

 

Hope this helps, a great site overall though.

Thanks, I learnt how to do the better rollovers, but i am to tired to do it at the moment so it will be done tomorrow, and i do not intend to make it none css viewable, because they would not be able to see half my site and i personally think that sucks. I will also get a new background soon as it is a bit "in your face" maybe add a gradient mask or something to dull it down and make you concentrate on the main page and not the background (which i spent hours staring at )

 

Thanks for the advise guys, these finishing touches will be done shortly and then you will be able to see my portfolio as i first thought it too look like .

 

Edit: i might stick some basic text links on the bottom so you can navigate when CSS is not there.

i might stick some basic text links on the bottom so you can navigate when CSS is not there.

 

good idea! a footer would be a good place to put the W3C badges too.

I like the colour scheme, and the layout is nice and crisp - although your header is eating a lot of vertical space. The U in "Stuff" is clipped - is that intentional? Dump the W3C badges IMO - that's only of interest to other designers. I'm also not so keen on the circular logo - it doesn't seem to mean anything relevant to your site name or purpose. Try and design a logo for yourself that's a bit more representative of your identity. I might be inclined to make the orange more saturated or of a higher value - (maybe even slightly more yellow) - at the moment they're quite similair in value so there's little visual contrast.

 

Nice and clean code - you could slim it down even further by forming your background declarations in one line, possibly nullifying padding/margin values using a wildcard at the beginning e.g:

* {padding:0px;margin:0px;}

Put the validation images in the footer not in the top right it looks out of place and distrubs the flow

Love the bright orange colour - I'm using the same colour for my current project at work!

1.. I might think about making myself a new logo for the site as that one was a quick one i put together.

 

2... I am going to create a footer so i can have none CCS links and the validations

 

3... I am creating a new more interesting background but one that is not in ytour face like some of my previous backgrounds..

 

Thanks guys.. these finishing touches wil be odne shortly just need to find time in my school work

Hey mate

 

I really like the colours you have used, and the overall feel is really nice.

 

2 things I would change tho:

 

Modify the heading CSS e.g.

 

h1

{
letter-spacing: 1px;
font-size: medium;
}

 

And also the images that seperate the links in the navigation, they annoy me simply because it seems like they are meant to be something specific when really you have just used them loosely as a breaker.

 

All this is just IMO, and this is wat this forum topic is about i gather so feel free to totally ignore me if you want.