In truth it’s not a fix as the iPad doesn’t have the ability to hover.

Apple has developed extra events to replace hover on it’s mobile touch devices. I’ve recently been working a lot on the iPad and came across the problem of hovered navigation not showing up. It’s a css :hover event that fires through a CSS selector on an <a> element with no href attribute.

To emulate the hover we simply add an event listener to the element we want to have a hover event. In jQuery we do this (make sure you insert it into document.ready):

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

That should enable the element to be touched, and stimulate and iPad hover event.

If you’re having problems getting hovered elements to fire you could also try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").bind('touchstart', function(){
        console.log("touch started");
    });

    $(".menu li a").bind('touchend', function(){
        console.log("touch ended");
    });

}

We’ve all been there, with an opportunity to impress only to fail by handing out a scrappy piece of paper with your name and number on. Is anyone likely to find that piece of paper again once they’ve put it down? Are they likely to pass it along to another potential client? Or are they more likely to throw it in the trash?

A business card is an important piece of promotional material. Something that is unlikely to be thrown away if it does it’s job properly. It must be memorable, easy to read and contain all the information needed in a short amount of space.

Making an impact…

A business card usually comprises of two separate sections, and these two sections give you ample opportunity to get your point across quickly and concisely.

Section 1 – The imagination

The first section (namely the front of the card) is your canvas to create whatever you like. Try a doodle on your Wacom, write a funny line or even pop your tag line on there (mine for example is Artfully Illuminating Design, something I’ve stuck with from day one). It allows you to show a bit of personality, a bit of creativity and create something more eye catching than a scrap of paper.

The above design is quite eye catching using a bright blue (my trademark colour). Someone is unlikely to throw it away and is likely to remember the card. The little tag-line of “all your design are belong to us” probably won’t be understood by most clients as it’s a rip off of a humorous online phrase. It can however add that little extra in allowing the potential client to remember you.

Try drawings, jokes, fancy patterns, cartoons, phrases, photographs or even Haiku. It can really make a boring piece of card interesting.

Section 2 – The details

So you’ve got your potential clients attention, how do we hammer home the contact details?

It’s all about organisation and importance. You need to gently organise your details according to what you want on there. Obvious details are telephone number, email address and website (if you have one). Additional details you could apply are (depending on your industry);

1. Address
2. Work & Mobile telephone numbers
3. Social networking links (such as Twitter)
4. Alternative contact details such as Skype
5. Fax number (not so common lately)
6. Your job title
7. Your skills/attributes

Don’t overload the card with details, only list the important stuff and make sure the important stuff is the largest test on the card. Also ensure it’s readable when printed before you go an order 500 business cards. You have to bear in mind that just because it’s large on your 27″ monitor, it’s not when it’s printed only 3 inches wide.

Free Photoshop Template (UK sizes)

I’ve drummed up a few free templates for you to use. Simply pop in your details, print them and see how the look!

Please note these are set at 85mm x 55mm which may need changing before printing depending on which country your in.

Please also make sure your guide lines are on by using the shortcut Ctrl+H/Apple+H or clicking View>Extras. The outer border is your cropping area and the innder border is your bleed area. The inner rectangle is your safe zone. Try to keep everything in there. Happy designing!

Section 1 – The Imagination | Section 2 – The Details

Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site.

Web Developer Toolbar

This handy toolbar includes features such as in browser CSS editing which lets you see CSS changes live, the ability to disable Javascript, Cookies, CSS and Images (for usability testing) and includes many handy features.

Some fancy tricks also include:

• Element outlining
  This allows you to see which <div/input/anything> tags are lining up wrong and combined with the CSS editor proves a powerful tool in element alignment.
• Disabling CSS
  This allows you to see how your layout holds up with browsers which don’t support CSS (such as screen readers). If your content is laid out poorly, it. will. be. read. out. loud. poorly.
• Browser Resizing
  Want to see how your site looks in a 1024×768 browsers? Click the re-size button and the toolbar will set your browser window to any size you specify!
• Quick Validation links
  Want to know if your XHTML or CSS validates? There’s quick handy links under the Tools drop-down.
• Generated Source vs Source
  Is your Javascript messing up your code? Then view the Generated Source to see what it’s actually doing to your pages.
• Quickly Edit HTML & CSS in-line
  It’s a quick and dirty way to see how your new CSS/HTML code works in your site. Simply open the editor and type away to see your page update live.

There’s many more options you can play with. All you need is Firefox and the Web Developer Toolbar.

Firebug

Firebug is a tool used by almost every web developer in the world. If you’ve not installed it yet, do it immediately as it will save you many man hours fixing bugs in your websites code. It’s had over 19 million downloads and averages 22,000 downloads every day.

Colorzilla

When I can’t remember how to count in hex (which often happens) I use Colorzilla. It makes sure my #009ecc is not #02a4d3 and that my #666 isn’t #999. It’s best to keep consistency and is what separates a good designer, with a great designer.

There’s loads more Firefox Add-ons you could also check out:

• YSlow https://addons.mozilla.org/en-US/firefox/addon/5369
• Pixel Perfect https://addons.mozilla.org/en-US/firefox/addon/7943
• Firecookie https://addons.mozilla.org/en-US/firefox/addon/6683
• PageDiff https://addons.mozilla.org/en-US/firefox/addon/4274

Internet Explorer Developer Tools

On the Internet Explorer front there’s not much for the modern Web Developer. However, using the Firefox tools above covers most if not all of your needs, except for IE8, IE7 and IE6 testing. This is what I’ll go over next.

The best tool is actually one released by Microsoft themselves. The aptly named Internet Explorer Developer Toolbar which gives you a few tools to play with which include a CSS and HTML editor, the ability to disable CSS and images, use a colour picker and outline elements. It’s basically a shorter version of the Firefox web developer toolbar. It also allows you to quickly switch between IE7 and IE8 browser rendering. Simply select which browser mode you need and you can see what your page looks like in IE7.

Now for IE6 (cringe). I know a lot of developer are now dropping support but as previously mentioned sometimes it’s not an option, and we sometimes need to think about this when developing mass market websites.

Spoon.net

It’s a tool I only recently found and because Microsoft won’t properly develop something which lets you run IE6 on your machine, Spoon developed a browser plug-in which lets you run ANY browser, well, IN browser. They call it “App Virtualization” and I call it magic as it let’s you run IE6! (note, as of writing I couldn’t get it to buffer on Windows 7 64-bit but could on Vista (32) and XP (32), let me know, maybe it needs to be XP Virtualized?)

Adobe BrowserLab

This amazing tool lets you preview your pages side by side and even overlay pages (known as onion skin). You can also preview your site in many browsers which include Internet Explorer 6/7/8, Safari 3/4 and Firefox 2/3. The only downside is you can’t preview it as a functional page so can only be used for styling sakes, and it’s a little slow to run sometimes.

I hope you found these tools useful for your web developing needs and good luck (you’ll need it if your working with IE6)

UPDATED: I have now added in a few lines to cache the file. This saves on bandwidth and can sometimes speed things up when the twitpic service is running slow, it’s a simple extension to an already simple script.

Most people have become addicted to Twitter, and I’m no exception.

I got an iPhone the other week and have been posting regularly, but there is one thing that is very nice, and that’s the API built into Twitter. It’s quite a nice feature, and one that I have been getting to grips with recently.

I decided I wanted to show my Twitter updates on the new website I have been building and because Twitter supports JSON feeds, I thought I’d have a crack at using jQuery to show these posts.

It’s something that’s actually quite easy. Using jQuery’s AJAX function $.getJSON it meant I could grab the feed and format it how I wished. First off make sure you have included the latest version of jQuery into your website.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

This needs to go where scripts usually reside. In your HTML <head> tag. You will also need to wrap all the below code in the jQuery documen.ready() function.

In this example I only wanted to grab one result so I started off with…

$(document).ready(function() {
var userName = "0100";
	$.getJSON("http://twitter.com/statuses/user_timeline/"+ userName +".json?count=1&callback=?", function(json){
 		var lastTweet = json[0].text;
		var tweetTime = json[0].created_at;
		$("#twitterTxt").html(lastTweet);
		$("#twitterTime").html(tweetTime);
	});
});

That’s it! All nine lines of it. All you need to do it make two divs, one with the ID twitterTxt and the other with the ID twitterTime. You also need to change your username in the variable too.

The only problem with this is the dates. It’s not “twitter timed” at all. We want the “posted 1 minute ago” text we all look for on twitter. Luckily, twitter already wrote a function for this called relative_time() which you can download and use. All you have to do is wrap the tweetTime var with the function like:

		var tweetTime = relative_time(json[0].created_at);

Just make sure you copy in the function to your javascript or include it into the page.

TwitPic API, displaying images

After we have our twitter updates showing on our page we can now show the TwitPic photos too! Every time you post a photo through your twitter updates we can show this on the page as a link. I only wanted to show one image but for this example I have written the code to show as many images as TwitPic allows. I’m not sure of the actual limit but I think ten is a good number. For this example you need to have PHP 5 with SimpleXML. It’s a brilliant function and something which makes using RSS feeds with PHP very easy.

Once again it’s only around ten lines of code, but the results are great.
We will need to start by looking at the format of the RSS feed. Open up http://twitpic.com/photos/0100/feed.rss and analyse it. (view the source if you just see a formatted page in firefox).

We start off using the simplexml_load_file() function in PHP to grab the actual feed:

$username = "0100";
$yourRSS = "http://twitpic.com/photos/".$username."/feed.rss";
$xml = simplexml_load_file($yourRSS, 'SimpleXMLElement', LIBXML_NOCDATA);

Nothing too difficult there except the option LIBXML_NOCDATA. TwitPic gives us the data as CDATA. This option simply strips out the uneeded code.

We then need to grab the actual image a link. Note: TwitPic’s TOS state you must link back to the original TwitPic page, which is fair enough.

$link = str_replace($username.": <br>","",$xml->channel->item[$i]->description);

This simply points to the SimpleXML object and grabs the description entry in the RSS. This is placed in a for() loop to loop through the entries. We also have to replace the username and page break that TwitPic outputs, it looks silly otherwise. All we have to do is echo that out and we are done!

To save you all time I have uploaded a full PHP script for you to use. It’s very easy and only requires you to change a few parameters. It will then echo out a unordered list for you to use in your site!

Note: There is now an updated version of the script that you can download.

Download the full PHP file TwitPic API – Simple XML PHP. You can also see a demo of the output.

Hope this all helped you to use Twitters and TwitPic’s API’s!

There were loads and loads of error messages reporting that there were “undefined variables” throughout every script on the server. Strange!

It ended up being very easy to fix…

The errors displayed:

[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page2 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 3
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page3 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 4
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page4 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 5
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page5 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 6
[Thu Feb 19 14:35:37 2009] [error] [client xx.xx.94.2] PHP Notice:  Undefined variable: page6 in /xxx/xxx/xxx/0100.tv/httpdocs/xxx/xxx.php on line 8

This was awfully confusing considering that every variable was working. However, it comes down to sloppy coding/PHP’s error reporting settings. You could define every variable by typing var $variable; before using it but that’s a silly idea. Instead….

Reading through the error reporting description at the top of php.ini we read:

By default, PHP surpresses errors of type E_NOTICE.  These error messages
    are emitted for non-critical errors, but that could be a symptom of a bigger
    problem.  Most notably, this will cause error messages about the use
    of uninitialized variables to be displayed.

To stop there errors you can change error reporting php.ini by doing the following:

change

error_reporting  =  E_ALL

to

error_reporting = E_ALL & ~E_NOTICE

This will then only show the relevant error messages and supresses non-critical errors. Sorted.

The other day I realised I had loads of spare web stuff lying around on my hard drive which included canned designs, unused web pages, old university assignments and old website designs (PSD’s and XHTML/CSS).

Well, today I decided I’d start releasing this spare stuff online. If I’m not using it maybe someone else can get something out of it. That was the idea behind the WordPress Olivia template, it was an old design which morphed into a pretty popular free template.

Anyway, we start this new routine of free downloads with a free XHTML template complete with instructions on how to use and modify it.

You can view a demo of the free XHTML theme or even download it for yourself to dissect, prod and poke.
There is also a tutorial on how to edit the pages, adding paragraphs and headers and also how to edit the CSS. It’s a basic tutorial but it explains the beginner methods.

Unfortunately there won’t be much support for it. You’ll have to work it out for yourself. If you are really really stuck you can drop comments for this post below and I’ll try my damn hardest to answer. Honest.

Download (370kb) | View Demo

Many developers struggle to use the basic tools in Adobe’s award winning software Photoshop when designing websites. It can help a lot to know some simple techniques and tools when building XHTML pages. You don’t have to use the very awful splicing function at all.

Let’s start with the idea of building a very simple design using a set colour palette and a set width. After these simple tips I will also supply a number of useful links to visit to help you further.

Let’s boot up Photoshop and start with a new blank file. Choose a preset width and height (I’m using 1024×768) and let’s get designing!

Initially we need a colour palette for inspiration. If you want help see Adobe’s Kuler application. It’s awesome. Once you have found your colour palette you can then download it (provided your registered and logged in) open it and your colours will jump straight into Photoshop (Window>Swatches)! How cool!

Pick your favourite background colour (I’m using #ff8548) and fill the background. Then create two guide lines 960 pixels apart (or any other distance apart) and place them in the center. (If your not sure how to do this simply download 960 Guides). We now have a simple layout. Next we need to setup our header and navigation.

It’s as easy as writing some text and placing it at the top of the page. Make sure you keep the margins your giving the text around the edges the same. You could do this by making small 10px x 10px boxes and using these as padding. You could also draw more guide lines by dragging them from the rulers around the page. (If you can’t see them tap Ctrl+R) Using rulers and guises to position all your elements on the page is the best way to keep everything aligned and tidy. This is a fundamental in website design.

You can also use Lorem Ipsum (dummy text) to help see how your layout looks on the page.

Stick to the colours in your colour palette and have a play. I drew up a quick dummy web page with some lorem ipsum, a title and a navigation bar. I also drew in some guides to position my content better and to keep everything tidier. If you would like to download this PSD file be my guest. Pull it apart and see what you like.

This simple design could be a the building blocks of your first website.

Check out the following links to help you further;

1. Lorem Ipsum
2. Adobe Kuler
3. 960 Grid System
4. Web Designer Wall
5. Best Web Gallery
6. CSS Based
7. Pixel2Life Tutorials

Theme Demo – Download Now 670kb

I am pleased to announce that you can now download the brand new WordPress theme named “Olivia” direct from our website and soon from the official WordPress themes gallery.

It has been in development for a long time but good things come to those who wait!

Key features of the theme:

1. Seven brilliant styles including a Grunge style and Magic style!
2. Beautifully designed
3. WordPress 2.6.3 compatible
4. Widget ready!
5. Built on the famous 960 grid system
6. FamFamFam Silk Icons
7. jQuery functions including text size modification
8. Basic stylesheet for accessibility
9. Thumbnail generation

To coincide with the release of the theme I have written a quick tutorial explaining how to use the features explained…

Tutorials

The theme is ready “out-of-the-box” but there are some features built into the theme which you may not know about upon installation.

1. Stylesheet Selector
   Olivia comes pre-built with SEVEN different styles to choose from. They include Red, Green, Blue, Grey, White, Grunge and Magic. To select which theme you would like to use simply login to your WordPress dashboard, click on the Design tab and then (as long as Olivia is the current theme) you should see a tab named Olivia Options. You will then be presented with the seven styles provided. Simply click on your desired style to enable it!
2. Thumbnail Generator (requires GD library*)
   To ensure your post images are the perfect size I have built a simple PHP thumbnail generator. To use it simply upload your image as usual using WordPress’ in built media uploader but copy and paste the image “Link URL” into the box below your write panel (see image right). The theme will automatically resize the image for your post!
   *There is however a drawback with this. Your server must have GD Library installed. If your not sure about this simply login and click on Olivia Options under the Design tab. There will be a title further down notifying you if your ok or not.

That’s it! Your ready to make full use of your theme!
Please note that this is the very first full release of the theme and it may still have some hidden bugs somewhere. If you find any at all simply drop me an email or leave a comment (good or bad) and I will look into it immediately. The same goes for feature requests.

Theme Demo – Download Now 670kb

Version History

• V0.9.0 (23/09/08) : Initial Release
• V0.9.1 (24/09/08) : Fixed some CSS issues
• V0.9.5 (25/09/08) : Fixed CSS issues, widget sidebar issues and a bit of XHTML.

Please note the licence below.The theme is released under a GNU Public Licence. Please leave the author information intact in the footer of the document. You know it’s only nice for a free theme ;-)

Olivia WordPress Theme by Mark Goddard is licensed under a The GNU Public Licence Version 3.
Based on a work at blog.0100.tv.

The web has changed a lot and web designers (of all people) know about the need to keep up to date with the latest design “trends”.

This short 10 point guide will hopefully help some people understand the minor problems website design (and content) brings when being viewed by a potential customer.

1. Pointless Flash Animation
   I’m all up for interactive flash in websites, but only use it if it’s necessary. Many a web developer will say “try doing the same in javascript, it’s better”, which is usually true, but animations which have no purpose other than to distract the user are pointless, bandwidth consuming and damn irritating.
   Check out Avistar’s Globe Animation. It’s awful to look at, and awfully slow.
2. Highlight too many elements
   The best designs usually incorporate a small colour palette. It’s more pleasing to the eye and makes navigation a lot easier. Try sticking to 2 or 3 colours for each design. Use our site for example, which colours do you see? Blue? White? If glance at the information on the page you will also notice that the navigation links are highlighted while the background image “points” towards the content.
3. Mystery Meat Navigation
   MMN is an aspect of web design which looks good, but is generally not functional. It forces the user to wave their mouse around the screen to find what they are looking for. It usually ends with them leaving the site and visiting a competitor or even scrapping the reason they visited your website all together.
4. Develop for one browser, and block the rest…
   Microsoft has done it a lot of times. Either to spite Firefox/Opera/Safari users, to promote it’s own IE or even due to laziness, either way it’s the wrong way to do things. Every website should at least be usable by every web browser (even if not fully supported) otherwise you are shutting off a large percentage of users. The new Beijing olympics site does it. Try viewing it in Firefox.
5. Rely on Javascript for basic interface and functional design
   It’s all well and good building applications which rely on Javascript, because most of the time these need to be complex, fast and reliable. But to build a site design which relies on the use of Javascript can be a big mistake. Most browsers support Javascript, but most search engines don’t. This means your website may not be indexed correctly and inevitably lose you visitors. Always ensure that if Javascript is disabled, your website is still viewable. Try installing NoScript (FF) or Turning it off in IE to see how your site behaves without it.
6. Build a site out of sliced images
   It maybe an easy thing to do in Photoshop/ImageReady but it usually involves the site being built using tables and large uncompressed images. It looks rather strange sometimes when the page loads slowly (as the layout moves with the images loading) and because of the images the file size of the website will be significantly larger.
   Because these images are not CSS images they are part of the document and are the first thing to be loaded. If they were included as CSS images the document XHTML (the content) would load first (and the layout too) with the CSS images coming afterwards. It’s a better way to build things. A good example to check out is the Mystery Jets website. It’s slow, ugly and made from sliced images as mentioned. Don’t even bother looking at the HTML, as it’s horrible to look at and very very invalid.
7. Fight with the web…
   Make sure your sites inviting, and doesn’t scare customers away. By divulging too much information, or even the incorrect information clients may go elsewhere when searching for a developer. A great example of this would be to over announce that your a freelancer, or making out your always busy. Many bloggers divulge this information in their droves, and it can be very off putting to read.
   Try inviting users to view your portfolio, if it’s good enough, throw it all over your website! Potential clients like to see past work to gauge how good you actually are.
8. Bombard the user with information
   Sometimes you visit a website and get information thrown all in your face. It can be very time consuming and uncomfortable to visit these web pages.
9. Restrict your visitors input
   How often do you visit a website, register, then come to make up your password only to receive a message like:
   “Your password must be between 6-8 characters and contain at least one number and any of the following characters %$£^&””
   Why 6-8 characters? I understand the numbers and punctuation requirement but it’s still awfully annoying. Expand the password criteria a little more, 6-8 characters is very short and when there are extra requirements it can be very easy to forget your password.
   Another great example is restricting input boxes and textarea boxes too much. If you get it wrong, it can be hugely annoying.
   You need gto let the user do what they feel best with, if they want to enter their phone or credit card number with spaces then so be it, don’t put the restriction on the input boxes, make the software work for them. A simple preg_replace() would fix that problem.
10. Give your lovely visitors a seizure
    By using animated GIFs, horrible design, bad layout and disastrous interface design your faithful visitors could become disorientated. Ok so a seizure is over the top however, this Jesus website may change your mind…be patient for it to load, it’s a good one! (if it doesn’t work and flash funny colours then try the web archive)

And that’s a wrap. Some of those points you may not agree with and some you may, it’s all a matter of opinion. It’s just a collection of thoughts which seems to annoy the hell out of me, and a lot of other people too.

Starting off in digital photography can be a very unrewarding and unsatisfactory time.

Many beginners try photographing normal subjects without actually playing with the settings on their camera. We hope to quash any questions you may have with what your settings mean and what you can do with them as a beginner.

For this article we will be using light trails as a starting point as you can produce beautiful looking images while at the same time working out what each setting does. Please also note that each image used in this article will also display the settings used. Every image is taken using a Canon EOS 400D (aka Rebel  XTi). Please also note this is an article for digital beginners.

1. Shutter Speed
   This is simply the length of time the shutter stays open for. It is quite often the reason behind blurry or under lit photos. The faster the shutter opens and closes, the less light enters the lens and there is also a smaller chance of blurry photos. This can have a massive impact when taking photos of moving objects as the results can mean a dramatic difference.
   If you set a faster shutter speed (for example, photographing a formula one car) you will capture a sharper image with little light. This is when you need to change your ISO setting and your f-stop/aperture (see below) to let in more light to the lens.
2. F Number/Aperture
   This area of the camera quite often confuses people the most due to its name. Many different terms and phrases are used throughout each camera but usually it is denoted with an F in front of a small number (often decimal).
   Basically, the higher the number, the more detail your camera will capture. For instance, if your photographing a close object the background maybe blurry with a small f-number.
   However, by upping the f-number you lose light in the photo, so to counter-act this we need to raise the ISO-Speed and/or the shutter speed to bring more light into the photo.
   
   
3. ISO/ASA Setting/Film Speed
   An ISO/ASA setting can have undesirable effects. This needs to remain a low number  in order to produce a clearer picture. Quite often you may find yourself in a low lit area with no flash and an unsteady hand. This means your shutter speed will be slow (to let in more light) your aperture will have a small number (to also let in extra light) but you will be shooting something moving or will be getting regular blurred shots. This is where ISO/ASA may come in handy. It simply makes the camera more sensitive to light when the photograph is taken.
   It can be a big help, but in digital photography it will cause your image quality to degrade significantly. You will see a lot of noise in the image due to the sensitivity. The higher the ISO/ASA, the more light you will see but then more noise you will capture as a consequence.

These are the three main setting we will need when photographing our light trails. You will need a tripod (or a flat surface where your camera can sit) and some sort of moving light source, such as a motorway/highway/road or a small torch.

First of all we need to decide how long we want to capture the image. For this example we are using a busy motorway. We are setting our camera up for a 20 second shutter speed (which means 20 seconds worth of light and cars will be captured) and will set our ISO as low as possible (ISO-100 is good enough). We also need to ensure our Aperture is also a low number (around F-5) as we are not photographing a close subject and need more light.

Once we are setup we take the photo. Ideally we need to have a remote control to stop the camera moving or even setting the camera to the self timer mode (counts down 10 seconds and takes the photo itself).
Once all this is done bask at the glory which is your light trail!

Get playing and see what you can create with a bit of imagination!