BIROCO WEB DESIGN -=|=- A manifesto for intelligent design

You too can have a cutting-edge design

“I love your typography. I like its simplicity.”

– Michael Llewellyn-Williams, president BrandMechanics, Inc

My web design principles come from many years' experience of designing in the print medium. I was brought up on the idea that the eye cannot comfortably read a line that is too long, that contains too many characters, so I mostly use a fixed width to contain the text that stays the same no matter what size the window. Readability is my first concern, I regard this as an essential component of web design, never to be sacrificed to a cool look. You can have a cool look and be readable.

All the sites I now create use XHTML and CSS (Cascading Style Sheets) for layout and typography. The big advantage, gigantic actually, of using CSS for layout, and what has become known as 'semantic markup' – the separation of style from content that CSS enables – is that all the instructions regarding the look of the site, typography, colour scheme, column layout, are contained in a single tiny style file (the stylesheet), whereas the content, the text and pictures, is contained in the individual actual pages.

The stylesheet is linked to a collection of webpages, which could comprise your entire site. So if you want to change all your type throughout your site from, say, Arial to Times New Roman, and change the background from cream to lilac, and the link hover colour from claret to purple, then you can do this by making those amendments to the stylesheet and uploading just that single file to your server, and all the pages linked to it will be changed without any more to do, whether you have 10 or 10,000 pages. This also means that your individual pages are no longer bloated out with styling instructions ('tag soup'), so are smaller and load faster, since the stylesheet is already stored in the browser's cache once the first page of the site has loaded.

Semantic design is also beneficial for search-engine rankings. The Google web-crawler indexing robot is a simple text-reader. Google hates 'tag soup', much prefers clean content. The high-ranking sites at the moment are mostly CSS sites, and it's liable to stay that way. So in other words, the way it's designed under the surface gives a real competitive edge.

I ensure that all my pages validate, which means they are tested against the validator provided by the World Wide Web Consortium (W3C) to point out coding errors and other deviations from web standards. 'Web standards' is the new buzzword in web design, but what it means is that websites built according to them (which most aren't) are future-proofed to work in the next generation of browsers and to continue to work. Such sites will also be accessible on handhelds and web-TV, and screen-readers for the blind.

Many sites created with non-standard code are now starting to creak severely and fall apart. Yet a surprising number of design agencies are still using obsolescent layout methods, making pages full of kludgy code that modern browsers stub their toes on. The aesthetics of a site are of the utmost importance, but eye-catching design should go hand-in-hand with lean clean code under the bonnet, which ensures the site is accessible and stable in all browsers.

Spreading your site like wildfire

Some people imagine that there are secretive and cunning techniques for gaining high placement in search engines, particularly in Google, which currently generates about 90% of searches arriving at a site. While it is true that there are steps you can take to enhance your search results, by far the best way to gain high search ranking is simply to have useful and detailed content on your site.

You may be interested to know that I succeeded in just three months in making my own Yijing Dao website appear in the top five Google results on a search for many words and phrases related to the subject matter, with the site frequently being first. This was achieved mostly through content, but also trial-and-error experimentation to discover how changes introduced to pages could influence search results.