Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

New Portfolio

Discussion in 'Website Design Critique:' started by Aarlev, Jan 2, 2009.

  1. Aarlev

    Aarlev Member

    Hi folks,

    Hope you all had a great Christmas and New Years.

    My new portfolio is just up. Would love to hear your thoughts on both design and content. And if you can give it the usual code/SEO treatment Jazajay, that'd be great :)

  2. tim

    tim Senior Member

    I don't have anything to disagree with really. I love it! Very nice
  3. blueocto

    blueocto Senior Member

    Passes validation and section 508... gooooood.... love the layout, clean, quick and easy to find what you are looking for, and some beautiful designs on there. Well Done!
  4. br3n

    br3n Senior Member

    I really really like that, Super simple and super smart! nice one.

    Add more portfolio content! :D
  5. Jazajay

    Jazajay Active Member

    I never hear section 508 being used, should be used more often IMO. :)

    Yeah design wise very nice.
    I would also agree with Br3n as more work, if you have it, gives you better boasting rights to any future employers about your credibility, and your ability to variate your designs to their mental ideas before they contact you.

    I would look at your links though because even though it passes accessibility guidelines, as Blueocto rightly says, I would still argue that it is not as accessible as it could be ~

    <a href="" rel="lightbox" title="10 Years Younger"><img src="" alt="10 Years Younger" /></a>

    Now to a blind user that is going to be read out as ~

    [link 10]10 years younger 10 years younger

    Now as all your links use the title attribute and all your images/links are labelled correctly within either the A tag or the ALT attribute, then for a blind user they will just have every link read out 2ice to them, which is a bit irritating TBH. SEO wise the title attribute is not indexed so I would remove them, as it will reduce your code bloat and improve accessibility.

    Personally, and TBH I'm being bold as I love CSS Zen Garden and I see you have a design in their, I personally would move the logo up the page.
    This is from a usability point of view as I think it would use the space more efficiently by moving your main content area, the guts of the page and thus the area your site visitors want, up.

    On your contact page apply the meta noindex, follow to the top of the page, in the head tag.

    <meta name="robots" content="noindex, follow" />

    This will remove the page from the search engines index and apply any equity you have more efficiently through out the main pages, which will help them to rank better, be it your home page and you blog.

    Also a input tag that has it's type set to hidden wont be shown to the site visitor, so the surrounding div can be removed.

    <div style="display: none;"> as it is overkill and not needed.

    Are now we get to form accessibility, the vain of my life for the past 2 weeks.

    What you want to do when you are coding forms is rather than relieing on how screen reader interpret the form is to tell them how to do it instead.

    So for example you have this ~
    <p class="contact">Your Name (required)<br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" size="40" /></span> </p>

    I would change that to ~
    <p class="contact">
    <label for="name">Your Name (required)</label><br />
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" class="wpcf7-validates-as-required" id="name" size="40" /></span> </p>

    Now what we have just done is overridden the control of any screen readers.
    When a screen reader hits a form they pretty much have to guess what input goes to what text.

    Some read out the name attribute, some guess by using near by text. However all of them, to my knowledge, use what is in the label tag as a description text of that element if it is present.

    So for each input tag that you have got that needs user content place a label tag around clear descriptive text near by it, place a unique id on the corresponding input value and then place the id name in the for attribute of the label tag. And bobs your uncle one clearly labelled and highly accessible form.

    It also has the effect of when you click the words you have labelled it focuses the mouse on the corresponding input field.

    You should also not link to the page you are on, by de-linking it and preferably bolding it, different background colour, what ever just make it stand out, it confirms to the user where they are within the site, which helps with site orientation.

    You tag line says designer ~
    Interior designer?
    Web designer?
    Car designer?
    Print designer?
    Fashion designer?

    To much ambiguity, your tag line is a highly important part of the page, it helps to clarify what the site is all about, so therefore needs to be spot on.

    Also, sorry, very little niggle shouldn't the links to the previews read larger preview?

    Hope that has helped in some way.

    Purple ~ XHTML
    Reddish-brown ~ Screen read output
  6. blueocto

    blueocto Senior Member

    @ jazajay - I guess it's due to working in the government for so long, I've become a bit of a code sniper when it comes to equality and those with disabilities.
    It can only make your website better, not worse imo. ;)
  7. Jazajay

    Jazajay Active Member

    IMO that is such an understatement, but so true. :)
  8. Aarlev

    Aarlev Member

    Thanks a lot for the kind words everyone. And thank you so much for taking the time to go through my site Jaz, I really appreciate that. You give some excellent advice, I'll look into all the things you mention as soon as possible.
  9. Greg

    Greg Active Member

    Hi Soren,

    Really like the new site, reminds me of Lee's new site, in the simple portfolio presentation approach ( I think it would be nice if the blog design fitted in with the same design/layout as the portfolio, just so it all looks as one complete site, but that might be just my personal preference.

    The only super minor thing I might change would be to reduce some of the spacing around the top elements to bring all the content up a touch, enough to bring it up and entice people to scroll down the page, but keep the spacing as it allows the text and intro to breathe.

  10. Aarlev

    Aarlev Member

    Thanks Greg,

    Yeah I see what you mean with the blog design. But if I have a long text it just looks a bit odd. Might just have images that stretch the width of the post instead of a top left aligned one. And then reduce the width of the left column so it's the same width as the portfolio pieces.

    Regarding the spacing, do you mean reducing the space between the logo and the black bar in the top?

    Thanks for your feedback!
  11. Greg

    Greg Active Member

    Sorry Soren I was getting myself confused! Please ignore my ramblings about the blog before, I can see it fits in perfectly with the main site :up: I think I'm losing my marbles... at 24 :confused:

    Yeah just enough so it brings that first project image up a touch and into view more clearly, I could be wrong, but worth trying out quickly.


    PS- Thanks for the Design Forums link :D
  12. Aarlev

    Aarlev Member

    As I told you before Greg, lay off the drugs for a while :p

    Good idea. Would be nice to have the content further up the page. I'll give it a go when I get home.

    You're welcome. Thanks for a great forum.
  13. Jazajay

    Jazajay Active Member

    Yeah I noticed the home page has acquired a bit of equity, there must have a few people linking back.
  14. Greg

    Greg Active Member

    Lol... but they make me feel soo :clap::rolleyes:
    No need to thank me, thank the other 335 members that make this a great place to be! Including yourself :)

    It's getting there Jaz... slowly but surely!
  15. Aarlev

    Aarlev Member

    I've made a few changes with your advice in mind. The page has been moved up slightly and I've added a more descriptive tagline. I've removed all the titles on the images so the site should now also be more accessible for people with disabilities.

    I'm not sure about my H1 though. This is what I have:

    <h1><a href="" title="Soren Aarlev, Web and Graphic Designer">Soeren Aarlev: Web and Graphic Designer based in London</a></h1>

    Will that be read out twice as well or is it only if you have title and alt at the same time?

    @Jaz: The <meta name="robots" content="noindex, follow" /> you told me to put on the contact page. My header is included on every page so if I do that it'll add it to all pages. Is there any way to get around that?

    I'll look into the form stuff as well when I get a chance. Thanks again for your help and advice.
  16. Jazajay

    Jazajay Active Member

    Yeah it will, well 1 screen reader currently does not read it but the others do, so I would remove it TBH.

    H1 looks fine, I wouldn't have the title TBH, nor link it in on the home page.

    mmmmm yeah.
    Right so I take it you have something like this ~


    Right then above that on the contact page write this ~


    Then in the header.php file write ~
    <?php if(isset($a) && $a=="a"){?>
    <meta name="robots" content="noindex, follow" />
    <?php }?>

    Right so we set a variable above the file, we then test for the variable in the file.
    If the variable is set and the variable equals what we set it to, sorry security mind set coming in, then we apply the meta, if it is not we don't.

    View the source of the page after you load it, just to make sure.


    Red ~ PHP
    Purple ~ XHTML
  17. Greg

    Greg Active Member

    Think that helps Soren, on my screen/res I can see the first project image which leads my eye down to the portfolio and to scroll past the 'page fold' :cool:
  18. Jazajay

    Jazajay Active Member

    My rez picks up the bottom of the second 1 one and does make a difference IMO.
  19. discochimp

    discochimp Junior Member

    nice and clean

Share This Page