The current approach to building business intelligence portals utilises Web 2.0 best practices in software development, with a key strategy focused on open standards. This is achieved in a web based interface by appropriate use of HTML (content), CSS (presentation), JavaScript (behaviour) and WSDL. Existing enterprise service oriented architectures enable a mash of information to be presented to the business user in a dashboard interface that can be developed in an agile manner that is loosely coupled and responsive to change. 

The layout for this business intelligence portal is fixed-width and centred, with a horizontal navigation bar. The navigation bar is a list with anchors. Content is delivered to the browser logically organised within HTML divisions then presentation occurs based on the accompanying style sheet.

<ul id="navigation">
    <li><a class="selected" href="#">Dashboard</a></li>
    <li><a href="#">Reports</a></li>
    <li><a href="#">Analytics</a></li>
    <li><a href="#">History</a></li>
</ul>

The following styling demonstrates how to flow the menu horizontally. The navigation list items are targeted specifically using a cascade.

#navigation li {  
    display: inline; 
}

Styling is applied to the selected navigation item to change its background and text colours. When the user mouses over the selected navigation item the cursor remains as default as an indicator that this item is already selected. The selected anchor is targeted specifically using a cascade.

#navigation a.selected { 
    color: #fff; 
    background: #003266;
    cursor: default; 
}

The colour scheme is based on ideas from the Kuler website. These themes are based on 5 complimentary colours that contribute to the overall design of the website.

The landing page for the business intelligence portal displays information as a dashboard that is divided into portlets* which are rendered in columns to the left and right side. Each column has a fixed width with a variable height. Each portlet clears the preceding float to ensure it displays directly underneath the portlet above.

.column {
    width: 435px;
    float: left;
    padding: 0 10px;
    margin: 0;
}

The dashboard metaphor fits well with business intelligence. Like when you glance at your cars petrol gauge or speedometer, the component parts of a business intelligence dashboard gives the business user a ‘state of play’ for the organisation. This business user will be a decision maker, using the knowledge gained from business intelligence information to assist in performing the tasks of their job. Like the driver of a car, the consumer of business intelligence data needs accurate and relevant information to get their job done.

Download source (2KB)

*Note that portlets in a real business intelligence dashboard would contain tables and charts (rather than Lorem Ipsum text).