Another Portfolio Critique

Discussion in 'Web Design and Development' started by design-is, Jan 10, 2009.

  1. design-is macrumors 65816


    Oct 17, 2007
    London / U.K.
    Hi all :)

    Thought it was about time I braved the web boards at macrumors and asked for opinions on my new personal portfolio site.

    All constructive comments welcome. Meaning if you spot a flaw, please suggest a fix.

    Not quite finished filling with content yet, a few images and bits of text needed, but its pretty much done.

    Thanks in advance!

  2. geekindisguise macrumors 6502


    Jul 22, 2008
    It looks really nice, but on looking at your work the non web stuff, I don't there is a point in having a popup for the picture if it is the exact same size.
    It would be nice if when you clicked on a picture it would get bigger when in the popup.

    Other than that it is awesome!
    Is your navigation links in a gradient???
    How do you do that?
    Are they actual links or pictures?
  3. design-is thread starter macrumors 65816


    Oct 17, 2007
    London / U.K.
    Wirelessly posted (Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20)

    Yeh, sorry, having pop-ups of more detailed images is part of the finishing I need to do. Is just a matter of linking to different files that I haven't prepared yet.

    The navigation buttons are images with some gradient work. Text is there too, but hidden with css. Should display all info correctly if images and/or css is disabled (hopefuly).

    Glad you like it!
  4. thewright1 macrumors regular


    Apr 3, 2008
    I second that. Everything else looks really good, you have some good work there.
  5. design-is thread starter macrumors 65816


    Oct 17, 2007
    London / U.K.
    Thanks :)

    I put a lot of time getting the look and feel right.

    All further comments welcome!
  6. angelwatt Moderator emeritus


    Aug 16, 2005
    Here's my comments, mostly nitpicking, but some casual suggestions and observations as well. Went a tad more thorough since you asked for my feedback. The site looks good though.
    1. Banner:
      • It's a lot of empty space up there.
      • Sub-banner: the darker words lack contrast against the gradient background. Might want to try adding some color, possibly the blue you use on your signature.
      • Just based on common web page layouts, I'd almost think the name of your web site is "welcome." I'd at least consider flipping the placement of the banner and menu bar, then of course shrink the height of the banner. Probably also center the text in the banner. Essentially I think the name of the site needs to be more recognizable.
      • Just and idea, most people expect the logo and the like that are in the header to be clickable to get to the home page. It may catch some people off guard, especially since you're using images in place of text so they can't even highlight it to copy it.
    2. Text:
      • Text is a little on the small side. I'm always complaining about that though on my 13" MacBook. I'm thankful for FF's page zoom and the Stylish add-on.
      • You might have a little too much white space around the content area (the sides).
      • I like the visibility of the links. Too many people these days seem to try to hide them.
    3. Layout:
      • I'm not sure you're gaining anything by limiting the height of the layout. It works fine for most pages, but breaks on the blog. You might want to add extra CSS to that page that allows a more fluid flow to the layout, namely the footer.
      • I like the overall color scheme, cool and feels professional.
      • [nitpick] On the welcome page the right side of the right content doesn't line up with the right end of the menu above and the footer text below. Might look better to line all that up.
      • The Recent Work section looks nice, with visible hover effects.
    4. Blog: Without JS (actually with it on as well), your blog layout kind of breaks. Your footer gets run over and the content flows down past it, but at least the content is still accessible.
    5. Contact: You have a bit of space above the form, but it's very snug at the bottom. Might want to raise it a bit to even out the spacing.
    6. Misc: I find myself entranced by the wiggly line.
    7. HTML/CSS:
      • Code looks semantic.
      • Validation looks good.
      • In your contact form, you use tables, which I'll let slide, but you also have embedded styles and using a nowrap attribute. This should be moved to a stylesheet. The nowrap can be accomplished by using white-space: nowrap;
      • You have quite a bit of absolute positioned elements. That's OK, but it would like be easier overall to have a more fluid layout so content can fill in places and you wouldn't have to update your CSS every time the page length changes. That's more my opinion though, I'm not a fan of over used absolute positioning.
    8. JavaScript:
      • Site fails when JavaScript is disabled. In the work area when I click on one of the projects I get a 404 error. It's one thing to not have certain features for those without JavaScript enabled, it's another for the visitor to receive a 404 error. At minimum, you need a statement for the user that JavaScript is needed to use the page (using a noscript tag usually).
      • Also, noticing on the work page that I can't manually adjust the vertical slider. A image is overlapping it keeping me from using it, though my scroll wheel still works fine. I do notice with JS the scroll bars are not present, so it's not a huge deal.
      • I noticed a bit of inline JS on the work page. [nitpick] You can use unobtrusive JS here on page load to add all that in place. I can help with that if need be. It would be pretty simple to pull off. This is partly what causes the 404 errors too so it's worth fixing. The href attribute should never have 'javascript:' in it, no matter how many tutorials do it. If anything, the scripting would be inside a onclick attribute and supply the href with a #id. So you could supply each section on the page with a unique id and then the link would go to that section when JavaScript is disabled, and otherwise they slide to that section.
  7. design-is thread starter macrumors 65816


    Oct 17, 2007
    London / U.K.
    Excellent, thanks for posting angelwatt. I'll go through these comments and start make some adjustments.
  8. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    Hi, design-is!

    I really like the design - cool, smooth, modern. The signature on the front page is a great personal touch, and the color palette is very well thought out and implemented. I really like the liquid layout aspect, and even noticed the custom favicon which looks great. The whole sense of the site is that alot of thought was put into it, and classy.

    The boxes on the right look nice (i.e. the recent work section and design experience, etc.) and the icons professional looking - nice job on the mouseover of those boxes, btw. An informal suggestion would be when the icons in your recent work are moused over, a larger medium sized window pops up with a larger screenshot (using JQuery->facebook window popop plugin which by default resembles your color palette and layout).

    In terms of technical stuff, angelwatt was very explicit and I don't have anything else to add. Great job, and I'm sure this will get you some work - I'd be impressed visiting there.

    Quiet golf clap, well deserved. :)

  9. design-is thread starter macrumors 65816


    Oct 17, 2007
    London / U.K.
    Thank you!

    Excellent - thank you for posting! That completes my 2 requested responses :)

    I'll have a look at the 'JQuery->facebook window popop'.

    Thanks very much the golf clap ;)


    Just a few responses to angelwatt's advice before I get stuck into changes:

    - a This is part of the overall design that I am reluctant to change at the moment as comments on the look of the design are coming through as good.
    - b I think adding colour would break the existing colour scheme used throughout the site. I will look into lightening them up or maybe adding a shimmer effect to make it more legible.
    - c I will change this if it becomes an issue (I'm going to get a bunch of people to usability-test it once I think its pretty much 100% done) but like how it currently sits. I am often more concerned about where I am within the site that what site I'm on - I have already chosen to the visit the site after all so usually know the address.
    - d Good idea.

    - a Text is small, but it looks good. I have found that most people don't have issue with it and those that do are familiar with methods of increasing the size.
    - b Same issue as 1 - a
    - c I found without differentiating them as such, they were lost due to the decision to use a small type size. Glad you approve :)

    - a Again, same issue as 1 - a. I may not gain anything, but I don't loose anything either. For response on footer in blog see 4
    - b Thanks - I was aiming to keep it clean and professional whilst not detracting from the work I post on it - hence the monotone look to really make those coloured items the focus.
    - c The content on the right is slightly inset from the right end of the menu above, as is the <p> content on the left. This is according to the original grid I drew up for the pages and is an integral part of the design (same issue as 1 - a)
    - d Thanks - I unfortunately couldn't get a link that would go though to the specific panel with the project, but landing on the project index allows for a better overview of all of them, so I was happy regardless.

    4 The blog was always going to be an issue within my design and my solution was to treat it as a different section of the site, allowing it to have slight variations on the layout - for example, it has the footer from Wordpress instead of the other pages, it introduces a break in the regular footer to allow it to scroll down the page. I think its commonplace to have a slightly altered template used for subsections of sites. If I can devise a way to build the Wordpress blog into the side scroll system (like the work & mics pages) then I will in the future, but for the time being this is a compromise I am willing to accept :)

    5 I built it with a small gap to balance it out on the page. If I find a browser which displays with a gap larger than I'd like I will go back and correct.

    6 I'm glad :cool:

    7 Not my strong point.
    - a I have tried to adopt best practice. I think I'm getting there.
    - b Took a while, but I got there!
    - c It's generated by - I intend to clean it up and get it out of tables when I have time. Low priority for the time being though as it's doing it's job fine.
    - d I agree. Once I've completed some other bits on my to-do-list, I was going to go back and work on getting it to float instead. Probably wont be for a while though.

    - a Thanks, hadn't picked up on that one!
    - b I was counting on the scroll wheel :eek: Will try and resolve.
    - c When I get to this bit I'll be asking some advice - hope you don't mind.


    Thanks heaps for helping. I'll update when I'm done! (or nearly done, or stuck ;) )


  10. angelwatt Moderator emeritus


    Aug 16, 2005
    As usual my comments are just observations and suggestions. Sounds like you were aware of some of the things I commented on and have thought through other things. On item 3b I did think about that a little when I was looking at the site, and a potential solution could come from item 8c. Currently as you go from project to project in your work page the URL doesn't change. With JavaScript you could modify the URL, which would allow you to create direct links to each project. The unfortunate side effect of this is if a person goes through a lot of them, it can build up the browser history and take a person a while to back out all the way. Though there's potentially still a workable way to get someone from the home page to a specific project. I'll be around if you decide to take that on.

    And off topic, anyone that may be wondering about my post before. I found that you can indeed nest list using the vBCode. You just do something like,
    [*]Item 1
    [*]Item 1a
    [*]Item 2a
    [*]Item 2
    It was the first time I tried doing it and was glad it worked.
  11. design-is thread starter macrumors 65816


    Oct 17, 2007
    London / U.K.
    I will be taking you up on that offer when I get to that bit, sounds like a good solution - thanks again angelwatt :)

Share This Page