Standards-based corporate web development

My last project for my previous employers has gone live so here’s a long discussion about the totally redesigned website for the Solicitors Regulation Authority (SRA). This isn’t to congratulate myself for some stunning new CSS techniques (there aren’t any), nor to solicit your admiring gasps at the beauty of the visual design (it’s rather corporate) but because I think it’s an interesting example of how one small web team tried to square the circle and attempt to use Web Standards and accessible methods in a highly conservative corporate environment.

John Rieger in shirt and tie, Bruce Lawson in Opera t-shirt, and Nedjma Mestari (a female) over dinner

The Solicitor’s Regulation Authority web team: John Rieger, me (now retired), Nedjma Mestari (my replacement)

It’s easy to make a personal website or design agency brochure site with bleeding-edge techniques; you control the publication schedule, branding, information architecture, the backend, the markup and the CSS. But most organisations have a web team that is part of Marketing or Communications, usually with look and feel predetermined, with various groups writing content of varying quality, with deadlines imposed outside the team ("The CEO wants it on the web tonight") or from outside the organisation (statutory obligations requiring publication of the Impact Assessments).

At the SRA we were running a couple of different dinosaur Content Management Systems. We had no control over our I.T. and everything sat on a Java platform, so we had access to Freemarker, a server-side scripting language that I’d never heard of—although eventually became quite fond of. (At this point, freelancers will be chortling in disbelief while corporate web masters will be nodding with recognition and perhaps weeping a little.)

Why redesign?

The SRA was formed in January 2007 when the government decided to separate the representative and regulatory functions that had both been the remit of the Law Society. The team of two, John Rieger and I, were tasked with building a brochure site and decided to do it according to proper 21st century principles that we wrote up in our Web Constitution that the CEO endorsed and promulgated. Our development principles were (broadly)

The most important aspect of this is that that the CEO showed his support by circulating the document to his senior managers for them to “cascade”. Anyone disagreeing with the principles were not just disagreeing with the web team, but disagreeing with the Big Guy. Buy-in from the top was very welcome, vital to our success, and (from speaking to chums in other organisations) all too rare. So, ta Antony Townsend.

Over the next 12 to15 months, we hired a couple of temps and we removed regulatory content from the Law Society site (which is now the "trade union" of solicitors, representing the profession to government and consumers). Once re-worked according to our editorial principles, it was republished on the SRA site which began groaning under the weight.

On any one page there were links that were only of real interest to solicitors, links for students, information for external stakeholders like the press and parliament—and almost nothing for the public, in whose interest we were charged with regulating, because there was nowhere in the IA to sensibly put it.

The site was fugly with few images and inconsistent whitespace, so as well as an entire re-architecture, it was time for a makeover. We recruited a visual-oriented bod to make the site look better while still looking enough like its previous incarnation that infrequent visitors wouldn’t be freaked out if they were searching in a hurry for an important rule.

Designing for different audiences

The SRA has 3 main audiences:

Each of these audiences is is largely self-contained; the public probably don’t want to read the solicitors’ code of conduct (they’re welcome to, but it’s unlikely to be a primary task) while solicitors don’t want to read information about law degrees as they already have one.

We decided that the most efficient way to organise these groups if have Amazon-style tabs on each page representing these consumer groups, each leading to a "home page" of information aimed just at that group and a separate navigation scheme, with each segment colour-coded. The fourth tab is for all that dreary blah that every organisation feels the urge to publish but no-one in the real world cares about (strategy documents, biographies of board members, organisation charts and annual reports).

Branding woes

A design challenge for the tabs was to bullet-proof them so the text size can be bumped up a couple of notches, while also using curves, because we unfortunately inherited a branding based on curves with the “load of balls” logo and a swoosh. This caused much consternation:

Me:

Why oh why don’t the browsers all support multiple background images? It’s incredible!

Nedjma (our French visual designer):

Pourquoi oh pourquoi tous les browsers ne support pas le border-radius? C’est incroyable!

Luckily, the corporate branding people had devised a palette of four colours, so we used one for each tab and for various elements of content within the segments (headings, arrows, borders). The colour coding of the segments inside the tabs was accomplished using Freemarker to set a class on the body element depending on which segment the page is in, and setting CSS rules such as

body.students #mainContent h1 {color:#872b93;}
body.solicitors #mainContent h1 {color:#0288A0;}

Unluckily, the colours they chose are minging. Even the most misanthropic Marvel-comics supervillain wouldn’t be sociopathic enough to wear a costume or cape in any of these colours. Apart from aesthetics, there’s a usability and accessibility concern: whether or not there is adequate legibility of some of the blue headings is doubtful.

However, the colours are absolutely unchangeable, because “you don’t tinker with a young brand”. So here’s a plea to all senior executives and brand managers: if you plan to use a website as your primary communications platform, please involve your web team in discussions to choose logos, palette and corporate typeface.

CSS and markup oddities

Apart from the Solicitors’ Code of Conduct, which we lovingly marked up with cortex-melting levels of nested lists that meant we could commission Stuart Langridge to write an unobtrusive JavaScript table-of-contents generator, the markup in the central content areas is simple.

We used a subset of HTML, as we knew we’d have temps helping us with mark-up and didn’t want to spend too long training them up. (Read our Expert Author’s Markup Guide (PDF)).

One element we use inconsistently is blockquote. The place where you’d expect to see it most is in the press releases, yet we don’t use it there at all. That’s because multi-paragraph blockquotes were too difficult to style in IE 6, particularly where they might wrap around floated images. In any case, it doesn’t matter, because they’re not really quotes (they’re made up by the press office), and there’s no semantic difference between a "quote" and the surrounding story so there’s no reason to differentiate them. In the Code of Conduct, however, there’s a world of semantic difference between a blockquote and non-quote; one is the SRA‘s rule, one is quoting someone else.

Inadeqauacies of current specifications

There were times when HTML4 proved inadequate to mark up what we needed. Many times, we needed headings inside lists, as children of the ul, not as children of lis, to group list items within the larger list and enhance readability, like so:

<h2>Questions to ask a solicitor:</h2>
<ol>
<h3>About the bill</h3>
<li>Will you do no-win no-fee work?</li>
<li>Can you send me a monthly breakdown of costs?</li>
<h3>About the progress of the case</h3>
<li>Will you give me copies of all letters you receive?</li>
<li>Will we have case reviews?</li>

</ol>

We also wished that div were allowed as a child of definition lists, so terms and multiple definitions could be grouped together and styled consistently (see test page). Multiple levels of optgroup would be useful, too. Sometimes, Im utterly baffled about why these things aren’t legal in the spec. Let’s hope they get into HTML 5.

Internet Explorer woes

Legal documents are generally numbered paragraph by paragraph, and we experimented with using ordered lists to generate lists using legal numbering:

1 Ant
2 Bug
2.1 guitar
2.2 violin
2.2.1 talking heads
2.2.1.1 Andy Warhol
2.2.2 Blondie
2.3 guitar
3 Centipede

All the modern browsers except for IE7 can do this using the following CSS:

ol {list-style-type:decimal; counter-reset: item;}
li {display:block;}
li:before { content: counters(item, ".")" "; counter-increment: item;}

IE7 simply shows the right-most digit per list-item, so we had to “fake” ordered lists by using unordered lists, killing the bullets and hard-coding the numbers. When we tried to get more complex numbering, like 2.02(A)(b)(ii) by setting different list-style-type values for different levels of nesting, all the browsers choked so perhaps it’s unfair to single out IE here.

Invalid code to help accessibility

Regular readers will know that I often get grumpy at IE for its bug that makes some in-page links disappear into the void if activated by the keyboard. My test page shows the bug persists in IE 8 beta.

We added tabindex="-1" on the destination of in-page links to squash the bug, which is why every page on the SRA website is invalid. However, this has the side effect of making Firefox show the dotted outline if a mouse user clicks inside any one of these elements, and perhaps giving them the idea that the item is clickable, so we remove that behaviour (but only for non-clickable items):

[tabindex="-1"]:focus {outline:none;}

In order that people who follow links to in-page anchors know what they’re supposed to be looking at, we implement a Ajax-style yellow fade technique on the element that they’ve jumped to, using a single pixel animated gif and a CSS 3 pseudo-class:

#mainContent :target {background-image:url(target-fade.gif);}

I’ve written up this technique in more detail in an article Improving the usability of within-page links

What we didn’t do

We didn’t use microformats. I wanted to, and the many addresses of training providers would have been a perfect candidate, except that the site isn’t database-driven and marking up all the addresses by hand would have been a gigantic chore. The events and roadshows were an obvious candidate for hCalendar, except for the accessibility problems inherent in that format.

Neither did we take advantage of WAI ARIA and its accessibility bonuses, as the specification was still very much in draft while we were coding the site.

Compromises

You’ll notice that our statement of development principles uses the word “should” rather than must; it defines intention rather than the law. All web design is compromise, and we compromised our vision several times. For example, we assume that no-one uses a screen size smaller than 1024px, which causes horizontal scrollbars for those who use 800px-wide screens. (We commissioned a script to swap in an alternate stylesheet when the browser window is small, but it’s not implemented yet.)

PDFs

We didn’t entirely get rid of PDFs, although it’s only used as the only method of delivering content when that content was utterly unchangeable (for example, the findings of the Solicitors Disciplinary Tribunal) or when the time spent converting the content into HTML was vastly out of proportion with the amount of people who read it (eg, monthly performance reports.)

PDF was generally required as an alternate delivery method because people wanted to print the information. Yes, we have a print stylesheet, but people are so used to the traditional horrible mess that printing a web page produces that they don’t even try the browser’s built-in print function. We ended up duplicating the browser functionality with a lovely old-school "Print this page" JavaScript link at the bottom of the content area, but we still got requests for PDFs.

It turns out that a lot of people, particularly those in smaller practices with slow lines, wanted to save information to their desktops. I wrote about this use of PDFs two years ago and browsers are still crap at saving web pages usably.

However, when serving information as html and PDF, it’s best to have a CMS make the PDF on the fly; at times, we had version control hell because each PDF must be hand-made and loaded at the same time as the html version was changed.

Search

Perhaps the sorriest of all the compromise is the search. We had no budget for a search engine to replace the expensive but not very good enterprise-level search solution that we inherited. (Jargon-busting: the term "enterprise", used outside the context of Star Trek, invariably means "monstrously over-priced pile of tosh that farts in the face of industry standards". See also "solution" which means "problem".)

However, we were getting loads of complaints from internal and external customers, so we implemented a Google Custom Search Engine on the site. This is a search form that fires off search queries to Google, and a results page which iframes the Google-hosted results so they appear to be on your domain. It’s a good free search, but inherent in the design is a time lag as the search is only as up-to-date as the last time that Google crawled. If you add a huge news piece or substantially amended important document, you have no control at all over when the search will find it.

In my opinion, this is the most beta of all the Google products that I’ve tried, and some things about it just don’t work properly. For example, the £50 year version is advertised as letting you remove Google’s branding, but it was actually impossible to do that.

There’s a potential usability/ accessibility problem due to the iframe that the results are displayed in is sized in pixels and can’t be altered. If the font size is increased, the iframe isn’t tall enough to hold all the results but no scrollbar appears so the results are inaccessible to a mouse user. This isn’t a google problem, but a side-effect of the HTML spec which says inline frames may not be resized (so browsers won’t let you over-ride this by setting the size in ems to make the iframe shrink and grow with text size.)

Did it work?

The combination of managerial support for our aims, a great team and a lack of useful CMS (which perversely helped us by allowing us almost unfettered markup choices) meant that the redesign could be launched with every page changing URL, yet not a single internal or external link breaking.

It’s half a decade since Jared Spool warned against major redesigns, and the success of a redesign isn’t determined by the ease of launch; it’s to make the site more navigable, more findable and more accessible for the customers.

John reports a month after the launch,

post-segmentation web traffic is up (10%-20%) already, and Google rankings for new content are excellent—loads of top 10 rankings for relevant strings on the new consumer content.

Pre-requisites for success and sanity

If you’ve read this far, thank you. What I really want to emphasise is that accessibility and web standards are a continuum. Just because organisational requirements, politics or inertia won’t let you go 100% of the way, it doesn’t mean that you shouldn’t do what you can. Your audience and (ultimately) your bosses will thank you for it.

If you liked this entry, you might also like an article I wrote for Carsonified called Accessibility In Suit And Tie.

10 Responses to “ Standards-based corporate web development ”

Comment by Matt Machell

Great write-up, mate. I actually noticed the switch as we link to various elements of the SRA at work.

Working in big organisations on standards-based web projects is a whole different world from agile dotcoms, small businesses and freelancing, and it doesn’t get enough coverage. Getting buyin from top-level managerial staff, and communicating the benefits in their language and as early as possible is definitely the key.

Comment by Kevin Mears

Thanks for the write up Bruce. As an in-house developer it’s great to read an article that explores these issues, and most helpfully offers some solutions. (meaning solutions, not problems)

I particularly liked your jargon busting for the term enterpise.

Comment by Tony Gee

Some good advice in there Bruce. I particularly liked your comment about ‘enterprise-level search solutions’ -
Your definition of ‘enterprise’ in this context is oh so painfully true:
“monstrously over-priced pile of tosh that farts in the face of industry standards”

Comment by Danny

Good write up, Bruce. There’s a myth that all of us who are interested in using standards are able to pick and choose which backends to use for which projects, which databases we like best etc. So it doesn’t surprise me that you had your hands tied by I.T. with Java, Freemarker, and dinosaur CMSs.

But it does surprise me that a big organisation like the SRA has no database-driven site, and there was no budget for a search. Surely money isn’t that tight?

Comment by bruce

I can’t comment on the SRA’s budgets, Danny, as I don’t work for them anymore.

But I agree that just because a site isn’t using the finest bleeding-edge technology, it doesn’t mean its developers are uncaring or behind the times. Their I.T. departments, maybe ..!

Comment by Catriona

I don’t understand why you say there are accessibility problems with marking up names and addresses with microformats.

Comment by Bruce

Hi Catriona,

there are no accessibility problems with the hCard format. It’s just that all the SRA names and addresses were hardcoded, as there was no database facility so marking up each one as an hCard would therefore have been incredibly time-consuming.

With a small team, we figured that time was better spent tagging some of the nastier PDFs or editing some of the flabbier prose we inherited. At the time, there were very few apps that could consume microformatted content so the cost vs benefit balance didn’t favour using hCard. But that’s nothing to do with the quality of the format; in a different circumstance i would have definitely used it.

Comment by Kostenloser WEB Space hier gleich finden...

Kostenloser WEB Space hier gleich finden……

There are nuances to the whole copy scenario. For some reason it is seen as acceptable to make a video copy of your favorite television program for later enjoyment as long as you copy it from television. Isn’ t this an extension of your memory in tim…