Ready for some serious critique...

mrp2049

Senior Member
Defy Designs - The work of Michael Partridge

has gone live. I coded it myself, so I expect I have made some rather large newby mistakes.

I have tried to make it within everything I have learnt, but I am very willing to accept that I am still a complete virgin to this sort of thing. So please critique away, tell me what I have done wrong so I can change it and improve at this sort of thing.

Well, tear me a new one!

Also I can't thank Glen enough for helping me get this live and generally walking me through some/most of the uploading side of things. He is also hosting it, check the man and his services out. If he treats every customer like he did me, you are in good hand.
 
ok I'll just do bullet points and no offence intended etc etc etc

- needs to be centred
- think the slideshow is too quick
- the blue used to hyperlink UK Value Computing is too harsh (could easily change it to a darker shade of your blue)
- the menu order is a bit strane - contact usually sits on the right hand side of the list, not in the middle
- need to read the text again, home page has atleast 1 mistake (this site is only a holding space, rest assure, (THE) my full site will be along very soon) also think it should be rest assured
- about me overlaps the lower footer
- a contact form would have looked nicer than a hotmail address - you could have at least done @domain name
- Do you really need the links page, twitter, carbonmade etc I can understand but I'm not sure you need to have links to Ken's site, who you could argue is competition.
- your cv isn't working - there's no file at /images9/michaelpartridgecv.pdf
 
No offense taken, thanks given.

1. I chose to make it left aligned, personally I prefer it.
2. First time I've played with Javascript and Jquery, I'll have a look into it.
3. Is it? I'll check that aswell.
4. Good point, hadn't considered it.
5. I will openly admit I am rubbish with spelling, I will get it proof read by my lady when she gets home.
6. Which broswer are you using? It works fine on my computer in Safari, Firefox and Chrome.
7. I like being friendly and will have a think about what I am linking.
8. Changed that, just waiting for the server to catch up.
 
browser is firefox 3.6.3.

As to jquery, if it's done anything like the mootool options there should be a time option in there somewhere :)

The reason I didn't like it left aligned is due to the fact that roughly 3/4 of my browser window was just background, now if it was a fancy background then it would be different because it would be part of the site design but yours is just the dots. You've also got to consider that your site isn't that big in terms of dimensions so those using 24" displays or bigger (I'm on a 20" ws) would have even more space and most sites are now heading towards being centred.
 
mrp2049 said:
duely noted, as said first time I've ever done this, so its a bit of a learning curve.

hey I'm no expert when it comes to web design, I can knock up a site relatively well but I'm nowhere near the pro's on the forum :)
 
I'm not digging the left alignment either. I'm not saying you have to center it but at least move it over to the right a bit; I would say about 80 pixels, and maybe add like a little ruler kind of thing in the background with the width above (in my example 80). That way people know that it's not randomly placed and together with some other grungy background effects it will give your website a nice touch.

The links are complete overkill. Your personal links could be included in the contact and/or about page and I don't think those other links deserve a separate page. Consider adding them into your biography; which would give something along the lines of
In my spare time I like to read Computer Arts Magazine, hang out with my man Ken and the rest of the DF crew. In the past I've worked with guys such as End of Line, Richey Beckett Mission Photographic. Oh, check out my awesome shirt by Fuzzy Ink.

Your CV can be included in the about or contact page but it needs to stand out a little then. If you're determined to have the link in there all the time, laybe include it in the layout. Make a simple button (attachment) and add it so it breaks the layout, it will make it stand out and make the site a little more interesting.

Like Levi said, a contact form would be nice. If you're unsure on how to code it, use Jay's free code.

That should get you started ;)
 

Attachments

  • cv.jpg
    cv.jpg
    4 KB · Views: 99
Good points dear boy. Greatly appreciated.

Strange that no one has picked on the coding particularly yet. I fear the wrath of harry :)
 
If you insist, I shall put on my wizard's apprentice hat while waiting for the real wizard :thumbsup:

Validating your code is usually a good start.
Errors found while checking this document as XHTML 1.0 Strict!
Result: 46 Errors, 1 warning(s)

  • Your header should be an <h1> tag rather than a <div>.
  • The navigation should be an unordered list <ul> instead of separate anchor <a> tags inside of two divs. When correcting this, one <ul> should suffice and doesn't require an additional div around it. Also, why are you giving your <a>'s an empty id attribute? The class you assign them isn't necessary either, refer to them in your css as div#menu a
  • All your other sections seem to have <div>'s nested inside others. This really isn't necessary.
  • This is optional, but go through your code and take out all the unnecessary whitespace/line-breaks between tags and indent elements that are nested inside other ones. It will be easier to find back elements in your code later on and it gives you a warm fuzzy feeling inside :p

I understand that development is not really your cup of tea. You should recode it but you might not have the time right now but somewhere in the near future, as you get better at coding, you should take some time to recode it all.

This is just the light version of what the wizard will be confronting you with. So good luck and may the force be with you :up:
 
Genuinely thank you.

I think I might re do a lot of this based around the advice you 2 have and no doubt others will offer, but it will only be a tweaking.

I have another job that I have to do, so I will roll everything I learn here into that, probably do another site and then come back to mine.

My aim is to go from the guy who stands at the back looking confused, to being the guy who brings a flick knife to a sword fight!

Ah screw it, I'd bve happy knowing even vaguely what jazz is talking about!
 
Just a heads-up, the overlapping on the about / links etc. is on my chrome too.
While web design isn't your forté I assume you are a lover of typography? Your work & your header are really strong items on the page, while the rest seems to have just been put in as an after thought...

Just a starting 2c :D
 
Might take a more in depth look at it later, but the first thing I noticed was that the page sort of hung during loading on this (admittedly, semi-terrible) connection.

Your background image is unnecessarily huge - you can get the same effect by having it just a couple of px wide and tiling it horizontally instead. Maybe convert it to .gif too since it's not that complex. If you play around with export for web and devices in Photoshop (if that's what you're using) it'll tell you which format is the smallest file size.

You can also compress your CSS to help with page load time with a tool like csscompressor.com


Edit: Another quick thing, it doesn't degrade well without javascript. With it off I can't even read the text.

Double Edit: I'd have to concur with the unused screen space thing. For example check out how your contact page looks on my screen:
 

Attachments

  • Defy Designs - The work of Michael Partridge_1276513696326.jpg
    Defy Designs - The work of Michael Partridge_1276513696326.jpg
    24.7 KB · Views: 11
Mark Alexander said:
Might take a more in depth look at it later, but the first thing I noticed was that the page sort of hung during loading on this (admittedly, semi-terrible) connection.

Your background image is unnecessarily huge - you can get the same effect by having it just a couple of px wide and tiling it horizontally instead. Maybe convert it to .gif too since it's not that complex. If you play around with export for web and devices in Photoshop (if that's what you're using) it'll tell you which format is the smallest file size.

You can also compress your CSS to help with page load time with a tool like csscompressor.com


Edit: Another quick thing, it doesn't degrade well without javascript. With it off I can't even read the text.

Double Edit: I'd have to concur with the unused screen space thing. For example check out how your contact page looks on my screen:

I hadn't considered the tiling the background, thank you.

I am going to merge the contact and links page in a few days.

Oh yeah, thanks.
 
Renniks said:
Just a heads-up, the overlapping on the about / links etc. is on my chrome too.
While web design isn't your forté I assume you are a lover of typography? Your work & your header are really strong items on the page, while the rest seems to have just been put in as an after thought...

Just a starting 2c :D

To be honest the rest of the content is the bit that I was unsure about as I don't know how to make it more flashy as I don't understand the how to make it stronger.

I'll have a rethink session probably wednesday when I get back from beach break/blast whatever its called. I am the official photographer for visitwales!
 
I personally would try and find a font that has similar shapes and forms to your logo. Really emphasizing the shapes of them both and bringing a better feel to it, I also feel the font could be slightly larger... But that will depend on if/what you change it to :D

Oh and congratulations for the photography thing! :D
 
Examples of fonts I'd look into (check licensing, work out how to use @font-face, implement with good font stacks, check readability in all common browsers, etc. etc.)

Font Squirrel | Free Font Old Standard TT by Alexey Kryukov
Font Squirrel | Free Font TeX Gyre Bonum by GUST e-foundry
Font Squirrel | Free Font TeX Gyre Termes by GUST e-foundry
Font Squirrel | Free Font Theano Modern by Alexey Kryukov

On fontsquirrel you can test run to see the fonts with pieces of your text :)

They are all free fonts, not sure on using them for commercial etc. so would have to look at licenses
 
Back
Top