New Style

Make suggestions and report problems.
Post Reply
User avatar
KillerB
Taylor Quinta de Vargellas 1987
Posts: 2425
Joined: 22:09 Wed 20 Jun 2007
Location: Sky Blue City, England

New Style

Post by KillerB »

I have loaded Julian's new style and would like comments please.

Please feel free to give constructive criticism and suggestions as well as any compliments (he does like them even though he wouldn't admit it).

This is not fixed yet,

Alex
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

1. Admin, thank you kindly for loading it.

2. Comments are welcome. phpBB has many dozens of different pages defined (many within the User Control Panel), and whilst developing I have been unable to preview any.

3. The header is a mess. Not sure what’s gone wrong: icon missing; stupidly big font. Will investigate and fix.

4. Icons are meant to follow a pattern. Grey => read, black => unread. The little * indicates a thread to which you have posted. The little wine glass a ‘hot’ topic, that is one that has received â”°Â¥15 replies. (I’d prefer that nothing is marked ‘hot’: other opinions?)
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

1. I don't think the icons that distinguish between read and unread items are sufficiently distinuishable from one another. May I suggest that the colours for icons for unread items should be inverted so that they are predominently red. Red and grey are distinctly different. Black and grey are not.

2. The thread title I am looking at now on the Post a Reply page is the same very large size as the current header. Can it be reduced please?

3. The Options and Upload attachments panel beneath the box I am typing into now retain the default light blue colour. Cab this be changed to match with our chosen colour scheme?

4. The Quote buttons have vanished.

5. Thanks to jdaw1 for the work done so far and to ARK for doing the servery bits.
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

OK, new version of header code sent to admin for upload. Next: where have the “Quote† buttons gone?
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

It’s not obvious to me that switching around the colours in Image would help distinguish it from Image. Or have I misunderstood?

Comparisons:
Image Image
Image Image
Image Image
Image Image
Image Image
Image Image
Image Image
Image Image
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

They are more recognisable when displayed on a coloured background like those above but not so easy to distinguish on a white background like this:

Comparisons:
Image Image
Image Image
Image Image

The examples here are also larger than they appear on the Board Index and individual Forums.

What I am suggesting is that the unread versions have a black border, red (or pink) background and white lines to represent text.
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

Same size: 18 by 18, here and there.

Currently the background is used to distinguish stickies from non-stickies (the tawny slightly resembling the yellow of a PostIt note). If red background is unread, how do I show read and unread stickies?
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

Relevant icons:
Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image
Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image Image
So we have {Forum | Sub-forum | thread | sticky | announcement} · {hot | locked | neither} · {mine | I haven’t posted}.

And now I look at them en masse, the announcement icons should have the same tawny background as the stickies. To be fixed.

Edit: Quote button problem found and fixed. Blue tabs changed, though another iteration may well be needed. Tawny added to announcements, pending a better arrangements of colours and iconettes. All resent.
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

jdaw1 wrote:If red background is unread, how do I show read and unread stickies?
Read Stickie = Tawny with grey lines
Unread Stickie = Tawny with red lines and red border
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
SushiNorth
Martinez 1985
Posts: 1341
Joined: 07:45 Mon 18 Feb 2008
Location: NJ & NY

Re: New Style

Post by SushiNorth »

DRT wrote:1. I don't think the icons that distinguish between read and unread items are sufficiently distinuishable from one another. May I suggest that the colours for icons for unread items should be inverted so that they are predominently red. Red and grey are distinctly different. Black and grey are not.
Agreed - and perhaps those icons could be made a bit larger? Also, it might pay to set a maximum width for the screen (as much as I hate limiting widths), as the content is always one long column. It is easier to read in tighter columns. 1024 or 1200 is probably sufficient, but i'm trying to skim at 1440 and that just isn't working.
JoshDrinksPort
Image Port wine should perhaps be added -- A Trollope
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

I have decided I am not keen on the tawny and blue colour scheme on the front page.

Can this please be the same colour scheme as the Forum indexes/pages so that we have a consistent style?

Also, is the grey bar with blue text immediately below the header and the grey formatting buttons above the box I am typing into and the Save, Preview and Sumbit buttons below it confirgurable? If so, can these please join the colour scheme?
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

SushiNorth wrote:it might pay to set a maximum width for the screen (as much as I hate limiting widths), as the content is always one long column.
I would prefer not to have a limit and allow users to simply decide for themselves which size of window to view the forum in. On my PC the column widths automatically re-size when the window size or shape changes. This may be different if you are not using IE.
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

New icons have been made, based on Derek’s idea of red background for unread and white background for read.

The only blue I see on the front page is that of a link — and links are usually blue. Am I missing something?

I want the user to control the page width — not me. No alterations planned in that department.
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

jdaw1 wrote:The only blue I see on the front page is that of a link — and links are usually blue. Am I missing something?
Have sent a screenshot by email to ensure we are looking at the same thing.
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

Oh, that blue. Where did that come from? I didn’t put it there. Hunting: it will die.
User avatar
SushiNorth
Martinez 1985
Posts: 1341
Joined: 07:45 Mon 18 Feb 2008
Location: NJ & NY

Re: New Style

Post by SushiNorth »

Regarding page width:
Most webpages do not make the entire page, left-to-right, one giant reading column. They use the left side for navigation, the right for portlets, and the reading columns are set up at about 600 pixels max. As most folks are now using tabs, too, this means the browser width is the same width for this site as it is for every other site -- aka I'm not going to change my browser width special for this site. Instead, I would recommend that a maximum width be placed on the column to spare those of us with wide screens the horrors of Carriage-Return Whiplash. Again, i am absolutely in favor of liquid width pages (where the page fills the whole screen, whatever size it might be), but not that the main text columns get out of control.

Here are a few references...
Jakob Nielsen, design guru, espousing liquid widths even as his own webpage restricts the max width of the reading column.
Web Design Layout Principles (see item 3)
Here are some other pages explaining why overly-wide columns should be avoided.
JoshDrinksPort
Image Port wine should perhaps be added -- A Trollope
User avatar
RonnieRoots
Fonseca 1980
Posts: 1981
Joined: 08:28 Thu 21 Jun 2007
Location: Middle Earth

Re: New Style

Post by RonnieRoots »

- I agree with Derek that the difference between read and unread posts is hardly distinguishable in the current design. It is too subtle. I would rather see a difference in the entire title of the thread, either being bold/regular, coloured text/black text, or coloured background / regular background.

- The quote buttons are not visible to me. The are there (I can see the function as I scroll over it), but invisible.

- The reply button is very small.

- I second SN's comments on liquid widths

That's it for now.
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

OK. Comments noted. When the repairs already done are uploaded, I will attend to some of the additional complaints — beginning with the obvious but dull question, how do I set a maximum width? (And Jakob Nielsen is a real expert: his words carry great weight with me.)
User avatar
SushiNorth
Martinez 1985
Posts: 1341
Joined: 07:45 Mon 18 Feb 2008
Location: NJ & NY

Re: New Style

Post by SushiNorth »

jdaw1 wrote:the obvious but dull question, how do I set a maximum width?
I believe they actually created a style property for it (details) but the sites I've built are so typically a combo of layers and antique tables and nesting insanity that I've never tried to use it. Supposedly it's just "max-width: ###px;"
Now if you wanted to be really slick... you could slap it in a site cookie, as a preference (hopefully like the font size bigger/smaller option does) and just have arrows for people to adjust the page to larger or smaller. Then write out the max-width div's with javascript.
JoshDrinksPort
Image Port wine should perhaps be added -- A Trollope
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

SushiNorth: thank you for volunteering to write the code. It is eagerly awaited.

Also, there has been general disapproval of the tawny box on the front page; it will become red.
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

jdaw1 wrote:Also, there has been general disapproval of the tawny box on the front page; it will become red.
Don't forget to remove the horrible sky blue from inside the horrible tawny at the same time.
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
DRT
Fonseca 1966
Posts: 15779
Joined: 23:51 Wed 20 Jun 2007
Location: Chesterfield, UK
Contact:

Re: New Style

Post by DRT »

Posts in threads alternate between white and pink (or is it light tawny?) but do not have borders. This means that when the bottom post in a thread is white it becomes undefined and shares the same white space as things below the post.

Would it be possible to give all posts a border which is the same colour as the pink (or is it light brown) together with rounded corners?

Also, on the Board Index the items with a pink (or is it light brown?) background have white vertical separators between columns. The items with white backgrounds presumably also have these but they are invisible. Can the white ones be pink (or is it light brown?). If not possible to have different colours in alternating backgrounds can all separators be another colour: grey or red? These separators also exist between the body of the post and the user info columns in threads.
"The first duty of Port is to be red"
Ernest H. Cockburn
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

The colour alternation had already been changed — neither is white. Can we see how that looks before committing to new colours.

I’m also unhappy with the horizontal line after the signature — it tricks the eye into believing that the signature belongs to the next post. One possibility would be to make the line after the signature dashed, and faint, as well as terminating each post with its own red non-dashed line. Or would that be too many lines?
User avatar
jdaw1
Cockburn 1851
Posts: 23613
Joined: 15:03 Thu 21 Jun 2007
Location: London
Contact:

Re: New Style

Post by jdaw1 »

FYI, main colours are:
  • #990000 = ThePortForum red;[/color]
  • #ebcdcd = Faint ThePortForum red;[/color]
  • #cc9933 = ThePortForum tawny;[/color]
  • #eeddbb = Faint ThePortForum tawny;[/color]
  • #cccccc = Grey.[/color]
  • #990000 = ThePortForum red;[/color]
  • #ebcdcd = Faint ThePortForum red;[/color]
  • #cc9933 = ThePortForum tawny;[/color]
  • #eeddbb = Faint ThePortForum tawny;[/color]
  • #cccccc = Grey.[/color]
  • #990000 = ThePortForum red;[/color]
  • #ebcdcd = Faint ThePortForum red;[/color]
  • #cc9933 = ThePortForum tawny;[/color]
  • #eeddbb = Faint ThePortForum tawny;[/color]
  • #cccccc = Grey.[/color]
  • #990000 = ThePortForum red;[/color]
  • #ebcdcd = Faint ThePortForum red;[/color]
  • #cc9933 = ThePortForum tawny;[/color]
  • #eeddbb = Faint ThePortForum tawny;[/color]
  • #cccccc = Grey.[/color]
User avatar
SushiNorth
Martinez 1985
Posts: 1341
Joined: 07:45 Mon 18 Feb 2008
Location: NJ & NY

Re: New Style

Post by SushiNorth »

jdaw1 wrote:SushiNorth: thank you for volunteering to write the code. It is eagerly awaited.
Lol - ok. Let me know when you want to get to that phase of your changes. Also, some kind of discussion ought to be had about what to do with unused space/layout beyond max.

One other thought... it seems counter intuitive to have save/preview/submit when the most common thing people do is Submit, then preview, and lastly "save"
---
Notes for self for later:
http://www.svendtofte.com/code/max_width_in_ie/
p {
max-width:30em;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto" );
}
JoshDrinksPort
Image Port wine should perhaps be added -- A Trollope
Post Reply