UI

Dive into StatusNet UI by Sarven Capadisli. See also UX.

HTML

The StatusNet HTML makes use of microformats and HTML 5 vocabularies. Keeping StatusNet's HTML semantically rich and consistent is very important because the platform is used and developed on by many people. When new functionalities are added, it is important to stay close to existing work.

General

• All pages have a body id that is page's action name. If a user is logged in, there is a user_in class.
• body contains the general tree:

wrap
    header
        address 
        site_nav_global_primary
        site_notice
        form_notice or anon_notice
    core
        site_nav_local_views
        content
            h1
            page_notice
            content_inner
        aside_primary
            section
    footer
        site_nav_global_secondary
        licenses

microformats

• StatusNet most likely has the "best implementations of microformats in a social media site" http://microformats.org/discuss/mail/microformats-discuss/2009-February/012822.html
• The following microformats are used: hCard, hAtom, XFN, geo, xoxo, and many inter-document relationships (e.g., license, tag, me, home, prev, next).
• Essentially a full read-only API is achieved.

HTML 5

Although StatusNet currently does not use some of the new HTML 5 elements, it uses the same terms in ids or classes (eg., aside, section). In the future when UAs support and make use of them, they can be simply replaced with the respective elements.

Forms

• Some forms use a form_settings class to group similar forms. Typically, all of those form controls are visible. Use form_data class to group similar inputs with the exception of submit.

CSS

There are two general stylesheets which make up the visible screen page components. All layout and typography rules can be found under the base stylesheet. The default (or any other e.g., identica) theme contains the colour and image rules. This method works out well for maintenance (future updates), and easy themes. There is a lot of room for custom base stylesheets by making use of the existing hooks without having to touch a single line of HTML. If you have a theme going, add yours to Themes! Also see the Theme development pages for an howto guide to creating themes.

There is also a print stylesheet available for those that would like to catch up with the latest public timeline in the metro, or for those that would put up their favourite notices on their fridge or under a warm pillow :P

JavaScript

• jQuery JavaScript library is used to handle most of the UI work. As far as the rest of the StatusNet JavaScript goes, it is unobtrusive and used sparingly in places where we thought it would improve the user experience.
• jQuery Form Plugin is used to make XMLHttprequests for notice posts.
• jQuery Cookie plugin is used in placed to store geo location data, local user nickname, remote profile. This plugin can be eliminated in the future by either using the script directly or with localStorage.
• xbImportNode.js is used to stabilize XHR responses that are returned as text/xml for text/html pages. Should become obsolete by returning text/html from the server.
• HTML 5's Geolocation API is used for geo location information. geometa.js is used temporarily for UAs that do not support this functionality.
• util.js contains the core utilities that makes the UI interaction work. SN is the main object /namespace/.

Design

Golden ratio

StatusNet base stylesheet makes use of the Golden-ratio in several places. Most visibly (?), in its grid (layout and spacing), and typography (font-size and line-height). All used values are multiples of 1.6180339887 rounded to nearest whole number. It was mathematically a lot of fun, however, technically quite difficult to implement such that it was actually usable. Whether the final product is pleasing and usable or not awaits your response!

Layout

• How do things end up where they are? Where do you put your keys, pen or wallet? We've followed some of the common UI guidelines in StatusNet while factoring in the weights of each data bit on the site. For instance, the Notice form is possibly the most action directed (or suggested) component on most StatusNet pages. It is placed at the top-centre of the page with plenty of room for easy locating and comfortable notice writing. Another: there are global (edges of the page) or local (centred) navigations that are placed at most common locations.

• The screen design caters to variable 800 to 1024 pixel width viewing resolutions.

• General sections are visually separated by colour contrast as opposed to borders.

Typography

The aesthetics and availability of the font-families across User Agents (UA), Operating Systems (OS, viewing devices, anti-aliasing and character range while providing high legibility is a difficult task. There is no perfect typeface unfortunately, we tried to make the best out of this situation with (in the order of availability) Lucida Sans Unicode, Lucida Grande and sans-serif.

Colours

• Default theme uses International Klein Blue for anchor links.
• Green for action items e.g., favoring, deleting, attaching a file
• All form submit actions are chrome-like, which is consistent for most UA rendering.

Images

Iconography

Default theme uses the Twotone (two-dimensional) icon library. It is simple and very visible. White on green background is used indicate some sort of a user action. The inverse of the action is indicated by green foreground and white background colours. All new icons created have the same design. There is a single icon file which combines all of the icon images. CSS Sprites technique is used to minimize HTTP GETs.

Logo

The original StatusNet logo was designed by Brigitte Schuster. We factored in the following concepts: open, community, communication, brevity.