James Titcumb

I had an interesting argument earlier today. One of our websites is being redesigned at the moment, and the page layout has the logo and company name at the top, and below the menu is a subtitle. I noticed that two things which should be the same weren’t, and in doing so noticed that the company name was not in an <h1> tag, but just an <a href=”..”>…

Normally I would do something like this:

<img src="logo.gif" alt="Company Logo" />
<h1><a href="/home">Company Name</a></h1>
<ul>
  <li>About This</li>
  <li>Portfolio</li>
  <li>Get In Touch</li>
</ul>
<h2>We are an awesome company!</h2>
<h3>About This Company</h3>
<p>Content...</p>

Showing here that “Company Name” is the overall most important thing on the page. However, one of the developers here has structured it slightly differently:

<img src="logo.gif" alt="Company Logo" />
<a href="/home">Company Name</a>
<ul>
  <li>About This</li>
  <li>Portfolio</li>
  <li>Get In Touch</li>
</ul>
<h1>We are an awesome company!</h1>
<h2>About This Company</h2>
<p>Content...</p>

If I view the page without CSS, the company logo becomes unimportant and lost, but the “We are an awesome company!” tag line becomes the most important thing on the page. I’ve not come across this different way of thinking before, and I’m just wondering what other people think – what should the <h1> be?

It could just boil down to choice – whether you see the overall site name (e.g. “Company Name”) as the most important thing or something else… Maybe you design your pages in completely different way?

This kind of lazy form creation really annoys me. This company is trying to make users jump through hoops just so their form developers don’t have to bother reformatting the data into an acceptable format to them.

Read the rest of this entry »

Argh, it really annoys me when web designers have check boxes or radio buttons that do not have clickable text attached. If you’re writing your website correctly (semantics-wise at least) then you shouldn’t have this problem because you’ll be making use of <label for=”…”>. It’s really not hard, and it’s such a simple solution for a big (well, medium) usability issue. Note that the value of the for=”…” attribute must match the id=”…” attribue of the element it is meant to label, not the name=”…” attribute as some people think…

Consider making:

<input type="checkbox" name="remember_me" /> Remember my login

Into:

<input type="checkbox" name="remember_me" id="remember_me" />
<label for="remember_me">Remember my login</label>

kthxbai.

One thing I ensure I do on all sites is to develop for two audiences at once. The first audience is of course the end user of the site. This user has CSS enabled, and can view all the prettyness of the site in all its original intended glory. But I also develop the site for text-based browsers, search engines and those with CSS disabled. The advantage of this is that the page is semantically correct. You have <h1> tags around the site title, <h2> around the page title and so on. Menus are in <ul> unordered lists, and so on. Semantically correct pages are instantly more SEO-effective. Working at Netbasic has shown me how important that is ! In addition, for the small population that use text-based browsers, it enables them to view the site without mess.

If you have a nice logo to display, and you don’t want to display a big bulky <h1> tag on your page, there’s a really easy way of doing that:

<div class="site-title">
<h1>Your Site Name</h1>
</div>

This markup is great for search engines. Search engines will see the <h1> tag and notice that “Your Site Name” is the page’s main title. Little things like this help search engines determine what your site actually contains, as opposed to the hugely ineffective method of repeating a load of words several thousand times in tiny text…

The way to make that neat semantic code look nice and pretty is with CSS, in order to hide that “Your Site Name” text but display your nice company logo instead…

div.site-title
{
background-image: url('/images/your-company-logo.png');
}
div.site-title h1
{
display: none;
}

As you can probably tell, what this CSS does is ask the browser to display your company’s logo as the background image to this div, and hide the <h1> text.

There’s another issue though – how do we make that lovely logo clickable to go to the home page? That’s easy too, and semantically.

<div class="site-title">
<h1>Your Site Name</h1>
<a href="/home/page/url"><span>Click here to go to the home page</span></a>
</div>

We modify the CSS as well to hide the text itself (in the <span>) but make the anchor (the <a>) tag into a block, which turns it into a link that covers the entire logo.

div.site-title
{
background-image: url('/images/your-company-logo.png');
}
div.site-title h1
{
display: none;
}
div.site-title a
{
display: block;
width: 300px;
height: 60px;
}
div.site-title a span
{
display: none;
}

We’ve used a similar trick here to hide the text that should only appear when CSS is turned off. As mentioned, we explicitly set the dimensions of the anchor tag to fill the dimensions of the logo image.

That’s all there is to it, and search engines will love that as opposed to just using something like this for your logo:

<a href="/home/page/path"><img src="/images/company-logo.png" title="Company logo" /></a>

The search engine or text-based user looking at your site will be able to see clearly what the page title is, and it will load really quickly as unless you’re applying the CSS styles, there will be no images to load, which makes it an all-round winner really!

I’m not saying this is the best way of doing it, but I’ve found it to be quite clever and I use it. If someone’s got some better ideas out there, why not add a comment with your idea

Many people across the world have made this pledge:

I will publish a blog post on Tuesday 24th March about a woman in technology whom I admire but only if 1,000 other people will do the same.

Here is mine, and although I didn’t have to think very hard about who to post about, I still admire her more than anyone in the world.

Hannah is 39 weeks and 1 day pregnant today, and she’s still working hard at Netbasic. She’s not exactly a pro programmer, but she’s learning so quickly. From knowing nothing at all about HTML or CSS or Photoshop, she’s come forwards in leaps and bounds with the help of everyone here. It’s certainly not easy for her, she gets aches and pains all day, Braxton Hicks contractions, extremely painful kicks, and all sorts. She’s under the weather, tired and very drained, yet somehow she is carrying on, she’s still working hard and creating pages that are helping keep the company going!

I suppose this is just my way of saying how proud I am of her, and how awesome she is.