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

New Company Website for Me

Discussion in 'Website Design Critique:' started by CSparkes, Mar 21, 2009.

  1. CSparkes

    CSparkes Senior Member

  2. Xenonsoft

    Xenonsoft Active Member

    Looks good to me Craig, I like the hover on the buttons, sleek.

    Just had a good look through, nothing really springs to mind on improvements, always a good sign. Nicely done that.

    EDIT: The only thing that seems awkward is the Titles, being all lower case. I guess that's sort of your style, with your logo like such, but it still seems a little awkward.
  3. jHouse

    jHouse Senior Member

    Nice feel to it. Simple and slick. I dont like forced justified text. Everything looks very gappy.
  4. Jazajay

    Jazajay Active Member

    Hay couple of things spring to mind ~
    First thing that springs to my mind TBH is the fact that it isn't coded well,
    1. Huge use of divitus,
    2. Slightly unsemantic coding, as you have a h4 above a h2, and a couple of missing tags, and attributes????
    3. 2 JS files and in-line JavaScript???? Granted 1 has to be as it is a borrowed script but the other doesn't,
    4. In-line css????
    5. Deprecated tags.

    <p style="text-align:center"><img src="" width="633" height="281" /></p>

    Can be changed to ~
    <p id="centre"><img src="" alt="description of the image (read section below though)" /></p>

    Then in your CSS ~
    #centre img{width:633px;height:281px}

    Check out my thread on accessible web coding and check out section 1A for the ALT attributes TBH.

    Change you html tag from this ~
    <html xmlns="">

    <html xmlns="" lang="en" dir="ltr">

    As that tells user agents the language of the page and the direction the text should be read, that being from left to right.

    I would change this section from this ~
    <link rel="stylesheet" type="text/css" href="main/main.css"/>
    <link rel="stylesheet" type="text/css" href="sifr/all.css"/>
    <link rel="stylesheet" type="text/css" href="sifr/sIFR-screen.css"/>

    To ~
    <link rel="stylesheet" type="text/css" href="main/main.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="sifr/all.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="sifr/sIFR-screen.css" media="screen" />

    As that tells user agents that those CSS files are for rendering on a screen and not for speech or print versions.

    This section here should have an alt attribute but shouldn't have a border attribute.
    <a href="/"><img src=""border="0" /></a>

    If you don't want any images to have a border apply it to CSS like below and remove it from the HTML ~

    I would personally reword the title element from ~
    <title>vivid. the new media specialist - website design, e-commerce design, online brochure design</title>

    To ~
    <title>Vivid. the new media specialist in website, e-commerce and online brochure design</title>

    As that reads better to your site visitor but still keeps your keywords in their.

    Right now you need to sort out your conicalization issue that being in the search engine's eyes you have 2 versions to your site one under the www. and 1 under the none www. version, stupid I know but there you go.

    To fix that create a plain .htaccess file and in that file write ~
    RewriteEngine On
    %{HTTP_HOST} !^www\.vividnewmedia\.co\.uk [NC]
    RewriteRule ^(.*)$$1 [R=301,L] 
    And that will redirect it to the www. version and in the search engines eyes make it 1 site. Upload that file to your root directory.

    This whole section here should be in an address tag as it is contact info and all the CSS should be removed to a CSS external file, and a rel=nofollow attribute should be added to the contact link to spread your equity better, just highlighted the extra code I would add below ~
    <p style="padding:10px 15px 0 15px;">Call Vivid.</p>
    <div style="padding-left:15px; margin:0"><h5 class="contact">0207 1930 679</h5></div>
    <p style="padding:10px 15px 0 15px;">Email Vivid.</p>
    <div style="padding-left:15px; padding-bottom:5px; margin:0"><div id="rightmenuemail"><script type="text/javascript">

    * Encrypt Email script- Please keep notice intact
    * Tool URL: Dynamic Drive Email Riddler- email encryption script and tool
    * **********************************************/
    <!-- Encrypted version of: enq [at] *************.**.** //-->

    var emailriddlerarray=[101,110,113,64,118,105,118,105,100,110,101,119,109,101,100,105,97,46,99,111,46,117,107]
    var encryptedemail_id72='' //variable to contain encrypted email
    for (var i=0; i<emailriddlerarray.length; i++)

    document.write('<a href="mailto:'+encryptedemail_id72+'">Email Vivid</a>')

    <p class="link"><a href="contact.cfm" rel="nofollow">+ Visit Contact Page</a></p>


    Apart from that there is some white space that can be removed that would reduce the html file by some bytes.

    Usability and on-page SEO:
    Your home link should not be active on your home page, TBH you should never link to the page you are on as it leads to confusion in your site visitors eyes, tried and tested though millions of dollars of research believe it or not.

    I would also change the links from more information to more information about vivid website design for example as that is better for the search engines.

    Apart from that, and with out reading every word and giving you a better SE copy, that's probably all I would do on that front.

    Hope it helps :)

    Key ~
    PHP section ~ Mod_Rewrite
    Purple ~ XHTML
    Green ~ CSS
  5. Xenonsoft

    Xenonsoft Active Member

    Now THAT's feedback.

    Jaz, the king of feedback :up:
  6. Harry

    Harry Senior Member

    A note on your semantics Jaz, you can have headings in any order you like, as long as it makes sense in context (which I've not looked at here). And the address tag isn't for containing addresses per se, rather information pertaining to the author of the page/document.
  7. Kevin

    Kevin Senior Member

    No he really does have a strange hierarchy.

    CSparkes, your code has lots of unnecessary elements (divs, paragraphs and headings). You seem to use headings to style all text elements that are different from your paragraphs. Try to use other tags such as <em> <strong> and <small> to define text elements.

    Work out your headings hierarchy, I suggest the following:
    h1: logo
    h2: page title
    h3: subtitle
    h4: sidebar headings

    There is in fact no need for the h5 on your telephone number, you will be needing that h5 tag for your future blog ;)
  8. CSparkes

    CSparkes Senior Member

    Ok will reply in full tomorrow as fully dosed up on pain killers from Surgery on Friday so please do not think im ignoring the long post and being ungrateful!

    The heading tags are not really in order & should be, but are there for Flash Text Replacement as more of ease than any order.

    It is not fully code finished as am working on a huge project for a client so time sadly is not being hugely dedicated to the site but after 2 months of a temp page needed to get it up!! So as such this stage is more the visual only & not code, not great I know but sadly atm time is money, and when money is there we have to take it!!

    Will look over it all in full tmz! But thanks to all for feedback!

    EDIT - This was posted before Onartis had posted up.
  9. Xenonsoft

    Xenonsoft Active Member

    No it wasn't, it was 2 minutes after :D

  10. Kevin

    Kevin Senior Member

    He probably means he clicked the post reply button before I had submitted mine :)
  11. CSparkes

    CSparkes Senior Member

    Yeap indeed, but do you get why I was not really paying full attention to the h4 & h5's lol!!
  12. br3n

    br3n Senior Member

    Dont be such a lazy slacker and get to work... surgery my ass... ingrowing toe nail probably :p
  13. Jazajay

    Jazajay Active Member

    WOW getting questioned on semantics. Someone's feeling bold. :lol:
    I just want to say a few minor points mainly that I'm loving it Harry but sorry I have to give you a note on semantics, apparently. :down:
    What no you shouldn't. Here's what the W3C says ~
    The W3C implies that's bad practise, fine if you want to pick and chose which bits to follow but that is coding badly in my book, but hay that's up to you, not me though. And I follow their advice and what they imply as good coding practise. He has a h4 after a h1 it therefore goes against this rule/best practise. It should be a H2 to be truly semantically correct.

    But err....{SIGH} err....Harry..... did you actually look at the code which I put in the address tag in my example?
    Also your slightly wrong, at least know what you are on about, fully, before you have a go.

    Please quote the address information I put in the address tag, above??????
    Love you to quote me AS THERE IS NONE IN THERE, ONLY CONTACT INFORMATION?????:confused:
    Are you sure you where reading the right post Harry?

    However the W3C schools does also include address information in their example, why because it is still contact information, ie you can write to them.

    What you are also slightly wrong about, which is amazing as you are lecturing me on semantics, is this TBH ~
    Here's what the W3C actually says ~
    Again not much in it, but if you want to argue a point, firstly don't pick a point that I haven't done, and secondly get the exact usage right in the first place if you are going to be a semantic angel !?! :mad:

    I have to agree with Br3n. :)
    I've just had laminate put down and 2 of the room connectors have already come off due to him slacking. Now if you are getting paid to do a job do it right from the off. If he went to floor laying lessons, for the price I paid for his 2 day work from a well known floor company he better had, for example and they tought him that then fine, but I imagine he wasn't tought like that TBH he more than likely wanted to get the job done as it stretched over 2 days and he didn't apply as much glue as what he should have. Even if you are self tought teach your self correctly and use elements how they should be used. Otherwise don't moan when you get feedback you don't like when you asked for it.

    I appear to be very grumpy this mourning, I'm still not very well so apologizes if bits sound harsh CSparkes. :cry:

  14. Xenonsoft

    Xenonsoft Active Member

    I know I know, just pulling his leg :p
  15. Kevin

    Kevin Senior Member

    Dude, the poor guy just came out of surgery... stop pulling before you hurt him :clap:

    And in Harry's defense, Jay, he was implying that you could switch between headings (e.g. for an article), he didn't say you could skip one.
  16. Xenonsoft

    Xenonsoft Active Member

    :lol: Good point.
  17. Jazajay

    Jazajay Active Member

    Actually what he said was ~
    So by that you could have ~


    As that is any order you like which is what Harry did say, which is unsemantic, which is what he was lecturing me on for some reason. :confused:

    Hope your surgery went well though CSparkes and I also hope it was nothing major as you don't need your leg pulling if it was. :)

  18. Kevin

    Kevin Senior Member

    I guess it's a matter of interpretation? I interpreted his comment as

    h1, h2, h3, h2, h3, h4, h3, h4, h5, h2, h3 etc.
  19. Jazajay

    Jazajay Active Member

    Err...maybe. :)
  20. Kevin

    Kevin Senior Member

    Well that's a semantic line-up of headings, isn't it? :)

Share This Page