Grow your CSS skills. Land your dream job.

Critique on new hosting website design

  • # July 13, 2014 at 4:51 am

    Hey guys, I’ve recently spent around a month on this site and I’ve used a mixture of subtle coloration and simple google fonts ( which I will list below so you guys can enjoy some free fonts too! :p ).

    Just wanted to see what you guys think of our new site and on context of that I’ve decided to give anyone at CSSTricks 10% off for the first 6 months of hosting, I’ve loved this community for ages and I want to give something back.

    Fonts used:

    Header: >> font-family: ‘Open Sans’, ‘Raleway’, Sans-serif;

    Paragraph: >> font-family: ‘Open Sans’, ‘Raleway’, Sans-serif;

    Main coloration : #34495e;

    Secondary coloration(s) : #fff & #ebebeb;

    Link to the site

    Would love to receive some constructive criticism from you guys because I know that you guys know what you’re on about! :)

    To get 10% off just use the code “CSSTricks”, thanks for the criticism guys.

    # July 13, 2014 at 8:33 am

    Love the swooping-own intro animation with the rotating detail.

    # July 13, 2014 at 1:25 pm

    Thanks for the response mmcgu. :)

    Tim
    # July 13, 2014 at 2:03 pm

    Overall its really cool, I really like the animations. Just a couple notes:

    • On this page, I think it might look better if everything wasn’t underlined, at least with the dashed line. But that’s really just personal preference.

    • The desktop version looks nice, however, on smaller screen sizes, some stuff breaks down. Take a look at this screenshot and this screenshot. You should adjust your browser widow yourself to see what happens. The clouds get all funky and go over some things, and the navbar looks weirdly spaced.

    • I might consider combining some of those stylesheets, it would make your site faster.

    • The syntax highlighting on my computer looks funny, you might have some invalid code, e.g. you forgot to close a tag.

    # July 13, 2014 at 2:05 pm

    I’ve taken all your comments into consideration and I’m working on resolving them now; thanks for such a detailed response!

    # July 14, 2014 at 2:37 am

    Cool site !

    Small things:
    1. Maybe give the paperplane a little more room to breath in the circle. Either make the outline a little thinner or the circle bigger.
    2. On retina the Logo is not crisp.
    3. On the Slider, the text jumps when you change the words. Because of “text-align:center;” this is anoying. You need to find a diffrent solution here!

    Personal preferences.

    1.Some letterspacing for the headlines on the footer. Small fonts in bold look so squished togeither. Or make them just a medium (500).
    2. Have a look at the kerning of your logo.

    Greetings Fabi

    # July 14, 2014 at 9:16 am

    Thanks for the awesome critique, I’ve got to work with resolving those issues too, sorry about the logo deficiency on retina screens as I’m using a fairly old laptop for design currently, sorted the slider stuff, made it more marginalized and have split them so the second element is at the bottom so there is less jumpiness ( or none ).

    # July 14, 2014 at 6:03 pm

    I think all the secondary pages should use the blue in the first page for the header.

    # July 15, 2014 at 4:22 am

    Hi mreider,
    Thanks for your response and yeah, That’s a good idea!

    # July 15, 2014 at 8:39 pm

    Hey! Awesome website ya got going. :)

    One thing I noticed was that it’s a bit choppy in some places when resizing the screen. Check this image out to see what I mean on the client login page for example.

    Much appreciated on the discount code! :)

    # July 16, 2014 at 2:49 am

    Btw your Logo reminds me alot of the telegram app logo !

    # July 16, 2014 at 3:12 am

    Thanks for your response kingslayer, I’m not sure that was intentional as it was an openly available vector which is open for use to anyone using the font-awesome icons url(‘http://fontawesome.io/icon/paper-plane/’).

    The logo ( as a paper airplane ) was supposed to represent the service as simple and readily available in a metaphorical manner. :)

    # July 16, 2014 at 3:29 am

    Thanks a lot for the response Paul! That was on our checklist to fix the responsiveness of the billing page, thanks for providing us with screenshots so we can see it from your perspective.

    Also, on context of the discount code, it’s no problem, it’s our way of thanking this communities contribution and valued critique.

    The discount code is: csstricks

    # August 4, 2014 at 8:38 am

    There has been further, consistent work done to our site if you want to critique it some more, we’re open to it! :)

    # August 30, 2014 at 3:26 pm

    Bump again, worked on the previous critique, any more will be appreciated!

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

You must be logged in to reply to this topic.

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