Messy home page

Yep:

I agree to the vertical alignment. I tried it with Chrome dev tools and it’s much cleaner than multiple subcategories per line.

1 Like

This link might be good for inspiration, since they are the same engine: https://community.imgur.com/

They use far less categories.

Can you also add a screenshot from an active thread ?

Wow that’s pretty nice. Hats off! :slight_smile:

Not right now, we’ll soon have the old site up for reference.

@Cebbi I’ve done a quick test for the subcategory alignment on the light theme - please have a look. I don’t have the information of posts per subcategory though.

Will there be an option to hide Categories which Users don´t frequently visit?

No worries Bart cover the more important things first.

This is interesting to me that since I am 40 my eye sight drops and I notice many sites lacking help for people like me.

And I want to make sure I don’t have the old site better in memory when making a suggestion for the new site.

1 Like

The main issue is a distinct lack of visual hierarchy, which makes it incredibly tough for our brain to identify what is important first, and what to focus on next, and so on.

I am also no fan of dark forums, because the readability suffers in general, and it results in afterimages on the retina.

I made a quick Stylebot/Stylish sheet for the light theme’s landing page. Definitely not perfect yet, but I am already using it myself, because the original is so abysmal, that I couldn’t stand it any longer.

This is what it looks like now:

The code is pretty badly organized and shoddy, because I just went through it quickly, but for those of you who prefer a better white theme landing page, here’s the stylesheet:
http://www.upl.co/uploads/lightthemeadjustment1525559050.txt

[Edit: update for improved category columns: general, support, contest now divided into two columns]
[Edit 2: update for improved post paragraph readability and quoted posts. Reply button is now obvious. Increased font size and leading for reading. topic list headings at the very top decreased font size.]

Just copy the code in Stylish (Firefox) or Stylebot (Chrome). Also, this is meant for larger desktop screens. Haven’t tested for mobile or smaller screens - mine is portrait 1920x1200 screen or half of a 2560x1440 screen.

Comments welcome, and hopefully this adds some constructive criticism.

2 Likes

I use stylish with the following tweaks:

span.subcategory {
    display: block;
}

img.avatar {
    border-radius: 20%;
}

.tlp-featured-topics.has-topics .topics .tlp-featured-topic.show-details .featured-details .content,.tlp-featured-topics.has-topics .topics .tlp-featured-topic.show-details .featured-details .content a {
    color: white;
    /*text-shadow: 0px 0px 4px black;*/
}
1 Like

I don’t have much to say on the categories themselves.

But, briefly playing with the light theme and then going back to the dark them, I did notice that the mid-tone gray that is used for the horizontal line between posts feels a lot brighter in the dark theme than it feels dark in the light theme.

I suspect that making the mid-tone gray a little bit darker for the dark theme would also make the posts look a little less busy :slight_smile:

Edit:

Lemme apply some maths.

On the white theme, the gray for the buttons is #e9e9e9, which in 16bit int lab has a lightness value of 60755, white itself is 65535 of course, so the difference is 4780.

In the dark theme, the buttons are #4c4c4d(21277), and the background is #1c1c1c(6915), which is a difference of 14362, which is quite big.

6915+4780=11695, which translates to #2b2c2c. I think that might be a good starting point to switch the mid gray to(though, for people with weaker screens, it might need to be a teensy bit brighter.

1 Like

I’ve updated my stylesheet to improve the readability of posts and the post list.

And I really don’t understand why the current light theme insists on a grey tint to denote visited posts - I generally want to see clearly which posts I visited earlier, either to avoid them, or to revisit: a grey tint that hardly differentiates it visually from the other posts in the list is rather unhelpful. I changed that as well. The gravatar received a subtle stroke, because avatars with a white background looked odd (such as mine).

The emoticons are problematic in the light theme as well (bright yellow on white). I added a bit of a subtle dropshadow to improve the visual readability.

And some other things (@Herbert123 is now more obvious as well (orange) .

http://www.upl.co/uploads/lightthemeadjustment1525561957.txt
[minor edit to fix image padding) ]

Really, I think the flat design and “subtlety” in colours in this new light theme make for an unreadable mess. Content is king, not design.

1 Like

Pretty happy with the result so far.

I updated the header bar, and it looks a bit friendlier now. Let me know what you think - my feeling is that the light theme’s usability and readability has improved by spades, but this is of course my personal opinion. For me it works really well now.

Still some issues to resolve, but I am fine with it so far. Even the mobile version looks good.

Latest version here:
http://www.upl.co/uploads/lightthemeadjustment1525567225.txt

(copy css and paste in Stylish (Firefox) or Stylebot (Chrome).

This looks much more clear. - The color coding is still strange though. If you keep the strip on the side it would make sense to color the headlines in the color of the section as well. Or else just get rid of the strip or maketwo alternating colors to give some simple structure to the different sections?

Yes, I understand what you are saying - but if all headings would be coloured differently, the overall visual readability of the page would be reduced again due to the visual noise.

I agree, I would explore “alternate colors” maybe have the strip in two grey tones, or grey and orange? - Just something to visually indicate where the sections start and end. - Simple.

EDIT: Also maybe go with white text and icons on the top bar and “new topic” button? - That would look a bit more fresh I believe.

You’re right. Updating now.

Agree about the home page lacking visual hierarchy and clear layout, but it should be fixable with CSS once the major background issues are out of the way. It’s a bit of an eyesore at the moment, but no need to panic about it. I’m sure a solution will be forthcoming.

I’ve opened a topic for gathering feedback/ideas on the category colors: