Angels News

Angel brand new MTV Service "MTV Impact"

Sun, 22 Aug 2010 19:48:00 GMT

Sorry we've been moving stuff around and updating things recently... this case study will be updated very soon.

The Carphone Warehouse launch their Pink MMS & SMS promotion with Angel

Tue, 10 Aug 2010 17:50:00 GMT

Sorry we've been moving stuff around and updating things recently... this case study will be updated very soon.

Betfair use Angel to build and run their MMS campaigns

Tue, 10 Aug 2010 17:25:00 GMT

Sorry we've been moving stuff around and updating things recently... this case study will be updated very soon.

3 Mobile choose Angel to develop their new WAP UI

Tue, 10 Aug 2010 17:24:00 GMT

Sorry we've been moving stuff around and updating things recently... this case study will be updated very soon.

New SMS service for Childline & the NSPCC

Tue, 10 Aug 2010 17:23:00 GMT

Sorry we've been moving stuff around and updating things recently... this case study will be updated very soon.

Chelsea Launch Micro Site With Angel

Tue, 10 Aug 2010 17:23:00 GMT

The first of the Angel Christmas creative went live today. We designed and built the True Blue Calendar, a Flash application that sits on the splash page of the official Chelsea FC website. The advent calendar reveals different offers and experiences that drive fans to the online shop, leading them to support the club week in week out. With a packed fixture list and Christmas looming, the app highlights True Blue Solutions to the present buying dilemma.

This year the calendar was required to accommodate geotargetting. The location of the site visitor is determined and if the user is from the UK, Asia or the USA, they are delivered country-specific content behind the doors.

Relentless Launch Summer Festival App

Tue, 10 Aug 2010 17:24:00 GMT

Our latest integrated campaign for Relentless is now underway. In support of the Festival season we created an integrated campaign featuring a text to win for tickets to Relentless affiliated Festivals. The activity will hit thousands of outlets nation wide and spans printed media, point of sale and mobile marketing, crossing over elegantly in to the digital domain with the Festival Guide iPhone app.

The free iPhone app provides A-Z festival listings, line-ups and news for every UK festival as well as a special clash-list feature that visualizes where your favourite artists performances overlap. Search ‘Relentless’ in the app store to give it a whirl. Users can also sign up to The Order, Relentless’ online community, from the app and win special prizes.

Motocaddy Launch iPhone Web App

Tue, 10 Aug 2010 17:24:00 GMT

What is an iPhone Web App? A “Web App” is very similar to the native apps that we are all familiar with, but the key difference is that a “Web App” can be accessed through your standard iPhone Safari browser. Using HTML5, CSS3 and JavaScript a Web App can emulate many of the iPhones native animations and functions, but crucially it can be run off your existing web infrastructure and can be fully integrated with your existing web site. The Motocaddy web app is served to all iPhone users when they try to access the normal www.motocaddy.com

We will also soon be launching a fully native version of this web app for Motocaddy so that it can be downloaded form the Apple App Store and run offline.

The current app offers information and images on Motocaddy’s product range, links to their twitter feed and blog and gives them a whole library of support videos for their Motocaddy that can be accessed over both WiFi and 3G.

byApple, iPhone Web App Store on March 18, 2010 at 2:17 am

Quote:

"Motocaddy are the market leaders in Premium Electric Golf Trolleys and boast one of the most reliable and technically advanced golf trolleys on the market. The release of the iPhone App (an essential companion for any Motocaddy owner) reinforces their position as one of the most forward thinking companies in golf and demonstrates their commitment to embracing the very latest technology.

As an existing owner of a Motocaddy the iPhone app gives you access to an abundance of support videos to help you maintain your Motocaddy in perfect working order. It also keeps you up to date with all the latest developments through their blog and twitter feed.

For all those thinking of buying a Motocaddy this gives you access to details on the whole product range along with photo galleries, videos and pricing."

View on Apple's site

byRod Brown, Managing Director, Motocaddy Ltd. on February 13, 2010 at 3:32 pm

Quote:

"We were amazed at what iShopDeveloper were able to achieve with a web based application. We didn’t even know it was possible to deliver such a feature rich experience through a mobile browser!"

10 Essential Tips & Tools To Keep Your Overheads Down

Sun, 08 Aug 2010 22:26:00 GMT

One of the most important things to keep a grip on when you start a business is the overheads. It’s so easy to let the cost of the “basics” mount up before you’ve even started to generate any cash. In this post I’m going to outline how I first launched my office on a total shoestring but through being a bit savvy made sure that I didn’t compromise on any of the basics.

Not everything in this list is completely devoid of cost, it’s equally important to ensure that you don’t make false economies. These “basics” are typically the things that you come into contact with frequently and like me if you initially invest a crappy “net book” instead of a decent laptop you very quickly lose any benefit you might have gained, through lack of productivity and the fact you end up having to reinvest in a MacBook Pro three months later.

So in truth this post is half about me being a bit savvy and the half about me having made mistakes that hopefully I can now stop you making.

1. Email

This sounds almost too basic to mention, but it’s crazy how many people still get this so wrong. When I first started working freelance I moved into a shared office in central London… This was probably the first good move I made, I rented a desk in an office with about 10 other freelancers, first off it was so cheap to do it this way and it also gave me an address in central London. For the first few months I worked from home, this was a false economy for me, I went crazy and work ended up totally dominating my life. I’m digressing, but suffice to say if you’re working independently an office is a god send, it gives you regular social interaction and a regular routine, plus you can’t stay there all night. Anyway the point of that long-winded intro was that I was simply blown away by how bad some of my fellow freelancers’ email setups were. I would say to one of them did you get my email earlier and they’d be like “which email address?”… “oh that one… yeah that’s on my laptop and someone’s borrowing that at the moment” or it would be like “no it takes about 20 mins to come through because it being forwarded from this account which syncs with this one… but only when my home computer is switched on” and of course needless to say all their emails were stored locally.

I’m sure this sounds familiar… it doesn’t need to be like this! I have so many devices, an iPhone, an iMac, a MacBook Pro, a PC laptop and the crappy net book and whatever device or email client I use I see exactly the same inbox and directory structure. If you’ve worked in a corporate environment you probably think you need a Microsoft exchange server for this or a lot of people try to use mobile me, but set it up all wrong. The answer is you need Google Apps. Google Apps gives you IMAP access this means a copy of all your emails remains on the server and every time you read or delete or file an email, a message is sent back to Google and they record that change and make sure that next time you connect with your phone or any other device those changes are relayed to that too. Apart from the obvious benefits of keeping all your devices in sync it means you can drop you laptop under a taxi and you’ve lost no email data.

Google Apps has two services, a free one and paid one… another mistake of mine. I signed up for a paid one and every time I wanted to add an account I had to pay £30 a year, which started to get expensive. The free version (link in section header) is exactly the same as the paid version except the capacity is less. The free version is 7GB and you can upgrade anytime, the paid one is 25GB… I have insane volumes of emails dating back to 2004 and I’ve still not hit my 7GB limit (…I eventually swapped back from the paid account, which you can do and loose no data).

Google Apps lets you set up email with your own domain name i.e you@yourdomain.com and it lets you point any number of domains to it. Over the years I’ve probably racked up about 10 different addresses and I’ve got them all aggregated in the one inbox from where I can send and receive from any of those addresses.

Google Apps also has shared calendars that can be set up to sync with iPhones etc. It is a very credible alternative to Microsoft exchange server and it can be totally free – amazing. If you remember anything from this post… stop accessing email via POP3 and start using IMAP.

2. Shared File Server

Every office has and needs a shared file server, but they’re expensive, a nightmare to set up, a nightmare to connect to and so many of them are neither backed up properly or located off site so if there was a fire you’d still lose everything anyway. I read a statistic recently claiming that 75% of businesses in the UK that suffer from significant data loss (a fire, robbery etc.) fold within three months, whether or not that’s true I don’t know, but it would certainly prove pretty crippling for my business. I think a lot of businesses save cost in the area of disaster / recovery because they simply think that it won’t happen to them and it will cost a lot to sort out.

It doesn’t need to be expensive and honestly whether you’re a freelancer working on your own or a SME you can’t afford not to have some sort of backup solution.

First problem to sort out is storing files locally, this is as bad as storing emails locally (POP3), arguably worse because if you were to loose all your emails whilst it would be a massive inconvenience for most people it would be nothing like as serious as loosing all your files. You can solve this really easily using a piece of software called dropbox. You install dropbox on your computer and any file you place in it will automatically be uploaded and backed up to the dropbox server, your copy is still stored locally so it behaves as a normal file. Dropbox is free up to 2GB, I trialed it and loved it so much that I placed my dropbox at the root of my hard drive and therefore now store every file on my computer in it. I store near 50GB in my dropbox and it cost me $9.99 a month. It’s amazing, I work with all my files as normal, never have to trigger dropbox and it just perpetually updates the version of my file on the server. This can also work cross platform and device, so when I get home and power up my PC laptop I can access all the same files and versions of those files that I was working on at the office on my iMac. Using dropbox you can easily set up shared directories with colleagues, freelancers and clients. And when a file is added or updated on another device you will get notified. And as if it couldn’t get any better dropbox comes with an iPhone app that lets you access all your files from anywhere. Recently I went to Spain for a few weeks to work remotely and as I rushed through the French countryside on the TGV I answered urgent emails on my iPhone and then I was even able to send a 70MB PSD to a client via the dropbox app, which simply sends a low bandwidth email with a link to the file in dropbox. As I did this I felt pretty smug and if I hadn’t been bragging to my client over email that I was remote working on the TGV they wouldn’t have known that I wasn’t in the office, however be warned my mobile data charges were an absolute shocker and I was only using email… i.e no int. calls.

3. Versioning & Recovery

So you’ve got your files backed up off site… the next problem to solve is versioning and recovery. If you’re sharing files with clients and freelancers what happens if someone accidentally deletes all the files in your shared folder? Well you can pay for a recovery service with dropbox it’s something like $2 a month, I’ve used it to reinstate a deleted file, which was great, but I haven’t used it extensively and I’m not sure what would happen if you wanted to recover a previous version of a file, i.e you haven’t deleted it, but you’ve over written it with a new erroneous version… perhaps if someone knows they can leave it in the comments at the bottom.

What I use to solve this problem of version control is Time Machine… I appreciate this is something you can only get on Macs, but it is unreal. It basically backs up your entire hard drive every 15mins to an external hard drive and then using this really cool space-age interface it allows you to roll back the version of the file you’re working on to any point in 15 minute intervals in the last day and then to any date before that since the file has been in existence (or since you started using time machine). If you work with code it’s like a really nice simple version control that doesn’t require you to check in code… If you’re working in a rigid coding environment with other developers it’s not a substitute for proper subversion, but as a lone web designer or developer it’s perfect.

If you are in a position to use the setup above, Dropbox, with version control combined with Mac Time Machine on an external drive (which is obligatory) you have a near bomb proof backup setup with no single point of failure making potential data loss virtually impossible.

4. Collaborative Tools

Having talked about shared directories etc. It leads on nicely to talking about collaborative tools. In the firms I’ve worked with in the past we’ve tried so many different tools, every month there is a new one and with this stuff what’s really more crucial than the features themselves is the ability to get “buy in” from all the stake holders. Collaborative tools only work if everyone uses them! Here are two that have worked really well for me in the past. The first is Basecamp by 37 signals, many of you will have heard of this, it’s a really nice simple piece of project management software and I think one of the main reasons that it works is because of its email integration. It lets the administrator set up a project, then once it’s set up and the first message and tasks have been posted hardly anyone needs to log into the software, the admin will want to, but the client and designers can typically just answer the emails that arrive in their inbox and these are all tracked in Basecamp through a sort of ticketing system and any files that are attached in emails also find their way in there. The email integration also works well to assign tasks to relevant parties who are then automatically informed by email. The software itself is simple, but thought through quite well and I’ve found it pretty effective, particularly when you’re going through a good patch and you’re running a lot of jobs concurrently. Entry level for this product is $24 a month, which lets you run 15 projects at any one time. This is both affordable and adequate in terms of capacity for many freelancers and small businesses.

5. Design and Interface Collaboration

Like everyone I dream of working remotely, never seeing clients and working from an alpine ski resort, but for those involved in digital and or design there are quite a few inherent problems with working like this… however this is the best tool that I’ve found so far to overcome many of these problems. The product is called http://www.conceptshare.com/ it allows you to upload designs and share them with everyone involved in the project. Everyone can then log in and annotate the designs in a live dynamic environment. What do I mean by this… each annotation and comment is stored separately as a layer and can be switched on and off, added to and marked as completed. It’s just a super easy way to communicate design and interface issues. The entry level for this is $24 a month, but I’ll be honest it’s not something I need all that often and when I do I use the free 30 trial with a new email address… I don’t advocate doing that because it is a good piece of software and it is worth paying for if you’re going to use it regularly, but I don’t and it’s an additional overhead that I don’t need. Additionally a nice touch with this is you can integrate it with Basecamp (I haven’t tried, but it sounds cool).

6. Accounting

This tip is only relevant for freelancers or small businesses with perhaps 2/3 directors and no employees. As a freelancer it’s so easy to get this part of your business very wrong. As the son of a Chartered Accountant I was able to make a pretty big mess of it. When running a small business it’s very easy to make false economies because you’re so conscious of keeping the overheads down… So many people will choose to do their accounts themselves and in some ways there is probably some initial benefit in doing this so as to gain a high level understanding of basic accounting and understand the broad implications of decisions that you make in this area, but that is where I think it should stop. What most freelancers will have a setup similar to my initial setup that involved two systems:

1. An accounting system
2. An invoicing system.

I would raise invoices on one system and then take a copy and then pop it a file that sat next to a shoebox overflowing with receipts and invoices. That file was then never looked from one month to next and it would build up to became a near insurmountable task. I then had to set aside near a week to surround myself with invoices, receipts and bank statements that I then dutifully plugged into my accounts package. The task it’s self took me an age, but I procrastinated and dreaded it for weeks and months in advance and then even once I’d done it and I started on my next year, every time I filed an invoice or receipt I stressed about the new mess that I was creating that would need to be sifted through and sorted out again in a few months. Crunch is set up to avoid this. Crunch works on a monthly payment model, you pay £59 a month and you get access to the Crunch system. This system is an online based system and more resembles the invoicing system that you currently use rather than your accounts package, and that’s because invoicing is really all you need to think about. You use the system to raise your invoices and mark them as paid and the rest of the “under the hood” accounting is done by Crunch’s team of accountants. They’ll take care of all your annual returns etc. and all you’ve got to do is remember to raise your invoices, typically not a problem most freelancers experience! It also gives you an easily accessible online system for recording your expenses and payments, this can be a really simple task if you keep on top of it, but so many systems are tough to use and perhaps, like mine, located offline on a machine you don’t use every day and as a consequence that shoebox fills to bursting point before you get around to recording them.

Running your own business is stressful enough without having to stress about what should be a simple administrative task. Crunch means you can forget about your accounting and concentrate on what you’re good at and what’s important for your business.

7. Telephone Systems

At the moment there are a lot of different phone options out there. I’m going to outline what we use, this won’t be suitable for all companies but if you stick to the basic principals you should be able to find a similar solution that works for your business.

When talking about telephone systems you should be thinking in terms of VOIP. VOIP stands for “Voice Over Internet Protocol” it basically means making calls over the Internet. Most of you will have come into contact with Skype which is a VOIP service, but today there are many alternatives, which are better set up for larger corporate situations, having said that, Skype themselves are also doing a lot in this sector too.

I started using Skype and we’ve built on that and with some additional tools and we now have system that works really well for us.

8. Call Answering

When someone works for BusinessCatalystDevelopers.com we give them a Skype number which is really cheap and using Skype Manager can be managed centrally. We don’t like voice mail, so we disable voicemail on each of these numbers and instead place a redirect to our main number, which is activated if someone’s Skype account is offline. This main number is handled 24 hours a day by our call service “All Day PA”. This works so well for us, if we’re in the office and available for calls we turn on Skype and people can call us using our geographic London Skype number, if however we either can’t or won’t take calls we turn off Skype and all our calls are answered by “All Day PA”. All Day PA answer our calls as if they we’re sitting in our reception and when they take a message they plug it straight into our CRM database which we give them restricted online access to. This CRM system then sends an email to the caller thanking them for their call and logs their enquiry in the system. We are notified via text and email that we’ve received a call. This means no call ever goes unanswered and messages are never lost. For someone working on their own this type of setup can be so beneficial. When you take a call the call might only last for 30 seconds to a minute, but studies have shown that it takes a further 10 minutes for your concentration to return to the same place you were at… at which point you may receive another call. This can make being available to take calls all the time so damaging to productivity, using All Day PA or a similar service means if you’ve got a particularly pressing deadline you can shut off your Skype and get your work done safe in the knowledge that you’re not missing any potential sales leads and all calls are being answered and customers expectations managed.

If you do choose to look at something like All Day PA and you don’t have an existing phone number be sure to ask who owns that number if they offer to purchase and setup the number. In the case of All Day PA they would own the number, so I bought a number separately myself through www.ttnc.co.uk this means if I ever choose to take this service in-house or use another company to answer my calls I can retain the same number. As it is I have received an amazing service from All Day PA and will continue to use them for the foreseeable.

People’s main objection to using Skype is the idea that you have to use headphones and talk through your computer. You can do this, and as developers it often works well for us to do this as we can work hands free on the computer whilst also having a call, however today there are lots of alternative solutions many of which don’t even go through your computer, which can also improve call quality. Here are some VOIP phones that can be used with Skype. If you have an iPhone you can download the Skype app, connect direct to wifi and make calls from you’re Skype geographic number.

Skype also works well as collaborative tool letting you share your screen with other skype users which can be great for discussing creatives or training other staff. It also lets you easily send files (though using a dropbox shared directory is probably a better solution) and keep records of text chats you’ve had which you can refer back to later to see what was agreed.

This is really business plumbing and ultimately incidental, the point is that delivering a telephone system that allows you to offer great customer service and give your staff the tools they need to work effectively can be achieved more cheaply and efficiently than ever before. Points to remember here, you want to be thinking about VOIP for your phone service and outsourcing phone answering to either a third party company like All Day PA or an automated system to filter your calls can save you time, money and ultimately give your customers a better experience.

9. CMS, CRM, E-Commerce, Email Marketing, Analystics & Reporting

The tool I’m now going to talk about is Business Catalyst. I was reluctant to include this in this list simply because as BC reseller I felt it’s presence might slightly undermine the integrity of the rest of the list. However there was no way I could compile a list like this without mentioning the one tool that above and beyond any other has delivered more savings and efficiencies both in my business, but also in the businesses of so many others with whom I’ve worked. It’s worth explaining that my position as a BC reseller is purely as a product of my evangelical stance towards to product. I didn’t get a job as BC reseller I chose to build business around the product because I feel so strongly about it… I’d do the same with Dropbox if I could think of a business to build around it!

If you’re reading this blog chances are you’re familiar with Business Catalyst, but if you’re not I’ll briefly touch on what it is and how it benefits businesses.

Business Catalyst is an online business platform. What’s an “online businesss” platform? If you’ve not come across this concept before you probably talk about a CMS (content management system). Business Catalyst at its most basic level is a CMS system, but it’s so much more… What BC does is take all the elements that a traditional online business needs to be successful and merge them into one holistic solution. The elements that I’m talking about are CMS, e-commerce, email marketing, CRM, analytics and reporting. Typically a business will run all these systems separately in different environments. By doing it all in one place will save you money, but having these fully integrated can make marketing so much more targeted and accountable. Calculating ROI on email campaigns and affiliate schemes is so much easier and can done “out of the box”. The system also helps to build accurate profiles of your customers because every interaction they have with your website, whether it be completing a form or buying a product is recorded against their CRM record as can every email you have with them. This means any member of staff can pick up that customer and at a glance can see exactly their history with the company.

The benefits of this type of approach will filter through to every part of your business, but what’s also worth highlighting is that having this type of functionality pre-integrated and available “out of the box” means that online development cost can be dramatically reduced. A complex database driven site that might have cost you 40k to develop a couple of years ago can now be achieved using BC for a third of that.

There are other fringe benefits as well, the whole system is hosted, which means you don’t need worry about servers or what to do if they go down. BC is built on an Adobe infrastructure which has multiple backup and disaster recovery processes in place. By using a system like this with thousands of other users means you actually leverage real power. If you’re having a problem the likelihood is thousands of others are probably experiencing the same problem this means in the rare instance there are problems they are resolved very quickly.

10. The 4 Hour Work Week

Lastly this isn’t a tool… it’s a book. The list of products above come from my ongoing pursuit to better optimise and increase efficiency at every level of my business and this is a consequence of the way I look at every process I do. Every time I do anything whether it’s answering an email or coding a page I think… “That wasn’t too difficult, but what if I had to do it a 100 times, or a 1000 times” and if I can’t see a way to do that, I look to refine the way I do that process or task until I could do it 100 or a 1000 times, which then makes that aspect of my business scalable. The problem so many freelancers have is that they run small business that will never be anything but small businesses because they’re built on inefficient processes that can’t scale. The 4 Hour Work Week, by Tim Ferris, really helped me to look at my business and wider business concepts and models in a very different way. He looks to challenge many of our preconceptions about work and business in a way that initially was quite revolutionary to me, but know just seems like total common sense. This book has affected my thought process long after I put it down and I attribute many of the things I’ve got right in my business to the thought processes that Tim Ferris first put in motion with this book. As an Englishman I must confess Tim’s laid back American writing style did put me off in the initial few chapters, but push through because it’s well worth finishing and you’ll come to love Tim because he will change the way you look at your business.

The 4 Hour Work Week is an absolute must-read for any business owner, big or small… and that’s the last in my list. If you have any more suggestions or comment on the tools listed here please pop them in the comments below.

Become a Business Catalyst partner for FREE and SAVE over £60 on paid plans

Fri, 23 Jul 2010 16:22:00 GMT

If you’re a graphic / web designer or agency and looking to use Business Catalyst for a project you will need to become a partner. Using the form below you can do this FREE and save up to £60 on the BC paid plans.

Register to become a FREE BC Partner

If you like the platform and think you’ll use it for more projects it’s probably worth looking at their paid partner plans. These plans give you more in the way of tools to manage multiple accounts and billing it also gives you and your client’s unlimited support, which is not available with the free plan. Even the free plan however does come with good documentation. The premium plan gives you or your agency the opportunity to rebrand the whole platform with your own brand, many agencies prefer this so that they can masquerade the software as a propriety system that they develop in-house enabling them to command a much higher monthly license fee.

When I first started working with Business Catalyst I was turned down by an agency because Business Catalyst was, according to them “too cheap”, they, rather superciliously, informed me that “we only do high-end ecommerce” and when I asked what platform they used they explained that they used a system they wrote themselves. With a team consisting of 2 graphic designers and one PHP developer I struggle to believe that their proprietary system was better than Business Catalyst. The point here is be careful that you don’t undersell Business Catalyst, missing out on a job because your “too cheap” is ludicrous, but people buy confidence and rightly or wrongly many businesses particularly larger firms would almost prefer to pay £3000 a month than £50 a month. I guess you have to remember that whilst you, as a web professional, can look at Business Catalyst and see that it’s an amazing system capable of running some very serious online businesses someone less techy and geeky may struggle to see that, therefore they use the only unit of measure they understand... Price.

For those of you who want to run a more transparent business and simply pass the cost of Business Catalyst on to your clients at cost you must remember that whilst it’s probably one of the most user friendly intuitive systems on the market for a non technical user it will throw up a lot of enquiries and you will very much need to support this software. Therefore you have to make some kind of margin or supply a support package otherwise very quickly it will be costing you to sell this, even just being available at the end of the phone or email ultimately has a very real cost associated with it.

Before you decide what your strategy is going to be you will need to become a Business Catalyst partner. Complete the form at the top of this post and you can do this for FREE!

Build an online Client Account & Invoicing system using Adobe BC and a tiny bit of JS

Sun, 11 Jul 2010 00:54:00 GMT

Learn how to build a secure and automated account section for users to access, review and pay outstanding invoices using “out of the box” Business Catalyst functionality and a tiny bit of custom JavaScript.

Download all the files and code referred to in this post

{module_literature,i,34742,}

Business Catalyst trial account

If you want to try this on BC, set up a free trial account here.

Be imaginative

To get the most out of Business Catalyst it’s important that you understand the limitations of the platform, but crucially it’s important that you grasp the sheer potential of it as well.

In this post I’m going to demonstrate through using the very basic “out of the box” BC functionality with a tiny bit of clever JavaScript and a bit of CSS how you can build an incredibly feature rich and powerful client account area with invoicing and payment built in.

Set up two pages

Once you’ve got an account you will need to set up two pages;

1. Your Account Page

2. Account Information Update Page (use update.html to create a page for the user to manage their own details using the “Customer Update Details form” in the same secure zone section that is detailed below)

NB. Please note this post does assume a certain basic understanding and working knowledge of BC and consequently we don’t cover every minute step of this process.

Once you've set up these two pages you will also need to create a secure zone and add the two pages to it.

The account overview page

Lets start by creating the Accounts page. Create a new page and then use the “Add modules to web page” to access the tags that we’re going to need. We want the tags that sit within the “Secure Zone” Section, these tags are only available to users when they are logged in to a secure area. Here you can personalise the page by outputting personal details like name, email address etc. What we want here is to use the “Display a list of customer orders/purchases”. This will output a list of all items that the user has purchased on your site. Nice for an account section on an ecommerce site, but it has limited use for businesses with a post pay model like a design agency who will do the work and then invoice for it afterwards.

We’re now going to take this and build on the core functionality to turn it into a more flexible system that can be used by a far wider selection of businesses… even for businesses like a Law firm.

The example I am going to use is from our own old site, iShopAdmin (we know; not a great name… and certainly not a great look!) with this site we encouraged our clients to settle their invoices online. When we build a site we start by outputting the markup that we know are going to need as you have done in example above. We then establish what system default markup can’t be changed… with most BC modules you can completely customise the markup, but there are a few examples of pieces of code, like the dynamic menu module, that produces default markup that can’t be changed.

Preview the page, view the source and take the markup that can’t be changed (probably just the menu – I’ll talk about this later in the post). You can then develop the CSS, Markup and JavaScipt locally.

Use JavaScript to indicate if an invoice is paid or not

So here is the account page that I have built (this is a static page – you can download it at the bottom of the post and run it locally, exactly as it’s shown here). You will see the customised areas of the page like name output, email output etc. On the right hand side of the page you will see the “Invoices” this is simply the list view of the “Orders” that are stored against a user’s CRM record. However you can clearly see which have been settled and which have not. This is the clever bit... all orders are output equally in the markup, but using the outstanding value we do a JavaScript check which essentially says “IF the outstanding value is =<0 apply “Green” style ELSE apply “Red” style”. The style also includes the tick or cross. This provides a really easy interface for the user to see what they owe. Download the markup now and see how easy this is to do… Open the “account.hml” in a browser and then go into the source and change the outstanding value of an invoice to either £0 if it has a value or a value over £1 if it doesn’t. Save it and refresh the page in the browser and you’ll see the style change… it’s that clean and that simple.

That’s just the beginning… we can do more than just change colours

We’re going to take this idea and expand it for the detail view of the invoice page (when implementing this code you need to go “more customisations options” and then “customer orders layouts”). Take a look at this page invoice.html we’re now going to do same thing and change the outstanding value, but rather than simply render the page with a red style we’re also going to add in something else. To make it as easy as possible for users we took the opportunity to “shoehorn” in a payment form for the user to settle the invoice there and then. And here it is invoice-unpaid.html, as before all we need to do is change the outstanding value in “invoice.html” to get the page to render with the payment form.

For those of you who are particularly observant you’ll perhaps have noticed that there are no fields to input your address. This is true and actually deliberate… (honestly! – though it’s not without problems which we’ll explain at the end). We wanted it to be as simple as possible to settle the invoice and didn’t want there to be a huge form to fill in, so this is how we got around it; Because you can output the customers address details (to the left of the payment section) we took those values and placed them within hidden form fields, we did this with the invoice number as well and then submitted them with the credit card details. This worked really well… but there was an unforeseen problem which I’ll detail later. Returning to the account page, we used this same method of hidden fields to let users submit enquiries without having to re-input their name and email address, again this worked perfectly, but can obviously only be used in secure zones when the user is logged in.

We made mistakes... :-(

We made a few mistakes with this, which I’ll detail now, but it was our first BC build and through doing it, it massively broadened our expectations of the platform.

1. Outputing the dynamic menus as “default” menu type is not the best option. It tries to create an idiot proof way of managing and creating menus, but in doing so it creates some really rough markup (as you’ll see in the local files). I would suggest outputting “CSS (html only)” this is pretty clean, but still includes a few bits that you can’t change so it’s best to output it before creating your styles so that you save time when it comes to implementing. Using the method above of outputting system markup first and then building your styles around that will render implementation little more than an advanced “cut and paste” exercise.

2. We calculated the JavaScript check on an integer and ignored the decimal component, the implication of doing that is that if the outstanding value is less that 1, but more than 0 i.e 99p (0.99) it renders the invoice green and paid.

3. The payment form with hidden fields… We loved this when we did it… and so did the first half dozen clients, however what we hadn’t focused on was that the whole thing relied on the idea that the credit card was registered to the office address, we had built a section for clients to manage this themselves update.html, but of course this was not the case for many of our clients and trying to explain to them that they needed to go into the update section, change the address to the one which the credit card was registered to and then resubmit the invoice payment form simply wasn’t practical. So we stopped using it, but it did show us how with a bit more forethought you could build a seriously powerful account section which so many businesses could benefit from. Because, as with everything BC, it’s tied in with the CRM and backend completely, you can use the system to automatically email invoices with login details etc. to clients automating what can be a really time consuming task.

4. This point isn’t specific to this tutorial, but it's in the downloaded markup. You’ll see we used sIFR (Scalable Inman Flash Replacement) to display the header fonts. This is quite a popular method of displaying non web safe fonts, but not one that I would suggest. It uses an SWF (flash) to display the font (but the text is in the markup so still indexes) but with this you get a couple of problems. 1. There is a tiny delay on load and 2., more significantly it won’t render on most mobile devices or the iPad. There are now a number of more accessible alternatives, but I’ll detail them in a future post.

Quickbooks integration

For clients using Quickbooks it has the added benefit of being able to sync directly with BC pulling down all the invoices and payment details straight into the accounts.

Download

Below is a local copy of all the files referred to in the post. Because all the JavaScripting is done client side you should be able to just download this and run it locally straight away just by extracting the files.

Feel free to use any part of the code or template. Like I say this is a local copy that I developed before implementing it on to BC. If you want to try implementing it you will need to make quite a few changes. All forms will need to be replaced with new web form id’s and names, same with dynamic menus. Also all hidden fields will need to be added to the markup and for some reason that now escapes me I remember I wasn’t able to display the value of the invoice to be settled as it appears on the payment form, I had to change this to a visible field that was pre-populated with the outstanding value.

I haven’t given you all the answers here, but hopefully enough to get your minds turning and thinking about all the cool things you could achieve with variations on this idea.

Enjoy!

{module_literature,i,34742,}

Business Catalyst trial account

If you want to try this on BC, set up a free trial account here.

If you have any questions or examples of similar work produced on BC just pop them in the comments below.

Future of Web Design, London 2010

Fri, 04 Jun 2010 06:59:00 GMT

Just got back from “The Future of Web Design 2010” courtesy of the boys at Business Catalyst. I must thank Brett and Adam at BC for that, it was a great event and I got to meet a lot of interesting people from the design & dev community. The event also gave me the opportunity to hook up for dinner and beers with Brett and Adam, the founders of Business Catalyst, and some of the UKs leading BC developers. As a relatively new platform it’s not that often I get to discuss the product with people that understand and work with it every day, so it was a good opportunity to share experience and knowledge. It was also good for us to be able to share our experiences “on the ground” with this product with Adam and Brett and for them to let us in on Adobe’s plans for the coming year.

So in this post I’m going to touch on some of the areas that Adobe are looking to improve and what we should expect form Business Catalyst this year. In a separate series of FOWD posts I’ll take a look at some of the emerging technologies that featured at FOWD 2010.

Adobe’s plans for Business Catalyst in 2010

Why has development slowed down?

As a partner who’s worked with BC for a couple of years, I’ve noticed that product development has slowed slightly in recent months. It transpires that this is essentially as a consequence of Adobe, in terms of infrastructure, really getting their house in order and plowing overwhelming resource into that. Business Catalyst is going to become a very significant part of the Adobe suite and therefore before they really significantly market it to the entire global creative and digital community they want to ensure that they have a really solid scalable infrastructure in place to power it. This is now pretty much done with new state of the art data centers opened and ready for business in Europe, North America and one soon to be launched in Asia.

Adobe integration is improving

Development on new features has also slowed as much focus has been on placed on improving integration with Adobe’s existing suite of products.

Two significant improvement in this area are;

1. A much more comprehensive and sophisticated Dreamweaver plug-in for CS4 & CS5 has replaced BC’s Triangle plug-in – Click here to download the latest version.

2. The second and probably more important integration improvement is the implementation of Adobe’s In Context editor with BC. In the past we’ve always had real issues allowing customers to use the built in WYSIWYG editor because any edit they made generated tons of spurious formatting code which then became hardcoded into separate pages all over the site. In Context completely resolves this issue with a really elegant user-friendly editing interface that generates clean code and makes use of existing site styles.

Improved FTP access

Another big recent improvement, which probably doesn’t generate the headlines it should, is the FTP access. In the past access to files was limited to pages and assets like images, CSS, JS etc. However you can now get access to site wide templates, module views etc. This is important for a couple of reasons 1. Site migration is a much much easier task now, but it also allows you to back up module templates. Pages and site wide templates have an automatic archiving and backup facility, but module templates don’t which means you can make a mistake and easily loose a lot of work. This will give you an opportunity to easily store a launch version of all files that you can revert back to.

Features that are launching very soon

Custom URLs for web apps & blogs

Customisable URLs for Web Apps & Blogs this means you can really optimise your URLs for search engines.

Place modules within content holders & other modules

You will be able to render modules within content holders, this is a problem that just about every developer will have encountered at some point, but it’s worth noting that whilst until now you couldn’t place a module within a content holder… you can place a module within a module. Not sure when you might use this? Think of the number of time the ecommerce module simply doesn’t give you enough freedom with it’s 4 custom fields… just use one of those fields to bring in content from a custom web app which then gives you a potentially unlimited number of fields.

Improved DNS

DNS management, again probably not the most glamorous feature, but one we’ve all run into problems with in the past. You can now redelegate your DNS to BC without needing to relinquish almost total control of the domain, with the new tools you can control your A, C, MX records etc.

Two big features coming later in the year

1. Multiple web app views

Multiple web app views, as we are all painfully aware currently we only have 3 standard views. List, List Backup and Detail view, this change will allow you to add many more. However until that happens it’s worth noting that you can overcome this by rendering the same markup of say a list view by either surrounding the item by a different containing div or using a different site wide template. The same thing can be achieved using multiple style sheets and JavaScript.

Take a look at the example below which we worked on a few months a go; we needed an extra view to produce a product spec sheet, but with limited views we had to achieve it through outputing multiple versions of the product images using the BC dynamic image resizing utility into the markup and then use CSS and JS to render the page completely differently depending on the context.

This is the standard product page
http://paviom.com/_webapp_139791/LOFOOT_MAXI_IN-GROUND

This is the same page rendered for the spec sheet using CSS & JS to change the view
http://paviom.com/_webapp_139791/LOFOOT_MAXI_IN-GROUND?print=1.

2. Custom fields to be exposed with new improved API

The other big change is going to be to the elements exposed by the API. Currently there is a good API for the E-commerce and CRM modules, but if you use a custom web app like in the example above it’s difficult and expensive to automatically link it with a third party application because the custom elements are not exposed by the standard API. It is possible to currently get around this… but you effectively need to build your own API on top of BC and use the web form access to the web apps to update them, but with a revised API on the way I wouldn’t suggest investing in this particular solution. For those who can’t get that enthused by talk of API’s it basically means it’s going to remove the cap on the level and type of online businesses that you can run from BC. There have been a number of instances in the last year where I’ve had to build sites on other less sophisticated platforms simply because they were better placed to integrate with the companies existing systems… these API improvements should resolve the need to do that.

Exciting times for BC users & developers

Above are just a list of the headline changes, but with the investment and commitment of Adobe behind this product and the infectious enthusiasm of Adam and Brett I think 2010 / 11 are going to prove exciting and formative years for this already legendary product.

Sandy Beach Launch Site on Adobe BC

Mon, 31 May 2010 22:46:00 GMT

Sandy Beach is an exclusive holiday property resort based in Cyprus. Using Juice Creative to both design and build their promotional website, Sandy Beach chose to use the Adobe Business Catalyst as platform to deliver an easily maintainable combined Web and CRM solution which allows them to keep on top the leads, prospects and marketing for this popular resort.

BusinessCatalystDevelopers.com build flexible long term relationships with it’s Design Partners enabling them to take on as little or as much development as suites them on a per project basis with the knowledge that if they run into problems we’re always at the other end of an email or phone call to help them out.

On this project however, Juice didn't need any help and delivered a great looking site. Good job guys!

Paviom Launch Complex BC Web App

Tue, 01 Jun 2010 23:30:00 GMT

Once again in conjunction with Juice Creative BusinessCatalystDevelopers.com were employed to build a complex catalogue website for Paviom, a supplier of industrial lighting units. This was a really interesting project that pushed the capabilities of Business Catalyst to the limits. On launch we delivered an online catalogue with product configurator that generates a custom PDF spec sheet on the fly. This was created through building on and manipulating the Business Catalyst web app module.

The website was designed to have 2 distinct functions:

1. To be a catalogue and showcase for Paviom’s range of lighting units with a search functionality which allows architects to search for product on a number of different criteria.

2. A site which easily and smoothly makes sense of Paviom’s insanely complex product coding and spec-ing procedure and then output a PDF with the architects required product in a personalised form that can then be included in proposal documents.

Building the main catalogue was in itself not completely straight forward, the catalogue was built using Business Catalyst’s custom Web App module. Each product could have a variety of different image galleries (each with a different number of images) a variety of different files to download and product configurator which generated the complex individual product codes for each product.

The product configurator was designed to look like the specifications that were printed in Paviom’s print catalogue.

As with any project there were a number different ways the project could have been cut, but with the potential number product variations in the thousands it was essential that we came up with the most eloquent solution that would leave Paviom with a manageable system. In the end after a number of prototypes it became evident that using Business Catalysts core functionality alone was not going to be adequate. So using JavaScript we built a JSON file driven product configurator on top of Business Catalyst Web App module. The next problem we encountered was that we needed around six different views of every product; a thumbnail, a tiny thumbnail, product page and then a selection of spec sheets and with BC alone we are only able to currently produce three views, so what we did was to build additional CSS style sheets which combined with JavaScript and controlled using values appended to the URL we were able to render an additional 3 different possible views.

Finally we combined all these adjustments and additions with a piece of PDF generating software to allow users to generate personalised spec sheets on the fly. This software unfortunately needed a dedicated windows server to run and the only way to achieve that within budget was to place it on a cheap US based server which means PDF generation is a little bit slow. It does however still constitute a really useful and elegant solution to what could have easily been a very complex messy build.

Motocaddy Launch Business Catalyst Showcase

Tue, 01 Jun 2010 23:27:00 GMT

Motocaddy, the market leading golf cart manufacturer approached BusinessCatalystDevelopers.com to build and manage an overhaul of their existing online offering. Working with Juice Creative (Motocaddy's design agency) and BlueBridgeOne their Netsuite providers BusinessCatalystDevelopers.com built a dynamic and feature rich web store.

Motocaddy is a young company run by a team of passionate scratch and pro golfers. As an organisation they are completely focused on customer service and build quality and there approach to their online presence was no different.

Juice have worked with Motocaddy over the past couple of years, during which time they've forged a successful relationship, a relationship that Motocaddy was keen to continue online. BusinessCatalystDevelopers.com offered exactly the solution that they needed. It gave them the flexability and consistency of using there own design agency, but at the same time were able to employ the latest web technologies to bring those designs to life using BusinessCatalystDevelopers.com.

BusinessCatalystDevelopers.com worked closely with Juice from the outset to ensure the result was nothing short of awesome. Motocaddy is a very online savvy company with a certain degree of coding skills in-house, it was important that BusinessCatalystDevelopers.com delivered a solution that they could easily administer themselves. So we did exactly that...

We had certain restrictions that we had to work with… Motocaddy runs it’s entire business from accounting to warehousing to purchasing from a platform called Netsuite. Netsuite has a web platform, but whilst functional it’s neither very flexible or manageable, but it is plumbed straight into their accounting and warehousing so we used this to power the web store. The rest of the site however needs to be frequently updated by not only staff at Motocaddy HQ, but staff through out their global network of distributors, for this we used Adobe Business Catalyst.

The platform allows them to manage all of their distributor sites from one central account and give restricted access to all of their distributors. Currently Motocaddy only sells online in the UK, this is essentially so they don’t undercut distributors abroad where pricing is higher. However using Adobe Business Catalyst they now have the potential to sell online in Europe when they’re ready. Adobe Business Catalyst allows them to sell one product in different jurisdictions for not only different currencies, but also different values and this can be automatically achieved using GEO targeting (which they currently use, in conjunction with the multi currency module to only show the local currency on the showcase – ie. If you visit www.motocaddy.com in Spain you get the Spanish price in Euros, but if you visit from the UK you get the UK price in pounds). The multi currency / jurisdiction settings in BC also allow you to process local payments through local payment gateways so that the revenue from the Spanish site will go directly into the bank account of the Spanish distributor – clever eh!

You'll notice that the site is very flash heavy a move that can sometimes be a mistake... however BusinessCatalystDevelopers.com made every effort to overcome the shortcomings of this exciting technology. All the flash content is dynamic, it either runs off XML feeds or flashvars which draw information like prices and descriptions straight from Netsuite or Business Catalyst which means they have total control over their content whether it's written in markup or flash. The other thing which flash often gets a bad name for is SEO and Accessibility. First off it's worth pointing out Google CAN index flash... but only static flash content i.e. content which is embeded in the flash movie, if it's delivered via flashvars or an XML feed it can't... yet!

So to overcome the problems of SEO and Accessibility BusinessCatalystDevelopers.com did a couple of things. Firstly they produced alternative content, this means if someone without flash, which these days is most likely to be someone using a mobile device like an iPhone or ipad hits your site you show them the equivalent content written in plain HTML and CSS. On this occasion we simply displayed an alternative image and then listed the content of the flash movie below the product tour for everyone to see whether they have flash enabled or not, this is a nice transparent way of boosting your SEO content. If you choose to use alternative content ensure that it fairly reflects what's included in the flash movie and what the normal user would see, if you don't google might consider this tactic as spam.

In the past Motocaddy have experienced real issues with speed. This was for a number of reasons;

1. The site was sitting on the Netsuite Data Centre on the west coast of the States and

2. They receive traffic from all over the globe and weren’t able to guarantee delivery speeds.

BusinessCatalystDevelopers.com worked hard to resolve all these issues and the result is a consistently fast site wherever it’s accessed. This was achieved through a whole handful of on-page optimisations, like JavaScript compression, reordering the assets download sequence, reducing server requests by consolidating CSS and JS files and most significantly relocating all website assets. We placed all site assets, images, CSS, JS etc. (both on Business Catalyst and Netsuite) onto a Global Content Delivery Network, this means not only did we increase page load speed (now important for google page rank – Jan ‘10), but guaranteed consistency anywhere in the world because everything bar the core HTML page is delivered from a local server ie. If a user accesses the site from Hong Kong all the heavy bandwidth content like images, flash, CSS and Javascript will be delivered from a server as geographically close to Hong Kong as possible to reduce latency. This worked so well that we now employ this tactic on all new builds.

Motocaddy run the web store (ecommerce) module of their site on a Netsuite hosted platform, Netsuite is a complex system and for best results it's suggested that you use an approved Netsuite provider. So once coded and tested the code was handed to BlueBridgeOne who provide a Netsuite implementation service.