Webnotes
The Content Management System
Early Days
From its very release, the Bombay Bar Association website has always been driven by the MovableType engine, going back to version 2.xx. In those days, 2003-2004, MT was essentially only a blogging application. In contrast to the version in use today, it was extremely limited.
The first version of the BBA website, running on the MT 2.x platform had innumerable plugins and modifications. The BBA has never used MT out of the box. Every template has been customized.
The 2005-2007 design was perhaps the most enduring. All publishing was static only, in two, three and four column formats. The colour schemes were bright, even garish.
The Revised Design 2008
The legacy commitment to a individualistic design, wholly original, carries forward to the new design, driven by the very latest version of MT. And very latest means the very latest: we played adventurous and deployed a beta version of MT, MT 4.1 Commercial Beta2 in a production environment! We have now upgraded to the final version, 4.1.
New Look
The 2008 look-and-feel is smoother, cleaner and less ‘busy’ than its predecessor. The many colours have been stripped out, and there is more whitespace. There are fewer decorative features around standard elements such as links, which are generally presented in the default, high-usability format. The available area for text display has been widened (the site is now designed for a 1024x768 format). All pages use a standard three-column format, with navigation to the left and page-specific matter on the right. The front fascia is an apparent two-column format, with the right column providing general information and links, but the central unit is itself in two newspaper-style non-flowing columns, with snippets of entries on display.
Typography
From the beginning, the BBA website has been careful with its typography. Smart punctuation and typography have always been used. The pre-2008 design used a serif font (Georgia) for the default body text, and verdana, arial (sans-serif) fonts for captions and navigation links.
This typography design paradigm has been flipped on its head in 2008: now, only titles are in serif, and everything else is in a simple sans-serif font for maximum screen readability. The body text of the print pages is in serif.
Leading is much improved now, and throughout uses the em measure so that display font sizes (defaulted to medium) can be scaled on a per-user basis without breaking the overall layout. Large and small font sizes are used for emphasis, for example to indicate the page-specific print and comment links in the right bar on individual pages.
We use the default “Markdown With Smartypants” text filter that ships with MT, based on John Gruber’s original plugin. Some text is still driven by Dean Allen’s Textile_2 plugin that also now ships with MT. Those legacy pages were written with the Textile plugin, and have been carried forward.
Graphics
A small write up on the graphics is on a separate page.
Structural Changes
In critical ways, the new design is a radical departure from its predecessor. For one thing, the site features no ‘entries’ or categories properly so-called, but only pages and folders. The difference is partly semantical, for a page-like look can easily be created with entries. The more important distinction is in the maintenance of the site hierarchy and structure. A page-and-folder setup demands a more rigid adherence to site structure: a page can only belong to one folder, and must belong (in our version) to one folder; entries, on the other hand, can belong to more than one category, or to none at all.
The entry-category paradigm is more suited to a blog, i.e., a web presence that is, by definition, interactive and invites an exchange of views. The BBA website has very little dialogue. Almost exclusively, it delivers content and nothing else. A few — a very few — pages have comments enabled, but this is not the norm.
Also, a blog is, by definition, personal. The BBA website is inherently impersonal. Authorship is wholly irrelevant to the bulk of its content. In this scenario, a page-and-folder structure made eminent sense.
This is a classic instance of content dictating form: the nature of our material demanded:
- a defined, rigid, static structure
- minimal dialogue intervention
A blog-style entry-and-category structure therefore is clearly inappropriate.
New Features
The 2008 revision has several enhancements and first-time features:
“Stickies”
A page can now be defined as a “sticky”, by entering @sticky in the tag field. This automatically pushes the last two (and only the last two) “sticky”-tagged pages to the top of the main portal page in the horizontal grey alert box. Stickies then do not appear in the two-column listing below on the main page.
Note that the @sticky tag is a special tag. It does not enter the iteration of the “related pages” list on individual pages.
Auto Expiring Posts
All pages now auto-expire. A specific expiry date can be set while creating the page (or at any time). If not set, a default expiry date is provided. For non-stickies, the default expiry is 60 days. For stickies, it is 10 days.
Hidden Folders
Folders can now, optionally, be hidden when created. The default is to show the folder. If hidden, a folder (and any page within that folder) is hidden from the sidebar navigation listings.
Special Folders
The Bombay High Court official site folder, the webnotes folder, the legal folder, and the docs folder (with help files) are special folders. Their contents do not show up on the main page listing, or in the sidebar listing (the folders “hide” flag is on). The High Court folder is always separately listed. The webnotes, legal and doc folders do not feature in the listings at all.
Pullquotes
All pages now have, optionally, pullquotes — snippets of text displayed in large sized fonts as extracts of the main body text, like “blurbs”. These focus attention on the display text. Pullquotes may be either on the right or the left.
A pullquote is triggered by enclosing the desired text in special span tags, thus: <span class="pullquote">some text</span>. For a right floating pullquote, use pullquoter instead of pullquote.
These are javascript-driven pullquotes, so that the quote is lifted from the body text without having to enter the pullquote text separately. If, however, you want to add separate text, this is also possible, using pullquote-l or pullquote-r as the span class. These are pure CSS pullquotes.
Floating boxes
We now have, on some pages, floating boxes with interesting inset-box type material. These are enclosed within special <div> tags when entering text.
Rounded Corners
All pages now have boxes with rounded corners. These are pure javascript boxes. On non-javascript-enabled browsers, these degrade gracefully to normal square boxes.
Comments Live Preview
On pages where comments are enabled, a special live preview box is also now available. This shows the author’s name and text in real-time when entering text. The feature is also javascript driven, and the box is merely blank on non-javascript browsers
Captcha for Comments
All comments are secured from spam with ReCaptcha. With the live preview feature, and the requirement of a valid email address, this hopefully eliminates the need for comment moderation.
Rules Page Endnotes
A special javascript that provides endnotes-functionality is built into the Rules page. This lists all the footnotes (dates of amendments) at the foot of the page.
Snap
We also now have, by default, the javascript-enabled Snap feature. This automatically puts little icons next to every external link and enhances links with visual previews of the destination site. Hovering the mouse over the icon shows a “preview” of the linked page, so that a visitor can decide if he wants to go there or not. This feature can be switched off on a per-user basis. The main page has a link to a separate page explaining this functionality.
Member Directory and Member Directory Management
The member directory has been carried forward and retrofitted into the new fascia. It now offers a full listing of all members’ names by default, rather than only by alphabet. A per-alphabet listing is also available off the sidebar links.
A separate, fast-loading, text-only Member Directory Management module with its own help has now been added. This is in a separate, secured directory, and requires authorised access. The Member Directory Management module provides a quick, neat web-based interface to the directory database. It allows for:
- adding a member
- auto-generation of the initial password for a newly added member
- deleting a member’s record
- updating a member’s record
- emailing the member’s record to the member concerned
- viewing all details of any member’s record, including email and password
A full help manual has been written up and is online.
Credits
All coding and graphics are by Gautam Patel.
Creative Commons License
See the License section of the legal page.