Page style:

A Blue Perspective: Balanced branding

Balanced branding
26 February 2004

Design, particularly Web design, is all a matter of balance. Form vs. function, whitespace vs. text, load times vs. content. Then there's a new struggle: code vs. branding.

I've noticed a couple of web sites that use plain old (X)HTML text to render the main heading of their web pages, which is usually the name of the site/entity. Whilst their commitment to accessible, fast-loading web pages is admirable, I can't help but feel they've tipped the balance too far.

I consider branding and identity to be an integral part of any design – probably one of the top five – because it gives the viewer clues and context to anything that they are experiencing. By utilising run-of-the-mill text to render your identity, it makes it very hard to distinguish yourself from anyone else delivering a message. Granted, usage of plain text can itself be an identity, but I think that Eric Meyer has pretty much cornered the market on that one.

Not only does the usage of font-family: sans-serif make your identity generic, but it makes it unstable. Fonts vary across operating systems, computers, even users, so it's highly likely that your identity will not be perceived consistently between two people. There is a sort of deconstructionist beauty in the usage of non-identity as an identity but its novelty soon wears off, and Coca-Cola's multi-million dollar marketing budget seems to indicate that consistent branding has its benefits.

Although semantic coding aims to reduce all data into its most minimal textual form, there are just some things that can't be captured in 255 characters: the calming effect of the colour blue, the professionalism of Myriad Roman, the tech-savvy of a pixellated WIRED. Although it might pain the purists, sometimes only an image will do.

Comments

1/7. 26 February 2004 @ 04:07, Johan wrote:

hehe.. I think we're checking out the same sites :) and I also got very intrigued by this subject. At first I'm blown away that someone has the guts to use plain text as their logo, but then I quickly realize that it might just be other reasons.
wddg.com use of typography is outstanding and I wish more folks would check out the source file.

2/7. 26 February 2004 @ 05:55, Unearthed Ruminator wrote:

I don't mind the plain text for http://www.complexspiral.com/or http://www.catics.com/- but it doesn't look right on the other two.

Of course, I'm guitly of using plain text for the title on my site, so I guess I can't complain.

A question though, doesn't a plain text title carry over to every platform better (i.e. cpu based browsers, TV browsers, phone browsers, etc.)?

3/7. 26 February 2004 @ 13:45, Brad wrote:

This is the reason I wish something like FIR or LIR or whatever-IR-they're-calling-it-this-week would work properly (or at least accessibly). Or that modern browsers REALLY supported modern standards (looking at this link
http://www.literarymoose.info/=/destroy/picturehead.xhtml
it's pretty obvious that they don't.)

Branding identity is EXTREMELY important, if for no other reason than that clients expect nothing less. They're paying us to make their product shine with our communications skills - sometimes it's tough to get our point across with pixellated HTML text.

This, however, also relates somewhat to slightly misguided client expectations: they expect the kind of experience that print media will give them. Most people don't really understand that the web is an entirely different beast.

That said, I still think branding is of vital importance, and will continue to be as long as companies wish to compete.

4/7. 27 February 2004 @ 04:04, Unearthed Ruminator wrote:

Looking at your literary moose example...

Isn't the technique usually to set a background image in the CSS (not content) and use a span or something to hide the text?

Something along the lines of:

#firHeader {
width: 300px;
height: 50px;
background: #fff url(firHeader.gif) top left no-repeat;
}
#firHeader span {
display: none;
}

<h1 id="firHeader"><span>text to hide<span></h1>

5/7. 27 February 2004 @ 04:10, Unearthed Ruminator wrote:

Also, isn't the content css attribute for generated content and is supposed to be used with pseudo elements :before and :after? Which means that the browser has to know what they are?

Maybe I'm wrong here and someone more with more experience than me can explain what's going on.

6/7. 27 February 2004 @ 07:48, Jacobus van NIekerk wrote:

I was going thought my logs and saw I was getting some hits from this site. Curios as to why, I went to your website and had a look.

I have to comment regarding the issue "using text for logos or branding on the web. I do agree that branding should be consistent across all platforms. In the case of catics or catics.com I do use this text logo as it appears on my site. I would off course use an image for the logo if it was a custom font that was being used for branding.

That's my 2 cents worth.

Kind regards
Jacobus van Niekerk

7/7. 27 February 2004 @ 08:51, Brad wrote:

The Literary Moose example saves on superfluous mark-up like the span. It's proper CSS3/2.5 content replacement rather than a hack in the vein of "make the text 0px high".

For a summary of the currently useful IR techniques, take a look at this post by Dave Shea:

http://www.mezzoblue.com/archives/2003/12/12/accessible_i/
Anyway I think this is getting off-topic, so I'll shut up now. :)

Post your own comments

Fields marked with an asterisk* are mandatory. All HTML tags will be escaped. http:// strings in comments will be auto-linked.




Archives