Category Archives: css

Logo Replacement

There are so many image replacement techniques out there I’ve lost count. Some using negative margins, super-small fonts or display:none, the reports are that some of them aren’t accessible.

But why replace images at all? Isn’t the alt attribute meant to replace images with text, rather than a contortion of CSS techniques?

For the MOE Website we used negative margins to do the image replacement for the MOE crest on the top left. However, under it is a black-and-white version of the crest. This is used in the printer styles, and will also be printed by browsers that aren’t CSS-enabled. The black-and-white crest has alt text to make it accessible should images be turned off.

I’m sure there are many ways to skin this particular cat.

Advertisements

Getting Org Charts Right

If there’s one diagram that plagues almost every corporate website on earth, it’d have to be the organisational chart. It’s a graphical representation of the corporate hierachy very similar to hierachies present in HTML, yet web designers spend hours searching for the lost photoshop file whenever someone in the organization gets transferred, promoted, or leaves.

I’ve seen 2 common implementations of the org chart:

  1. The ginormous image. Attaching a single image is easy on the html. Most of the work is done in Photoshop where everything is drag and drop. Given that you can’t have all 9 pages of text describing the organizational structure fit into the “alt” attribute, most designers just name it “Organizational Chart”.
  2. The nested table. The web designer that came up with this is a little more prophetic: he knows that photoshop file will invariable get lost, so the org chart is coded in HTML instead. Every element in a cell, all laid with pixel-precision. This org chart is easy to update if someone leaves and is replaced, but is an utter pain to update should the organizational structure change.

There has got to be a better way. But we’ve got to throw some pre-conceived notions out the window first.

The world is flat

Unless you’re working in a traditional Chinese family-run business that saw a bumper crop of children, your organization’s structure is likely to be flat and wide rather than tall. Different levels of hierachy are denoted by their vertical position, befitting of the corporate ladder metaphor. The main problem with this is that the online medium doesn’t do well when forced to grow sideways. Layouts break, horizontal scrollbars appear, floated sidebars get bumped down.

We need to turn the visual model on its side. It’s radical, but radical isn’t necessarily a bad thing. Big boss is flush left, everyone else moves a little to the right. The lower down the position, the greater the distance from the left. The visual cue is kept intact.

Choosing your markup

HTML is full of hierachies. H1 level headers are more important than H2 headers. The obvious choice to markup an org chart would be as a list. But ordered lists, or unordered lists?

Ordered lists provide a fixed hierachy. The first list item in an ordered list is greater than the second. This proves a problem when we have 2 subordinates who are equal in status. An ordered list does not allow us that flexibility.

Unordered lists allow the grouping of elements as equals. But alone the unordered list doesn’t denote any differences in hierachy.

The nesting of unordered lists allow the creation of different levels, while allowing list-elements to exist as equals. In my opinion it is feasible to nest unordered lists inside of an ordered list, explicitly labelling the various levels, but I choose to nest unordered lists as I prefer the less overt structure of power. There is no loss in semantic meaning, the greater wraps around the lesser.

The Office

So this is the scenario we’ll work with:

Jessica is the director of the company. She has 3 assistant directors under her.

The HTML:

	<ul class="org-chart">
		<li>
			<p>Jessica Chan<br />
			Director<br />
			Corporate Communications Division</p>

			<ul>
				<li>
					<p>Hung Lee<br />
					Assistant Director<br />
					Public Communications</p>
				</li>

				<li>
					<p>Shin Ho<br />
					Assistant Director<br />
					Media Relations</p>
				</li>

				<li>
					<p>Sarah Tan<br />
					Assistant Director<br />
					Publicity</p>
				</li>
			</ul>

		</li>
	</ul>

You should have something that looks like:

  • Jessica Chan
    Director
    Corporate Communications Division

    • Hung Lee
      Assistant Director
      Public Communications
    • Shin Ho
      Assistant Director
      Media Relations
    • Sarah Tan
      Assistant Director
      Publicity

More meaning

We could improve on the markup by using the hCard microformat. Names, titles and units can be made distinct from each other rather than pouring everything inside a paragraph tag.

The HTML:

	<ul class="org-chart">
		<li>
			<div class="vcard">
				<div class="fn n">Jessica Chan</div>
				<div class="title">Director</div>
				<div class="organization-unit">Corporate Communications</div>
			</div>

			<ul>
				<li>
					<div class="vcard">
						<div class="fn n">Hung Lee</div>
						<div class="title">Assistant Director</div>
						<div class="organization-unit">Public Communications</div>
					</div>
				</li>

				<li>
					<div class="vcard">
						<div class="fn n">Shin Ho</div>
						<div class="title">Assistant Director</div>
						<div class="organization-unit">Media Relations</div>
					</div>
				</li>

				<li>
					<div class="vcard">
						<div class="fn n">Sarah Tan</div>
						<div class="title">Assistant Director</div>
						<div class="organization-unit">Publicity</div>
					</div>
				</li>
			</ul>

		</li>
	</ul>

Adding microformats won’t change how things look. It’s just about adding specified classes to the relevant bits of information.

Styling it up

So now we have a very simple nested list. If you’re removing all browser-set CSS styles (and you should), you’ll need to style the visual cues that’ll make this nested list look like a proper org chart.

The CSS:

	ul.org-chart li,
	ul.org-chart ul li {
		list-style:none;
	}

	ul.org-chart,
	ul.org-chart ul,
	ul.org-chart ul ul {
		margin:0;
		padding:0;
	}

	ul.org-chart ul li {
		padding:0 0 0 50px;
		margin:0 0 0 50px;
	}

	ul.org-chart li div.vcard {
		padding:15px;
		margin:0;
	}

Until CSS figures out a way to allow us to draw straight lines through our block level elements, the branches will have to be made of good old-fashioned graphics. There are 2 types of branches we’ll need: one for all employees placed under a boss, and a special branch for the last listed subordinate of every level of the hierachy. This is because bosses report to no-one (hence no need for a branch), and the last guy doesn’t need to extend the branch to anyone else.

We’ll also add a class="last" on the last list item element of every list to identify these people.

The CSS:

We’ll need some simple graphics for the branches of the organisational tree. So all list elements get a T-shaped (lying on its side) branch while the last element in the list gets an L-shaped branch to end things off.

	ul.org-chart ul li {
		background:url(org-tree-mid.gif) no-repeat left top;
	}

	ul.org-chart ul li.last {
		background:url(org-tree-last.gif) no-repeat left top;
	}

Throw in some basic type formatting and you’ll have something that looks like the org charts we have on the MOE website (scroll to the bottom of the page).

Tags: , , ,