Feedback thread for board design
Feedback thread for board design
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.
Re: Feedback thread for board design
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.
YL
- 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.
YL
Re: Feedback thread for board design
(Pinned the post so it doesn't get lost.)
YL
YL
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
Re: Feedback thread for board design
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.
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.
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
Re: Feedback thread for board design
Hey,
finally, some thoughts from me - thanks for the initial work!
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/
# 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/
Re: Feedback thread for board design
Hi Garvin
Thanks for having a look.
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 ?
Thanks for having a look.
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:I like the new top bar. Maybe better make the hyperlinks not have an underline though, that looks a bit too much.
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:The footer links look a bit untouched, maybe make them centered
Made it wider.garvinhicking wrote:Login input fields on the left hand side are very narrow
Made it wider as well.garvinhicking wrote:Search form on the left hand side are very narrow
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:Make the logo on the top left clickable and lead to the forum start page?
I recreated the s9y-structure and added many posts to the first forum. Imho it is fine as it is.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 moved it to the right.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
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:The "new topic" link is moved a bit too much offside
Please have a look again at the announcement forum. I think it works, the list scans well.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
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: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).
I added icons to the post actions, and for the go2top-link replaced the text.garvinhicking wrote:Maybe have icons/buttons for "Top" and "Reply with quote" and other functions.
You mean the headline and the authorname + date? I grouped them together with whitespace and made the authorline smaller.garvinhicking wrote:isually distinct the post title and metadata from the main content (lines, backgrounds or different paddings)
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).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?
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 ?
Re: Feedback thread for board design
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.
Some more things that I noticed:
For some remarks on what you already discussed.
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: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:I like the new top bar. Maybe better make the hyperlinks not have an underline though, that looks a bit too much.
How about you meet in the middle? .linklist { margin-left: 25%; text-align: left; } should align those links with the actual content.onli wrote: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:The footer links look a bit untouched, maybe make them centered
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: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:Make the logo on the top left clickable and lead to the forum start page?
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:Please have a look again at the announcement forum. I think it works, the list scans well.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
The blue header going from edge to edge. I'd actually prefer more vertical spacing in general.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 ?
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
Re: Feedback thread for board design
Hi YL
Yeah, feedback! :)
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.
Yeah, feedback! :)
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:I think it's perfectly okay to deviate a bit here since it's a navigation after all
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:How about you meet in the middle? .linklist { margin-left: 25%; text-align: left; } should align those links with the actual content.
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.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.
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.
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:(yes, I like them, too, but they tend to disappear here, at least they do in Webkit browsers)
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:The blue header going from edge to edge. I'd actually prefer more vertical spacing in general.
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: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
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: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
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: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)
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 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
Re: Feedback thread for board design
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: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.
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:More vertical spacing would be possible, you mean more space between the rows?
(I mean the gap to the left of the form fields.)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.
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: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.
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.)onli wrote:It's a list
YL
Re: Feedback thread for board design
Went with a lighter version of that. Yes, looks better to me.yellowled wrote:You could always go with #ccdee7 or a lighter version of that.
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:border-bottom for a row would help as well, I think.
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: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”.
Fixed. Yes, that I did not see anymore.yellowled wrote:(I mean the gap to the left of the form fields.)
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: just an idea – could the s9y_plug be moved to the “sidebar”, ie. below the login form?
Yes, exactly. Just does not work here.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.)
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.yellowled wrote:How about http://fontawesome.io/icon/comments-o/ …? (Symbolizing discussion, a forum etc.)
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
Re: Feedback thread for board design
Hi,
May I propose changes to the design somewhere along these lines:
Will try some more in the next days.
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;
}
# 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/
# 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/
Re: Feedback thread for board design
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.
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.
Re: Feedback thread for board design
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.
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.
Re: Feedback thread for board design
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.
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.