Dave Bond already had a web presence when he asked me to redesign his aging website, he had begun to explore social media and had set up Twitter and Facebook accounts to promote his personal training services, but his website was falling behind in getting across his message. Dave had lots of ideas about content for the site and how it would be kept up to date, with new content being added all the time in the form of articles he had written or sourced – it became very apparent that this should be the main focus on the website. We decided to create a blog style site that would introduce Dave as a personal trainer, and then have the main focus of the site on his articles and blog posts – so people could see how active he is within the community and specifically what he does with the various institutions he works with.

Built using Wordpress, I created a custom theme and used various page templates for each section of the site – this was so that custom sidebars could display post archives and event listings where appropriate, some pages just pulled in recent posts from a specific category, others have content that is able to be edited by Dave. The following plugins were used to either help displaying or to manage content;

Contact Form 7: Definitely one of the easiest form plugins to work with.
Events: A simple events manager, this lets you create events and allows you to display them on a template page.
Get The Image: This is quickly becoming my favourite Wordpress plugin – it displays an image from a post, and is again used on template pages.
Lazyest Gallery: I needed a really simple gallery plugin so Dave could upload images and not have to fuss around with a complex admin area; upload a folder of images to a specific directory (via FTP) and the plugin does the rest to display the images on a page of the site.

Dave is now able to update and manage all the content on his site, as well as publish regularly to his blog; which because the initial home page shows the latest post from each category – will give a fresh look to the site each time a visitor returns to the site.

This was also my first opportunity to work with Wordpress 3, and I’ve got to say – I’m very impressed, it seems to be a lot quicker, more stable and easier to use than previous versions – if that was possible.

View the site here; http://dbpersonaltraining.co.uk

A website that I’ve been working on for quite some time went online earlier this week. I was initally contacted in October last year by RubyFruit, a company that produces a range of jewellery for babies and children. They initially wanted their website in a hurry – built in time for Christmas – this was possible, but ultimately the deadline was brushed aside with the view of taking time to do the website properly and to get it right first time, rather than rush it through before Christmas and then have to make changes after.

The site is completely bespoke and features a number of details that I haven’t had the opportunity to include on previous work, including related products on jewellery pages and multiple category pages – so a product can be featured in more than one place. RubyFruit also allows customers to sign up and register with the site, keeping their address details for future purchases, there is also an optional sign up to a mailing list. The registration is only optional though as we wanted to make purchasing as simple as possible. Payments and the checkout process is handled by PayPal once again, allowing RubyFruit to take payments without having to pay for an expensive credit card payment system – customers also get to use a recognised and trusted payment system that’s continuously improving and growing in reputation.

I’ve had my shiny new iPhone for a couple of weeks now and have enjoyed checking out lots applications and games. He’s just a few of my favourite and most commonly used so far.

Peppermint
Not many of the colour selector / colour palette apps are free, but Peppermint Express is – and the functionality compared to the full paid for version is very good. The app allows you to select a colour from either a colour wheel or sliders, this then generates various sets of palettes depending on if you’re looking for complimentary colours, shades or compound sets of colours, there are 9 different options in total including a custom setting. After finding a palette you like you can save it to one of 3 bookmark slots – these are unlimited in the paid version. Colour theory isn’t a specialist subject of mine, but this app has already helped me to create some really nice palettes for use in websites and logo designs.
iTunes Link

DropBox
Thus one was recommended to me by @si on Twitter – I had previously heard of the DropBox service for online backups and file sharing, but I hadn’t tried it and my app enthusiasm was the ideal reason to do so. First of all, DropBox is amazing, I’ve only signed up for the free 2gb version which is plenty of space to play with, and I’ve already found it useful backing up current project files and some of my photography. The iPhone app is free, and gives you access to all the files you’ve uploaded / backed up, and where possible it will give you a viewable version – this works for PDFs and images along with a number of other formats and documents. You can also upload photos from your iPhone – making it easy to transfer images you’ve taken to a computer, considering Apple doesn’t allow you to transfer files via Bluetooth, and I’m pretty lazy when it comes to getting cables out and syncing my phone to transfer an image or two; this is great – it’s quick too, uploads from a computer on a good Internet connection are visibly quicker than other similar services – uploads from your iPhone will depend on your network connection.
iTunes Link

Camera Plus and GorillaCam
These free apps enhance the basic camera included on the 3Gs, giving you more options including digital zoom, steadying and rapid multishots.
Camera Plus iTunes Link
GorillaCam iTunes Link

7.0 Megapixel Camera
One if the only paid for apps in this list (and it was only 59p), it was something I really wanted to try -it has many of the functions of Camera Plus but with the added upscaling of the 3.2mp iPhone camera to a 7mp; which is quite a jump in size. The photos are never going to be DSLR quality, but if you’re prepared for a little noise and not the sharpest of images then the photos are surprisingly good. The only downside is the slow saving of the images, it seems to take forever to write the file.
iTunes Link

TweetDeck
I’ve been using the Adobe Air version of TweetDeck on PC and Mac for a while now, I love the fact it links to all my social networking accounts; Twitter, Facebook, Facebook Pages, LinkedIn and MySpace. The iPhone app doesn’t quite have all those networks onboard, but it does have multiple Twitter accounts and Facebook. I haven’t used many of the features yet, although I really like the integrated web browser, which saves on quitting the app and going to Safari to see a web link.

It’s interesting that Twitter has recently purchased Tweetie and will be offering that app for free as a renamed Twitter for iPhone app, I’ll definitely be having a play with that to see if it’s a worthwhile alternative.
iTunes Link

MobileRSS
Another essential for me was a stand alone RSS reader, I’ve been using Google’s Reader for a while now so was pleased to find that the free version of MobileRSS works with Google. Set up is easy and it’s really nice to use, reading and navigating through your feeds is easy, it’s a simple app that does one thing really well.
iTunes Link

and finally…

Wordpress
This post was written using the free Wordpress app on my iPhone, I thought it was be a nice statement of what’s possible. The app is great, it allows you to easily log into your Wordpress Dashboard using your blog’s URL, your admin username and password. You need to switch on XML writing within settings first, but from there on you have access to your posts, pages and comments – so you can administer a comment, fix a typo on a page or write out a blog post – just like this one.
iTunes Link

OK, so there’s one more…

TeuxDeux
I’ve just heard that towards the end of April my favourite to do list manager – Teux Deux – will be submitting their iPhone app to Apple for approval. TeuxDeux is a web based, day specific list manager that is really simple, and for me has been essential in my day to day work flow. I for one can’t wait for the app.

When I set up Worm Sign T-Shirts I knew I wanted to use Wordpress as the CMS. Personal projects are a great way of developing and practicing your skills, and it’s not really fair on clients to use them and their websites as guinea pigs, for you to learn new tricks. After having a look into some plugins that would allow me to use Wordpress as an e-commerce website – I knew I wanted to see if Wordpress could do more than just blog.

I initially looked at using the very popular WP Commerce plugin, but it took quite a long time to set up and the learning curve was just a little longer than I what I wanted – I needed something simpler, that I could jump into a use straight away. So I turned to eShop.

It’s real strength is in it’s simplicity – the plugin is very quick to set up and adding products to your site is very easy. The main part of the set up was taken up adding PayPal details and calculating the shipping prices for our T-Shirts, this can be done by country, by weight or by the shopping cart total. There are also options for discount codes and downloads, so eShop will work if you are selling digital music or ebooks.

Products are added either to blog posts or pages, I only wanted to have products on pages and so for each new T-Shirt I’ll create a page with it’s images and text, and then fill in the custom eShop panel to add the “add to basket” functionality, prices and options – which in our case are sizes. This is one of the only downsides of eShop, it only has one set of options when PayPal can accommodate two, it would be great to have a second set of options for different T-Shirt colours. We’ve got around this by having multiple pages for the different colours of T-Shirt from a single design.

This is all the necessary set up needed to get the plugin working, from here it’s all cosmetic tweaks to get the shopping cart and check out pages fitting in with the rest of the website. This has taken a pretty long time to get right, the majority of the styling can be done via a style sheet, but I’ve gone a little further and I’ve edited many of the php files that come with the plugin. I’ve added and removed text, I’ve also cleaned up the check out pages and taken out many of the fields that weren’t needed on our check out process. Now that I’ve edited all these php files, I’m a little stuck becuase any upgrade of the plugin would overwrite all my bespoke changes – so I’m stuck on version 3.5.4 – missing some of eShop’s recent feature additions.

We use PayPal to take payments as this is the only payment gateway that eShop works with, and that is fine – I’ve used PayPal on many of my client’s websites, so I’m familiar with how it works, and so are many website users.Many still have incorrect assumptions about PayPal, for example – visitors may think they need a PayPal account to make a purchase, or that they have to register their details with PayPal – not true. I’ve tried to address this in Worm Sign’s copy, hoping that it will appease any worries a potential customer will have when making a purchase, a simple paragraph in the footer explaining that payments are made securely and that all popular credit and debit cards are accepted. This information is duplicated on our check out pages, and is expanded further in our Frequently Asked Questions page.

This project came to me a little out of the blue, it’s not something I’ve built before – or a type of website that I have come across previously. A War Log or War Diary, a journal kept by POW’s in World War 2. Nick wanted to display scans of his Grandfathers in a smart and sequential way on the Internet, in terms of how the website would work Nick was very clear about having thumbnails of all the pages running along with bottom of the site and having a zoom function to view in detail the pages. It was my job to translate this on to a design that works.

Wordpress
I was positive that Wordpress was the right solution to build the log on to, I thought it would be a neat idea to put it together as a blog, but all the posts dated in 1944 rather than in present time. Ultimately this wasn’t possible as much of the content wasn’t placed in time sequence, newspaper articles were placed some at the start, some at the end and not all in date order.

Quickly becoming one of my favourite Wordpress plugins, Get The Image was used to extract a thumbnail, nominated via a custom field, so links to the individual pages could be linked to via the archive log pages and along the footer. Another plugin, Magic Zoom, was used to show the detail of each of the images on the posts.

Internet Explorer Bug
This nearly threatened the footer and it’s functionality, I used a sliding gallery JQuery script that I found on JQuery for Designers, the script worked fine while adding the content to the website with only 20, 40 and 60 pages, but once all 170 pages were on the website the footer caused the website to crash in Internet Explorer 8 only, Safari and FireFox worked perfectly.

I initially thought it may of been too many images being used, then while trying to debug the issue I was leaning towards how the footer was put together. I sought help from my Twitter followers and placed posts on the Wordpress and Boagworld Forums. In the end it was suggestions from @paulvelocity that lead me to go through the style sheet one line at a time, the result was the display: inline property on the li element that forced the footer thumbnails to display in one long continuous line. Changing it to inline-block fixed the crashing issue in Internet Explorer. Definitely a frustrating time in the project build, and I was very relieved to get it fixed.

This was a great project to work on, it taught me a lot about the flexibility of Wordpress while continuing to use it’s plugins to gain more functionality out of this powerful CMS. I’ll definitely be using custom fields again in the future to add in bespoke elements to pages, posts and the theme.

View the website here; http://terrorfliegerwarlog.co.uk

This project came to me after an existing client recommended me to the owners of Pond House. They already had a website, but it was looking tired and outdated, it definitely needed a redesign.

After meeting with Brenda, the owner I got to work on designing the layout. The feedback from the meeting to give the website a fresh look, and to reflect the tone of the copy – which was friendly and inviting. I used warm colours – reds and creams, and slightly rotated the photographs used on the site to move away from looking too clinical.

I built the website using Wordpress, Brenda wanted to make small changes to the copy on the website in the future, so having Wordpress’s CMS already in place was a great reason for using it. Other decisions for choosing Wordpress were for it’s excellent SEO capabilities, and the ability to add additional functionality if and when the client needs. At present the website is built with static pages, with the only plugins being used are All In One SEO Pack, Google Analytics for Wordpress, Google Sitemap Generator and Contact Form 7 for the email form.

View the website here; http://earlshallfarm.info

The default search on Wordpress wasn’t going to be suitable for the product search I wanted to implement on Worm Sign T-Shirts. On the default theme, standard search will give you a results page that contains the pages and posts that were found as a clickable title and excerpt – a text only sample of the the pages content. This wasn’t going to good enough for a T-Shirt store.

Using 2 plugins I was able to define the pages and posts I wanted to be included in the search, as well as pages and posts that I didn’t want to be included, and to include an image from the product page as the main focus of the search results.

Search Unleashed gives you options for what content is searched. Rather than stating what could be searched, I selected what was to be excluded from the search results; all posts from the blog, as well as Home, FAQ’s and Contact page – this just left the T-Shirt pages, giving me a product search. Although one that would just give me the text from the pages and no images, not quite there yet.

Get The Image scans a page or post with the Wordpress loop and extracts an image – the plugin has a number of options for styling, as well as options for what image to grab from the post; one that is automatically extracted, or one decided by a custom field. Here’s the code that sits inside the loop;

<div id=wsthumbnail”>
<a href="<?php the_permalink() ?>">
<?php get_the_image( array( ‘image_scan’ => true ) ); ?></a><br>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</div>

The options for Get The Image plugin sit in an array, you can add as many or as few as you want. I’ve just simply added an image scan to pull the first image it finds from the page, the image is already the correct size for the results page and will be styled within it’s containing div layer.

…while working with people you know.

We’ve all designed and built websites for people we know, mate’s rates don’t just apply to the building trade, and they shouldn’t. Helping a friend get their business online with a website can be very rewarding – they might have recommended you before, but now they have experience of working with you along with the results from their new website to back up their recommendation. You should also get to hear about how well the website is doing more often too – friends will often call to chat about their website, whereas some clients will only get in touch when they need something.

I have just recently finished a website redesign for a local driving instructor, he actually taught me to drive 6 years ago and lives opposite my parents – so I’ve known him quite a while.

For the purpose of this article, let’s call him Mr X. Original I know.

Mr X has contacted me a couple of times in the past asking how he can get his website on to the first page Google, and to get more traffic on to his site; advise that I have been happy to share. The website he originally had wasn’t very good, and could of been improved in a number of areas. Finally Mr X came to me asking if I would work on his website, I discussed with him and stated that the best thing to do would be for me to redesign the website and start from scratch. The price was agreed, and I started work.

Here was the first problem. We verbally agreed the brief and the price – nothing was written down. At the time I didn’t think I had anything to worry about, we were both happy with what was being done and the price I was going to charge. I also didn’t invoice for the usual 20% at the start of the project either – it was a very quick and relatively small project, it’s not like Mr X could disappear, I knew where he lived.

The project was finished quickly, and sign off was achieved after Mr X visited and looked through the website. I emailed over my invoice and expected a quick turnaround on payment. What I did get was a phone call and a confused Mr X wondering why my invoice wasn’t what was agreed. The discussion went around in circles, I was adamant that the invoice was correct, that it already included a “mates rate” style discount. I also apologised for not putting the quote in writing. I finally agreed to trim the invoice down by 10%. I was also asked to provide username and password details so they could manage and update the website content themselves – this wasn’t actually part of the original brief, but as the site was built in Wordpress, there was no problem with setting this up.

A few days later, the goal posts moved again. I received an email asked for the domains to be transferred, the website to be exported so it could be moved to a new hosting company (I was currently hosting it) and for me to explain the theme I designed and how to modify it in the future. I was a little annoyed at this new request so late in the project, but agreed to do so after the invoice was paid. And that was the problem. Mr X only wanted to pay my invoice after I transferred the website, I explained this wasn’t how I worked and that I was treating him like any other client. I also had suspicions of more delaying tactics were on the cards even after I made the transfer, in which case I had no way of taking down the website if payment wasn’t received. Mr X insisted that he would pay as soon as the website was transferred, but I refused. If he hadn’t of made an issue over the invoice initially, then maybe I could of trusted him to pay.

It’s a shame that the project has been taken down, I was looking forward to checking the analytics and seeing the website improve over time, as well as working on the site again in the future. It’s also a shame that our relationship has also been taken down by this project – a project that Mr X said he no longer cared about and wished he never asked me to do.

This project, like all others, has taught me a few things.

• Discounts are fine, but be realistic in pricing. Don’t give the project away, if your friend doesn’t like your quote – then walk away.
• Ask for a deposit at the start. State it’s needed for initial costs – purchase of domain names, hosting etc, rather than saying it’s just incase we have a falling out and I don’t want to lose out completely.
• Make sure the brief is in writing – even if it’s just an email listing what’s required and expected. As long as it can be referred back to later.
• Stick to your terms of business as closely as possible, even when asking for payment.
• Try not to do anything that will ruin your friendship.

The advise works both ways too. If you are employing a friend to work on your website (or any other project), then understand it’s not necessarily a favour and your friend is running a business, so try to treat it as business arrangement; with the added bonus of liking the person you’re working with.

Towards the end of March 2009 I launched a little pet project, a T-Shirt store designed to give me a little extra income each month. Over the next month I’m going to post a handful of blog articles describing what I’ve learnt while running Worm Sign T-Shirts, including working with Wordpress and it’s various plugins, use of copy and content, and using social networking to help promote the store.

A Little Introduction
Worm Sign combines two of my passions, music and T-Shirts. This has been one of the most important factors, having enthusiasm for the product and the community in which Worm Sign sits has enabled me to enjoy working on the project when the pay-off hasn’t always been equal to the work I put in.

The website was launched with a small collection of T-Shirts, fairly simple designs at first – but as time has gone on, the designs have improved – and so have sales. I’ve changed the layout on the website twice, and continuously tweaked and adjusted it. A product search was added late in 2009, as well as a chunky footer showing off all our blog posts, social sites and friends. We even changed the supplier of our T-Shirts halfway through last year too.

The website has evolved, and it’s been great to know that I can play with the website to my heart’s content. Something I would never get the chance to do on a client website.

This is the artwork for my latest DJ mix, Deep Down Inside.

This mix was a lot darker than my previous summer mix so I wanted to reflect that in the artwork. I only used 3 pieces of stock imagery for this, the Clown, the border and the paint brush splash as a holder for the text mix description. I added noise as well as an overlay to add contrast and a rough, dishevelled style to the clown that would match the font choice and borders.