Archive for the ‘web’ Category
.co Domain Names
For as long as I can remember I’ve tried to secure a domain for my surname, the obvious candidates were either a .com or .co.uk but both of these are taken by huge companies. The .com company leaves a particularly bad taste in my mouth, as they are only forwarding the domain to an internal page of another website, with no mention of the URL on the page. I’ve tried several different methods of contact to see if they would be interested in selling; phone, email and blogging but as you would expect, I have not received a response.
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:
- 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?
- 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?
Tweet in the Park featured in the Scottish Sun
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.
Add a body id to a wordpress template
When I created my first wordpress theme for this website, over two years ago, I had great trouble trying to attach an ID onto the body within the header code. I found it really surprising that there wasn’t much in the way of documentation as I believe that attaching an ID to your body tag is something which should be used on every website.
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.
Noel Jacksons Tweethis Button
Recently I had been debating whether to stick a tweetmeme button on this blog but the one thing that kept constantly putting me off was the fact that the button used an iframe.
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.
text-rendering: optimizeLegibility
Earlier in the week Twitter was awash with a new CSS technique for text-rendering called optimizeLegibility. The premise behind this new technique is that browsers, which are notorious for rendering fonts terribly, improve the handling of kerning pairs and ligatures in modern browsers; Safari 5, Webkit Nightlies & Chrome.
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.
iPhone Icon | Apple Touch Icon
On the iPhone/iPod you have the ability to save a webpage to your home screen, which allows you to access said website using a speed dial type method, without having to launch Safari. Incase you were completely unaware of this feature let me give you a quick run down on how to do this; when browsing the web from within Safari press the plus icon on the blue bar that runs along the bottom of the screen, a window overlay will appear which will give you four suggests; add bookmark, add to homescreen, mail link to this page and cancel.
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.
Don’t Kill Your Site
I’m sure you’ve experienced this before, browsing the internet when you stumble across a 404 page telling you that the page or post you were looking for is no longer available. It’s annoying at the best of times but it’s even more annoying when this warning message is on a web designer/developers site because as professionals we should know better and know exactly how infuriating it can be.
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.
CSS3 Box Shadow and Inset Shadow
I’m sure by now you will have seen multiple tutorials on how to create a box-shadow effect with CSS but I’m pretty sure that you will not have seen as many tutorials on how to go about creating an inner/inset shadow.
Before we get started it’s probably worth mentioning two things:
- 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.
- 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,rgborrgbavalue.
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
Two Dribbble Invites To Giveaway
So as you might have already guessed from the title I’ve got two invites to Dribbble to give away.
I understand that most people will have theirs already but there are still a fair few people looking and I’ve decided to raffle them away, as I believe it’s the fairest solution. However, I won’t be giving them away to anyone; I want my “draftees” to be of the highest quality.
How do I enter
- Leave a comment below posting a link to your favourite bit of artwork you’ve produced. This can be anything from an invitation through to a full blown website design.
- Tell me why this is your favourite piece of work.
That’s it, no catches, no dirty tricks. I’ll close this competition next Friday, the 11th of June, where I’ll close the comments section and email the lucky two.
Best of luck.
Working with RGBa Colour
With the progression of newer browsers I’ve started to move my work forward and incorporate RGBa (Red, Green, Blue, alpha) into my client work. Obviously the use of this will depend on the amount of visitors your site attracts and what browser they end-users are using. However, with that said, when I can get away with using RGBa instead of .png files then I will.
Quick Refresher Course
Hex Values
You might only be aware of one way to stipulate colour in your website designs, which will probably be a hex value. A hex, or hexadecimal, value is a colour code that starts with a hash and is followed by either 3 or 6 numbers, depending on the colour you are wanting to use.
The hex value of the colour red will look like #FF0000;
RGB Values
RGB which stands for Red, Green, Blue is another way for specifying colour values on your website. However, this method is quite different to the previous. Lets take the example from the previous paragraph.
The colour red in RGB will look like rgb(255,0,0);
So instead of stipulating a hash, that gets replaced with rgb and instead of using 3/6 numbers they get replaced with 3 sets of numbers.
What is RGBa and how can you use it in your work?
RGBa is the follow on from RGB, the basic principles are the same but you get one extra letter “a” which stands for alpha. This letter allows you to specify an opacity value for the colour you are declaring. As this is a newer technique it is unfortunately not yet supported by all browsers. Chris Coyier over at CSS Tricks has created a nice little table to show you the state of the playing field.
To carry on with our red example; rgba would look like the following rgba(255,0,0,1).
The number one is located in the alpha channel which allows us to fill areas with transparent color; where you can stipulate any value between 0 and 1 (zero being fully transparent and one being fully opaque).
Why Can’t I Use Opacity For The Alpha Channel
Above I mentioned the fact that the alpha channel is a little like an opacity value. So you might be asking yourself why you can’t just use the opacity value instead.
The reason I choose the word opacity was to make it easier for you to understand as you were reading this. The RGBa property applies transparency only to a particular element (the element the RGBa value is set on), whereas the opacity property affects the element it is applied to and all of its children.
Defining RGBa in your Stylesheets
As I touched on above, not all browsers support RGBa, so when you do declare these you should always provide a fallback colour just incase of the worst possible outcome. Your fallback should be a solid colour, so you should either use rgb or a hex value for this.
div {
background: rgb(255,0,0);
background: rgba(255,0,0,0.6);
}
If you do not declare a fallback this means that nothing will be displayed, if you are viewing the website on an older browser that doesn’t support this code.