Some text like this for example, will not wrap if its container is quite narrow (say, in a table column).

466456-34635645-346346346-3463456

There is a solution - it’s the ’soft hyphen’:

­

Which will create a hyphen which will happily wrap onto the next line.

Though it may seem logical to highlight important information on your site, overdo it and you could put off your users. If they see a panel which tries a little too hard to grab your attention, they could assume it’s an advert and ignore it completely.

This is illustrated beautifully by Jakob Neilsen, who uses the US Census Bureau website as an example to show how easily this can happen. Although the site has the US population in large red letters, when users were asked to find it, 86% would miss it entirely, assuming it was an advert.

Another example to illustrate the overdesign problem is the website of Boots the Chemist:

The site’s main content is made up of variously coloured, attention grabbing panels, which are likely to be ignored by the user. The large numbers in bright red font also add to the problem.

Many designers forget to suggest a clear workflow through their sites, and I think is especially true of the Boots site. Not content with one navigation bar they have four, all competing for the user’s attention.

When a user visits a site, they are quite likely to be looking for key information. A store locator perhaps, or opening hours, products, pharmacy information, etc. With some thought, this could all be condensed into one clear navigation tree, rather than being scattered around the page in a tiny font. The left hand column looks especially squashed, attempting to pack too much information into a small space.

The buttons at the bottom are quite a nice way of navigating; they are clear, simple and not overstyled. But they are lost at the bottom of the page where the user is unlikely to look first for information. Instead, the entire site gives the impression of information overload, which encourages the user to go straight for the search box.

It becomes easy to see the appeal of minimalist design, keeping the menus, colours and panels as pared down as possible. But this needn’t be at the expense of visual appeal. A common-sense balance can achieved by keeping these simple pointers in mind:

• Limit the number of panels on the page. Especially if they are all different colours.
• Avoid over-highlighting numbers - text is far more user-friendly.
• Keep the menus simple, and as few as possible.
• Limit font styles, colours and other formatting.
• Minimise the use of animated banners and flashing text.
• Avoid jargon and keep headings simply worded.

Really, we need to keep in mind what our users want to do, not what we want our users to do. By highlighting too many ‘important’ sections the workflow is lost, and our users with it.

This is done by creating a <div> which has the map image as the background. Links are placed inside this <div> for each location, and are positioned absolutely over the map. Inside each link is the tooltip text <span>, and a <div> with the class ‘dot’ to define the hotspot area. On the map shown, I have outlined these divs with a square, white border so you can see where they are. But of course you could make them entirely invisible if you wanted to.

Here’s the HTML structure:

<div id=”map”>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”dublin”>
      <div class=”dot”>
        <span> Dublin </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”edinburgh”>
      <div class=”dot”>
        <span> Edinburgh </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”london”>
      <div class=”dot”>
        <span> London </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”cardiff”>
      <div class=”dot”>
        <span> Cardiff </span>
      </div>
    </div>
  </a>
  <a href=”javascript:void;” class=”tooltip”>
    <div class=”belfast”>
      <div class=”dot”>
        <span> Belfast </span>
      </div>
    </div>
  </a>
</div>

So to recap - the tooltip text and ‘dot’ hotspot are contained within a <div> named the class of the city it points to. This div is positioned absolutely over the map image. To create the tooltip, reuse the CSS from my previous tutorial (only with slightly different sizes and colours this time):

a.tooltip:hover { font-size:100%; } /* IE6 fix */ a.tooltip span {display:none; } a.tooltip:hover span { display:inline; position:absolute; padding:3px; background-color:#eee; border:1px solid #000; text-decoration:none; color:#7A2141; font-weight:bold; }

Then create the CSS for the map image, and the locations:

#map { position:relative; background:url(ukmap.png) no-repeat; width:244px; height:253px; border:1px solid #000; }

a.tooltip div.belfast { position:absolute; top:116px; left:90px; }
a.tooltip div.dublin { position:absolute; top:147px; left:80px; }
a.tooltip div.edinburgh { position:absolute; top:92px; left:142px; }
a.tooltip div.london { position:absolute; top:204px; left:179px; }
a.tooltip div.cardiff { position:absolute; top:196px; left:130px; }

Finally, create the CSS for the dot hotspots. This just decides how big each hotspot should be, and adds an optional border:

a.tooltip div.dot { width:10px; height:10px; border:#fff 1px solid; }

This will give you some working map tooltips! Of course, you may wish to position them a little better, as they overlap the dots a little. So you can either simply push them down a little like this:

a.tooltip div span { top:14px; }

or you can try and centre them:

a.tooltip div span { top:14px; margin-left:-250%; font-size:100%; }

Unfortunately this method is not terribly reliable, a better solution would be to make all the tooltip text <span> tags the same width, then negatively offset them by half their width:

a.tooltip div span { text-align:center; top:14px; width:60px; margin-left:-30px; font-size:100%; }

The second use for this CSS technique would be a Facebook style method of highlighting photographs. A list of items is shown under an image. When the mouse is hovered over one of the items, a box appears on the image. Like so:

To do this, you need to create a <div> which will hold the image and the list. Each list item will have a <span> inside it, which will be hidden initially, but show up over the image when the item is hovered over. Here’s the HTML:

<div class=”housemates”>
   <ul>
      <li><a href=”#” class=”person”>Jon <span class=”jon”></span></a></li>
      <li><a href=”#” class=”person”>Leonie <span class=”leonie”></span></a></li>
      <li><a href=”#” class=”person”>Andy <span class=”andy”></span></a></li>
   </ul>
</div>

The ‘housemates’ div should have the photo as a background, and have the photograph’s width plus some top padding to push the list down underneath:

.housemates { position:relative; background:url(housemates.jpg) no-repeat; width:419px; padding-top:343px; }

Then the size of the spans which appear when hovering should be set, using the CSS trick previously outlined:

a.person:hover { font-size:100%; } /* IE6 fix */
a.person:hover span { position:absolute; width:80px; height:100px; background:transparent; border:2px solid #fff; text-decoration:none; }

Finally each individual <span> is given a position over the image:

a.person span.jon { top:35px; left:72px; }
a.person span.leonie { top:39px; left:157px; }
a.person span.andy { top:30px; left:240px; }

And there it is, a simple way of using CSS to annotate your photos, Facebook style.

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Of course it doesn’t alter their code in anyway, it just changes the way you see it in your browser. There isn’t much of legitimate use for this, but it’s an interesting Javascript curiosity nonetheless.

(Shamelessly stolen from Blogstorm.)

In addition, it also gives you the x and y mouse coordinates, which is very useful for checking that things line up properly. The program is very small and unobtrusive, it sits in the systray until you double-click the icon to pick it up. Then it will follow your cursor around, until you double-click its icon in the systray again to put it back.

Unfortunately it doesn’t have hex codes set to appear by default, so when you first install the program, you will need to right-click it’s icon, Select ‘Properties’ and tick ‘Show hex values’. You can then hover over your desired colour, and press Ctrl + C to copy its hex code to your clipboard.

A similar program is Pixie, though I like it less as it remains static in the centre of the screen. This means you have to switch in and out of it, unlike Eyedropper which feels more natural as follows the cursor, making it easier to continue your work without needing to make a switch. Both these programs are small, and free (though I don’t think they are available for the Mac).

Download Eyedropper - Download Pixie

To do this, you will need to create a class for the links which require tooltips, and a <span> within that link to include the tooltip text:

<a class=”tooltiplink” href=”#”>this is a link<span> This is a tooltip</span></a>

I have put some spaces inside the tooltip span on both sides, so those with CSS turned off don’t view the link and tooltip text as being scrunched together.

Then add the following styling:

a.tooltiplink span {display:none; }
a.tooltiplink:hover span { display:inline; position:absolute; padding:5px; color:#0c0; background-color:#eee; border:1px solid #000; text-decoration:none; }

The first line ensures the tooltip <span> is hidden, the second line reveals the <span> when the link is hovered over. It does this by switching the ‘display’ from ‘none’ to ‘inline’. The second line also adds some visual styling such as padding, text colour, background colour, and a border. Finally it adds ‘text-decoration:none’, so it does not inherit the underline from the link.

However, There is still a little tweak we need to apply to this CSS, as IE 6 has problems rendering the tooltips. This is easily fixed by adding a font-size to the hover:

a.tooltiplink:hover { font-size:100%; } /* IE6 fix */

I am not sure why this works, as setting the font-size shouldn’t make any difference at all. Suffice to say IE 6 is full of unique little quirks!

So there you have it, tooltips with no Javascript involved.

EDIT: You can see some creative uses for trick this here - CSS tooltips and images.

It’s very handy for sites such as Stock Xchng (royalty free stock photos), Youtube, or the New York Times. Or really any site which tries to glean personal information for no real reason.

They also have a ‘disposable email’ feature for creating temporary email address. This enables you to sign up to sites you know will send you spam, without divulging your personal email address.

You may be wondering why replacing images with text could be useful. The reasons are twofold. The first reason is to improve your site’s SEO (Search Engine Optimisation). Having a <h1> title makes it easier for spiders to correctly categorise your page, and a relevant and well-worded tag can improve the page’s ranking. However, for reasons of aesthetics, it’s often nicer to have an image as the header, perhaps with a unique font, or your company’s logo. Rather than have this potentially comprise your page rankings, it makes sense to use CSS as an easy way of having a nice looking page and good SEO.

The second reason is to enable accessibility, to maximise the amount of users who are able to make full use of your site. Pages which rely entirely on images for headers and menus are hard to navigate in text-only browsers. This may mean those with screenreaders have difficulty accessing your content.

So how do we go about it? Making the text invisible on the background image with ‘display:none’ would be counted as a potentially devious cloaking method by Google and penalised. This is because it attempts to entirely hide page content from the user. Instead there are two ways we can achieve it:

1. This method is the one I’ve seen most commonly used. Rather than hide the text, it places it far off the left hand side of the screen, where it cannot be seen (except by people with really really big monitors!). The title tag is then given the same dimensions as the image which will replace it:

<h1 id=”replace”>The Title Goes Here</h1>

#replace { text-indent: -9000px; background:url(title.gif) no-repeat; width:200px; height:100px; }

I personally am not a big fan of this method, it seems like ‘dirty’ CSS to me, putting a large negative indent on an element. Though it does seem to work in nearly all browsers with the exception of IE 5, though I understand there are some workarounds for this.

2. This next one is my favoured method, and the one I most commonly use. The thinking behind this one is to cover the text with an image inside an absolutely positioned <span>. Both the span and the title tag are given the same dimensions at the image, so they take up the same space on the page :

<h1 id=”replace”>The Title Goes Here<span></span></h1>

#replace { position:relative; margin:0; padding:0; width:200px; height:100px; }
#replace span { position:absolute; top:0; left:0; background:url(title.gif) no-repeat; width:200px; height:100px; }
#replace, #replace span { width:200px; height:100px; }

Because the image gets its absolute positioning from the parent element, when aligned to the top and left, it sits nicely over the text. However, there are a few slight problems with this in older versions of Opera, which can be solved simply by adding a z-index to the span selector above:

#replace span { position:absolute; display:block; top:0; left:0; z-index:1; }

Of course the problem with both of these methods is that you don’t get to use the ‘alt’ or ‘title’ tags on your images (which is good SEO practise), but I think this is outweighed by the benefits of having relevant <h1> tags, which are more significant anyway.