Whilst working on a form for one of our clients, we wanted to create an application form which fitted in with our client’s styles, typography and general look of their website.

Google forms are very easy to use – you just create a blank spreadsheet in Google Docs, and then make it into a form by using a simple wizard, which allows you to add various fields (such as text boxes, checkboxes, multiple choice answers etc.) to your form. Whenever someone completes the form, it instantly populates your Google spreadsheet – invaluable for teams, as everyone can see the data – and it’s instant (did I mention that?).

After you’ve completed your new form, you’ve got a couple of options. You can email it directly to recipients (good for invitations to an event); you can publish it as a webpage and send the URL to recipients; or you can embed it on your website (as an iFrame).

Before...

However, if you embed it on your website, you have to use Google’s styles (which, frankly, look terrible). And some CMSs balk at iFrames. What’s a webdesigner to do? Enter SneakySheep.

Just pop the URL to your form into this form generator and it will spit out all the html you need, which you can then copy/paste onto your website.

Another advantage is that when someone submits the form, you don’t get a Google logo and a recommendation to ‘make your own form’ – you get to choose which page the visitor is redirected to (such as a ‘thank you for your application’ page).

...and after.

If you’re having problems with it generating the code (and you’re getting ‘moved temporarily’ errors), make sure you’re using the right URL. In Google Docs, email the form to yourself, and copy the URL from the email.

Of course, Google might change how they submit forms in the future, and this workaround could stop working, but it’s been working nicely for the last few years…

Check out the Focus 24 Application Form »

We run a number of email campaigns for our clients, from researching and writing the content, through to designing and sending the email,  and then analysing the click rates and improving and tweaking.

Open rates (how many of your subscribers actually open the email) and click rates (how many of them click on your content) are very important – but how do your campaigns compare to other businesses in the same field?

MailChimp publish handy data looking at different business sectors

MailChimp publish aggregated data, looking at more than 570,000,000 emails for 500,000 users. That’s a lot of emails. Open rates vary a fair bit – from 13.7% for politics, to 28.9% for Photo & Video (data from Dec-2010).

But it’s a useful comparison and allows you to compare your campaigns against others in the same field – especially if your open/click rates are very different. If your rates are much lower, you know you’ve got some improving to do – and if they’re much higher, you know that you’re tweaking has been paying off (or that you’re a natural).

What I really liked was their analysis of subject lines – and to how to write a good one. You can, of course, segment your subscriber list, and try out different tactics – perhaps changing the layout of your newsletter, or changing the subject line. But that’s time-consuming, and sometimes you just want to get your newsletter out of the door.

MailChimp reckon: keep it simple, describe the subject of your email, and don’t write your subject line like an advertisement. In fact, keep the subject line really boring. Something to try out next time you’re sending out a campaign…

Updates:

• 11-Apr-11: A post from Vertical Response, discussing typical email open rates. In summary, they reckon an open rate of 15% to 30% is average, and this will fluctuate depending on industry; time of day; month; email design; subject line etc.! One very useful trick we use for our clients is to send out two emails: one to all the subscribers (e.g. 10,000 recipients), and then a targeted follow-up a week later to only the subscribers who clicked or opened the first email. This sends open-rates soaring for the second email.
• 11-May-11: check out this post from Heart Internet, looking at sources of data & research. Not only do the sources consider email clients, but also industry statistics, marketing trends, and some great quotes put together by Google.

Whilst creating an advertising banner for one of our clients, we were required to produce an animated GIF. For me, animated GIFs are synonymous with grainy adverts, washed-out colours and perhaps 5 frames of animation – repeated monotonously in your browser until your brain starts pulsing in-time.

However, I stumbled across this very simple explanation of how to put together an animated GIF in Photoshop (CS3 and above), and a rather nice little animation…

Read the full post over at CreativeTechs.

Check out the Body Browser over at Google Labs. You’ll need a web browser which supports Web GL – I’d recommend grabbing a copy of Google Chrome Canary which will run alongside your current copy of Chrome (if you’re using it) without interfering with it (p.s. hear that Firefox?).

Smashing Magazine have compiled rather a nice round-up of the different services on the market at the moment (as of October 2010). Embedding web fonts is an infinitely more elegant solution than creating an image of your special font. Using images breaks a number of WCAG regulations, and you can’t change the text (unless you upload a new image). So dynamically-updating websites are out. And search engines, like Google, are going to have a hard time knowing (exactly) what you’ve written.

@Font-face face off round-up

It’s still a pain in the backside to embed fonts, as you’ve got to test them on lots of different platforms (different browsers on PC, Mac, Linux, then mobile devices, such as iPad, iPhone, Android etc.). At least with an image you know it’s going to look the same.

But web font services are improving at a double-quick rate. When we built the Brooks Foundation website, one of the criteria was that we had fonts from their branding style – all very understandable. But it had to work on iPhones. And iPads. And on Macs. And PCs. And it couldn’t use images. We settled on sIFR (which uses Flash, but can drop back to Javascript for Apple).

Now there are a whole host of services. Check out the FFFO round-up above (and also Cufon and Font Squirrel).

We’ve started using Font Squirrel’s @font-face generator to embed the typewriter font for the Robur website (which works fine for everything apart from Android, which is a particular gripe of mine – but it doesn’t use Javascript, so keeps everything nice and clean).

Google have now entered the foray, which is exciting news as they will (in most likelihood) keep their service free, and, it all should work nicely.Most importantly, it works on my Android phone.

Updated! 15Feb11: We recommend embedding using the New Bulletproof syntax. Now you can grab your fonts on Font Squirrel, get it to generate some nice code for you, then manually edit the CSS (will only take a few minutes). This now supports everything including Android, so I’m happy.

However, this site will only be viewable on browsers which support HTML5 (i.e. Google Chrome & Mozilla Firefox), which kind of defeats the point as most newbie web surfers will probably be using Internet Explorer {shudder}.

Anyhow, it’s a gorgeous triumph of design, web standards… and it’s quite good at explaining things, too.

Websites have evolved from fairly static entities to dynamic content management systems, often driven by blogs. But there’s still a void between online and offline publishing – often the content is there, but the visuals are lacking (or don’t add to the article). An article over at ATA (A List Apart: Articles: Art Direction and Design) looks at specifically the difference between design & direction.

Perhaps the most valid point is from the New York Times–

“Excessive art direction [is] economically untenable”.

Still, there’s a growing number of web designers looking to combine direction, design & content (such as heartdirected.com) – the question is the trade-off.

What I’d love to find is a cartographic word cloud generator – i.e. one that generates a spatially explicit/referenced word cloud. You occasionally find overpriced prints with maps of the UK with the font size of city names dependent on their population size (although that website did take me to quite an extraordinary find: www.futuremaps.co.uk/futuremaps-wall-maps).

UPDATE! Check out Tagxedo – uploading images, and masking out areas of interest is now a reality. The image below is an image I put together for Blue Ventures (a marine conservation NGO based in Madagascar):