Balanced branding

26 February 2004

7 comments

A Blue Perspective: Balanced branding

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.

Categories

Comments

  1. 1/7

    Johan commented on 26 February 2004 @ 04:07

    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. 2/7

    Unearthed Ruminator commented on 26 February 2004 @ 05:55

    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. 3/7

    Brad commented on 26 February 2004 @ 13:45

    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. 4/7

    Unearthed Ruminator commented on 27 February 2004 @ 04:04

    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. 5/7

    Unearthed Ruminator commented on 27 February 2004 @ 04:10

    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. 6/7

    Jacobus van NIekerk commented on 27 February 2004 @ 07:48

    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/7

    Brad commented on 27 February 2004 @ 08:51

    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. :)

  8. Leave your own comment

    Comments have been turned off on this entry to foil the demons from the lower pits of Spamzalot.

    If you've got some vitriol that just has to be spat, then contact me.

Follow me on Twitter

To hear smaller but more regular stuff from me, follow @themaninblue.

Monthly Archives

Popular Entries

My Book: Simply JavaScript

Simply JavaScript

Simply JavaScript is an enjoyable and easy-to-follow guide for beginners as they begin their journey into JavaScript. Separated into 9 logical chapters, it will take you all the way from the basics of the JavaScript language through to DOM manipulation and Ajax.

Step-by-step examples, rich illustrations and humourous commentary will teach you the right way to code JavaScript in both an unobtrusive and an accessible manner.

RSS feed