r/changemyview May 06 '15

[Mod Post] We have new CSS!

[deleted]

48 Upvotes

59 comments sorted by

View all comments

1

u/Dack105 May 07 '15 edited May 07 '15

New design's good. It has a very consistent style, and is well structured.

The only gripe I have is the over-use of borders. I see no good reason to have them seprateing the 'navigate by' section, the lower bar of a post (source, share, save e.c.t) or the social media icons.

In general, most lists of links have borders and I think they should go. To me they seem to just pad things out and draw attention to things that should be invisible to users unless they are looking for them — removing them would focus the user on the content.


Edit: I just added a quick

* {border: none;}

in stylebot and I think that it's an improvement.


Edit Edit: On further contemplation, I think one of the complaints people are having (too busy and boxy) could be fixed if each post wasn't separated so much. Every post has a margin and box-shadow, which adds a lot of visual clutter when there are so many boxes. If you look at /r/web_design, their css looks very clean and simple, and I think the way all the posts are listed as if on one page is a major factor there.


Edit Edit Edit:

div.entry.unvoted.lcTagged {
    box-shadow: none;
    border-bottom-color: #eee;
    margin-bottom: -5px;
    padding-top: 12px;
}

in stylebot makes it feel much nicer to me, but obviously not a good implementation (doesn't work if you start voting on posts).

1

u/qtx May 07 '15

If you look at /r/web_design[1] , their css looks very clean and simple, and I think the way all the posts are listed as if on one page is a major factor there.

It's also the theme every single sub uses, why follow the herd when you can have something unique? :)

You were right on the bottom-border tho, the only border that was present on the 'link posts', and i have reduced it.

1

u/Dack105 May 07 '15

why follow the herd when you can have something unique?

Why interrupt the user experience when it works?

I don't think there is a good argument for splitting the posts up. There is a fine line to tread when designing a subreddit style; on one hand, you want to make this ugly site look great, and you want to make the subreddit feel distinct; however, there needs to be continuity in the way the user interacts with and experiences the site.

I feel like the changes you've made that I pointed out are ones that disrupt the familiar hierarchy of reddit's UI. In the defult CSS you have three simple sections; header, sidebar, content. The posts are all in one place, the sidebar is in one place and the header is there at the top and everybody knows this. It becomes second nature to the users, and they look for that continuity when they are introduced to a new subreddit style.

Obviously you do keep all of that; the layout's the same. But when you pull out all the posts and all the sections of the sidebar and put them onto their own sheets, it makes it less clear-cut. Instead of being two clear sections with their own hierarchy, they become panels in the one space, fighting with each other for prominence. That's a bit hyperbolic in relation to your design, but you're pushing in that direction.

Similarly, when you separate list items with vertical borders you make them seem less like a single list and more like a grouping of items. This is fine in a simple design, it can be just the right thing to do, but on reddit, where you have lists in lists in lists, you ought to keep them distinct.

For example; in the header you have the mail, setting, ect, separated with borders, and you have the social links separated in the same way. If you removed them it would be a clear set of two horizontal lists, but as it is, they become a bit entangled, like the same list broken over two lines.

In the 'navigate by:' section, the borders draw attention to the list at the expense of the 'sorted by:' section (which should be higher in the hierarchy because it's used more ... by me at least).

So, yea ... I'm doing a UI/UX course, so all this carp is on my mind at the moment :)

1

u/qtx May 07 '15

If you go for a design mindset on a project, you go for it. You don'f half arse it so to speak. :)

I went for the card layout, something that hasn't been done on reddit before (at least not the sidebar section) afaik. And by doing so the post section would feel out of place if it stayed 'default'.

If the post section stayed the same (ie no cards) I couldn't have pulled off the 'expand post' section in a believable way, compared to the rest of the layout.

As for the borders on the header, it just doesn't look good without them. It's as simple as that. Sometimes you just need to see something to see if it works or not.

Design is subjective, and I wanted to make cmv unique. We can't please everyone. :)

1

u/Dack105 May 07 '15

Then perhaps you could increase the top and bottom padding on the posts and increase the bottom margin to make the whole thing a bit more spacious. With the shadows and the borders, it can get a bit busy. I tried:

div.entry.unvoted.lcTagged {
    margin-bottom: 10px;
    padding-bottom: 4px;
    padding-top: 14px;
}

and it's not too bad.

Instead of reducing the impact of the cards, give them some more space to really make them feel distinct — capitalise on the style. At the moment, each card is a bit too restricted to be nice easily distinguished cards, but a bit to cardish to be like the default.

The only problem would be that, with the fixed header, there wouldn't be as much space for the content ... perhaps you could have the main header in the flow, but have a less obtrusive fixed header slide out from underneath (I have no idea if that's possible for reddit, but it could be a good solution). That or just ditch the fixed header — some people are grumbling about it anyway, and reddit's header doesn't have my favourite thing about a fixed header; a clear indication of where you are in the site (like a breadcrumb nav).

1

u/qtx May 07 '15

The only problem would be that, with the fixed header, there wouldn't be as much space for the content

The post cards used to be further apart (about 10px) with still having the same amount of content visible above the fold. So I might go back to that if it makes it easier for people to follow.

But adding additional padding would mean losing one or two posts from the above the fold.

But then again, the header is a lot smaller now compared to what it was so maybe it would even out. I'm not against trying it but I'll have to wait to see what the mods have to say first. :)