Over the past few weeks, I’ve received a few emails from different people asking for advice or enquiring about my help with digital work (to compliment their print offerings) and the common theme amongst these enquiries seems to be cheap prices/low budgets. Now, I’m all for websites being affordable but there comes a point when you can’t make a living if you’re charging people £300 to make their website.

There is undoubtedly a market in this price range -  for small businesses/individuals who cannot afford anything more than this but it doesn’t necessarily mean this is the market for you. It’s very important to remember that aside from the actual physical work of building the website you’ve also got to win the gig, communicate with the client, plan projects, chase payments and keep your other clients happy all at the same time. If your prices are too low you can’t do all of those to a high enough standard.

My personal business model

It never fails to surprise me how many web designers/developers go freelance and think that means they have to go out and win small business clients and produce the work as well. The reason being because that’s a really difficult thing to do. Personally, my business model is different and I spend most of my work time working on-site in the offices of bigger digital agencies and, more often than not, this work is based upon a day rate. Provided you can stay in demand this is a very good model because:

1. (Most) agencies know the ‘going rate’ for work and while they may try to negotiate down they won’t expect you to work for next to nothing.
2. Lots of agencies use freelancers and communicate with each other to find the best freelancers – so once you’ve done a good job at one agency, the word quickly spreads the other jobs come quite easily.

The other advantage is that in most cases, on-site day-rate agency work means that you only work 9-5 (or whatever that particular agency’s hours are). Yes, sometimes this may be longer and sometimes you may find yourself still on-site at 9pm but this is rare in my experience.

An alternative is to offer fixed prices as opposed to a day rate. I sometimes do this but, to be honest, most of the agencies who hire me simply want someone on-site who can work on a raft of different projects so quoting a fixed price is impossible for this type of booking. Every ‘how to be a freelancer’ article I’ve ever read has said you need to work to fixed prices and not hourly/day-rates. However, in my experience – and maybe it’s just the specific type of work that I do – that agency clients simply don’t want this.

A quick word about day rates

You set your day rate to account for the fact that you won’t work every day of the month – if bookings dry up, you need to take holidays/sick days or you need to buy new equipment every now and again.

Agencies hiring you won’t expect to pay you the equivalent of their full-time staff e.g. if their staff get paid around £30-25k per year ( averaging at £100 per day) they won’t expect that your day rate should be £100*. Whereas, if your target market is small businesses you may find yourself justifying your day-rate/overall prices constantly.

* If the agency looking to hire you does expect you to work for £100 a day then you simply move on to the next agency who understands industry pricing levels. If an agency doesn’t get freelancer prices it’s likely they’re undercharging for their own services and if they’re getting the fundamentals, like pricing, wrong what else are they getting wrong?

Summary

I hope this post serves as an answer, for the next time I get asked if I can produce a website for next to no budget or if a family member/friend refer on a colleague (who has a great idea for an ebay/facebook/google clone) because they think I pull websites out of a hat for £300 a pop.

The concept was simple – to create a community around the venue and build upon the idea that gigs shouldn’t end as soon as the final member of the crowd leaves the venue. Rather, those attending the gig should be able to share their experiences through comments, photographs and videos allowing the gig to live on through a permanent online presence.

Cahoona created the design, overall concept, and managed the project and client whilst I delivered the functionality which included amongst other things:

• Full bespoke CMS
• API integration with Last.fm, CampaignMonitor, Flickr, YouTube and Vimeo
• Social media/user area with friends, comments and direct messages
• Events calendar
• Ability for staff and users to share images, videos and documents for events
• Simple online store including ticket sales (for educational courses) and charitable donations
• Comprehensive tagging and site search
• News engine
• RSS feeds for content

Best bits

This site is actually very large and if I were to cover every detail of it – it would take too long. However, there are some great bits within the system that I am particularly proud of:

Simple intuitive AJAX tag selection

Both the front and backend of the site feature really easy ways to add tags or in the case of the above screengrab – musical genres.

Easy to use, yet powerful search

Search for a band/artists and you’ll get back all the gigs they’ve played or are playing at the venue — and any content in which they feature on the site. Search results are clearly defined as to what type of content they are so users can quickly see what they’re getting if they click through.

Simple content population

The Band on the Wall team needed to be able to easily add content. With that in mind the popular Tiny MCE software was modified to ensure it was as easy as possible to add images and links from the site to the content whilst maintaining the semantics and accessibility of the HTML code and preserving the design.

Simple solutions to large dataset issues

Band on the Wall’s new site currently contains over 2000 events and 1500 artists each occupying a row in the database. This presented issues when the staff wanted to set up a new gig. They couldn’t simply select the relevant artist from a 1500 strong drop down list. Step forward AJAX to the rescue:

Speed

All database calls on the site are cached locally after their first call which speeds up the site by as much as 260% on some sections. In development, PHP page rendering speeds were very carefully monitored to ensure minimal load on the database and with a view in mind of visitors having a good experience — and not a slow one. Undoubtedly there will be times when — despite the venue’s modest capacity — the server could get significant interest if a very strong act is booked. The website has been built with this in mind at every stage and it should cope.

Project management

This was a fairly sizeable project, I was initially brought in to consult and quote for the project in November 2008 with the project going live in July 2009. All in all, there was around four months of development work spread over that time.

This project also saw me outsource a sizeable portion of work for the first time in my career. As the project deadline loomed Tim Fletcher helped me out with frontend work. Frontend development is my core skill and outsourcing parts of this work was a truly weird experience for me. Thankfully it worked out well and being able to concentrate on the backend really sped this project along.

Summary

Less than a month after launch, it’s too early to say how successful the website is. It’s easy to see that it’s a beautifully designed site and initial user feedback has been very positive – but as with every website the measure of success will be seen months down the line when/if visitors numbers can be sustained.

Working on this project was hard and at times challenging due to its sheer size but it was also pleasurable. I feel the design is fantastic and the overall concept produced by Cahoona is very exciting. The way Band on the Wall as an organisation have embraced a website of this nature says a lot about their progressive view of music — and deep understanding of how gigs must work — in this digital age.

Personally, I can’t wait to see how this site evolves as more content is added by staff and users.

You are the expert not the customer

The premise behind The Home Show, is that people feel their current home isn’t performing well enough for them. They can’t afford or don’t want to move homes so they want to improve what they have. This leads to them calling George, and he realigns their homes for them.

Straight off the bat, George makes it clear that he is the expert. He consults the clients on the redesign of their home but has complete and utter final say even to the point where he gets the family to move out whilst the work is going on and doesn’t let them see the finished work until it is completed. Admittedly, part of this is pure showmanship for the television audience but the main point here, is that George’s clients are in no doubt who the expert is and trust him so much that they are willing to give him complete free reign.

The budget does not stretch

At the start George asks the family for their budget. If it’s small, then he scales down his plans, if the budget is large he scales them up. At no point does he throw in freebies for the family. In fact at the end of the project if he has run out of budget often the family are left with an empty room which they (nicely) told to do up themselves when they can because the budget wouldn’t stretch.

The budget is always realistic too, the family don’t expect £200 to buy them a loft conversion. In most cases people are dealing with their life savings and George is never dismissive if their budget is smaller than he needs but at the same time he lets the client know exactly how much work they can get for that.

Usability is king

Before starting any work or conceiving any ideas, George moves into the family home for a short period of time and tries to understand what problems the family are facing with their current design. He does not come along with a new design already in his thoughts rather, he takes the time to work out what the problems are first hand and how best to solve them. Often the families can’t express what is wrong with their homes just that there is something wrong. This simple usability studies that George carries out enable him, the expert, to see exactly what problems the family are facing and he can then use his expertise to fix them.

Your clients may find their websites aren’t performing but they don’t know why – and why should they -  they just want it to work and to make them money. Sitting down with people who use the site and watching them can be a real eye opener on how the website can be improved.

Gauge client’s tastes

Another tactic George uses to ensure he doesn’t create a redesign that the client hates, is to ensure he knows what style the client likes. He usually takes the parents of the family to a furniture shop and asks them to pick out their favourite chair or another item of furniture. he uses this test as a way to gauge what the client si looking for. He isn’t asking the client which chair they want in their newly redesign home but what style/type/feeling of chair. From this information he creates a design that the clien twill like.

In web design, a good technique with clients is to ask them to supply a list of websites they like. Provided you don’t get wacky responses, this is a great way to find out what type of design they might like and not to waste too muhc of your time creating designs that they may hate.

Explain your design decisions

Finally upon finishing the job, George guides the family around the new home, showing them each room, in the order he wants and constantly explaining what he’s done and why he’s done it. This helps them appreciate his design skills even more because he makes them realise that he’s not just put a wall there or removed a wall because he likes the look of it, he’s done it for a good reason and by explaining he wins the family’s hearts and minds.

If you hand a design over to a client and simply expect them to ‘get it’ straight away you may be in for a shock. They may be expecting something different or may not like the idea of something until they understand why. ‘Where’s the spinning logo I asked for?’ they may say but you have to be there and explain why you haven’t given them that  spinning logo.

Summary

A lot of web designers think that the because the web is a new medium, they can ignore common business practice but they can’t because whilst there are some differences to web design and other industries, the basic principles of business and client management still apply.

The building trade is a great comparison because the projects there are often unique and cannot be priced up instantly which is similar to web projects where virtually every project is different despite having shared features like headers, footer, images, etc. By using other industries as a guide it you can use the knowledge those industries have gained to your advantage in web design.

Feature set

Financial management software is a crowded market so I must be worried that this product won’t sell. Well I’m not worried – this app has several key selling features that put it above the competition:

• users can email invoices/quotes
• clients of that user can login and view new and previous quotes/invoices
• users can manage their outgoings/expenses and easily see their financial state

Lessons learnt

Producing this web app myself has taken discipline and has taken my PHP code to a new level. Everything has been written with excellence in mind a – total quality approach to coding if you will :)

This is a very exciting time for me, I fully expect this venture to be full of surprises, twists and turns. It’s not my only idea and I fully believe there is a huge market for the type of smart yet simple software that 37signals have pioneered.

MVC

MVC stands for Model-View-Controller and that’s how Bean Counter is programmed – well that’s how I’ve tried my best to code it! It’s allowed me to cut down on the excessive files and folders and structure the code in such a way that will be easy to extend in the future.

Comments, comments and more comments

I think code can be beautiful and creating code that was structured and well commented was a major goal for Bean Counter – although I plan to host Bean Count accounts myself, I still want anyone who gets their hands on the codebase to be able to understand and extend it.

My own mini-framework

All my projects now run on my own mini-framework, called ‘Decaffeinated’, and Bean Counter is no different. Decaffeinated is a simple set of PHP classes which allows me to get projects moving quickly without worrying about copying and pasting myself into a state of boredom.

I jumped at the chance to help Vicky with her new venture and the results have been very positive. I was very hands on with this project and I performed many duties including:

• web designer
• copywriter
• brand consultant
• SEO

Homepage

The homepage has to convey a lot of information and do so without looking cramped. It also has to appeal to 2 completely different audiences the teachers looking for a placement and families looking for teachers. It was interesting coming up with a design and content that would appeal to both parties.

Families page

This page is meant to entice parents and families to want to join the scheme by spelling out the benefits, clearly and concisely which it does.

Families questionnaire

To join the scheme, prospective parents must fill in this questionnaire which ius emailed to Vicky. The form is simple to ill-in and easy to use. Any mistakes made are clearly highlighted to the user in plain English.

Contact page

This page features the contact details (with correct microformatting) and a PHP powered contact form with built in auto-responder.

FAQ page

A page packed with little unobtrusive JavaScript wonders – rather than show all the answers to common questions at once, the user can choose which to view in a very intuitive manner. People without JavaScript will have no problems viewing this page.

Homepage

The design in general was inspired by simplicity. The important feature of this portfolio site is that the quality of the 3D visualisations shine through. By using colours such as black and white with shades of grey allows the colours in the portfolio to leap out and draw the eye.

Portfolio pages

As mentioned above, the portfolio page is the most important on the site, all visitors looking to visit this website will be looking to view the portfolio. If the portfolio is sufficiently impressive, it could entice job offers so it is of crucial importance. I wanted the portfolio to show quite large pictures (without making the site slow to download) and also leave room to explain briefly what each picture is of.

Contact page

The website makes use of a very basic contact form. This contact form (built with PHP) has a built in auto-responder so anyone who emails gets an automatic thank you email – written in such a way to appear genuine and sincere.

Meeting the needs of the content

Physical appearances carry a lot of weight, but jaw dropping interfaces can often conceal a clumsy, ill-thought out user interface. My main concern was taking Redeye’s content and displaying it in a such a way that their users could get to it quickly and simply.

Redeye had lots of pieces of content – all of which wanted to be as important as the next. It was crucial to determine which sections actually were most important.

Images are everything

Despite being a photographic network there didn’t the site needed to focus more on information rather than showcasing photographic talent. The images used in these designs were intended to be easily inter-changed with other images to ensure the site could maintain a fresh look – without the need to constantly redesign the site.

Content managed

The Content Management System (CMS), is the designer’s arch nemesis, she takes your beautifully crafted design with pixel perfect copy and allows any number of images/text to be placed into the space. Therefore, each design idea takes into account that the site would be running on a Content Management System and would have to be easy to integrate for the development team and easy to update for the Redeye team without easily breaking the design.

Picking favourites

This portfolio page features 5 very similar designs – so, which is my favourite? Well, I have a really soft spot for those light grey vertical lines on design number 5 (the client didn’t share my enthusiasm) but, overall, I think the first design works best.

Decisions, Decisions

In many ways, Redeye were a very challenging client. Different stakeholders had different ambitions for the website and so the design went through many different iterations in order to try and impress as many members of the team as possible.

Sadly, after much discussion, Redeye opted not to use any of the designs produced.

This project had a few important characteristics:

• a short deadline: 10 days
• quite a few different designs per page
• a quite complex design

A CSS template takes 2-3 days depending on its complexity – sometimes up to 5 days if it is really complex. This time includes slicing up the images in Photoshop/Illustrator, writing the HTML, writing the CSS and testing the results in multiple different web browsers e.g. Internet Explorer 6 on Windows XP, Internet Explorer 7 on Vista/XP, Safari on mac and many more before fixing any discrepancies.

I usually complete a CSS/HTML template within a week or two after being given a design. This design had quite few different layouts for different pages all of them with their own complexities so this design took a little longer – all in all it took me 5-6 days to complete.

Code examples

The only way to examine the quality of a website’s HTML/CSS is to visit that site and select ‘View Source’. To see the code for Leave it out here is a list of links:

• Homepage
• Menu
• Menu (with map)
• News
• Article
• Articles
• Contact page
• Links
• Share page

The CSS can be located here:

• Global stylesheet
• Example individual page stylesheet

More details

The website design was done by Norwegian agency, Polyesterland.

Fortunately, email design was an area I really enjoyed. I found it really easy to take elements of design from JJB’s printed brochures (created by a fantastic inhouse design team) and repackage them into a smart-looking emails carrying the right balance between text and imagery.

Prior, to JJB employing a full-time E-Customer Relations Manager, I also used to create a lot of the email copy along with the design.

Women’s Summerwear

This womenswear email was designed to create a ‘cool’ identity for the clothing range on sale. As JJB Sports is often more associated with low prices than style it was felt important that the email campaign should try to make the product look fresh and exciting.

The email used a successful mixture of HTML with CSS and tables. Although tables are frowned upon in website design, they are deemed more necessary in email design – where complex CSS floats can create catastrophic errors in certain email clients.

Womens Fitness

A very similar design to the above Women’s Summerwear email, this email campaign was built in conjunction with the new E-Customer Relations Manager and was all the better for it. I picked the header image and the background colours and the copy was written by her plus the actual email HTML/CSS was built by her based on my previous template.

It may seem a little strange to place in my portfolio a piece of work that has jointly carried out by another person, but the reason why I feel this is important is that it shows how easy my template and design was to change by another person in order to meet a slightly different criteria.

Puma Since 48 Womenswear Range

Proving that my abilities stretch to more than one email template design, I created this design for a new Range of Puma clothing. Although this design looks good, it didn’t perform too greatly. My suspicions are, that because this wasn’t as product-focused as other campaigns, it suffered as a result.

Whilst at JJB, I discovered something about email campaigns. By putting the email campaigns linked via the website we not only encouraged more people to sign up but also got great results in SEO as the email campaigns were indexed by search engines. We are able to see sales obtained via these email campaigns, months after the emails has been sent, thanks to Google Analytics.

Important note: These email designs are all based upon the art direction of offline printed brochures/posters created by the talented designers at JJB Sports. I am in no way claiming credit for their great work, but merely showcasing how I took their imagery and designs and turned them into great email campaigns.

I used my initiative to create this site, nobody explicitly requested it, but I recognised the existing recruitment site was not performing well in any aspect. So when I had spare time, I spent it making this site – and it certainly paid off.

Administrators needed to be able to add/edit jobs quickly and easily and I provided a solution for them that allowed them to do just that. This website/CMS made their lives easier, whilst simultaneously making it easier for members of the public to see what jobs JJB Sports had on offer.

CMS features

The CMS consisted of a login area, control panel and the option to add/edit/delete jobs and frequently asked questions to the website. The CMS had several cool features:

• A help area which explains how to perform key tasks in the system.
• A simple text editor that turns plain text into HTML so administrators need never learn HTML.
• RSS feeds which are automatically created with the content created� by the administrators.

Website features

At the time, this website and CMS, represented where I wanted JJB’s future web redesigns to progress to. It was a forward-thinking website that put RSS at the forefront in a bid to educate people about how best to use a frequently updated website.

The site featured:

• Valid XHTML 1.0 Strict web-pages. It must be noted that every attempt has been made to make it difficult to add non-valid mark-up.
• RSS 2.0 feed converted to XHTML 1.0 Strict with XSL.
• CSS Print style-sheet.
• CSS Handheld style-sheet for mobile phone users.
• Easy to understand structure
• Fully functionally Content Management System for administrative purposes, complete with unobstrusive JavaScript that aids usability and limits errors.
• Basic search engine.
• Flexible vertical design – meaning the site works if people resize the text in their browser or if a section of text added by an administrator is unusually large, the design will not break.

Accessibility

Accessibility was at the forefront of my mind when designing this site and I hoped any disabled users found it much easier to use than the majority of websites made by large companies at the time. Turnign off the CSS revealed a solid HTML structure with skip linsk that meant gettign around the site was easy.

Browsers

This design worked in the following browsers:

• Internet Explorer for Windows versions 5, 5.5, and 6
• Internet Explorer for Mac version 5
• Mozilla Firefox for Windows and Mac versions 1.0 and 1.5
• Safari for Mac versions 1.3 and 2.0
• Opera for Windows and Mac version 8.0

Note: JJB’s recruitment website was re-branded and relaunched in late 2007. However, the CMS I designed was still in use in 2008.