Your brand name looks ridiculous if it's split across two linesYou hear marketers yammer on about branding. A lot of it has validity, so you want to help out in your web marketing initiatives. So why would you want your company’s 2-word name to be split onto 2 separate lines? Let me show you why this is bad in your web marketing and how to avoid this mistake by using HTML non-breaking spaces.

HTML split my brand in half!

I work for Quest Software, and I was working on a landing page for one of our Google AdWords campaigns and saw a bad way of presenting my company’s name.

Most marketers would look at this and not care. But they must understand that the people reading this ad probably read a lot of stuff on their computers every day. Their eyes get tired from scanning so much text. What’s worse, this split of words is happening on the ad’s heading, which is more likely to be read than anything other text on the page. What’s worst of the worst is that the text in question is my company’s name.

Mix that in with the fact that this is a landing page. This page has only a few seconds of the reader’s attention. Even the smallest of trip-ups eat into this time. The reader is either going to be compelled to download the solutions brief, or they’re going to click the back button and find something else.

If you’re not doing landing pages yourself but are posting HTML content in emails or on web sites, you aren’t granted much more attention (aka time) from your visitors. So continue reading because this isn’t just limited to my landing page conundrum. You’re not getting out of this one, bucko!

  to the rescue!

HTML has a sorely-misused escape character known as the non-breaking space. Here is what Wikipedia had to say about non-breaking spaces today:

In computing, a non-breaking space (NBSP) is a special space character that prevents an automatic line break (line wrap) at its position. It is also known as a hard space or fixed space. It can also be used to get multiple spaces in a row in systems like HTML that reduce sequences of normal spaces to a single space.

A non-breaking space is marked up in your HTML as  .

Unfortunately, this is how you see non-breaking spaces used in a lot of people’s HTML, particularly in places like the page footer (demonstrated below):

Bad! Use CSS to put space between 2 blocks of text! Learn your markup!

Fortunately, I can show you where non-breaking spaces shine.

Keeping Quest Software together

Now that you know what a non-breaking space is, you can probably guess that I put a non-breaking space between the words “Quest Software” to fix the problem. Now look at the header. It looks better with the words “Quest Software” together, doesn’t it?

Here is the code I used initially:

And here is the code I used to fix it (with the non-breaking space emphasized):

Bonus tip: update your style guides

Here’s the fun bonus tip. Why not make it a style rule to use non-breaking spaces for your multi-word brand name, no matter where it appears in your HTML? This applies to email campaigns, ad campaigns, and your web site.

I think the only way you can get other web marketers in your company to care about this is to get them to care about usability. Sure, this is another thing for HTML content contributors to remember. It’s nit-picky. But it’s one less thing that trips up your site’s visitors when they’re trying to learn about your company.

And if you ever get the pleasure of sitting in on a usability test involving your site, you’ll quickly learn that there are plenty of other design elements tripping up your site’s visitors. Rid of this one.