Grow your CSS skills. Land your dream job.

Portfolio re-design feedback

  • # December 14, 2012 at 5:25 pm

    So I have decided to re-design my portfolio to make it more professional.

    Some constructive feedback will be appreciated! Let me know what you think.

    http://jshjohnson.com

    # December 14, 2012 at 5:45 pm

    I really like the look and feel of this design. Especially I like how the portfolio itself is organized. It looks very clean and nice. (really like the hover effect from the images)

    On the latest Google Chrome build on Windows 8, I’ve gotten a very little bug where there is a scroll bar on the main-page even thought It completely fits in the browser window. That’s because the #wrapper element is a bit to large.

    Changing

    #wrapper {
    min-height:100%;
    height:auto!important;
    height:100%;
    margin:0 auto -60px;
    }

    to

    #wrapper {
    min-height:100%;
    height:auto!important;
    height:100%;
    margin:0 auto -61px;
    }

    solves the problem. You might need to check if there is some border in the way making it bigger or if its a chrome on windows specific bug.

    Anyway keep up the good work, looks fine.

    # December 14, 2012 at 5:50 pm

    I am on my mobile so it’s hard to tell but I’m guessing you’re using HTML5 elements such as header, footer etc?

    My browser is cutting things off like you need something like modenizr or something similar to help with this issue.

    # December 14, 2012 at 5:56 pm

    Fixed them two problems, thanks!

    # December 14, 2012 at 6:36 pm

    Are you sure. My mobile is still showing your header background colour half cut off. Same goes for the footer. I’m assuming its meant to stretch 100% of the browser…

    # December 14, 2012 at 7:06 pm

    Loading fine on IE’s now as well as iOS – might be your mobile cache, not sure

    # December 14, 2012 at 9:10 pm

    It’s really awesome, the only constructive feedback I have is on pretty minor things, but hope it helps out:

    Personally, I would make the call to action bigger and take away the label, as it repeats itself. Also, the hover effect makes it look indented/pressed, whereas I would usually use this look for the :active selector and use :hover to make it look highlighted or even raised.

    Also, the contact form could use a little bit of work. Generally what I do is have the labels have a defined width and then right align them. This keeps the labels directly next to their fields, but the fields are then vertically aligned. The budget slider could also be labelled so that the prospective client knows roughly where they fall.

    As I said though, it’s looks pretty awesome as is; great job man :)

    # December 14, 2012 at 10:06 pm

    First thing I noticed (and my bandwidth didn’t like it): in portfolio page, all the images are way too heavy for the web. I checked the sizes for the first two 600KB+ and 900KB+. Had to wait quite a bit for all 4 images to load.

    If you’re using photoshop, try playing with “save for web (and devices)” feature.

    # December 15, 2012 at 2:50 am

    Cleared the cache and I’m still getting the same results ungortunately. I also noticed that the menu and your logo doesn’t appear on page load for some reason.

    I’m using the buily-in browser with the Samsung Galaxy Nexus. Maybe it just doesn’t like HTML5 elements even with a shiv.

    # December 15, 2012 at 3:00 am

    Is it something like [this](http://imgur.com/Qtraz “http://imgur.com/Qtraz”) that you’re seeing, @Watson90? That happens to me when I resize my browser to a narrow width and then scroll to the right. The way I usually avoid this is to set the #wrapper (or whatever is holding the background image) to have a min-width of however wide the content is. In this case, that is 1060px.

    I’m not sure whether that’s the most correct way to solve that problem, but it would work on this site if both #wrapper and footer have min-width:1060px

    # December 15, 2012 at 9:31 am

    Just made it responsive, wonder if that will solve the mobile issue?

    # December 15, 2012 at 12:50 pm

    I really like the way it is responsive right now, one thing I’d add right now is the following.

    In the portfolio page, with a browser-width higher than ~1210 pixels. The Images slide to the left, even though they are completely visible, causing bugs with the hover event and the sliding animation. I’d just turn the sliding off if the width is above 1210 pixels.

    # December 15, 2012 at 3:24 pm

    @jshjohnson, I would recomend couple of things to improve overall vertical rhythm by setting padding in your div.second at 30px 0 20px and add line height to H1 at 1.4

    # December 16, 2012 at 9:24 am

    Thanks for the help guys! Appreciate it

    # December 17, 2012 at 6:33 am

    _

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".