[OLPC library] FLOSS Manuals visual presentation

Wed Sep 3 16:45:04 EDT 2008

Looking at http://en.flossmanuals.net/OLPC_simple and
http://en.flossmanuals.net/Sugar/Introduction , the content is most
excellent!  But the presentation needs work.  I hope these are easy to
fix.  Should I file Trac bugs for them?

* The manual doesn't fit on my XO screen (Browse 95 on 8.2-757) *and*
there's no way to horizontally scroll it.  In e-book vertical mode, even
less text is visible  That seems like a show-stopper.  The first line
   "The XO laptop is designed to help you, your family, and your
community to learn and grow, and to"
is cropped to
   "The XO laptop is designed to help you, your family, and your
community to learn and grow"
in regular mode; I have to View > Zoom out twice before I can see all
the text.  The line is cropped to
     "The XO laptop is designed to help you, your family, and y"
in vertical e-book mode; I have to zoom out about 5 times before I can
see it all.

The HTML for the book must not force a particular width.  Maybe this is
coming from the gray box around the text.  I see a ds-contentcontainer
<div> with width:654px and a few other divs and tables that may not be
necessary.

* The orange and "fishnet over flesh" ( 8-) ) theme is jarring and
inappropriate.
** I think eliminating
   background="/publish/OLPC_simple/rsrc/TWiki/FlossSkin2/background.gif"
in the <body> tag will get rid of the fishnets
** Maybe the fleshtone in the main text will go away if you eliminate
   background:#FFF7F0;
in <table id="ds-layout"
** The orange isn't quite OLPC's orange, I think it's #ff7f00 vs. #f78f1e.
** The gray margin around the text is the only Sugar-like element.  But
it wastes space and imposes a tight margin next to the fishnet so it
doesn't feel expansive but like a photocopy of a page on the screen.  If
you got rid of it I think the material would be more pleasant to read,
and maybe the text would flow to fit the screen.

* Is it possible to have conventional < previous ^ top > next chapter
advance links in each chapter?

If not, the only navigation is the left-hand box.

* The CSS for the left-hand box eliminates the distinction between
visited and unvisited links!  This is very bad for navigation (see "3.
Not Changing the Color of Visited Links" in Jakob Nielsen's "Top Ten
Mistakes in Web Design" http://www.useit.com/alertbox/9605.html ).

* The "Introducing the XO" text in the left-hand box overlaps itself In
Firefox 3.1pre and on my XO at every zoom level.

* The left-hand navigation uses a color change and a rule above to
indicate each section, but wiki pages use a font size increase and a
rule as underlines under section headings.

* The two icons above the left-hand navigation box do the same thing (go
to '/' ), don't seem like useful to kids on the XO, and the back arrow
is confusing below the browser's own back arrow.

I've done a little bit of CSS tweaking but I've never created .css from
scratch.  So if you want I can propose exact changes, but I'd be
guessing and messing.    (BTW I used Google Chrome to inspect elements,
the Firebug extension to Firefox is even more powerful.)

* The <title> tag for every page is the same "OLPC_simple (en)".  This
makes the history (hover over the back button) useless, makes
bookmarking harder, and prevents Browse and Firefox 3's Awesome bar from
working (you can't type "insta" and magically "Installing new
Activities" shows up in the location field).

The "Introducing the XO" does heading capitalization right.
* But in http://en.flossmanuals.net/Sugar/Introduction , when I see
"WHAT IS AN ACTIVITY?" I just get anxious.
** Also in the Sugar manual, some of the Appendices are mixed case no
spaces.  Just use "Joining activities")

I hope this helps, I'm sorry to appear so critical.  Again, well done on
the text of the manuals!

--
=S Page