Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Feedback on site please

Discussion in 'Website Design Critique:' started by TomStutt, Sep 18, 2009.

  1. TomStutt

    TomStutt Senior Member

    Hi all,

    Please can some of you give some feedback on my site. There are a few things i need to add but its pretty much finished now. I have decided on the colour scheme and im sticking with it now and i think the design looks alot better than it has in the past.

    Portfolio needs bulking up but i havent had time to sort out all the images yet so they will be going on there very soon and something needs to go on the services page but i cant decide yet.

    http://tomstuttdesign.co.uk/

    Be as harsh as you like or as nice as you like...

    cheers
     
  2. tim

    tim Senior Member

    first off, i think your homepage is good, but it feels too free, it feels a bit empty over anything else though.

    also, your contact page has an image with contact details on- good for getting rid of spam but bad for accessibility.

    third, loook at this screen below:

    [​IMG]


    ^ that's what your portfolio page is viewing like in safari 4 on a Mac (obviously!). ^


    your page titles as well can be improved on.

    as jaz will (hopefully) tell you, keeping consistency all over your pages will improve SEO- because Google will recognise it as a relevant site when those keywords are searched.

    so instead of "contact" for example, probably (i do say probably) something closer to:

    "Contact - Tom Stutt Design - Web and graphic design blahblah"

    i'm also not a code monkey but im sure there are improvements needed there.

    fo exampo:

    HTML:
    <style type="text/css">
    <!--
    @import url(css.css);
    -->
    </style>
    that should just be:

    HTML:
    <link rel="stylesheet" type="text/css" href="css.css" media="screen" />

    all just quick pointers, more brushing over everything (as i gotta go to college now!), im sure people will bring it up tho :)
     
  3. TomStutt

    TomStutt Senior Member

    cheers tim - first in with a reply again.

    il have a look into everything you said. as for the portfolio page its fine on ie7, ie8 and firefox. i havent installed safari yet so probably why i didnt know it was doing that.

    cheers again
     
  4. TomStutt

    TomStutt Senior Member

    as for the contact page, i dont know who to make the email address etc linkable because its an image.
     
  5. tim

    tim Senior Member

    i'd keep part of the image but i think you need the details to be physical text on that page... otherwise it's just bad for seo.
     
  6. TomStutt

    TomStutt Senior Member

    how would you suggest going about it so i can get some of the text physical over the image.
     
  7. tim

    tim Senior Member

    errrrm well the little box with it in could be done with CSS, and the image could be set as a background in a maincontent div?

    i'm defo not a code monkey but it's possible to do it and make it a lot more accessible.

    JAZ! where are you!?
     
  8. Levi

    Levi Moderator Staff Member

    First page seems cluttered then the others seem empty, you need to be able to strike a balance somewhere.

    As to text over the image, I think it can be done with Z co-ordinates but I'm not a coder either. You could always do a rollover or the span thing like I'm doing (forum technique :))to get the text under the images etc
     
  9. mrp2049

    mrp2049 Senior Member

    on a quest for meat....
     
  10. charles

    charles Senior Member

    nice colours
     
  11. TomStutt

    TomStutt Senior Member

    cheers charles - glad you like them.

    it took me ages to find colours that worked. i tried blues, greens and pinks but they just didnt work so i thought id try an orange/yellow colour and i liked it. glad i made that choice now.
     
  12. HippySunshine

    HippySunshine Senior Member

    Completley agree that the text needs to be TEXT not an image.
    You can do as Tim says above with CSS.
    I do like the contact page. Its a nice idea.

    However Im not to sure about your portfolio page. It doesnt really showcase your work very well.

    x
     
  13. Levi

    Levi Moderator Staff Member

    I'm not sure about the yellow/orange as I always think that going between yellow and orange makes it a bit wishy washy and as such loses some impact but at the end of the day its an individual thing
     
  14. Jazajay

    Jazajay Active Member

    I'm here Tim don't worry I'm taking a break from my meat quest, lol, what you like dude.
    I must say though dude your knowledge is really starting to come on, well impressed fella.

    I normally only do the Home page, but yeah Tim's absolutely spot on about the contact page.

    Change the image to get rid of the details, put them in a paragraph tag, position the paragraph with CSS so something like

    #contactdetails{position:absolute;top:250px;margin-left:600px;line-height:2.4em}

    Change the title to ~ Contact Tom Stutt web and graphic designer based in Devon, as that reads better.

    As Tim's right it's currently an accessibility nightmare, and hiding email address in this day an age is TBH pointless. I set up a new Gmail address never used for the first 10 days checked back and it had all ready got spam, not hard to create a script that goes though name variations and numbers and email you that way TBH. The only way to fight spam these days is down to your email providers spam filter, IMO.

    Then place the noindex meta in the head of the page ~
    <meta name="robots" content="noindex, nofollow" />

    That will stop the search engines from indexing the page and spread the equity around the rest of your site much more efficiently.

    <meta http-equiv="www.tomstuttdesign.co.uk" content="freelance,web,design,graphic,design,bristol,designer,www.tomstuttdesign.co.uk,tomstuttdesign" />

    Not entirely sure what browser and exactly what you are trying to control with that but it's pointless.

    The meta http-equiv tag is to control browsers and set the info they get from the page.
    For example ~
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Tells browsers that the page is a text/html document and that special characters should be encoded in the UTF-8 format.

    I would put that in the keyword meta as that is where that info should go, so ~
    <meat name="keywords" content="www.tomstuttdesign.co.uk ~ freelance,web,design,graphic,design,bristol,designer,www.tomstuttdesign.co.uk,tomstuttdesign" />

    However as you are repeating your site name several times this may actually get you penalized.

    Now the tag anyway is actually useless, Yahoo! is the only 1 who is reported to still support it and as Bing will shortly be supplying their search results it will shortly be entirely pointless, I would just delete the whole thing TBH.

    Your home page's title element should be changed from ~
    <title>tomstuttdesign.co.uk</title>
    To ~
    <title>Tom Stutt web and graphic design free lancer based in Devon</title>
    As that provides the search engines with more information to rank your site, and to clients a better idea of what your site is about straight off the SERPs.

    <script type="text/javascript">
    </script>

    I really don't see the point in that, so you should remove it TBH.

    On your home page your H1 heading should be around your logo ~
    <h1><img src="http://www.designforums.co.uk/images/tom-stutt-design-logo-web.png" alt="Tom Stutt Design"></h1>
    Also apply the no border to the image via CSS and not actually within the code.

    The H1 tag is one of the most important XHTML tags when it comes to the search engines as it is used and does help to rank the page, as a result you only need 1 of them, more may get you into crap.

    Also think about headings in an off-line environment. In an essay for example you have the main large heading which is the title, each heading below that then gets smaller. to do this in a on-line environment you use the other Hx tags.

    So switch the latest news and Most recent design project headings to H2 tags not H1 tags.

    This is also not a heading ~
    <h5>Copyright &#169 2009 Tom Stutt Design.</h5>
    And should be switched to a paragraph tag.

    Now remove the welcome.... as that just adds to the clutter and TBH most ppl wont care if you welcome them. The average time a user spends on any given web page is only 10seconds, that's including page load time, so you need those 10 seconds to qualify to them why they are there, welcome doesn't do this.

    Your links are also not obvious, underline them as that's what users expect, or at least have them as a different colour.

    I would reword your welcome message as well ~

    <b>My name is Tom Stutt and this is my on-line portfolio of my web and graphic design work.</b> I live in Bristol and currently work as an IT Support Technician but in my free time I am a freelance graphic and web designer. I love design and it has always been a passion of mine, and I am always looking to progress with my design skills, while keeping up to date (if you do) with the latest advancements in the web and graphic design industries, and would welcome any exciting new projects.
    <b>I currently design in and use Illustrator, Photoshop, InDesign and Notepad ++ for all of my design work.</b> I am self-taught and I am always interested in learning new skills - I am currently teaching myself Flash.
    Please feel free to browse my web and graphic design portfolio. If you would like me to quote for any design services that I offer please do not hesitate to contact me.


    As that reads better, but more importantly you are adding words for the search engines in the correct places and in the correct tags, in this case the bold tag, which they take note of IMO.

    Also the links again clarify to site users more about the following page and add more call to actions where they should be. But also it helps the search engines rank those pages better as well.

    Apart from that coding wise yeah pretty good, I would up it to the strict doctype TBH as you are more than capable, and remove the hr tags as they are bad tags and apply a top and bottom border to the welcome message instead.

    Hope it helps.

    Jaz

    Key:
    Green ~ CSS
    Purple ~ XHTML
     
  15. Kevin

    Kevin Senior Member

    About anti spam measures, a friend of mine displayed his email by defining every single character as an ampersand entity (I'm pretty sure that's not the right name but I mean &raquo; etc.). Now, I'm not sure where this technique fits in with SEO and accessibility, but he says his mailbox is spam-free though.

    Care to enlighten me?
     
  16. Jazajay

    Jazajay Active Member

    I don't know TBH, it wont have any SEO benefits but accessibility might be a real pain in the ass depends on how it's done.

    I know with Gmail I get around 50 spam emails every single day, and it catches well over 99.9999% of them, only on the odd occasion do they ever get in my inbox so I don't think spams as real of an issue as it was a few years ago. But I suppose it's preference if you want to try to hide it and trying to get the balance right.
     
  17. darren

    darren Member

    Spam bots don't see it like you (browser) they see the raw code. This means that even if you use odd chars in the text, the
    part will still be read (providing your email address is a link)

    if you don't create a link they are not stupid. I could spend one evening and write about 10-30 regular expressions that extract email addresses no matter what the encoding. Its simply accounting for each variation and representation i.e. recognise what the browser would see. Even recursive javascript.

    As Jazajay says, its all down to how good your spam filter is.
     
  18. TomStutt

    TomStutt Senior Member

    hi all, me again.

    right, had a go at the text on the contact page so its not an image and it works fine on some browsers but not on others. can any of you legends tell me why?

    cheers all
     
  19. TomStutt

    TomStutt Senior Member

    i have ie8 at home and it works fine and i have ie8 at work and it doesnt. weird
     
  20. Jazajay

    Jazajay Active Member

    Put up a conditional comment for IE and in that write ~
    #contact-details{margin-right:0}
    And that should more or less fix it TBH.

    Jaz
    Key:
    Purple ~ CSS.
     

Share This Page