Accessify Forum Demos
I'm beat, but I quickly uploaded a demonstration of what I meant. It's a very rudimentary implementation with only one minor update from the previously posted code, but still enough to give an idea of what I was going for.
More suggestions will follow later. Incidentally, how on earth are you making the textarea full-height? Am I correct in guessing that it involves calculating the height of the "preview" and "send" buttons beforehand? (It is my considered opinion that vertical position in CSS is appallingly sucky.)
Share: 
Cool, that works smoothly. It seems the reply form is better when it's narrower since one reply is usually shorter than the thread alongside it?
The full-height topic reply form does use CSS to create gaps above and below. Check the #reply rulesets containing position: fixed and position: relative in the stylesheet. The one you're using is a bit older.
(EDIT) Opera 9.63 supports everything in my demos except the full-height <textarea>, it seems. IE7 seems the same but also gets the reply buttons wrong.
Share:
As you know, I have no where near the knowledge that you guys have...but I love what you're coming up with! 
Share:
Great work and ideas going on here
I went through the discussion and added stuff to the requirements document, particularly see the "Visual Design and On-page Functionality" section.
The demos are a great start Ben
I have some ideas for the visual appearance, I'm working on making changes to one of your demos Ben and will upload it when done for you all to review. Easier to just do one for you to see than try and describe what I'm suggesting.
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Last edited by Nigel Peck on 09 Jan 2009 04:32 pm; edited 1 time in total
Share:
I've started with what Cerbera had done and, having taken into account the discussion here, produced a mock-up of view topic.
I've linked this from a new home for mock-ups.
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
Glad the work is appreciated. Cool to see a demo from you and for the Requirements to be evolving. Exciting times! 
How much of that is what you want the end result to be? Ultimately, how much/little of these ends up in the real thing will be set by what the programmer is able and willing to achieve from the back-end we choose.
Linking to each set of mock-ups in a section of the Requirements document would keep things together better than creating a separate Demos List document, I think.
Message Controls
Position of the message controls in your demo looks perfect. However, the source order is illogical: the controls come before the <h2> which gives their context.
Of the 3 controls, only the Quote button is useful. Reply box is right there. Good spam protection would mean users never see spam messages to Report.
Markup Style
There's fair bit of <div>itis, classitis and redundant title attributes. the markup is indented to excess.
Editorial Style
Using a space, an arbitrary punctuation character, then another space between member name and message date looks a bit dated. Using a space, then the word "on", then another space makes the heading text more natural, imho.
Visual Style
Link aren't using the Accessify Forum colours? Message colours also seem different from what's used on the current forum. The green seems a bit BMW M3. The blue seems more urban khaki than the shades present in the Accessify gradient.
Colours and typography seem OK.
Navigation
A navigation bar (like in my demos) makes moving between forum areas more convenient. Like using a normal website. By highlighting the current area, it also serves the purpose of a breadcrumb trail, so you get back the space it takes up.
Control Panel
Since there's a search box on the page, a Search link is unnecessary. Many of the other Control Panel have little value. The remaining useful links would probably fit in the navigation bar.
Reply Column
The sidebar is using a width set in px and the rest of the page fits to what's left over. This makes the reply box dominate narrow screens, even at 800x600. End result is an awful lot of vertical scrolling. (My demo for that topic makes <body> 1,598px tall. Yours makes it 2,057px tall, 28% more scrolling.) On generous screen sizes, it is dwarfed by messages whose line lengths nearly fill the screen.% for column widths makes better use of the available space as columns resize proportionately.
Vertically, the bottom of the Preview and Send buttons is cut off at 800x600 in Firefox 2 with a single row of items in bookmarks toolbar, a single row of tabs and no extra toolbars. Add an extra toolbar (such as the Web Developer Extension) or a multi-row bookmarks toolbar or multiple rows of tabs and the buttons are completely obscured. On generous screen sizes, it becomes a little postage stamp to the right, so best use isn't made of the available space.
We'd probably need a scripting fix-up to keep the <textarea> height within sensible boundaries for browsers which don't apply top and bottom positioning to it properly.
Sans CSS
Without CSS, the organisation of the document is difficult to follow. Partly due to the message controls' source order issue.
The use of <hr> as a separator between message and signature looks too strong without the CSS. I'd also say it's too strong semantically, since the signature is more relevant to the message before it than the message after it.
Share:
| Cerbera wrote: |
| Of the 3 controls, only the Quote button is useful. Reply box is right there. Good spam protection would mean users never see spam messages to Report. |
Are you saying people only use the report function for spam? What about offensive and OT posts?
my mind is on a permanent tangent
Share:
| Cerbera wrote: |
| Linking to each set of mock-ups in a section of the Requirements document would keep things together better than creating a separate Demos List document, I think. |
I tried that just now, but I think it's best as it is, that way people who are only interested in something that they can see, can visit that page without being confused with a long requirements document.
| Cerbera wrote: |
| Message Controls
Position of the message controls in your demo looks perfect. However, the source order is illogical: the controls come before the <h2> which gives their context. |
Yes you're right, it had occurred to me last night but I didn't fix it, it's now fixed.
| Cerbera wrote: |
| Of the 3 controls, only the Quote button is useful. Reply box is right there. Good spam protection would mean users never see spam messages to Report. |
I disagree, good spam protection will never remove all spam, how do you tell the difference between someone promoting their business and someone asking questions about their business? Except by human review. Yes spam protection will help stop viagra spam, porn spam etc. but some will always get through.
I agree in some ways about the reply button, it doesn't need to be on every post. It is needed though, the sidebar doesn't negate the need for a separate reply page with a richer interface. The sidebar is for simple/quick replies, what about the various options while posting a reply? They can't all fit in the sidebar, a separate page is needed also.
| Cerbera wrote: |
| Markup Style
There's fair bit of <div>itis, classitis and redundant title attributes. the markup is indented to excess. |
I was waiting for you to say that
I find it easiest to work that way (everything clearly defined so I always know where I am). Tabs can be stripped out before being used live if required.
Which titles are redundant?
| Cerbera wrote: |
| Editorial Style
Using a space, an arbitrary punctuation character, then another space between member name and message date looks a bit dated. Using a space, then the word "on", then another space makes the heading text more natural, imho. |
I know where you're coming from, and I have done it that way recently on another site ("on xxx at xxx" is more modern).
I chose a dash because it's easier to pick up on while scanning the page (rather than another word which blends with the surrounding text) so you can easily glance up and down at names, dates or times. That's the idea.
Anyway I don't feel it's arbitrary - it's a valid choice of punctuation for it's purpose.
| Cerbera wrote: |
| Visual Style
Link aren't using the Accessify Forum colours? Message colours also seem different from what's used on the current forum. The green seems a bit BMW M3. The blue seems more urban khaki than the shades present in the Accessify gradient. |
Yes you're right, the colours needs work, will do that and let you all know when done.
| Cerbera wrote: |
| Navigation
A navigation bar (like in my demos) makes moving between forum areas more convenient. Like using a normal website. By highlighting the current area, it also serves the purpose of a breadcrumb trail, so you get back the space it takes up. |
I have different views to you on this. I don't think your solution works, the Members and other non-category links get confused with the category links.
I don't think the highlighting works either, the same information may be there but it's nowhere near as intuitive as a breadcrumb. Sometimes space is worth using when it makes the information clearer.
I'm not against listing the cats at the top, but we haven't yet agreed on how many there will be, so I left that for now. We can add them in later if there are few enough to make it work.
The alternative suggestion I have is a drop-down cat list, near the top somewhere.
| Cerbera wrote: |
| Control Panel
Since there's a search box on the page, a Search link is unnecessary. Many of the other Control Panel have little value. The remaining useful links would probably fit in the navigation bar. |
The same as for reply, that's a quick search, it doesn't negate the need for a search page with more options, although maybe an "advanced search" link, next to the search box, would be more appropriate?
| Cerbera wrote: |
| Reply Column
The sidebar is using a width set in px and the rest of the page fits to what's left over. This makes the reply box dominate narrow screens, even at 800x600. End result is an awful lot of vertical scrolling. (My demo for that topic makes <body> 1,598px tall. Yours makes it 2,057px tall, 28% more scrolling.) On generous screen sizes, it is dwarfed by messages whose line lengths nearly fill the screen.% for column widths makes better use of the available space as columns resize proportionately. |
I think you're right about the column width, % is better, will sort.
I don't think a bit more scrolling is bad, I think the space adds to readability. It's a balance and I think the balance between space and text is better the way I have it. What do others think? More space has already been requested on this thread.
| Cerbera wrote: |
| Vertically, the bottom of the Preview and Send buttons is cut off at 800x600 in Firefox 2 with a single row of items in bookmarks toolbar, a single row of tabs and no extra toolbars. Add an extra toolbar (such as the Web Developer Extension) or a multi-row bookmarks toolbar or multiple rows of tabs and the buttons are completely obscured. On generous screen sizes, it becomes a little postage stamp to the right, so best use isn't made of the available space. |
Sorted. I think we should have some javascript that extends the length of the quick reply textarea as your typing reaches the end of it, until it reaches the bottom of the screen (then it would start scrolling).
This, combined with the re-sizable textarea code, and your suggestion of...
| Cerbera wrote: |
| We'd probably need a scripting fix-up to keep the <textarea> height within sensible boundaries for browsers which don't apply top and bottom positioning to it properly. |
| Cerbera wrote: |
| Sans CSS
Without CSS, the organisation of the document is difficult to follow. Partly due to the message controls' source order issue. |
Will review this.
| Cerbera wrote: |
| The use of <hr> as a separator between message and signature looks too strong without the CSS. I'd also say it's too strong semantically, since the signature is more relevant to the message before it than the message after it. |
I agree, will review further.
Show Location?
I think we need to discuss whether we show members' locations on posts, so I setup a thread to discuss whether to show location on posts.
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
I've spent some more time on the demo.Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
Although I like the backgrounds to the posts you might want to consider making them just a tad lighter.
I assume at some point you'll be adding a skip/jump link to go direct to the quick reply form?
my mind is on a permanent tangent
Share:
| Rich Pedley wrote: |
| Although I like the backgrounds to the posts you might want to consider making them just a tad lighter. |
I agree, it's done, is that better?
| Rich Pedley wrote: |
| I assume at some point you'll be adding a skip/jump link to go direct to the quick reply form? |
Yes, skip links will need deciding on. What skip links do you think we should have? I added this to the requirements document.
Accessify Forum Administrator ~ Nigel Peck / MIS Web Design
"Everything I say is not meant to be set in stone" - Van Morrison
Share:
| Nigel Peck wrote: |
| [...] people who are only interested in something that they can see, can visit that page without being confused with a long requirements document. |
Redesign Mock-ups
| Nigel Peck wrote: |
| Yes you're right, it had occurred to me last night but I didn't fix it, it's now fixed. |
| Nigel Peck wrote: |
| [...] how do you tell the difference between someone promoting their business and someone asking questions about their business? [...] Except by human review. |
I expect good spam blocking software will cut the problem to a tiny number of messages. Staff will easily pick these up during their normal browsing.
| Nigel Peck wrote: |
| The sidebar is for simple/quick replies, what about the various options while posting a reply? |
| Nigel Peck wrote: |
| Which titles are redundant? |
These links are self-explanatory so the title should go:- <a ... title="Forum index">Home</a>
- <a ... title="Search this site">Search</a>
- <a ... title="Contact the administrator">Contact Admin</a>
- <a ... title="reply to this post with quote">Quote</a>
- <a ... title="report this post as spam">Report</a>
- <a ... title="Details of our current members">Memberlist</a>
Call it Members or Member List.
- <a ... title="View your profile">Profile</a>
Call it Your Profile.
- <a ... title="Check your private messages">You have no new messages</a>
I don't think we should have a PM system.
- <a ... title="Logout of the forum">Log out [ Member Name ]</a>
Is this useful? If so, call it Log Out, Name.
- <a ... title="Visit Profile">redcrew</a>
Links to names sometimes go a website rather than an on-site profile. Maybe title="View profile" is OK.
- <a ... title="Direct Link to This Post">8<sup>th</sup> December 2008 - 04:16</a>
Might otherwise be for a list of contemporary messages.
| Nigel Peck wrote: |
| [...] ("on xxx at xxx" is more modern).
I chose a dash because it's easier to pick up on while scanning the page [...] so you can easily glance up and down at names, dates or times. |
| Nigel Peck wrote: |
| Yes you're right, the colours needs work, will do that and let you all know when done. |
I just tried #f7f9fb as the background colour of blue messages and that seems to work great, if the background image faded to it. (This is exactly the colour which the <h1> gradient fades out to.) Finding a similar version of the gold for those messages would complement it nicely. Perhaps #f9f9ed or thereabouts?
| Nigel Peck wrote: |
| I have different views to you on this. I don't think your solution works, the Members and other non-category links get confused with the category links. |
| Nigel Peck wrote: |
| I don't think the highlighting works either, the same information may be there but it's nowhere near as intuitive as a breadcrumb. |
While users may orient themselves using breadcrumbs on deep websites, they usually click the main navigation to move around. This forum is very shallow, so a breadcrumb is even less useful.
| Nigel Peck wrote: |
| The same as for reply, that's a quick search, it doesn't negate the need for a search page with more options, although maybe an "advanced search" link, next to the search box, would be more appropriate? |
| Nigel Peck wrote: |
| I don't think a bit more scrolling is bad, I think the space adds to readability. It's a balance and I think the balance between space and text is better the way I have it. What do others think? More space has already been requested on this thread. |
| Nigel Peck wrote: |
| I think we should have some javascript that extends the length of the quick reply textarea as your typing reaches the end of it, until it reaches the bottom of the screen (then it would start scrolling). |
Then again, it pleases me greatly to see the buttons nestling between the <textarea> and the viewport so very neatly.
Share:
| Nigel Peck wrote: | ||
I agree, it's done, is that better? |
yes, slightly. Though it could probably go even lighter. But that one may be my opinion - I find reading text over a background more difficult than used to.
| Quote: | ||
Yes, skip links will need deciding on. What skip links do you think we should have? I added this to the requirements document. |
probably not worth discussing too much until the design is finalised - just one to keep in mind for later.
my mind is on a permanent tangent
Share:
| Quote: |
| <a ... title="Forum index">Home</a> |
On accessify forum the title isn't needed, on other sites where the forum isn't a separated site then it might be, so I agree with Cerbera here.
| Quote: |
| The problem is messages getting dramatically less width at 800x600 because of the px sidebar. (Messages getting dramatically more width at sizes of 1280x960 and above is also a problem.) |
set a max width?
my mind is on a permanent tangent
Share:
% supports the broadest range of screen sizes, setups and user conditions by keeping the column widths in proportion at any size. Try changing browser width, text size and related settings when testing my demos.
Share: