YOUR OPINION PLS

here is original ghost guide: http://ghost.radified.com/

here is new one (which i'm still working on): http://nortonghost.radified.com/

new one is layed out with table-less xhtml css; old one table-based html.

. what do you think of in new design? i mean between sidebars and main-content sections, and around headers & footers .. like used in original guide.

. what do you think about ? color clash? should i make sidebars color more complimentary to ghost logo?

. what do you think of ? too big? (it is the default.)

. what do you think of ? again, it's the default.

. what do you think of the ? do you like that shade of red?

(got the color here > http://www.communitymx.com/content/article.cfm?page=2&cid=AFC58 )

background:

http://blogs.radified.com/2007/06/upgrading_web_master_skills_xhtml_css_challeng...

Thanks bro. I tend to agree.

Although it is only personal preference, I too would recommend a layout that maximizes the functional use of the real estate (i.e., no borders, place navigation at top of window, etc.).

A small change, but note that the guide says “...your back-up images (now called Restore Points) should be stored...” -- “Restore Points” should read “recovery points”.

Lookin’ forward to see the new guide develop . . . .

It is only the perspective of one, but I am not a big fan of sidebars because of the large amount of screen real estate consumed.  With web page design, I believe “less is more,” in the spirit of much of what Google does, for example.

Rad wrote on Jun 27^th, 2007 at 6:33pm:

A interesting article related to this is at http://www.maxdesign.com.au/presentation/em/ - the important thing is that it's based on avoiding larger eye movements. So, it's a very VERY rough guideline at best; the actual underlying measurement is the arc subtended by the text, not words or anything else. Reading distance and monitor DPS and font size all vary a lot more than this guideline really takes into account.

The main thing is that there are good and bad ways of achieving this guideline if you do want to follow it.

The bad way is enormous margins and fixed-pixel layouts, since it doesn't actually achieve the right goal anyway and causes huge amounts of pointless vertical scrolling - meaning that in actual practice, the cure is far worse than the disease. Having a single column layout and constraining the width in an age of widescreen displays is sheer madness.

The main good way, in print, is to use multiple columns - but then print layouts don't have to worry about vertical scrolling. Vertical scrolling is death - so in practice multiple columns flat-out don't work for the web unless you're also willing to lay your content out in "pages" - i.e. constrain height at the same time. CSS3 columnar layouts have some of what you need for this, but I don't believe it's all the way there (and IE doesn't support any of it anyway).

The real challenge is to find something useful to do with the page space to reduce line lengths instead of just wasting it. A better answer, if the structure of your text supports it, is to put meaningful content in there in boxes that you can flow the main text around. The boxes can be screenshots, sidebar explanations that go into more detail, or all kinds of things. Jokes, quotes, offhand remarks, almost anything.

[ Apropos of this, a wonderful book is Concrete Mathematics. Unfortunately the print layout had overlarge fixed-width margins, but at those margins weren't just wasted, they were peppered with all kinds of useful notes and asides. The clever part is that the marginalia were contributions from the students who had been given the material in the text as lecture notes, commenting on the material or just making humorous asides about it. ]

Then, my personal style of layout for this is to place these things into the document as divs alternating CSS styles with "float: left;" and "float:right;", so that the main text flows sinuously around them. This is a far less artificial way of lowering the average line length, and it's good for the reader since rather than forcing parenthetical comments way off the current page onto a link - which means they may as well be on another planet, frankly - screenshots or small amplifications of ideas stay within easy visual range of their context. It's win almost the way.

Once you've set up these kind of divs, a nice trick you can do with a little bit of javascript is to have a close button for them (either individually or at the document level) which adjusts the div style to add/remove "display: none;" so that readers who just want the body text can have those shown or hidden as they prefer.

The other thing is that for a guide it'd be a really good idea to provide a separate default print stylesheet. Maybe even two, one with side notes included and one that just has the body text.

A print stylesheet wouldn't have any artificial margins at all - all most print stylesheets do anyway is set all the non-content parts of the page to "display: none;" and put the content to "width:100%;". Having that stylesheet selectable then solves the problem of people like me who want the text set to the full width of the browser window.

Been working on the new Ghost guide. Still in development, but making progress.

We have diffs of opinion, as I do not like reading long lines of text.

Old Ghost guide was 10-point Verdana. Read using "points" is not good .. as it is a print unit.

http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm

I used 13-pixel Verdana. Read you should never use less than 12-pixels:

http://www.youthtopia.net/26principles.html (see item #13).

In Dreamweaver tutorial I'm using (Lynda) guy recommends 11-pixel Verdana.

Tho he uses a Mac, and I heard Macs can look 25% bigger due to differnt dpi.

I like your second link about Math:

Quote:
 

I have 2 semesters Calculus (both 'A's) .. so I can appreciate math.

Interesting link. Note that they do advocate giving users the choice of width (having some JS that substitutes in alternate CSS makes that easy) and it's also worth looking at how they laid their site out with respect to vertical scrolling and how they at least filled the "blank" space with a navbar (although the right-hand navigation they give should probably have been a folded version of the complete TOC, instead of the forward/back thing).

A long long time ago, Jakob Neilsen wrote of web writing needing to try and be in the "inverted pyramid" newspaper style because of vertical scrolling. See also http://www.codinghorror.com/blog/archives/000376.html for a different perspective (with interesting comments).

The fact that most users these days have scrollwheels (or the trackpad equivalent) is interesting, but trackpads vertical scrolling is different - relatively crude and prone to overshoot, so in a sense the modern demand for notebooks over desktops for home use changes the equation again.

Note that the Webtypography site itself breaks the content up to have their pages be small enough to be read without scrolling, although they didn't bother to mention it as a guide.