WE'VE MOVED!

We are proud to announce our NEW community destination. Engage with resident experts and fellow entrepreneurs, and learn everything you need to start your business. Check out the new home of StartupNation Community at startupnation.mn.co
Options

Online Help

InactiveMemberInactiveMember subscriber Posts: 12
edited March 2007 in Website Critique
Hello Everyone. I have a general critique/implementation request for a very large, complex online help database that is implemented with XHMTL/CSS. This is a question for advanced designers ... but everyone is free to chime in!The table of contents for the help is implemented being implemented in two ways for the purpose of testing. The first method uses the <ul> element to present the table of contents as a set of bullets.http://www.scenomics.com/documentation/help.stmThe second method uses <table> elements to present the contents in a more standard visual form, as you might find in a book. Table-less layout is a big deal but W3C says that tables are appropriate for tabular data. I think a table of contents qualifies.http://www.scenomics.com/documentation/commands.stmhttp://www.scenomics.com/documentation/interface.stmEither way, there are going to be a lot of nested tags. Which approach is better? As far as I can see, neither approach scales better/worse than the other.[Also, this help is under construction. You will find things that don`t yet work.]Scaling is important because there are around 500 pages already and 1000 graphics. The page count will increase over time. [The site makes heavy use of server side includes.]Some technical writers have commented that the <ul> based design doesn`t have the right look/feel for a table of contents and that the <table> based design is better.
CookieMonster2007-3-12 20:46:27
· Share on FacebookShare on Twitter Share on Google+

Comments

  • Options
    InactiveMemberInactiveMember subscriber Posts: 12
    Thanks for the input; I really respect your opinion. General consensus prefers the table layout. The <ul> layout doesn`t look right ... people seem to expect it to behave like a tree control ... and although that could be done ... avoidance of Javascript is a key design issue here.
    The nested appearance is controlled by CSS in this stylesheet. So the table is just a straight table <table>, <tr>, <td>, with nested tags as required by table structure.
    http://www.scenomics.com/css/page.css</A>
    [ See "Table Of Contents Styles " at the bottom.]
    The table contents are not in a database as there would be very little gain since it`s just a list of hyperlinks ... albeit a long list. There are also design issues with database use.
    The page source for most of the pages is shown here.
    Database and Javascript are avoided because each page needs to be transformed into printed pages and be easily portable to Microsoft`s compressed HTML document format for distribution on end-user machines. So, it`s actually easier to use a database-less design that ports very easily. Basically to ship this documentation as compressed HTML requires a table of contents in the build environment and that`s about it. Should take less than 1 day. Similarly, a printed form should be relatively easy to build with CSS. So those are some of the requirements there.
    I also have an additional question.
    Some experimentation has been done with providing "Back" links at the top of the pages. However, this doesn`t really scale well, and using the back button is easier as it returns you to the exact place in the previous page, so you don`t have to scroll down through the table of contents to find your place again, for example. What do you think of this?
    Feel free to post a snippet of CSS code and Thanks Again!
    · Share on FacebookShare on Twitter Share on Google+
  • Options
    RichardBuggyRichardBuggy subscriber Posts: 4
    Hey CookieMonsterYou don`t really appear to be using the table to present tabular data. I`d use lists and style them appropriately with CSS.    Rich
    · Share on FacebookShare on Twitter Share on Google+
  • Options
    InactiveMemberInactiveMember subscriber Posts: 12
    Rich, Thanks for the input! Not yet sure what`s going to be done and I`m not the final word on the contents layout.
    Nikole, Thanks for the additional information. I`ve debated whether or not to put in backward navigation link buttons, either <a> or javascript. These don`t make sense in all contexts, so probably should be avoided.
    The back button, or BACKSPACE key, makes it relatively painless to navigation backwards. I think backwards navigation options in the page are rather superfluous, and have a per-page cost in terms of memory.
    The idea of opening the page in a new window from the TOC. Well, to be honest, I don`t like this either. Funny, though I`m not necessarily a standards-freak ... well actually I am ... I really believe in not breaking document flow.
    Actually, another question. There is the possibility of deploying a version of this using frames and a javascript tree control. It`s already implemented but it doesn`t really work well in Firefox ... hard to style the frames. The IE frame styling relies on a few dirty hacks, but the help itself looks/works pretty awesome.
    I know frames aren`t a favorite technique ...
    · Share on FacebookShare on Twitter Share on Google+
  • Options
    InactiveMemberInactiveMember subscriber Posts: 12
    Rich, Is there any benefit to using lists instead of tables?
    · Share on FacebookShare on Twitter Share on Google+
  • Options
    RichardBuggyRichardBuggy subscriber Posts: 4
    Rich, Is there any benefit to using lists instead of tables?A list with sublists seems to be a more natural fit. It just feels like you`re using a table for presentation purposes rather than because you actually have tabular data. With a list anyone using a screen reader may have an easier time skipping sections instead of being forced to read the entire table.
    · Share on FacebookShare on Twitter Share on Google+
  • Options
    InactiveMemberInactiveMember subscriber Posts: 12
    The color shading idea is great. Had not thought of that. I think a table of contents is tabular data ... it`s called a "table" of contents.
    But I agree. Actually I could probably create something that looked exactly the same with tables or lists. Or with <p> elements.
    · Share on FacebookShare on Twitter Share on Google+
  • Options
    RichardBuggyRichardBuggy subscriber Posts: 4
    Rich - how is a table of contents not tabular data?If it wasXXX ........ #pagenumI would agree but it`s* XX  * XXX  * XXX  * XXX     * XXX  * XXX*XX  * XXXLooks like nested lists to me!If you using a single column table, as CookieMonster is, you can probably do it more efficiently with lists and actually add structure to the content. The current implementation would be useless to someone using a screen reader.Also, CookieMonster should be able to reduce the size of the file sent using lists and style sheets.
    I just don`t like bullets for this unless you`re using some roman numeral outline format.So turn them off using CSS. RichardBuggy2007-3-13 6:47:48
    · Share on FacebookShare on Twitter Share on Google+
Sign In or Register to comment.