Aaron Witherow - Personal Website

The Importance of Setting Font and Background Colours

2009-09-26T01:00:00+10:00

I have been neglecting this blog and not posting as much as I should so I am going to do some small snippets of information on web design and development, when I feel the need!

As the title so rightly says, it is very important to set good font and background colours when building a website. I think this is something that is so often neglected, mostly I think because we use images and don’t think about what happens if those images do not load or a user has opted to not display or download the images. What happens when you have a dark image on a white background and to provide good contrast to the dark image you set the font colour to white? Well you end up with something great when images are turned on but when they are off you end up with white text on a white background. Not good to anyone!

This is something we need to remedy and here is how.

The web developer toolbar is your friend!

When developing it is a good idea to turn images off completely, this will force you to have to add a background colour when you set up your font colour. Alternatively you can turn your photoshop file into the finished product and then use the web developer toolbar in Firefox to disable or hide images, you will then be able to see all the places where your font colour and background colour do not have enough contrast to be readable when images are turned off.

The simple rule is to pick a solid colour from your image and specify that as your background colour. This will ensure a good contrast with your font colour, it also is a good option because if a user resizes the text it will always have a colour set when the image is not large enough to cover all of the text. When I say it will provide good contrast, that is if you have good contrast between image and font colour already!

Its good practice that every time you set the background property in your CSS file that you also set a background colour to go with it. Once you have set your colours all should be good all that is left to do is use a colour contrast tool to check that you are adhering to standards and that you have at least a luminosity ratio of 4.5:1 between foreground and background colours as directed by the W3C.

There are a ton of good resources out there and this is a simple step that makes a big difference and makes your site a little more robust. Below are a few resources that I use and that I recommend.

Ollivander - The New Addition

2009-05-23T02:21:00+10:00

Just yesterday we have a new addition to the house a tiny ball of fluff known as Ollivander. Ollivander is a 12 week old Maine Coon kitten, I’m sure that very soon I will have amassed a ton of photos of him but for now here are a few of him on his first day at home.

Expression Engine and RSS

2008-12-10T10:47:00+10:00

I finally got around to fixing my rss feed today, so I thought I would post this quick snippet as it may be helpful to others. I use the standard RSS template that came with Expression Engine to create my feed the problem was that HTML and images were not showing up in the feed.

This is a simple little fix which requires the following change to the RSS Template:

In the description tag change {exp:xml_encode}{summary}{/exp:xml_encode} to <![CDATA[{summary}]]> this will enable your feed to have both HTML and images shown. Quick and easy for something that can be a pain in the arse.

Manfrotto XPROB Tripod Purchase

2008-12-06T01:33:00+10:00

My most recent photography purchase is the excellent Manfrotto 190 XPROB tripod which came with the Manfrotto 486RC2 Ball Head. I have just received the tripod so I haven’t had an extensive play with it but what I have used I am extremely happy with.

I have had a few tripods so far and all of them(with the exception of the gorillapod, which is also excellent :-)) are, to put it crudely, shit. Firstly I should mention what makes the other tripods crap and lambaste them before I offer the benefits of the Manfrotto.

The previous tripods that i have owed have all been bought from Jessops, which is a UK based photography shop. Normally buying from them is great because it is affordable but some things create a false economy if you end up buying based primarily on price. Firstly the tripods are normally of an inferior quality, they may be quite lite in weight but they are flimsily made and are usually bulky. If they are not bulky then they usually turn out to be quite unsteady, not very good for something that is supposed to eliminate camera shake.

The main area that annoys me about these tripods is the head. They normally have a very inferior, plastic head that is not very flexible in its design. They are also not interchangeable meaning you cannot upgrade in the future.

Whats so good about the Manfrotto

Manfrotto have a very good name in the tripod arena and they do make sturdy, if a bit pricy tripods. The 190 xprob is a relatively small tripod that enables you to carry it around when traveling. At its smallest it closes down to 57cm, which is small enough to fit onto a backpack or to carry around in your hand. The good thing is that it extends to 146cm with the centre column fully extended, with the ball head on top, this is just above my eye level which is perfect.

The selling point of the xprob model is that it is quick and simple to have the centre column to go into a horizontal position. This is a snap and manfrotto have gone out of their way to make this easy. Simply push in the button and the column swings from vertical to horizontal extending your options.

You can also use the horizontal centre column to great effect as the tripod legs extend to enable you to put the tripod almost flat on the ground hand for macro work or simply to sit on top of a wall or any other configuration you can think of.

The ball head makes it easy, I never used to be a fan of ball heads as they are a little more difficult to get level. After playing with one for a while though I have really got to like them, they enable you to position your camera in any way imaginable and this definitely comes into play when you change around the configuration of the tripod.

I have used this tripod a couple of times so far and I love it, it is sturdy, configurable and made of good stuff. Keep a look out for some tripod enabled photos to come. Below is a photo of Melbourne at dusk taken with my first use of this tripod, I’m pretty happy.

Melbourne Southbank taken from under one of the bridges across the Yarra river.

Upgrading the Mac Mini

2008-11-30T08:48:01+10:00

I love my Mac Mini but really the specs of the machine are a little on the low side, which I suppose is fair enough as it is pitched at switchers. Those getting into a Mac for the first time generally want a basic, cheap pc and already have all the other necessities like keyboard, monitor etc.

My Mac Mini came with 1Gb of RAM and a 80Gb hard disk, not really a lot of space for the modern desktop. Almost immediately after getting the mini I upgraded the RAM, doubling it and now the latest upgrade… the hard disk.....

As mentioned the HDD in the mini is pretty measly at 80Gb so I recently upgraded to a Seagate momentus 320Gb which is more in the ball park for what I need. Due to the form factor of the Mac Mini I felt it not advisable to upgrade to a fast 7200rpm as the heat dispersed from the drive might be a little too much for the mini to handle so I went for the 5400rpm which is the speed of the original drive.

Installing the new drive

The minis shape and size making replacing the hdd a little more time consuming than the standard desktop replacement but on the whole is not too difficult to do. I will not go through all the process of installing the drive as there are many better guides out there, I have used this one intel mac mini take apart guide.

Restoring from Time Machine

The best part of the whole process was reinstalling all my data over to the new hard drive. This was made ridiculously easy with Apples Time Machine which is used to keep back-ups of all you data.

Before I replaced the drive I made sure to back up all my important info just in case something went wrong. After the drive was installed I popped in my Leopard OSX install disk went to utilities and formatted the new drive with disk utility. Next up I chose to install from a time machine backup which was located on my external drive and the OS promptly told me it would take about 2 hours to restore the system.

In reality the drive was restored in about an hour and a half, easy, very simple and restored without any problems. I was totally amazed I have my system back exactly as I left it which saved hours of getting the system installed with all my software and all my data. The only program that complained was iTunes but this was very minor as all I had to do was re-authorise the computer to play itunes content.

I am a Time Machine fan, it makes backups of your system extremely easy and if for any reason your drive fails, you have your system up and running again in no time.

Firefox plugins for Web Development

2008-11-27T08:56:00+10:00

Firefox is a great web browser especially if you are a web developer. Through the Firefox extensions you can make your life a hell of a lot easier for a variety of web design/development tasks. I don’t normally have a ton of the extensions installed but below are my favourites and some I use everyday to make my life a little easier.

My favourite Firefox extensions

FireBug
Firebug is a must have extension, making debugging of web pages a lot lot easier. This is by far the best out there, Safari has its web inspector and ie has a few variations but none of them come close to the functionality of firebug.
Web Developer Tool Bar
The web developer toolbar is in the same vein as Firebug but, in my opinion, not as fully featured and as functional as Firebug. It does have some really good features though, such as disabling and viewing CSS and Javascript as well as easily checking for validity and accessibility.
Screengrab
Screengrab is an extension that allows you to take a screen shot of the webpage you are viewing and the best bit is that it takes a full page screen shot which you can copy to the clipboard or save to disk.
Measureit
Measureit enables you to measure any element on the page which is handy if you want to find out dimensions, Firebug does this also but this is for a use.
Colorzilla
This is a great little extension for getting the colours from a website, simply click and an eyedropper tool pops up enabling you to find out the colour of any element on the page, very handy.

These are just but a few extension that help to make life a little easier, but these are the ones I use every day. IE8 is not far off the finishing line and I have played with the beta but the developer tools are still not a mark on Firebug so hopefully when the final is released better debugging tools will be a standard.

Sigma 10-20mm F4-5.6 HSM DC Review

2008-08-05T12:12:00+10:00

I have been wanting a wide angle lens for my 400d for quite a while now, problem is that they are not that cheap. In Australia they retail at around $760 in the shops so it is quite an investment to make. If you choose to go for a canon model then add a few hundred extra to that price. As I am going home to Northern Ireland in the very near future for a holiday I decided that now is the best time to get one.

The deciding factor was when I checked out the price in the US. The Australian dollar is very strong against the US at the moment and makes it ideal to import. A strong dollar and the fact that the US has it a lot cheaper than here, $260 cheaper to be exact made this an easy option to make. Within a few days of placing an order in the US my Sigma 10-20mm F4-5.6 HSM DC arrived and I must say I am really impressed.

Having a lens that is 8mm wider may not sound that great but it makes a massive difference, especially around the city and places where it is hard to get a little further away from the subject. The Canon 400d has an APS size sensor which means that you have to take into account the crop factor when buying a lens. The sigma is equivalent to 16mm on a standard 35mm camera but this is still pretty wide.

There have been quite a few reviews that I have read about this lens in relation to quality control issues like softness on the left side of the picture, but I have had not such problems with mine. In fact my lens is extremely sharp and pretty sturdy, it also sits very well in my hand as it is quite heavy and solid.

I have not had that long to play with this lens yet but my first impressions are very good indeed, I love having a wider perspective and it opens up a lot more possibilities.

I have noticed a few instances of flare, even with the use of the supplied lens hood but this is not very common and can be eliminated by being a bit more studious when taking the shot.

Interior shots are now much more fun to take and you can be a little more creative with your shots, I am really looking forward to using this more indoors.

All in all I think this is an excellent lens, sharp, sturdy and a great addition to my kit.

OS X Dialog Usability Irks

2008-07-22T09:31:00+10:00

I have been using my Mac now for quite a while and I have used one at various times throughout my computer beginnings. One thing really irks me though and that is moving the focus on buttons on dialog screens with the keyboard.

On Windows its simple and intuitive to do simply press tab and you can cycle through the buttons. On a Mac its needlessly complicated on what is generally a vastly more intuitive operating system than Windows. It gets even worse if you own one of the new aluminium keyboards as you have to add the fn function key into the equation.

So for anybody who does not know, or just can’t be bothered to look up the keyboard shortcuts, if you want to cycle through the buttons on a mac you have to enable the option in the keyboard shortcut preferences, here is how to do it:

When you get a dialog box popping up, in this instance, one from firefox, you press control and f7. This will turn on the preferences to enable you to move between buttons with the tab button. If you own one of the new keyboards you will have to press control -> fn-> f7. You only have to do this once by the way.

Now when you press tab you will see the blue shadow appear around the buttons. You would think that you can now just hit enter or return and you will select the highlighted button, well if you thought that you would be wrong, you have to hit the space bar, very intuitive eh!

But never mind at least its simple to move between tabs in Safari, what’s that? it isn’t… aww shit

Photoblog and daily photos

2008-06-25T11:47:00+10:00

I have been thinking lately of creating a photoblog, well not really a full blog but more of an experiment. There are a few reasons for these thoughts creeping into my head, the first one being; I enjoy building websites so I want to build another one. Although I do this all day at work, there is nothing more satisfying than being able to create something that is specifically for you and also being able to use the latest technologies on it.

The other reasons base around the fact that I have been carrying my camera to work with me but I have not been forcing myself to take more pictures. Having a daily photoblog is one sure way of trying to push myself to get more photos. The end goal of this is of course to get better at photography.

I am worried though that I will not be able to carry it through and I will stick at it for a few weeks then slowly but surely I will start missing days and end up calling it off. I also need inspiration that I will be able to find enough subjects. A good post (and really the reason for this one) is one by David Emery on the subject of project 365, which he is undertaking. It is good to find out what other people have been doing and how difficult they found it. One of my favourite photo blogs is that of Sam Javanrouh who runs daily dose of imagery, I love his photos, the colours are great, he really is a great photographer.

At this stage I’m not sure what will happen, whether I will ever take on this project, either way I want to document this and every time I come back to my site it should serve as a reminder…

TAKE MORE PHOTOS

Styling Forms with Definition Lists

2008-06-22T05:29:01+10:00

I have been meaning to write a post for a while about definition lists but have just not got round to it. Instead of covering just definition lists though, I thought I would make it a little more specific and talk about a very good use for them, styling forms.

It was not that long ago that I hadn’t even heard of a definition list, now this is one of the most versatile tools in the tool box that I use daily. Definition lists are good for a variety of uses, including Faq’s, forms, images with descriptions or replacing unordered lists for drop down menus to name but a few.

First a little introduction to the definition list for those that may not be aware. Definition lists are in the same list family as the un-ordered list (<ul>) and ordered list (<ol>) but they differ a little in their structure. Unlike the un-ordered and ordered list, the definition list does not have <li> tags but is a pairing of a <dt> tag and one, or multiple <dd> tags. These tags are wrapped within the <dl> tag.

An Example

An example of the definition list structure is as so:


<dl>
 <dt>Definition</dt>
   
 <dd>A statement of the exact meaning of a word, esp. in a dictionary.</dd>
 <dd>The degree of distinctness in outline of an object, image, or sound, esp. of an image in a photograph or on a screen.</dd>
</dl>

As you can see the <dd> tags describe whats in the <dt> tag.

So why do I think that definition lists are the answer for forms? Well, forms are normally made up of two things, a label and an input field. The label is related to the input field, this makes definition lists perfect if you ask me. This may not exactly be the original purpose for a definition list as the dd element is supposed to be a definition description but it works perfectly for forms as the <dt> and <dd> tags are paired, just like the label and input fields are.

Whats the point of adding extra markup when you can just style the label and input tags?

Well adding the extra X/HTML gives the document structure, especially so when there is no style sheet applied. I also find that less CSS styles are required to get a decent looking form, much better than when you have to style all the other form elements.

Ok Ok all these words are hurting my eyes, example please

A simple contact form is normally only about four fields and in its basic, valid markup, looks something like this:


<form method="post" action="#">
  <fieldset>
    	<label for="firstname">First Name:</label>
    	<input type="text" id="firstname" />
 
    	<label for="lastname">Last Name:</label>
    	<input type="text" id="lastname" />
 
    	<label for="email">Email Address:</label>
    	<input type="text" id="email" />
 
    	<label for="comments">Comments:</label>
    	<textarea rows="5" cols="30" id="comments"></textarea>
   
   <input type="submit" value="Submit" />
  </fieldset>
</form>

If you take a look at the definition list - basic form example, you will see how how it looks with no styles added.

Now lets mark-up the form with a definition list


<form method="post" action="#">
 	<fieldset>
  		<dl>
   			<dt><label for="firstname">First Name:</label></dt>
   			<dd><input type="text" id="firstname" /></dd>
  
   			<dt><label for="lastname">Last Name:</label></dt>
   			<dd><input type="text" id="lastname" /></dd>
  
   			<dt><label for="email">Email Address:</label></dt>
   			<dd><input type="text" id="email" /></dd>
  
   			<dt><label for="comments">Comments:</label></dt>
   			<dd><textarea rows="5" cols="30" id="comments"></textarea></dd>
  		</dl>
  		<input type="submit" value="Submit" />
 	</fieldset>
</form>

Now we have added a little more structure to the form, take a look at the second, definition form example, still with no styles added.

Even without any styles applied to the form, it still looks well structured. All we need to do is add a few styles to the form and we can make it look a little easier on the eye.

If we want to make the form sit a little better all that is required is to add the following code:


form dt{
    float:left;
    width:150px;
}

Simple, we have floated the <dt> left, enabling the label and input to sit side by side and by adding a width we have added some space between the label and input fields. A very basic but structured form. If you wanted to have a little space between the input fields just add a margin to the bottom of the <dd>.


form dd{
    margin-bottom:6px;
}

I’ve also added a width to the form just to make it sit a little better and not sprawl all over the page,definition list - example form with styles.

There it is, a very basic form but with a lot more structure added thanks to the definition list and with minimal CSS to make it look neater, much easier on the eye.