Feedback thread for board design

Random stuff about serendipity. Discussion, Questions, Paraphernalia.
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Feedback thread for board design

Post by onli »

Last week we activated the new board design, after changing the website design before. Some of you already noticed. If you want to give feedback, if you noticed things that do not look as they should, this is the place.
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Feedback thread for board design

Post by yellowled »

I'll try to make it quick and brief, so please forgive me if that comes across as rude, it's just meant to be short. Still glad that you took this on. :)
  • Probably not possible in phpBB, but the “site CSS” (including normalize.css) should be included before the theme CSS in the compiled stylesheet.
  • p.author still has Verdana as font
  • The "options nav" (FAQ, Search etc. above the content) could/should be combined into one list; yellow really doesn't work as a link hover color there (would suggest the darker blue in the site stylesheet instead).
  • #s9y_plug_left could easily take 100% width, but weren't there ads before?
  • Breadcrumbs (back to main, back to parent forum etc.) should be below and above the content, but you are aware of that, I think.
  • I think the global h2 { font-size: 2em; } is a tad much here. In general, quite a bit of vertical space is lost by large typography and vertical spacing, which makes for i.e. fewer posts visible in the viewport etc.
  • Quick fix for that: ul.topiclist dt can be much wider than 50%, but also dd.lastpost should be wider than 25% (at least with German datetime constants/month names) – you might want to throw box-sizing: border-box; on both to make layouting easier.
  • We might want to switch the date formats to something shorter, but I'm not sure that's done in the theme, might be a setting in the board.
  • Also, but that is a very nitpicky thing, combined selectors like p.author and ul.topiclist are usually not necessary and cause more trouble than actually help.
  • I actually don't think responsiveness should be your priority here. If it's doable, yes, but don't waste too much time on something nobody's ever really complained about. :wink:
That's it from my end for the time being. Still, knowing how horrible phpBB theming is: well done!

YL
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Feedback thread for board design

Post by yellowled »

(Pinned the post so it doesn't get lost.)

YL
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Feedback thread for board design

Post by Don Chambers »

Looks great to me!
=Don=
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Feedback thread for board design

Post by onli »

Really finishing the design proved to be difficult.

I'm currently investigating a different approach. Completely new CSS, sticking a lot closer to the design of the main site. Have a look: http://onli.columba.uberspace.de/s9y_phpbb

This is not done yet. But as soon as I finish styling the editor, maybe someone wants to help creating some test content in that board?

Also taking comments already.
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Feedback thread for board design

Post by garvinhicking »

Hey,

finally, some thoughts from me - thanks for the initial work!
  • I like the new top bar. Maybe better make the hyperlinks not have an underline though, that looks a bit too much.
  • The footer links look a bit untouched, maybe make them centered
  • Login input fields on the left hand side are very narrow
  • Search form on the left hand side are very narrow
  • Make the logo on the top left clickable and lead to the forum start page?
  • Can you make some more subcategories with some dates? I think we need a clearer line separation between them, if there will be multiple dates.
  • In topic view the "page 1 of 1" hangs a bit on the top left, maybe move that plus pagination to top right like now, also let it have more padding to the box
  • The "new topic" link is moved a bit too much offside
  • Separation of topics is also a bit too lightweight, I think we either need box backgrounds, zebra-striping, lines or something like that
  • For posts, I actually enjoy it having a bit greyish background, it is much easier on the eyes (white is 100% brightness and very eye-straining).
  • Maybe have icons/buttons for "Top" and "Reply with quote" and other functions.
  • Visually distinct the post title and metadata from the main content (lines, backgrounds or different paddings)
  • The left hand navigation gets discarded on the post page. Maybe generally don't introduce a left column and leave everything on a 1-column layout and put boxes above/below for functions like search/login?
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Feedback thread for board design

Post by onli »

Hi Garvin
Thanks for having a look.
garvinhicking wrote:I like the new top bar. Maybe better make the hyperlinks not have an underline though, that looks a bit too much.
That would not be consistent with every other link on the page :/ I kind of agree, it would look better here, but I'd like to have a consistent rule. Can we think of one?
garvinhicking wrote:The footer links look a bit untouched, maybe make them centered
I tried that, it looks better when the start is lined up with the left. But the second part of the footer is centered.
garvinhicking wrote:Login input fields on the left hand side are very narrow
Made it wider.
garvinhicking wrote:Search form on the left hand side are very narrow
Made it wider as well.
garvinhicking wrote:Make the logo on the top left clickable and lead to the forum start page?
I'd like that. But the logo is coming from the overall site design and YL said it would be too much work to change that.
garvinhicking wrote:Can you make some more subcategories with some dates? I think we need a clearer line separation between them, if there will be multiple dates.
I recreated the s9y-structure and added many posts to the first forum. Imho it is fine as it is.
garvinhicking wrote:In topic view the "page 1 of 1" hangs a bit on the top left, maybe move that plus pagination to top right like now, also let it have more padding to the box
I moved it to the right.
garvinhicking wrote:The "new topic" link is moved a bit too much offside
That's complicated. I moved it close to the box, basically the old position now. But I'm not really convinced it is better like that? Having it left seemed to highlight it for me.
garvinhicking wrote:Separation of topics is also a bit too lightweight, I think we either need box backgrounds, zebra-striping, lines or something like that
Please have a look again at the announcement forum. I think it works, the list scans well.
garvinhicking wrote:For posts, I actually enjoy it having a bit greyish background, it is much easier on the eyes (white is 100% brightness and very eye-straining).
It is already not 100% white, that comes from the main page design. A bit more greyish would work for me as well, but here I think it is too much. We could give it a bit of time and see how it works in practice?
garvinhicking wrote:Maybe have icons/buttons for "Top" and "Reply with quote" and other functions.
I added icons to the post actions, and for the go2top-link replaced the text.
garvinhicking wrote:isually distinct the post title and metadata from the main content (lines, backgrounds or different paddings)
You mean the headline and the authorname + date? I grouped them together with whitespace and made the authorline smaller.
garvinhicking wrote:The left hand navigation gets discarded on the post page. Maybe generally don't introduce a left column and leave everything on a 1-column layout and put boxes above/below for functions like search/login?
It does not really get discarded. The space gets filled with the author box to the left, avatar image and name. If the post or the forum list were to fill the whole width it would get too wide, though the responsive design actually does that when it is needed. Having the left hand space separate continues the design of the header and the main page, I feel that is important (and tried a 1-column design first).

I played a bit with the table design. What do you prefer: The blue header going from edge to edge, as in http://onli.columba.uberspace.de/s9y_phpbb, or with the white padding around, as in http://onli.columba.uberspace.de/s9y_ph ... um.php?f=2 ?
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Feedback thread for board design

Post by yellowled »

I haven't really played with the new design much, but I wanted to chime in on the feedback anyway. Still very glad that you took this on, since I don't and probably won't have much time for this now or in the near future. I'm referring to the current (11/23) state of the forum design.

For some remarks on what you already discussed.
onli wrote:
garvinhicking wrote:I like the new top bar. Maybe better make the hyperlinks not have an underline though, that looks a bit too much.
That would not be consistent with every other link on the page :/ I kind of agree, it would look better here, but I'd like to have a consistent rule. Can we think of one?
I think it's perfectly okay to deviate a bit here since it's a navigation after all. Navigation links are often different from content links. That being said, it might be an option to use button-style links here, but I would suggest to leave out the icons in that case (I don't think they are really necessary) or (might be interesting, but not very accessible) use icon-only buttons …
onli wrote:
garvinhicking wrote:The footer links look a bit untouched, maybe make them centered
I tried that, it looks better when the start is lined up with the left. But the second part of the footer is centered.
How about you meet in the middle? .linklist { margin-left: 25%; text-align: left; } should align those links with the actual content.
onli wrote:
garvinhicking wrote:Make the logo on the top left clickable and lead to the forum start page?
I'd like that. But the logo is coming from the overall site design and YL said it would be too much work to change that.
It is, because the logo changes for different resolutions. That is only possible (in a sensible way) if it's a bg image, and to make a bg image clickable would require quite a bit of change. If you both feel strongly about it, we can change it, but I will need time to find a solid solution that works for all sites. (Also, I don't think it's necessary because there's a start link in the nav.)
onli wrote:
garvinhicking wrote:Separation of topics is also a bit too lightweight, I think we either need box backgrounds, zebra-striping, lines or something like that
Please have a look again at the announcement forum. I think it works, the list scans well.
That is precisely what bothers me right now. I realize you're trying to adhere to the overall site design as much as possible, but it does not work well for this site. Most views in this forum consist of very similar data which makes it very hard to scan. Anything you can do to assist that will help. I strongly suggest zebra-striping as well as solid borders instead of box-shadows (yes, I like them, too, but they tend to disappear here, at least they do in Webkit browsers). I also don't think that the forum has to look exactly the same as the rest of the site.
onli wrote:What do you prefer: The blue header going from edge to edge, as in http://onli.columba.uberspace.de/s9y_phpbb, or with the white padding around, as in http://onli.columba.uberspace.de/s9y_ph ... um.php?f=2 ?
The blue header going from edge to edge. I'd actually prefer more vertical spacing in general.

Some more things that I noticed:
  • might be unfinished, but in the current state, the pagination is very hard to use since the links don't have a large clicking target
  • there are some areas that have, hm, padding that doesn't look like it's supposed to be there; for instance the form/fieldset of the registration form on the board index
  • both the s9y_plug as well as the options menu would benefit from having more horizontal space in larger resolutions (I haven't really seen this in smaller resolution, sorry)
  • using the hamburger icon for … erm … I don't even see what it is supposed to symbolize, but at this point, the hamburger should really only be used to expand smallscreen navs; very confusing for me
YL
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Feedback thread for board design

Post by onli »

Hi YL
Yeah, feedback! :)
yellowled wrote:I think it's perfectly okay to deviate a bit here since it's a navigation after all
I added the rule "links with icons don't have an underline". Actually fixes a display bug with the icon in my FF as well.
yellowled wrote:How about you meet in the middle? .linklist { margin-left: 25%; text-align: left; } should align those links with the actual content.
With the centered notice below that also looks a bit strange to me, but look for yourself. It is certainly a good idea.
yellowled wrote: I strongly suggest zebra-striping as well as solid borders instead of box-shadows (yes, I like them, too, but they tend to disappear here, at least they do in Webkit browsers). I also don't think that the forum has to look exactly the same as the rest of the site.
I added zebra-striping (do you have a suggestion for a nicer looking alternative color?). I'm not sure what the border should accomplish on top of that? Edit: Do you mean around the forum box, and maybe the post, to make the shadow a bit stronger? That I just added.

The forum does not have to look exactly the same as the site. I just wanted to have a better starting point to build a design that works better with the site than my first try, and the site design was the logical starting point.
yellowled wrote:(yes, I like them, too, but they tend to disappear here, at least they do in Webkit browsers)
I just checked with a webkit browser and it does look a bit different than intended with it. The design works better in FF. At the end I should do a second design pass to improve some webkit rendering differences.
yellowled wrote:The blue header going from edge to edge. I'd actually prefer more vertical spacing in general.
Edge to Edge it is. More vertical spacing would be possible, you mean more space between the rows? One of the criticisms of the current design I received was that not enough threads are visible on one screen height, I wanted to improve on that…
yellowled wrote:might be unfinished, but in the current state, the pagination is very hard to use since the links don't have a large clicking target
Unfinished indeed, but I thought the simple numbers looked nice. But you are right, click target is more important. I copied the current design of the pagination.
yellowled wrote:there are some areas that have, hm, padding that doesn't look like it's supposed to be there; for instance the form/fieldset of the registration form on the board index
Can you show me? Registration form looks a bit unstyled to me, but not generally broken or broken as related to fieldsets. I might just be blind to that issue by now.
yellowled wrote:both the s9y_plug as well as the options menu would benefit from having more horizontal space in larger resolutions (I haven't really seen this in smaller resolution, sorry)
I made them a bit wider. I feared the s9yplug might then collide with the logo, but it seems to scale well. However, the navigation menu can't grow easily as there shall be no linebreak in a link – I moved it to text-align: right.
yellowled wrote:using the hamburger icon for … erm … I don't even see what it is supposed to symbolize, but at this point, the hamburger should really only be used to expand smallscreen navs; very confusing for me
It's a list ;) I had another list icon there before but it just looked bad. Maybe http://fontawesome.io/icon/align-left/ would be better, but the meaning of that also does not fit well. Do you or does someone have a suggestion which fontawesome icon would be a good fit for a forum icon?
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Feedback thread for board design

Post by yellowled »

onli wrote:I added zebra-striping (do you have a suggestion for a nicer looking alternative color?). I'm not sure what the border should accomplish on top of that? Edit: Do you mean around the forum box, and maybe the post, to make the shadow a bit stronger? That I just added.
I actually meant to replace the box-shadow with a solid border, but this works as well. As for the zebra-striping, this is already a vast improvement. (border-bottom for a row would help as well, I think.) Finding colors for zebra-striping is hard, especially since our color palette doesn't offer much variety in the first place. You could always go with #ccdee7 or a lighter version of that.
onli wrote:More vertical spacing would be possible, you mean more space between the rows?
Argh, I actually meant horizontal that time, sorry. Which probably is a reaction to the forums no longer taking up the full width as before, but it all seems a tad “squeezed together”.
onli wrote:Can you show me? Registration form looks a bit unstyled to me, but not generally broken or broken as related to fieldsets. I might just be blind to that issue by now.
Screenshot 2016-11-23 20.50.11.png
Screenshot 2016-11-23 20.50.11.png (24.62 KiB) Viewed 20575 times
(I mean the gap to the left of the form fields.)
onli wrote:I feared the s9yplug might then collide with the logo, but it seems to scale well. However, the navigation menu can't grow easily as there shall be no linebreak in a link – I moved it to text-align: right.
I wouldn't mind both of them below each other using the full width, but that goes against the complaints about using up too much vertical space a bit … just an idea – could the s9y_plug be moved to the “sidebar”, ie. below the login form? That would open up the full width for the options nav.
onli wrote:It's a list ;)
Erm, no. It's bars. :) http://fontawesome.io/icon/list/ is a list. (I assume that's the one that you thought looked bad? I'm not keen on it, either.) How about http://fontawesome.io/icon/comments-o/ …? (Symbolizing discussion, a forum etc.)

YL
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Feedback thread for board design

Post by onli »

yellowled wrote:You could always go with #ccdee7 or a lighter version of that.
Went with a lighter version of that. Yes, looks better to me.
yellowled wrote:border-bottom for a row would help as well, I think.
There is already a light grey border there. I really think that is separate enough. Let's revisit it when in practice we or others can't follow the line.
yellowled wrote:Which probably is a reaction to the forums no longer taking up the full width as before, but it all seems a tad “squeezed together”.
Yeah, I understand that. Give it a day of using it, I am convinced that feeling will go away, as it did for me. The max-width of it is wide enough for what it shall hold.
yellowled wrote:(I mean the gap to the left of the form fields.)
Fixed. Yes, that I did not see anymore.
yellowled wrote: just an idea – could the s9y_plug be moved to the “sidebar”, ie. below the login form?
Sure, and that will work fine. But wait a minute. Do we still want that plug? That book is still helpful, but not as helpful as possible since it was written before 2.0. Related question: Should the FAQ link in the navigation not link to https://docs.s9y.org/docs/faq/index.html ? Maybe that would be enough, if also adding an entry for the book there.
yellowled wrote: http://fontawesome.io/icon/list/ is a list. (I assume that's the one that you thought looked bad? I'm not keen on it, either.)
Yes, exactly. Just does not work here.
yellowled wrote:How about http://fontawesome.io/icon/comments-o/ …? (Symbolizing discussion, a forum etc.)
That is like a better looking variant of the symbol I already used for the thread symbol in the forum view, http://fontawesome.io/icon/commenting/ … Edit: But that for forums and commenting-o for threads might just work. At least it looks better. Till we find a better solution, I now set those two.
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Feedback thread for board design

Post by garvinhicking »

Hi,

May I propose changes to the design somewhere along these lines:

Code: Select all

/* More spacing for top icons */
.options .mainmenu {
    padding-left: 5px;
    padding-right: 5px;
}

/* Less crampy login area */
#quick-login h3 {
	text-align: center;
}

#quick-login #username {
	margin-bottom: 15px;
	width: 100%;
}

#quick-login #password {
	margin-bottom: 15px;
	width: 100%;
}

#quick-login #autologin {
	margin-bottom: 15px;
}

/* Better font and spacing for thread title */
.topiclist .header dt {
	font-size: 1.3em;
	padding-left: 10px;
}

.topiclist .header .lastpost {
	padding-right: 10px;
}

/* Clearer "post a new topic" button  */
/* @Todo, somehow get rounded corners to work, also adjust top/bottom spacing somehow */
.buttons .post-icon {
	background-color: rgb(55, 77, 118);
	margin-top: 10px;
	margin-bottom: 10px;
}
.buttons .post-icon a {
	color: white;
	text-decoration: none;
}

/* Better search buttons */
#forum-search #search_keywords {
	width: 100%;
	margin-bottom: 10px;
}

/* Reply-Button */
/* @Todo, rounded corners see above */
.buttons .reply-icon {
	background-color: rgb(55, 77, 118);
	padding-left: 10px;
	margin-right: 10px;
}
.buttons .reply-icon a {
	color: white;
	text-decoration: none;
}

/* Larger searchform area in thread */
/* @Todo, remove absolute widths somehow */
.topic-actions .search-box {
	width: 500px;
}

.topic-actions .search-box #search_keywords {
    width: 300px;
}

/* Easier contrast for the actual posts, white is too aggressive and does not work for me */
.post.bg1 {
	background-color: #e1ebf2;
}

.post.bg2 {
	background-color: #DEE3E7;
}
Will try some more in the next days.
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Feedback thread for board design

Post by onli »

Hi Garvin

1. More spacing for top icons: I made the margin wider.
2. Less crampy login area: I don't think text-align: center is a good idea here. But I made the input boxes bigger and added more margin above and under the remember me box.
3. Better font and spacing for thread title: I don't see what that should achieve? All it does is making the first entry in the header bigger? What I adapted though is to add a bit of margin at the left.
4. Clearer "post a new topic" button: But it is not a button. It is a link. And it already stands out thanks to size and placement. I don't think that is a good idea. Same for the reply button (especially not when logged in)
5. Better search buttons: Making the input 100% wide breaks the design. I made the search input a bit bigger.
6. Easier contrast for the actual posts, white is too aggressive and does not work for me: I don't like that. White is not aggressive per se. We have a whole website with white background (which is not 100% white, but a little bit greyed) and dark text, why should that suddenly not work in the forum? There is also no need for zebra striping here, those boxes are already very distinct, through border, shadow and whitespace.
thh
Regular
Posts: 419
Joined: Thu Oct 26, 2006 2:38 pm
Location: Stuttgart, Germany
Contact:

Re: Feedback thread for board design

Post by thh »

Many thanks for your work on the new design for the new board version!

I especially like the highlighting of new posts in an existing thread.

Would it be possible to highlight threads with new postings (and forums with threads with new postings) in the same way? The red marker on the left is much more difficult to spot.
onli
Regular
Posts: 2822
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Feedback thread for board design

Post by onli »

Thanks :)

Do you still feel that is an issue after the recent change to also bold the title of the thread/forum? Otherwise we could remove that and make the background yellow like with a new post.
Post Reply