We’ve had the pleasure of trialling FreeAgent, an accounting and invoicing app targeted at freelancers and small businesses.

Bookkeeping is a real chore, it takes ages, is horrendously boring – but is a necessary evil.  We’d previously been using Freshbooks which is also great, but it’s an American app and thus targeted primarily at the US market.  It doesn’t include UK tax laws and is a little lightweight on the accounting side.  This is where FreeAgent really comes into it’s own, it’s targeted at UK freelancers so all your taxes and expenses are shown on the handy dashboard.

It’ll automatically show you how much tax you owe as you go along taking into account VAT and current tax rates.  It’s got a built in mileage calculator and has user area you can invite your accountant to for end of year accounting.  It’s a cinch to set up, you download your bank account details into a QUIF or CSV file and import into FreeAgent.  You can then go ahead and click on each business transaction and explain it or link it to an invoice or project.

It’s got profit and loss spreadsheets, graphs – and it all looks gorgeous.  It’s fairly cheap and will pay for itself many times over in time saved.  The invoicing and estimates really helps to keep your in-comings and outgoings organised – the templates are fairly customisable but the default choices aren’t half bad.

The only current fault is it doesn’t have a client login area so they can see all their invoices and estimates to date (like Freshbooks).  This is a planned feature and one I’m looking forward to; it’ll put FreeAgent way ahead of any other online accounting app at present.  Another thing it’s slightly lacking in is timing features – it does have a limited project management feature and can import info from Basecamp, but currently doesn’t support desktop timers.  Not such a problem for us but may put some off.

We highly recommend it – no other accounting app comes close to the ease of use and general usefulness as FreeAgent for UK freelancers – and we’ve tried most of ‘em!

Try it now for free!

The website has also been updated and is featured in over 60 design award galleries so if you haven’t seen it yet, go check it out!

That’s all for now.

C

The Design Stage:

1. Recieve brief for new website
2. Send over a quote/agree on a price for the project, recieve deposit
3. Look at the content, and sketch out a plausable layout/wireframes which works with the given content for each page
4. Mock these up in Photoshop/other image editing program
5. At this point we haven’t even started ‘designing’, we’ve just layed out a usable presentation of content
6. Design an inital mockup which gives us the general ‘look’ of the site which compliments our wireframes [consider any current branding, or create new brand image folloing logo design]
7. Some clients will require 1-3 or more designs to choose from.
8. Send over initial first mock ups
9. If client is happy design each page following the same layout and design based on chosen design mockup
10. Add finishing touches send over to client for further approval before HTML conversion

Coding Stage:

1. Start slicing up the final designs and building into HTML
2. If targeting specific keywords, which are known build to enforce these
3. Upload to a testing server make sure al rollovers etc are as client expected
4. Test test test – in all major browsers, amend until the coded site looks exactly like the PSD sent to client previously.

Development Stage:

1. Depending on whether the client required a CMS/e-commerce or static HTML site progress to the development stage
2. Code in using PHP or chosen language
3. Setup all databases
4. Test test test again to make sure all code is functioning as expected

Setup Stage and Maintenance:

1. Upload to clients server, or setup server for them if they’re not sure how
2. Send instructions how to use CMS/setup meeting explaining everything
3. Most web designers should offer some form of maintenance, this doesn’t come free.

As you can see a  lot more goes into a complete website than most people think, and this is accounting for font selection, copywriting, SEO, javascript implementation and various other extras.  A high quality website should contain all of these and if you think it sounds too cheap, it probably is!  You get what you pay for.

As a UI/frontend designer I maybe slightly biased, but I hear of lots of people who think they can design too.  Because design is so subjective everyone has an opinion and therefore they believe they could do better, or it’s easy.  I beg to differ, it takes years of practice and experience to be able to produce a quality, workable design.

So next time you see cheap web design, ask yourself why is it so cheap?  What have they cut out of the above to bring the price down? A good way to look at it is as an investment, what ROI will I get if I go for a higher quality build?

For those who haven’t read about our startup discounts, we are offering web design, as well as web design advice to those with great ideas but little capital to get started, some discounts up to 50%.

We’ll be adding a number of these great ideas to our portfolio once live so keep an eye out!  If you’d like to book yourself in or enquire, click here!

I coded and designed the site using a customised wordpress theme.  Also designed their new logo!

Check it out: Retouchify

For this reason, web developers should be looking beyond the immediate aesthetics and consider how they can build a website that’s easily adaptable to other languages and cultures.

Text

Whilst design and layout is what first draws traffic in initially, it’s content that ultimately keeps visitors coming back. It can be easy to solely think ‘English, English, English’ in terms of language, but the simple truth is three quarters of the world’s population speak no English. Not even to basic conversational level.

If the purpose of a website is to make money, then businesses need to talk to clients in their own language. But the website translation process is made far easier if the pages were developed originally in Unicode, which caters for over 90 different scripts and has a repertoire of over 100,000 characters. So the German ‘Eszett’ symbol (ß), for example, can be replicated with ease.

Unicode has been adopted by the likes of Oracle, IBM, Apple and Microsoft, whilst all the commonly used operating systems and browsers support it too. Furthermore, standard web design tools such as Dreamweaver and Microsoft Front page facilitate Unicode web page design.

So it’s best to use Unicode if a site is to be targeted at any non-English language audiences.

Color symbolism

Your choice of colors should also reflect your intended international target audience. For example, ‘black’ generally signifies ‘death’ in western cultures, but in many eastern cultures, white is the color for this. Similarly, red can mean ‘danger’ or ‘love’ in western cultures, whilst it can represent ‘purity’ in India or a cause for ‘celebration’ in China, or even ‘good luck’.

There are many examples of how different colors can mean different things in different cultures. And whatever you do, don’t include an image of a green hat on your site if you’re targeting customers in China…as that means that a man’s wife has been unfaithful!

Simply put, carefully consider your color scheme from the start to avoid having to completely change your design later on.

Content

Obviously, not many people will visit your carefully constructed website for the design alone. Content most certainly is king when it comes to successful websites – you must offer genuinely useful content for your global markets…not only in their native tongue, but in their native dialect too.

Adapting your website text for global markets requires a two-fold process: localization and then optimization.

The localization facet means you need a qualified native-language translator for each of your target countries. And remember, language dialects can vary considerably between regions.

For example, many words mean different things in French (France) and Swiss/Belgian French. ‘Lunch’ is déjeuner in France, but dîner in Switzerland and Belgium. And in France, dîner is the word for ‘evening meal’. Coche in Spain is the word for a ‘car’, but in most Latin American regions, it means a baby-stroller. Moreover, a baby-stroller won’t be a familiar term to UK readers: they’ll be more likely to use a ‘pushchair’ or ‘buggy’.

Website translation is made a whole lot easier if you stick to standard text and use minimal amounts of Flash content. This is because it’s difficult to edit, copy and perform word-counts on Flash files, processes that are central to the translation process. Moreover, the old adage that text is the food of search engines is true: Google can’t detect words embedded in Flash, meaning it’s harder to optimize to rank highly on search engines.

Speaking of search engine optimization (SEO), you shouldn’t translate your keywords and phrases directly from English. Locally, people might not use the direct translation – they may use abbreviations, acronyms or synonyms.

The properly researched search terms should then be incorporated into your translated website, preferably on a dedicated ‘in-country’ domain. For example, http://www.mywebsite.fr, for France, rather than http://fr.mywebsite.com – Google uses the domain as part of its search algorithm to determine where your site should rank on its in-country search engine, in this case www.google.fr.

Navigation

It goes without saying that navigation should be a key consideration in any website’s layout. But with right-to-left languages (RTL) such as Arabic, where you put your main navigation bar may have to differ from your English language website.

It’s not a disaster if you simply shift the menu over to the other side of the page, but for ease – and consistency – some designers may prefer to use a horizontal bar instead.

If your website is to be replicated in a number of different languages, you have a couple of options for how users access their native language pages. You can create a simple entrance page, where visitors select the language of the site, which will of course include the positioning of the navigation and scroll bars. Or, you can simply use English as default, and have clearly labeled options for switching to other languages at the top.

These are just a few of the things you should consider when building a website. Of course, if the main aim of developing your site or blog doesn’t involve making money, then you’ll probably get by just fine in English.

But given that anyone from Nebraska to Nairobi could be accessing your site, it certainly pays to be prepared should you wish to adapt you site at some point in the future.

About the author

Christian Arno launched translation company and website localization specialists Lingo24 in 2001. With operations across four continents and clients in over sixty countries, Lingo24 had a turnover of $6.1m USD in 2009.

Part of the problem is many web designers create websites the wrong way around: they fit the content into the design, perhaps even providing a design without any knowledge of its content.  As you’ve probably heard many times before, content really is king, so before even touching photoshop or equivalent and banging out a nice design, first get the content.   Understand the websites intention and who its users will be.  Once you have this knowledge work a design that compliments the content and works with it.

A great read on the subject is Donald A. Norman’s “The design of everyday things”.  Just as we are surrounded by objects in our everyday life that have flawed usability design (push doors with handles?), there are some pretty basic mistakes that a surprising number of websites demonstrate.

1. Navigation

One of the key elements of web design is navigation, it is there to make life easier, so why make it harder than it should be? Of course there are those that want to be daring and different – but seriously, be daring and different elsewhere, if you don’t demonstrate a fundamental understanding of usability from the get go then say goodbye to converting any traffic and hello to high bounce rates!  This is why tabbed navigation is so effective, we naturally associate new pages with tabs, and with a rollover it becomes very easy to understand and use well designed tabbed navigation.

Back of a Napkin – looks quite nice but it’s pretty confusing and the main navigation is at the bottom of the page, which for users with smaller screens may not even be visible.

Guide to Prague – fully vertical navigation, whilst looking a little different, really does become a pain in the ass, especially if there are 5+ navigational items, having to tilt your head to read them becomes more and more frustrating.  It’s just not worth the hassle.

Design for Fun – using icons instead o f words for navigation is a pet hate of mine.  Although here design for fun have used rollover text to give meaning to the icons, plenty of websites use potentially meaningless icons (with no text) and expect users to understand what they mean.  By all means use icons to compliment textual navigation!

2. Understanding Colour & Its Meanings

There is a chapter dedicated to this in the aforementioned book.  This is so important.  Everyday we are bombarded with colours with meanings, traffic lights, warning signs, televisions, on off buttons..the list goes on.  The most basic of which are; green is positive and means go or correct, red is a negative, and provides warning or stop.  Do not mess with these principles.

3. Using Pagination As It Should Be Used

Pagination is extremely useful when used correctly, its function is to split pages with long lists of items into manageable pages, for example Google results, or galleries.  However, I’ve come across quite a few blogs where they’ve used pagination to split up one post.  They do this mainly in a bid to boost ad clicks but really it’s quite frustrating getting  a quarter of the way through an article and having to click for the next page.  Avoid doing this, please!

4. Maintaining the Look of the Page and Navigation Throughout

This is a big mistake, mainly older websites make; when you click from the homepage (or inner page) you are taken to what looks like a different website, or it suddenly has different navigation.  This can be confusing to say the least.  This is why breadcrumbs are popular, they show the user where they are and where they’ve come from.

5. Attacked by an Onslaught of Content

Very popular usability nightmare, where the content presented is far too text heavy.  It’ll put your users off, no doubt – much better to break up the information (especially on the homepage) into manageable, meaningful chunks.  It’s important to make a good first impression, so make sure the homepage conveys the meaning of the website and, essentially sums up the reason for it being there.

Lord Likely – great example of a content heavy page that’s been split up nicely.  You can easily see how a website with a lot of content can come across as “too much effort” to read, but when it’s presented well it is far more likely to be read.

CG Inspired -  a shameless example of my homepage split up chunks below the fold, with nice icons to boot.

6. Long Winded Sign-up/Registration Forms

Typically if a customer/user wants to purchase or sign up they want to do it in the shortest possible time, instead of being confronted with a beast of a form.  Large forms with loads of inputs can be pretty daunting and quite a few users will simply go elsewhere to another service provider.

Digg – have you seen their registration form, it’s tiny and only takes a few seconds to sign up.  You can then add optional further info later.  A lot of websites are now using facebook as a login option.

7. Overly Complex/ Unreadable Captcha

I’ve found this to be a true usability nightmare.  In a bid to beat xrumer, or other spam programs, captcha are becoming harder and harder to read, not to mention longer.  Many don’t even offer a sound clip which is an accessibility nightmare too!

Anti-spam is a necessary evil, but really, the user comes first.. sort it out!

These are just a few examples, but the premise is to allow the user to get to where they want to go easily and quickly without making them frustrated.  Sure impress them with your design skills, but impress them more with how easy your website is to use!

I’ve taken snapshot of 1000 unique visitors here are the results:

Of course this being a tech-savvy site, the majority of users are less likely to be using out-dated browsers, but still around 21 out of 1000 people are using IE6.  Apply that to a mainstream site with all types of users and the percentage will increase without doubt.

Personally, unlike a lot of web designers are now doing, I’m not turning my back completely on IE6 until I’m sure it’s dead.  I still make sure that it is usable for IE6 users, even if it’s not as pretty as in say firefox.  With the use of CSS it’s now pretty easy to target IE6 and fix up any element that’s causing issue.

Save the developers used to have a little bit of java that created a popup when the users browser was recognised as IE6.  This is a great idea for users that just don’t have a clue about newer browsers, or who don’t care.  But for the people because they have no choice – whether they’re using work computers and can’t upgrade, or their computer is too old to run newer browsers it’ll just serve to piss them off further!

With major companies pulling support for the old browser, hopefully it will slowly die, but for now, while there are still helpless soles who are forced to use it, we should offer up, at the very least, a usuable experience dontchathink?

The days of static HTML sites are numbered with the growth of content management.  It’s becoming almost standard to build sites on some sort of a CMS. There are so many content management systems out there now which is great, but it can also make choosing the right one for your project a little tough! Every web project you get will be different, and so it will likely require a specific CMS.

Here is a list of CMS’s both free and paid that will get the job done well no matter what project you’re working on.

Small, Brandable Content Management Systems

Some nifty little CMS’s as well as SaaS options.

Cushy CMS

Free and very easy to use, hosted option, great for small sites that require easy updates.  Also brandable with the paid plan.

Surreal CMS

Great little CMS, similarly to Cushy, you simply add class=”content-editable” to define editable regions.  It can be accessed from your own FTP or domain name and is fully brandable.  Free for upto 3 sites, then $25 a month.

Light CMS

LightCMS is a simple to use, standards-friendly system, and it’s built to help your business succeed.  It’s got a great re-seller plan too.

Orbis CMS

Very small, open-source, self-hosted CMS that’s super easy for your clients to use and you just need to add a line of php on any areas that need to be editable.  Fully brandable with owners permission.

PageLime

Great SaaS option for designers, only $19/month for upto 50 sites.  Easy to use as Cushy and fully brandable.

Perch

Really tiny CMS and that’s the beauty of it.  Very easy to use like Cushy/Surreal and fully brandable.  Self-hosted and £35 as one off license.

Scalable Content Managent Systems

Not to say that the above aren’t scalable, but for the much bigger projects and social/community aspects you may want to have a look at these:

MODx

Fantastic free, open-source CMS that is tailored specifically for designers and developers.  The main idea is that the cms fits into your design rather than the other way round.  It’s also got a great community and is one to keep an eye on for sure.

Expression Engine

Probably one of the most popular CMS’s among web designers, and for good reason.  It’s extremely powerful but easy to use, adapting to your design process whilst still being easy for your end user.  It’s also modular so you can add and remove features with ease.

Pligg CMS

Described as ‘The Social Networking CMS’ pretty much does what it says on the proverbial tin.  It’s open-source, completely free and pretty swish!

Plone CMS

Plone is “A powerful, flexible Content Management solution that is easy to install, use and extend”.  Plone is among the top 2% of all open source projects worldwide, with 200 core developers and more than 300 solution providers in 57 countries.

Joomla

One of the big players, Joomla is a free and open-source self-hosted CMS.  It’s ease-of-use and extensibility are what have made Joomla one of the most popular content management systems.  Although you can build pretty much any type of site with Joomla, it’s probably a bit overkill for small sites.

WordPress

Although widely associated with being a blogging platform, WordPress can be used as a CMS as well as a shopping cart.  It’s easy to use interface and clean output have made it one of my favourite options for both blogging and CMS solutions.  It can be hosted or self hosted.

Radiant CMS

Radiant is a no-fluff, open source content management system designed for small teams.

Drupal

Another big player with a slightly bigger learning curve than say Joomla. Equipped with a powerful blend of features, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.

Movable Type

Flexible enough for custom blogs and websites and powerful enough for the most demanding content management and social media needs.   The popularity of this CMS cannot be denied, powering some pretty big sites including BarackObama.com and even Britney’s site!

Concrete5

Free open source CMS that’s super easy to use for both you and your end user.  They offer both hosted and self-hosted options.

A bit about Spicy Web Designers:

This website [Spicy Web Designers.com] is dedicated to answering the question “Where are all the good web designers?” and we answer this question by interviewing the top web designers from around the world.

Our goal is to create a website that allows creative studios, companies and agencies a way to keep on the pulse of web design industry.

SpicyWebDesigners.com features some of the hottest web design talent around the world and strives to showcase them and inspire others with what is possible in the world of web design.

Great resource there – and thanks to Luc for the great questions!