Corporate website design experiment: how to use a blog to increase your ranking in the search engines.

Everybody knows that a better result in the search engines = more traffic = more sales, right? So here's an experiment to see just how easy (or difficult) it is to claw your way up the search results using the power of your blog. I've carefully written this post to include the key phrase "corporate website design" in several prominent places and you'll notice that in some places I've spelled the phrase corporate website design (three words) and in others corporate web site design (four words). This is because Google will differentiate between a search for "website" and "web site" and treat them as two different searches bringing up different sets of results.

Now, I have to be honest, I'm not sure how well this will work on a brand new blog with no one linking to it yet but I'll keep an eye on the results over the coming weeks and let you know what happens.

At the time of writing (May 2008) this blog did not appear anywhere in the top 50 results when searching Google for "corporate website design" or "corporate web site design". Take it away search engine spiders....

On wide monitors, liquid layouts and line lengths...

Read any decent article on CSS layout nowadays and you'll inevitably see mention of "liquid" layouts, where the page contents scale to fill the available browser space. They've become something of an obsession for developers recently, with many going so far as to coin the phrase "the Holy Grail". In slightly less hyperbolic terms this refers to a 100% cross-browser compatible 3-column layout, with fixed outer columns and a central column that scales to fill the remaining available width. When even CSS guru Eric Meyer has a proposed solution, you know its a movement with some traction.

It would be somewhat controversial then to suggest that maybe a liquid layout isn't always the best option, but that's what I'm about to do.

We've hit a point when wide-screen monitors with high resolutions are becoming increasingly commonplace, especially with many of our clients, who tend to be highly technical companies working on products and systems which require as much screen real-estate as possible. And from an aesthetic point of view, I'd agree that a website constrained to a maximum width can sometimes look a little odd in a full-screen browser on some of these monitors.

The question is, do we design and layout content to fit the technical specifications of the visitors machine, or the physical limitations of the person using it?

Unfortunately, the human eye and brain haven't quite developed at the same rate as our monitors! Studies at the end of the 19th Century (Weber, Javel & Cohn, from 1881 to 1883) determined that 4inches was the optimum line length for printed media, and things haven't changed that greatly since then. The shift to computer monitors at the end of the 20th century saw a slight change, with Dyson and Kipping (1998) finding that reading rates increased as characters per line increased. In their study using 12-point type, the 4-inch line length produced the slowest reading rate and the 7.3 inch line length produced the fastest. However, users preferred the 4-inch line lengths. Similar studies have since been carried out by Youngman and Scharff (1999), Fernandez and Hull (2002) and most recently Dawn Shaikh (2005).

Almost uniformly, participants read varying line-lengths at similar speeds but expressed a preference for lengths of around 4-6 inches (or 10-15 words). This fits the natural arc of the eye, meaning it has to travel less, enabling the brain to concentrate on the text on the page, which is ultimately the point of most websites!

So yes, of course there are reasons why one might want to make page content "liquid", and while it can present technical issues there's certainly no shortage of solutions. But when the underlying purpose of a site is to convey information - in some cases very detailed technical information - I would argue that improved usability for the visitor should always be the most important goal. And if that means a constrained-width layout, then that's the layout model we'll adopt.

Top ten CSS tricks & techniques

Every good web developer should have an arsenal of tried and tested CSS tricks and techniques to call on in those darker hours, when the client is calling for the impossible, when Firefox, IE and Safari are all putting their own unique spin on things, or when you know exactly what you want to do, but you just can’t bring yourself to compromise your new-found passion for web standards.

Following is an (unordered) list of ten of the most useful code snippets I find myself coming back to time and again:

1 - Keeping things in proportion
One of the defining principles of web accessibility is that the designer should not obstruct visitors to the website in any way. If they wish to scale the text to a ridiculous size, we must accommodate that wish. This is where we need proportional dimensions, and key to these is an understanding of the ‘Em’ measurement. Fonts, line-heights, margins and padding can all be specified in Ems. Just be sure to set up some global properties first.

* { font-size:100%; }
body { font:75%/120% Verdana, Arial, sans-serif; }
p { font-size:0.9em;}

2 - JavaScript-free rollovers
Wouldn’t it be nice to have instant roll-over button effects using javascript? Even better, what if the button label remained searchable, accessible text? Create a background graphic double the height of your button, half showing the "up" state, and half showing the "over". Give your link element a fixed width and height, acting as a window on to a portion of the graphic, then use the :hover pseudo-class to change the vertical position of the graphic behind this window.

a {
display:block;
width: 70px;
height: 25px;
color:#333;
background: url("rollover-image.gif") 0 0 no-repeat;
text-decoration: none;
}

a:hover {
background-position: 0 -25px;
}

3 - Fixing IE with Conditional comments
A common selling point when explaining the benefits of CSS to a client is that sites will look identical across all platforms. Anyone struggling to convince IE6 that this the case will realise that this is a slight fib. Fortunately, IE contains a feature called ‘conditional commenting’. Simply make yourself a new IE6-friendly stylesheet, include it in your page as usual and wrap it in a conditional comment to hide it from everything except the guilty browser.

<! - - [if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->

4 - Horizontal floating lists
Floating list elements horizontally is a handy way to create quick and easy navigation menus, while leaving the plain HTML as an accessible, logical list. By default, list bullets appear outside the boundaries of the list item. Setting the position to "inside" ensures that there is no unsightly overlap of text and bullets. Adding an additional padding to the right makes sure things are nicely spaced out.

li {
float:left;
list-style-position:inside;
padding-right:10px;
}

5 - Graphical headings, the accessible way
Accessibility conventions demand that section headings be indicated with heading tags. All well and good, but they don’t half look ugly sometimes, especially when you’ve sweated over Photoshop to come up with that gleaming, pristine interface. Fret not though. Set your H1 to a block element, give it a width and height to match the graphic, set the graphic as a background image and use a negative text-indent to hide the text from view.

h1 {
display:block;
width:100px;
height:30px;
background: url(myImage.jpg) no-repeat;
text-indent:-2000px;
}

6 - Vertical alignment, CSS-style
Vertical alignment with tables was a straightforward affair, but in these enlightened times of CSS-based layout, the seemingly simple task of vertically centring text is responsible for more hair-tearing frustration than you might imagine. Luckily a solution is at hand. Just set the line-height of the element containing your text to the same as its vertical dimensions. A container div with a height of 20px would therefore have a matching line-height of 20px.

#container { height: 50px; line-height: 50px; }

7 - Multi-class action
Attributes tend to just have a single class assigned, but this doesn't mean that that's all you're allowed. You can combine as many classes as you wish, meaning a CSS palette containing just a few basic ingredients can lead to a much wider range of styles if combined intelligently. Classes should be separated with a space, not a comma. If any style rules overlap between the classes, a class further down the CSS document will always override those above.

<p class="boxout highlighted">...</p>

8 - Min-width for all
"Liquid" layouts - where page contents expand as the user resizes their browser - are all well and good, but what happens when the user makes their window too small? Many browsers allow setting a minimum width for elements. Unfortunately, IE 6 and earlier is not one of them. What IE does support though is inline expressions in CSS styles, so with a little mathematical sleight of hand we can fool IE into thinking it supports minimum widths after all!

#container { min-width: 600px; width:expression(document.body.clientWidth < 600? "600px":"auto" );
}

9 - Consistent formatting with text-transform
This one is particularly useful when working in larger teams, where maintaining consistent formatting can be an ongoing battle. Text transform instantly renders content contained within as uppercase, lowercase or capitalised, without the need for retyping or JavaScript manipulation. The HTML original remains unaltered.

p { text-transform: uppercase; }

10 - Cropping images with CSS
Under-used, but potentially very powerful, the "clip" command allows users to define a crop area on any element, ideal for thumbnailing images without the need for multiple image sizes. Crop may only be used on absolutely positioned elements though, so this can limit its usefulness. Note also that dimensions are relative to the top and left of the element, so a right hand margin of 5px on a 45px-wide image would be 40px.

img.crop { clip: rect(5px 40px 45px 5px) }