I’m inviting all web and graphic designers to send me mockups for our help pages. I have generally good knowledge of proper page layout, but that doesn’t always translate to good-looking web pages. I’m certainly not the best person to be selecting colors, as I have red-green color deficiency.
Use my BeanStalk mockups as a starting point. These contain most of the block-level components that we really care about, although they don’t have any tables or figures. Feel free to work tables and figures into your mockups, bearing in mind DocBook’s model for them.
There’s an about page, which Yelp/gdu makes for every DocBook document. The contents of these pages are mostly generated on the fly from informational markup in the Docbook.
Introduction to BeanStalk shows a block quote. Purchasing Beans shows an admonition. Bean Storage and Care shows a program listing.
Some things to keep in mind:
- I’m a sucker for watermarks.
- Be careful with colors, and understand we can’t guarantee that your exact color palette will be used. In Yelp, we generate all the colors we need from the current theme.
- You can change the HTML, but the HTML needs to be clean and to degrade well without CSS. In particular, avoid tables for layout. This is an accessibility requirement.
- We want to use the same design, give or take some tweaks, for both Yelp and for the web. Yelp is far more restrictive. A big web page with sidebars and banners would look dumb in Yelp.
- Note the existing navigational aids on the pages: the link trail (list of ancestor sections), and the previous and next links. These mockups show the previous and next links at both the top and bottom, although Yelp/gdu currently only puts them at the bottom. I think having them at the top as well is far more important on the web than in Yelp. That might be one of those tweaks I mentioned.
- I am pretty consistent about using a scale factor of 1.2 throughout all of my page layouts. This means you can work with these relative sizes: 0.69, 0.83, 1.0, 1.2, 1.44, 1.73. Note that there are times where you need to break from the scale. In particular, I’ve been known to use 0.2, 0.5, 2.0, and 2.4.
- New images for previous/next links, admonitions, program listings, etc. are perfectly fine. DocBook has five admonition types: caution, important, note, tip, and warning. I have no idea what the difference between caution and warning is, and neither does anybody else. I used a Tango icon in the BeanStalk markup for important, but that’s not the icon currently used in Yelp. Flatter images that work well in print are a plus. Keep in mind that many people will print help pages in black and white.
- All of my XSLT is released under the LGPL. Any copyrightable material you submit needs to be releasable under the LGPL.
Send your submissions to gnome-doc-devel-list.
