Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Critique on 'Comments section' Design

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #192139
    Jerba
    Participant

    I’ve just finished playing around with a design for a comments section and am looking for some critique/feedback. I’m relatively happy with it, there are a few things i think i’ll end up tweaking. Anyway, critique away css-tricks!

    http://codepen.io/Responsive/full/QwGqKr/

    Thanks.

    If anyone is interested the images used for the user_avatars are from http://uifaces.com

    #192275
    shaneisme
    Participant

    Seems to fall apart at smaller widths, as well as very large widths.

    You’d probably need some media queries at larger resolutions to sort things out and make sure text isn’t too long. I’ll typically make content have a max-width: 40em; so no matter what things won’t get too difficult to read.

    Also, you should make your defaults OK on mobile. Less padding on the left and right, maybe bring the profile bubble down to the bottom (or top) to make more room for the content itself.

    #192659
    Scott
    Participant

    Hey, Great job so far it’s coming along something I can point out that would help the design would be:

    Adding some line height.

    Adding some padding to the comment boxes, giving the text some breathing room.

    Increasing the size of the avatar just a hair.

    Make the author stand out as this is an important part of online interaction make sure people know who wrote it and who they are, highlight the name, bold it as an example.

    Add -webkit-font-smoothing: antialiased; to clarify your text.

    You will be surprised how far line-height’s and good typography can go here is an example of a comment section i am designing now, i am about 25% complete notice the line height and padding which gives the design a huge difference. http://marshall-design.com/tricks/comments.png

    #192673
    Scott
    Participant

    @chrisburton good point! I was having debate about it for hours.

    #192676
    shaneisme
    Participant

    Add -webkit-font-smoothing: antialiased; to clarify your text.

    I don’t think this should be used as a blanket style. It should only be used in very specific instances, perhaps a small bit of light text on a dark background. Most of the time it will kill readability in edge cases.

    http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
    http://files.christophzillgens.com/webkit-font-smoothing.html

    #192677
    Scott
    Participant

    @shaneisme makes an exceptional point and @chrisburton it’s actually a custom styleguide I created for the company I am working for.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design’ is closed to new topics and replies.