Powmow 's Library tagged reference →  View Popular

I have recently come up with a metadata markup system that evolved out of the “dash/plus” system that I use for action items in my Pocket Moleskine. I will try to describe it as best I can with text but it is better viewed so I have included a link to a picture:

- (Dash): Undone Action Item.

+ (Plus): Done Action Item.

<- (Right Arrow): Waiting - i.e. for another action).

-> (Left Arrow): Delegated (with a note to whom and the date).

^ (Triangle): Data Point.

O (Circle): A circle around any of the above means that it has been carried forward, moved to another list or otherwise changed status - i.e. a “Waiting” item has now become an Action Item elsewhere (with a note about where that item has gone).

How, then, does one go about creating a page from a content-centric point of view? Let’s compress it into a simple step-by-step list of instructions:





1. Using a text editor, write the content of the document; i.e., every piece of information that will appear on the page.
2. Add semantic markup to the content, marking up paragraphs, lists, tables, emphasis, etc. Also add the ‘formal’ parts of the HTML document: the DOCTYPE declaration, the HEAD element, BODY tags, etc. (This step is often combined with the previous one.)
3. If appropriate, replace parts of the content with images that illustrate or complement the text. Use the replaced text as the ALT attribute for each image. Add any decorative images (those that illustrate the article, but do not convey any relevant information). Use an empty ALT attribute (alt="") for those images.
4. Create the CSS style sheet. Start with generic rules, i.e., rules that use simple element type selectors. Specify rules for basic things like font family and line height, preferably on the HTML element. Specify explicit margins and padding for all element types, since the defaults differ between browsers.
5. Add rules for the page layout, using floats and/or absolute positioning. Make sure to use relative units (em or %). At this stage, it will usually be necessary to add ID and CLASS attributes to the markup. Most layouts will also require a few wrapping DIV elements to group page components.
6. Add the remaining CSS rules that will handle things like background images (which may be created from a comp), colours, borders, etc. If you’re styling links, don’t forget the a:focus pseudo-class, which is vitally important to users who navigate by keyboard. (Internet Explorer or “IE” doesn’t support it, but incorrectly implements a:active for keyboard focus instead.)

• Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
  
• Readability: How easy is it to read the text in various columns, given their allocated width?
  
• Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly -- that is, are captions immediately next to the photos, etc.?