James Titcumb

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.

OK, this is basic PHP stuff really, but it’s something I don’t use very often so I thought I’d add a little note to remind myself.

HTML:

<form action="<?=$_SERVER['PHP_SELF']?>" method="post">
<select name="test[]" multiple="multiple">
	<option value="one">one</option>
	<option value="two">two</option>
	<option value="three">three</option>
	<option value="four">four</option>
	<option value="five">five</option>
</select>
<input type="submit" value="Send" />
</form>

PHP:

<?php
	$test=$_POST['test'];
	if ($test){
	 foreach ($test as $t){echo 'You selected ',$t,'<br />';}
	}
?>

Source: http://onlinetools.org/tricks/using_multiple_select.php

Sometimes I find it hard to think of the correct DOCTYPE for an HTML document, and probably due to laziness I usually omit the DOCTYPE tag, which of course puts most browsers into “Quirks” mode. I’m trying now to be a bit more specific from now on, so I found a blog post on “A List Apart”.

For full post, click here.

Read the rest of this entry »