Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member MaidenFan's Avatar
    Join Date
    Aug 2006
    Location
    Aberystwyth, Wales, UK
    Posts
    19
    Member #
    13754

    Current Rating

    Visual Appeal:
    2.0 out of 5

    Accessibility:
    3.0 out of 5

    Website Speed:
    3.5 out of 5

    Compatibility:
    3.0 out of 5

    Overall Rating:
    1.5 out of 5

    Rate This Site


    Advertisement (login to hide this!)


    You must be logged in to view this site

    Hi everyone,
    I've just finished this redesign of my personal website and would appreciate some feedback. The site is hand-coded in php, xHTML and CSS, and is all valid code and displays correctly in IE6 and Firefox (1.5.0.7).

    Any opinions on the design and content is appreciated

    Cheers
    Craig

  2.  

  3. #2
    Senior Member
    Join Date
    Jul 2003
    Location
    Hillsboro, OR USA
    Posts
    116
    Member #
    2175
    Hi,

    - Your header should be an h1 element. Do something like this:
    Code:
    <h1>
         <img src="./images/header.jpg" title="Craig Watson.com -- Home" alt="Craig Watson - Sound Engineering, Web Design, Computer Help, Photo Archives" />
    Craig Watson - Sound Engineering, Web Design, Computer Help, Photo Archives</h1>
    Use CSS to style accordingly -- Maybe hide the text by using text-indent: -5000px

    - Your navigation should be an unordered list with a hidden h2 tag to signify that it is the navigation section. For example:
    Code:
    <h2 class="hidden">Navigation</h2>
    <ul>
         <li><a href="./index.php?page=home">Home</a></li>
         <li><a href="./index.php?page=about">About Me</a></li>
         <li><a href="./index.php?page=web">Web Design</a></li>
         <li><a href="./index.php?page=sound">Sound Engineering</a></li>
         <li><a href="./galler/index.php">Graphics Archive</a></li>
    </ul>
    Simply style the elements accordingly.

    - Why are you using span elements for your headers rather than actual headers? The headers for your content should be h2 or h3. Also your paragreaphs are seperated by line breaks rather than just setting your content inside of paragraph elements. Why? For Example:

    Code:
    <h2>Welcome!</h2>
    <p>Welcome to the new online home of <strong>Craig Watson</strong>. This website will serve as a source of information about me, my various interests and projects as well as a "blog" of my latest news and exploits. If you have any feedback about this or any other of my websites, or any questions you would like answered, please email me at <a href="mailto:craig@cwatson.org?Subject=Cwatson.org Message">craig@cwatson.org</a><!-- or complete my <a href="contact-form.php">Online Contact Form</a>-->.</p>
    <p>In the near future, I plan to expand this website with how-to's on subjects ranging from basic PC security to Java programming, drawing from my experiences as a hardware techcnician and a Computer Science student. Please keep checking for further developments.</p>
    ^^^ Everything I mentioned above should help with accessibility as well as SEO.

    - In Firefox 2, the white behind the content stops right above the "What I'm Listening To" header.

    - Another thing I noticed -- You're using dotted underlines for your links. This is usually 'reserved' for abbr and acronym tags. I would reccomend removing the underline or making it solid and changing the link color to something with a little more contrast from the actual content text.

    - Something that signifys what page you are currently on would be nice. Whether it be making the navigation link of the current page change colors or something.

    I'll post more later when I get time.

  4. #3
    Senior Member Karloff's Avatar
    Join Date
    Oct 2005
    Posts
    744
    Member #
    11702
    the page doesn't display correct in firefox, the contents white background only display till half way down the screen(only on the home page though(see attachment)), also there are a few warnings on your code you may wish to tidy up.

    As for the design, i'm not really a fan, the navigation is bland, the color scheme is quite dark and dull and the header image looks quite cheap. was quite slow loading as well.

    I would suggest brightening the page up a bit, add a tabbed navigation (everyone is these day....even me ).

    I would also suggets that you have a contacts page, and add a simple e-mail form.

    probably no the review you were wishing for, sorry mate, just offering my opinion
    Attached Images Attached Images

  5. #4
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    The same thing happened to me in Firefox, another small critism is that the banner at the top seems rather outdated to me, thats just my opinion though. another thing that could just be my youthfulness is that when i looked at that chisled looking bit of text in the banner that says CWATSON.ORG i honestly thought that the C was a T, which wasn't that encouraging, perhaps that was just me? besides the banner the site is pretty cool, best of luck with it and keep listening to Maiden!
    Solidgold

  6. #5
    Junior Member MaidenFan's Avatar
    Join Date
    Aug 2006
    Location
    Aberystwyth, Wales, UK
    Posts
    19
    Member #
    13754
    Thanks for the comments guys, it's all been taken on board. The Firefox issue was a floating DIV problem, I've reverted back to linear DIVs until I can sort the problem. As an IE user I didn't realise Firefox 2.0 had been released.

    -all4sma:
    I've changed all of the code you suggested, with the exception of the navigation - as I don't really want a "bulleted list" effect.

    -Karloff:
    Which warnings came up on my code? I ran it through the W3C HTML and CSS validators, and both passed first time for all of my pages. Comments on the design are noted, I'll see what I can come up with.

    -solidgold:
    Thanks for the comments. I kept that font as it was part of my original design over a year ago and I thought it was best to keep some continuity between versions. I definitely shall keep listening to Maiden (though this photo may make you slightly jealous lol)

  7. #6
    Senior Member
    Join Date
    Jul 2003
    Location
    Hillsboro, OR USA
    Posts
    116
    Member #
    2175
    The code looks much better and cleaner without all of the line break tags! Much better without the stylesheet as well.

    In my opinion you could use a little more padding between the h3 tags and the last paragraph.

    In regards to the unordered list elements, when I said to style it accordingly, I suppose I should have gone a little more in depth.

    To remove the bullets and make the links display inline simply place this in your CSS file:
    Code:
    li{display: inline;}
    While you're at it, go ahead and style the rest of the element too. Something to the effect of:
    Code:
    li{display: inline; text-align: center; padding: 0 10px;}
    ... should work well.

    Good Luck!

  8. #7
    Member ajkendall's Avatar
    Join Date
    Nov 2006
    Posts
    65
    Member #
    14240
    i like the simplicity of this, it's basic but it works, i'm not too fond of the color scheme as it's a bit too dark for my liking but the general concept of the site seems to work

    the navigation could deffinitely do with improving, maybe a more attractive type font or something to make it stand out a bit more without being 'tacky' looking

  9. #8
    Senior Member
    Join Date
    Jul 2003
    Location
    Hillsboro, OR USA
    Posts
    116
    Member #
    2175
    Your doing a great job!

    There's still a couple things, though. In Firefox you have a gap above your navigation. All you need to do is remove the margin from the ul though so simply enter this into your stylesheet.css:
    Code:
    ul{margin:0;}
    Also, above your navigation I would reccomend placing a hidden header tag that says Navigation.
    Code:
    h3.hidden{display:none;}
    PHP Code:
    <h3 class="hidden">Navigation</h3>
         <
    ul>
              <
    li><a href="./">bla</a><li>
              <
    li><a href="./">bla</a><li>
              <
    li><a href="./">bla</a><li>
         </
    ul

  10. #9
    Junior Member MaidenFan's Avatar
    Join Date
    Aug 2006
    Location
    Aberystwyth, Wales, UK
    Posts
    19
    Member #
    13754
    Thanks for the advice everyone. Hopefully the revised design is a tad less "dark" than the original one. I've added some "tabbed" nav buttons at the top with a bit of php and CSS, as I really want to keep the navigation text-based.

    Cheers

  11. #10
    Senior Member
    Join Date
    Jul 2003
    Location
    Hillsboro, OR USA
    Posts
    116
    Member #
    2175
    Definately coming along. The Accessibility and compatibility have been raised dramatically. The visual appeal has improved as well!

    It's too bad I can't re-vote up top to reflect the changes you've made.

    Great job!


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:07 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com