0
Comment: This documentation has all been moved to other pages now.
|
5142
Removed 'when designing a web page' section - as it's now integrated with UserInterfaceReviewNotes.
|
Deletions are marked like this. | Additions are marked like this. |
Line 1: | Line 1: |
These are low-level design guidelines for Web pages, e-mail messages, and other Launchpad output. They cover common mistakes, and are not a substitute for having an interface designer involved in the design of any visible change. == Text == These guidelines apply to Web pages, e-mail messages, and any other media used in the future. ||'''Don’t use this''' ||'''Use this instead''' || ||abort ||stop || ||above ||this, these || ||click ||''nothing'' || ||below ||this, these || ||DOAP ||''nothing''|| ||FOAF ||''nothing''|| ||illegal ||not allowed|| ||invalid ||incorrect ''(or more specific error)'' || ||just ||''nothing'' || ||Malone ||Launchpad ''or'' Launchpad’s bug tracker || ||Note: ||''nothing'' || ||Note that ||''nothing'' || ||please ''(unless announcing serious inconvenience)'' ||''nothing''|| ||Rosetta ||Launchpad ''or'' Launchpad Translations || ||simply ||''nothing'' || ||Soyuz ||''nothing'' || ||the following ||this, these || ||the form ||''nothing'' || ||this form ||''nothing'' || ||this page ||''nothing'' || ||to the left ||''better page layout'' || ||to the right ||''better page layout'' || ||* ||''better text ordering'' || ||! ||''nothing (or, if in real danger, `<strong>`)'' || == Template code == * Template code should be indented with two spaces. ||'''Don’t use this''' ||'''Use this instead''' || ||`<b>` ||`<th>`, `<dt><dfn>`, `<strong>` || ||`<br>` ||`<li>`, `<div>`...`</div>` || ||`metal:fill-slot="pageheading"`||`metal:fill-slot="main"`|| ||`<h3>` ''(unless `<h2>` is used earlier in the page)'' ||`<h2>`, `<div>` || ||`<hr>` ||''nothing'', `<table class="listing">` || ||`<i>` ||''nothing'', `<em>`, `<var>` || ||`onclick=` ||''Mochi``Kit to attach event handlers to elements (and to create the elements too, if they do nothing without Java``Script).<<BR>>See the JavaScriptStyleGuide for more information.''|| ||`style=` ''(unless this style is used nowhere else)'' ||''HTML elements, classes'' || ||`<ul><li tal:repeat="bar bars"`...||`<ul tal:condition="bars"><li tal:repeat="bar bars"`...|| ||`<div tal:replace=`...<<BR>>`<span tal:replace=`...||`<tal:one-word-summary replace=`... <<BR>> `<tal:one-word-summary replace=`... <<BR>> ''(functionally identical, but more informative for those reading the code later)''|| ||' ''(ASCII single quote used for an apostrophe)'', ' || &``#8217; ''or'' ’ ''or'' ’ || ||"foo" ''(ASCII double quotes)'', " || “ ''and'' ” ''or'' “ ''and'' ” || ||'foo' ''(ASCII single quotes)'' || ‘ ''and'' ’ ''or'' ‘ ''and'' ’ || See also PageTemplateHacking, which may be mergable with this page. == Capitalization == * Buttons should be Headline Case; the last word capitalized, and all other words capitalized except those three letters or fewer that are prepositions, articles, or conjunctions. * Everything else should be sentence case, including headings, checkbox labels, menu items, and e-mail Subject lines. == Menu items == * Menu items should start with a verb if practical. * ''use of "Show", "List", or "View" TBA'' == Notifications, warnings, and errors == Follow the guidelines specified in AlertMessages. == Cancelling actions == The actions at the end of a form should consist of a button, followed by the word "or" and a Cancel link: ||<tablestyle="background-color: #eee;">( Summary of Action ) or __Cancel__|| The "Cancel" link should return you to the page you came from. (To get this link, define the `cancel_url` @property in the browser class.) == E-mail messages == These guidelines apply to all e-mail messages: * Don't wrap paragraphs manually in the message template. The e-mail machinery can do this more consistently (especially if the message contains variables). * If the message is from a subscription, the footer should consist of three lines: * the URL of the relevant resource (''e.g.'' the bug report) * "You are ''precise reason for getting this message''" * "To unsubscribe: <''URL of unsubscription page''>" ''?? -- TBD'' These guidelines apply to notifications not being sent on behalf of a Launchpad user: * From addresses should be `@launchpad.net`, not `@canonical.com` or `@ubuntu.com`, and should have a display name starting with "Launchpad". * The Web page that tells you you're being e-mailed should say what the From address will be. * The Subject line should be informative, and use sentence case. * The body text should be copyedited by someone fluent in the language being used. == Comments and suggestions == |
These are low-level design guidelines for Web pages, e-mail messages, and other Launchpad output. They cover common mistakes, and are not a substitute for having an interface designer involved in the design of any visible change.
Text
These guidelines apply to Web pages, e-mail messages, and any other media used in the future.
Don’t use this |
Use this instead |
abort |
stop |
above |
this, these |
click |
nothing |
below |
this, these |
DOAP |
nothing |
FOAF |
nothing |
illegal |
not allowed |
invalid |
incorrect (or more specific error) |
just |
nothing |
Malone |
Launchpad or Launchpad’s bug tracker |
Note: |
nothing |
Note that |
nothing |
please (unless announcing serious inconvenience) |
nothing |
Rosetta |
Launchpad or Launchpad Translations |
simply |
nothing |
Soyuz |
nothing |
the following |
this, these |
the form |
nothing |
this form |
nothing |
this page |
nothing |
to the left |
better page layout |
to the right |
better page layout |
* |
better text ordering |
! |
nothing (or, if in real danger, <strong>) |
Template code
- Template code should be indented with two spaces.
Don’t use this |
Use this instead |
<b> |
<th>, <dt><dfn>, <strong> |
<br> |
<li>, <div>...</div> |
metal:fill-slot="pageheading" |
metal:fill-slot="main" |
<h3> (unless <h2> is used earlier in the page) |
<h2>, <div> |
<hr> |
nothing, <table class="listing"> |
<i> |
nothing, <em>, <var> |
onclick= |
MochiKit to attach event handlers to elements (and to create the elements too, if they do nothing without JavaScript). |
style= (unless this style is used nowhere else) |
HTML elements, classes |
<ul><li tal:repeat="bar bars"... |
<ul tal:condition="bars"><li tal:repeat="bar bars"... |
<div tal:replace=... |
<tal:one-word-summary replace=... |
' (ASCII single quote used for an apostrophe), ' |
’ or ’ or ’ |
"foo" (ASCII double quotes), " |
“ and ” or “ and ” |
'foo' (ASCII single quotes) |
‘ and ’ or ‘ and ’ |
See also PageTemplateHacking, which may be mergable with this page.
Capitalization
- Buttons should be Headline Case; the last word capitalized, and all other words capitalized except those three letters or fewer that are prepositions, articles, or conjunctions.
- Everything else should be sentence case, including headings, checkbox labels, menu items, and e-mail Subject lines.
Menu items
- Menu items should start with a verb if practical.
use of "Show", "List", or "View" TBA
Notifications, warnings, and errors
Follow the guidelines specified in AlertMessages.
Cancelling actions
The actions at the end of a form should consist of a button, followed by the word "or" and a Cancel link:
( Summary of Action ) or Cancel |
The "Cancel" link should return you to the page you came from. (To get this link, define the cancel_url @property in the browser class.)
E-mail messages
These guidelines apply to all e-mail messages:
- Don't wrap paragraphs manually in the message template. The e-mail machinery can do this more consistently (especially if the message contains variables).
- If the message is from a subscription, the footer should consist of three lines:
the URL of the relevant resource (e.g. the bug report)
"You are precise reason for getting this message"
"To unsubscribe: <URL of unsubscription page>" ?? -- TBD
These guidelines apply to notifications not being sent on behalf of a Launchpad user:
From addresses should be @launchpad.net, not @canonical.com or @ubuntu.com, and should have a display name starting with "Launchpad".
- The Web page that tells you you're being e-mailed should say what the From address will be.
- The Subject line should be informative, and use sentence case.
- The body text should be copyedited by someone fluent in the language being used.