Unfortunately it seems like I won’t be able to secure either of these domains, so I’ve been looking at the options available to me. For a good while I was very interesting in acquiring a Niger domain, which would look like osbor.ne, but I decided after much deliberation, that no matter how much I wanted it, a £300 outlay every two years was just too expensive.

In the last few months there have been more people mentioning the latest domain extension to be brought to the masses, the Colombian TLD, .co. At first I thought it was just going to be another pointless domain, something that wasn’t going to catch on, much like the .me domains that came out two years ago. I pondered over this decision for a few weeks to help me decided what I wanted to do; forget about purchasing it or try my luck with a pre-order. In the end I decided to go ahead with the pre order and I now own osborne.co.

To be honest, I’m not really sure if a .co domain will ever have the same weighting as a .co.uk or a .com, or even if it will catch on, but it will definitely be interesting to see what companies lean towards it. There were two reasons which lead to me pre-ordering the domain:

1. People make spelling errors all of the time and a .co domain is only one letter shorter than a .com. Obviously this doesn’t mean anything but perhaps something like this could help a site climb the ranking quicker?
2. As I said above, I wanted a domain for my surname for a good few years now and I wasn’t prepared to let a suitable alternative pass me by. If a year passes and I haven’t used it as much as I thought then I’ll simple let it expire.

What do you think, is this new domain extension a waste of time or indeed something that could prove to be quite valuable?

Font Stacks

On my main body text I am using ff-tisa-web-pro-1 and ff-tisa-web-pro-2, which are being served up with help from Typekit. The fall back options in my font stack were; Helvetica, Arial and Serif.

Unfortunately with Typekit, sometimes you can see the font switch happen which is caused by your default fonts changing over to the ones served by Typekit and if you haven’t specified similar looking fonts then the switch over can be quite horrific, with line lengths changing and pushing words onto the next line. So to combat this problem, I switch my fallback fonts to Georgia, Palatino, ‘Palatino Linotype’, Times, ‘Times New Roman’ and serif. Although you will still see the font switch on some web browsers, the switch over should not be nearly as noticeable now.

One final thing I done, was republish my Typekit fonts as suggested on there blog in order for the fonts to render properly in the Opera browser.

Additional Information

This blog has always been pretty sparse, perhaps a little too sparse. So I decided to provide some more extra information at the bottom of each post, which give the readers more information about me. The sections are titled; who I am, what I do and where I do it.

I’ve also been toying with the idea of putting in related information that could accommodate extra information on the post.

Tweet Button

Last week I wrote about Noel Jacksons excellent little Tweethis button and if you missed out on this then it is certainly a worthwhile read. I’ve added the button to the bottom of my posts, directly above the additional information which I have mentioned above.

iPhone Version

Whenever I’ve had some spare time I’ve been chipping away at an iPhone version of this site, so hopefully I should be able to get that up and running before the month is out. Expect an accompanying blog post on how to create an iPhone version of your website in the not too distant future.

If you managed to pick up a copy of todays Scottish Sun, make sure you flick through to the music pull-out.

In February I wrote up an article on my first foray into the world of web apps, where I detailed how I went about building a Twitter mash-up site for Scottish music festival T in the Park. As I’m incredibly witty I decided to call it Tweet in the Park.

The site is a Twitter feed aggregator which will pull in any instance of the festival being mentioned, so that people who, like myself, are not in attendance this year will not miss out on a thing.

Late last month the Scottish Sun got in contact with me asking if I would be interested in doing a small interview to talk about the site and why I decided to create it. If you wish to download a pdf version of the page then feel free to do so — Tweet In The Park pdf.

After several attempts at trying to settle on a method for my website I ended up using a switch statement which was placed within the header, it looked like the following:

<?php if (is_page("about")) { ?>
<body id="about">
<?php } elseif (is_archive("archives")) { ?>
<body id="articles">
<?php } elseif (is_page("portfolio")) { ?>
<body id="portfolio">
<?php } elseif (is_page("contact")) { ?>
<body id="contact">
<?php } else { ?>
<body id="index">
<?php } ?>

This ultimately ended up being far from ideal because if I ever needed to create a new page which didn’t fall within the stipulated pages then I’d have to add another option to the switch statement in order to style the page how I desired. When WordPress introduced version 2.7 they brought forward a new function which dynamically added a class to the body tag <body <?php body_class(); ?>> which would allow for multiple classes to be attached to the body, allowing designers/developers to style pages individually. However, this still wasn’t what I wanted to do with WordPress.

Nearly two years on and I seemed to have forgot all about my issues with attaching IDs to the body tag, until I was developing a WordPress website that required the body to have unique IDs, so I started my search for another solution knowing full well that my previous solution would not prove to be adequate. Thankfully there is now much more documentation on the matter and various different methods in order to accomplish this but I must admit to still being a little shocked at the fact that WordPress does not have this in it’s core installation.

I can’t remember where I found the method that I settled on but it only requires one small tweak of the template and then the body can have both IDs and classes, the code is as follows

</head>
<?php
$url = explode('/',$_SERVER['REQUEST_URI']);
$dir = $url[1] ? $url[1] : 'home';
?>
<body id="<?php echo $dir ?>" <?php body_class(); ?>>

Do you have a better way of attaching an ID to the body tag? Please let me know in the comments section, as I’m sure there are probably even easier ways of doing it.

If you’re interesting in finding out more about why attaching a body ID to your page is a good idea then check out this great post by Harry Roberts of Venturelab and CSS Wizardry on how to get started. In the previous link, he shows you how to apply it on your own custom framework with use of PHP.

I didn’t really like the idea of slowing down page load times for something so trivial as a button, so I decided to live without it. However, earlier today I was catching up on some of my favourite blogs when I noticed that Noel Jackson had developed his very own Twitter button, which didn’t use an iframe. It was perfect, it was exactly what I was looking for.

It turns out that it’s ever so simple to incorporate into your wordpress theme, all you need to do is follow the link above and copy and paste two pieces of code. The first part is pasted into your functions file and the second part is pasted wherever you wish the button to appear on your site. I’ve stuck my twitter button on my single page, so to view it please click through to the comments section or click back to another post using the navigational arrows above.

All in I probably spent a little over two minutes putting this into my theme and another fifteen fiddling about with the CSS, which I’m still not entirely happy with.

If you were like me, thinking about putting a Twitter button on your site but not wanting to slow down page load times by having to use an iframe then I can’t recommend this one enough, it’s simple and very effective.

After reading a lot of the big industry players talking about it I decided to implement it on my own website. Everything seemed to be running fine until I noticed the font rendering on Google Chrome for PC.

As you can see from the image above, the fonts seem to have a horrible text shadow applied to them and the li elements on my left sidebar were getting pushed onto two lines.

I’m not really sure what is to blame here as the font displayed perfectly across multiple other browsers on both Mac and PC. Is this a specific browser error for Chrome PC, even thought it says it should work or is this down to a conflict with the fonts on my website which are served up with Typekit?

I’ve commented out this technique until I can find out what is causing the error. If you have encountered anything similar then please feel free to get in touch.

January 2010

February 2010

March 2010

April 2010

May 2010

June 2010

When you select the option add to home screen, you will be presented with a page with an icon and the name of the webpage, which you can choose to completely rename if you wish. Then click the add button at the top right of the window to add the page to your home screen. Once the page has been saved to your phone, you will then be able to use it like a normal app icon, without having to launch Safari like I mentioned above.

By default the icon used is a horrible screenshot of the page in question, totally illegible to everyone but Apple have provided a mechanism for site owners to specify an icon to be used instead called Apple touch icon, which I will explain in the next paragraph but thankfully website owners have the ability to change this.

What is an Apple touch icon

In short, this icon is basically a favicon for iPhones/iPods and this is the icon which is displayed on the users homescreen, after they have added the website to their phone. For example, the Apple touch icon for this website looks like the icon below to the right. If you don’t believe me, feel free to add my website to your home screen.

As you can see from the image, you don’t need any of the fancy rounded corners or glow effect on your icon as the iPhone/iPod will handle all of that for you.

When creating an Apple touch icon, you normally had to make sure that the images dimensions were 58 by 58 pixels and saved as a .png format but Dan Rubin recently pointed out:

remember: iPad needs a larger apple-touch-icon — I’m following Apple’s lead and using a 129px icon (iPhone & iPad will resize properly).
Dan Rubin

With the arrival of Apples iPad, this icon now needs to be larger to accommodate for large screen real-estate but fret not, as the icon will scale down perfectly for other devices.

How do I implement this ?

So we’ve covered the basics of what the apple touch icon is, so how do you actually put it into your website? You will be pleased to know that Apple have actually made it pretty easy.

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png" />

The code above is to be put in the head of the document, with the correct file path specified. But you do not need to specify both:

• apple-touch-icon: The usual icon with gloss and rounded corners.
• apple-touch-icon-precomposed: Similar to the above but will not render the image with the gloss.

Hopefully I’ve been able to give you enough information to get started and you can implement your own Apple touch icon, so why don’t you give it a shot and help brighten up other peoples iPhone/iPod home screens with your own icons.

Content, regardless of whether it is old or new, is vitally important, especially if it has already been indexed in Google. Please take a little care and pride in your own site and make sure that everything is where it should be or at the very least have some 301 redirects to help point the end user in a new direction.

People who do the above are contributing to link rot that is building every day on the internet and I don’t want to be a part of it.

Before we get started it’s probably worth mentioning two things:

1. Box Shadow was recently removed from the CSS3 borders and background module at the W3C for further discussion, although it will no doubt be resubmitted at some point in the not to distant future.
2. This tutorial won’t work in any version of Internet Explorer that pre-dates IE9.

Box Shadow

The basic box-shadow code is laid out as following box-shadow: Apx Bpx Cpx #XXX;

• The A pixel represents the x-axis (horizontal), a positive value means the shadow will be on the right of the box, a negative value will put the shadow on the left of the box.
• The B pixel represents the y-axis (vertical), a negative value means the box-shadow will be above the box and a positive value means the shadow will be below the box.
• The C pixel represents the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
• The last part of the code represents the colour that you are choosing, which can be stipulated with either a hex, rgb or rgba value.

Lets say that you are wanting to add the box-shadow value to a div with an id of yellow, the following code would look like

#yellow{
-webkit-box-shadow: 1px 1px 1px #FFFF00;
-moz-box-shadow: 1px 1px 1px #FFFF00;
box-shadow: 1px 1px 1px #FFFF00;
}

You might be wondering why the above code example has three different declarations for the box-shadow property, well the reason is because we are trying to future proof our code. The webkit prefix will handle the chrome and safari browsers whilst moz will handle firefox.

So why did I then go one step further and declare box-shadow on its own? Simply because when the box-shadow property gets accepted and added to the full specification, it will no longer need the vendor specific prefixes in front of it. In fact, Opera is already supporting box-shadow on it’s on, without the use of a vendor specific prefixes, as will Internet Explorer 9 when that launches.

If you always ensure that you use each vendor-specific prefix -moz-, -ms-, -o-, – webkit- and then use the non-prefixed property, you’ll target every browser.

Something that you might not be aware of, is the fact that you can actually stipulate up to six box-shadows per element. Obviously this is something that you won’t use very often but it is a handy piece of information to take note of, incase you are looking to create a complex shadow to recreate something like a flame effect *.

This can be achieved with the following code

#yellow{
box-shadow: 1px 1px 1px #FFFF00,
1px 1px 1px #FFCC00,
1px 1px 1px #FF9900,
1px 1px 1px #FF6600,
1px 1px 1px #FF3300,
1px 1px 1px #FF0000;
}

Each new shadow will be seperated by a comma, with the final value ending in the usual semi colon.

Inner Shadow

Similar to what we’ve already covered above but with one subtle difference. Lets go back to our first example:

#yellow{
-webkit-box-shadow: inset 1px 1px 1px #FFFF00;
-moz-box-shadow: inset 1px 1px 1px #FFFF00;
box-shadow: inset 1px 1px 1px #FFFF00;
}

The inset property will allow you to create an inner shadow/sunken well. Which means that the gradient effect will be on the inside of the div, as opposed to the outside, creating the effect that your div has been set back into the page.

Little Extras

If you feel like mucking about with some more box-shadow goodness then head on over to a working example page set up by John Allsopp and his team and for more information please consult the specification.

If you want to view any of the examples that I’ve went through above then head over to the example page that I’ve created.

* please never create a flame effect