DeepBlueSky Blog

Here at Deep Blue Sky, we've recently had some good experience in the area of producing "smart phone" apps.

Last year we launched an iPhone application for local business MES, whilst this year saw the beta launch of twiDAQ for Mobile.

Both of these could be termed "Mobile Apps" but there are fundemental differences between the two, which whilst obvious to us as developers are less obvious to our clients and business partners.

The 3 types of "app"

The three types of "app" currently available are:

1. Native
2. Web
3. Hybrid

Each of these has it's own advantages and disadvantages and it is vital that you and your business understand the differences in order to ensure you get the best return for your investment.

App Type #1: Native Application

I simple terms, a "Native" application is a downloadable app which is installed and run directly from the phone/device. The Genus Trait Handbook app is an example of a "Native" application.

Native applications are written specifically for the target mobile device's operating system (iOS, Android, Windows OS...etc) and are always in it's own specific coding language (Objective-C, Java...etc).

Each operating system requires the application to be written entirely from scratch in that language. This usually requires there to be a separate body of core application code for each device on which you wish to run the application.

So, for example, say you were developing an app to run on Windows Phone and iOS devices, then you would need one body of code for Windows and another entirely separate body of code for iOS.

As the languages are entirely different, each operating system also requires a developer skilled in that particular language to produce the application. Obviously these two factors can significantly increase development costs.

Advantages:

• fast,
• specifically tailored to operating system
• feels "Native" to the device

Disadvantages:

• more costly to build
• more costly to maintain
• narrow/limited audience
• maintaining multiple "versions" of the application across the various mobile device operating systems is labour intensive

App Type #2: Mobile Web Application

Unlike the "Native" application Mobile Web Applications are not downloadable from traditional app stores such as the Apple App Store or the Android Market. Instead they are more akin to a website which has been specifically developed and highly optimised to look and feel similiar to a native app.

This means - in theory at least - they can be accessed and run by anyone with a suitably modern smartphone no matter which device or operating system they happen to be using. The twiDAQ Mobile application (currently in beta) is an example of a web application.

Mobile Web applications are usually written using "open" web coding languages (HTML, CSS, Javascript) which are the foundation stone of almost every website on the internet. The primary benefit of this is that it means that your developers/agency can build a mobile app utilising the some of the technologies in which they are already proficient. This should help bring the cost down for you and your business.

Another point to consider is monetisation. Mobile Web Apps can't be distributed via the App stores, but if you believe your app provides a sufficiently important service then you could distribute it from behind a paywall. With no middle man, this means you can pocket nigh-on 100% of the profits of your app with no for lengthly approval processes. 

Advantages:

• runs on any device (Blackberry, iPhone, any Android Phone, any Windows...etc)
• single codebase means it's easy to update and maintain
• utilizes "open web" technologies meaning it's less costly to develop

Disadvantages:

• Not quite as slick/polished as a fully native application
• Requires initial web connection - although can be made to run largely offline.
• Can only be distributed via the web - no App Store distribution network.
• Offline storage of data is limited/capped - consider if your app is data intensive

App Type #3: Hybrid Application

A "Hybrid" application is essentially an application which is developed using "open web" technologies and then packaged up into a fully native application. Once packaged this application is essentially fully native and can be downloaded onto the device and also distributed via the various App stores.

As per the "Mobile Web " apprach, Hybrid applications utilize skills in which your developers should already been fluent. Whilst there is a learning curve to understanding the technologies involved in the "packaging process", the ability access all the features of a modern "smart phone" (camera, motion sensors...etc) via a single coding language potentially allows for faster and less costly development.

A major advantage of this approach is that there is one single codebase from which it is - in theory - possible tos produce several "native" versions of your application for:

• iOS
• Android
• Blackberry
• Windows Phone
• WebOS
• Symbian

...which pretty much covers the entire smartphone market!

It's worth considering that this technology is still relatively new, but a vibrant commuinity means that development is proceeding a-pace, with new capabilities being added at every turn.

Advantages:

• Single codebase produces multiple applications - extremely cost effective.
• Takes advantage of open web technologies in which your developer team will be already skilled - cost effective
• Native Application benefits - distribute via app stores, runs on device, has access to all features of device

Disadvantages:

• Perhaps not 100% as slick as a fully native application
• Potential for issues with debugging across various platforms as not writing pure "native" code
  Estimate Ballpark Costs

Final thoughts and recommendations

I you're looking for your app to reach the widest possible audience and also be ready to respond to changes in the mobile web market then either the "Hybrid" or the "Mobile Web Application" are the best options. These will also be the most cost effective in the long term both in terms of initial build cost and overall maintainability.

However, if you're happy to only target a specific device/operating system then perhaps the more polishied experience of a Native application is the best option.

If you're unsure, I would suggest erring on the side of caution and looking at either Hybrid or "Mobile Web Application" approaches.

Of course this is only a basic overview and it's important to recognise that each project needs to be approached on it's own merits and requirements. If you're looking to produce your first app, why not speak to us at Deep Blue Sky today?

Early in 2011, Deep Blue Sky were chosen to design and build an innovative web application powered by data from social networking websites.

twiDAQ is an online stock exchange game where players compete to gain virtual capital and level-up to gain exciting rewards. The game works on many of the same principles as a real stock market, utilising statistics from Twitter to allow people to trade fantasy shares in celebrities, companies, TV shows and more.

Why did twiDAQ choose Deep Blue Sky?

twiDAQ chose to work with Deep Blue Sky specifically due to our experience with the latest web technologies (including HTML and CSS3), our proven design record and our ability to solve any technical problem not matter how challenging. As one of the most complicated website's Deep Blue Sky has ever been required to produce, twiDAQ testifies to the abiilty of our team to solve a range of visual and technical problems to produce a quality end product.

The Technical Challenge

To create the game mechanics, our technical team had to harness data from Twitter, skilfully manipulating it to create a realistic trading environment where trending patterns on Twitter trigger fluctuations in the twiDAQ marketplace. Happily the technical challenge of utilising the power of the social networks to drive twiDAQ came easily to our technical team, who regularly employ social networking tools to aid clients such as Dickies Workwear Ltd and Room for Romance.

All of the data generated by twiDAQ has to be stored and processed by Deep Blue Sky’s web framework Spirit, which is used to run all of our client projects from small businesses to large hotel booking sites. The ability of Spirit to cope with the huge volume of data generated by the game testifies to the platform's capacity to match the demands of any project.

The Design Challenge

The twiDAQ game was previously in live testing for 12 months during which time thousands of excited players signed up, buying and selling over 75 million shares.

Drawing on feedback gained during the trial period, our Design team redesigned the twiDAQ interface from the ground up. A robust design process of wireframes, storyboarding and user research ensured that we were able to produce a design which was no only visually appealing but also incorporated a wealth of exciting new features and enhancements to the gameplay.

Try it for yourself

Having sucessfully launched in early November, twiDAQ is now live and available to play online for free. Simply sign up at twidaq.com. Be warned however, it's extremely addictive!

If you'd like to speak to Deep Blue Sky about creating your online game or application get in touch online or simply call 01225 444674.

Deep Blue Sky work with a range of agencies to provide both design and technical solutions. In 2010 we were approached by a leading Bristol marketing agency to design and produce a promotional website for Wicked Pig, a popular snack brand here in the UK.

The Challenge

Wicked Pig wanted to promote their brand through a viral marketing campaign based on their microsite, Sty TV. As a result, Deep Blue Sky were selected to produce an exciting socially powered competition website where entrants would compete to pull the best "Snout Pout" (gurning face).

The primary challenge was to ensure that the website integrated with social networks in order to ensure widespread engagement from the target audience.

A secondary requirement was to produce a design that was exciting and visually appealing in order to ensure visitor retention and increase engagement.

What we delivered

Building on the current theme of the Sty TV website and following the strict brand guidelines provided by Wicked Pig, our design team created a design concept which was both "on brand" and visually enagaging. This was achieved thanks to a robust design process which included user research, wireframing and mooboarding, thereby ensureing that the final concept exceeded the expectations of our client.

Working alongside this, our technical developers produced the competition framework to complement the design. Building on the power of Deep Blue Sky's own Spirit web framework, the team were able to easily create the full competition mechnic, from user logins and account management to voting and automatic emails.

Socially Powered

A key part of the entire project was integration with social media. Deep Blue Sky's extensive experience with the technical side of Facebook and Twitter ensured that we were able to seemlessly weave social tools into the website to enhance the experience for user and provide greater viral potential for our client.

Thanks to our technical team, users were presented with a steamlined sign up process allowing them to login via previously created Twitter or Facebook accounts. Once authenticated, the website was able to automatically post to social "Walls" and "Streams" during each major interaction with the website, which served to enhance the site's visibility on various social network's.

Want to know more?

Sty TV is just one example of how DeepBlueSky work clients and their agencies to help them realise their marketing goals online. We provide a range of services from design and technical development to digital consultancy and social media integration.

To find out more about how we can help you contact us online or call 01225 444674.

On Monday I gave the following short talk to the AGM of Bath's FSB branch.

My talk covered:

• Choosing who to build your site
• The basics of SEO
• Making sure your site is effective
• Choosing a CMS
• Twitter, Facebook and when to be social
• Measuring - particularly Google Analytics
• Ensuring longevity

Do: ensure your website adapts for a range of devices

With mobile growth expected to outstrip desktop use as soon as next year, it’s fairly safe to predict that the number of people accessing your website via a “device” (smart phone, tablet, television .etc) will expand. You need to ensure your website provides a suitable experience for whoever is accessing your site, wherever they are. However this doesn’t necessarily have to mean an expensive iPhone or Android app…

Recent technical developments in the online space have enabled web agencies to produce a single version of your website which scales up (both in terms of functionality and design) as your visitors’ device capabilities increase. This single site should provide a good experience whether you’re on the latest desktop PC/Mac or the most basic feature phone (and a range of devices in between), ensuring your visitors leave with a good impression of your business.

The extra work required to produce a “responsive” website is likely to cost you a little more, but the long term benefits of having a future-proof, mobile-ready website cannot be overstated.

Do: ensure your website is measurable

So you’ve got a future-proof website, but how will you know if the investment was worth it?

All too often businesses approach a new website build with no idea of how they will measure its success. Ask yourself: “how will I/my business/my boss know that the website is providing value for money?”. Perhaps it’s the number of contact form enquiries, or maybe the number of successful checkouts completed each month. Every business is different, but whatever the metric, modern web design agencies have a wealth of tracking solutions available to help you measure the performance of your website.

Be sure to communicate your goals clearly at the start of the project and ensure your agency is able to provide the data you need.

Do: Engage with your Agency

Modern web design is a complicated craft and your web design agency’s staff will be experts in their chosen field. Therefore in order for your website to be a success you will need to actively engage with your web designers to ensure they understand your requirements and have the resources necessary to complete your project.

In our experience the most successful businesses nominate a single individual within their company to be responsible for the website project. This person liaises with all internal stakeholders and ensures a smooth line of communication with the web design agency and visa versa. The result marries the technical expertise of your web design agency with your knowledge of your business’s customers to produce a great website which really works for your company.

Don’t: build it and leave it to run

Your website represents an on-going opportunity to invest in the growth of your business and enables you to market to a potentially massive audience. However, the web is a fast moving field and a poorly maintained or out-dated website can just as easily have a negative effect on your potential customers. Do not build your website and then leave it to languish.

A responsible agency should encourage their clients to continually invest in moving their website forward, providing them with the tools they require to manage their site and flexible financial solutions to ensure they have the on-going support they require.

Ultimately, regular investment in your website will help you avoid a painfully costly redesign every 2-3 years and instead enable you to focus on producing a relevant marketing platform for your business.

Don’t: do it on the cheap

Your website represents the public face of your company. You wouldn’t buy a cheap suit so why opt for a low cost “off the shelf” solution for your website?

A modern website requires a considerable amount of expertise to produce and so it’s vital you invest in engaging a good agency that will provide a high quality solution for your business, not necessarily the one offering the best “deal”. Remember, a good website will pay for itself whilst a poor website will only reflect badly on you and your business.

Don’t: assume you need social media

I’m sure you’ve heard it said that you must be on Twitter and/or Facebook to survive. After all everyone’s using it and so by not using it you’re missing a trick right? Not necessarily.

Not every business will be suitable for social media. For example if you’re target audience aren’t active on Facebook then employing someone to post the latest company news will consume resources to little or no gain.

Many companies do use social media to successfully engage with their customer base and if used effectively, the benefits can be huge. However, before you jump in head-first, you should assess the relative merits and decide whether the investment will provide value for money.

Deep Blue Sky has been working with twiDAQ to produce a virtual stock market game which will soon be available to play online. Working on many of the same principles as a real stock market, the game utilises statistics from Twitter to allow people to trade fantasy shares in celebrities, companies, TV shows and more.

Managing Director Jim Morrison explains, “twiDAQ adheres very closely to the stock-exchange metaphor, with people trading shares in the most popular Twitter accounts.”

“Players will compete to gain virtual capital and level-up to gain exciting rewards. The most savvy will be able to trade their way to top and beat their friends to be crowned master traders.”

To create the game mechanics, the Deep Blue Sky team harness data from Twitter, skilfully manipulating it to create a realistic trading environment where trending patterns on the social networking site trigger fluctuations in the twiDAQ marketplace.

The technical challenge of utilising the power of the social networks to drive twiDAQ came easily to the team at Deep Blue Sky, who regularly employ social networking tools to aid clients such as Dickies Workwear Ltd and Room for Romance.

The current version of the game was previously in live testing for 12 months during which time thousands of excited players signed up, buying and selling over 75 million shares.

All of the data generated was stored and processed by Deep Blue Sky’s
web framework Spirit, which is used to run all their client projects from small businesses to large hotel booking sites. The huge volume of data managed during the trial period alone, testifies to the platform's ability to match the demands of any project.

Drawing on feedback gained during the trial period, Deep Blue Sky has redesigned the twiDAQ interface. With a track record of producing attractive and user-friendly websites, their designers have worked to incorporate a wealth of exciting new features and further enhancements to the gameplay.

A flexible development process has enabled the agency to efficiently prototype the design, applying their knowledge of the latest web technologies – including HTML5 – to create an exciting interface which marries engaging user experience with visual design to great effect.

Senior Designer, David Smith added, “I think users will be really excited to see the new and innovative elements of gameplay that our design team have introduced to twiDAQ. The new interface really illustrates the power of the new technologies we have available on the web.”

To keep up to date with all the news from Deep Blue Sky you can follow them on Twitter @deepbluetweets or visit www.deepbluesky.com

A young, pioneering digital agency from Bath is continuing to go from strength to strength amidst a competitive market.

Over the past 12 months, innovative web firm Deep Blue Sky has doubled the size of its team and relocated to bigger offices as a result.

The company, formed in November 2008 by Managing Director Jim Morrison, was previously based in a unit at Green Park Station, but following several major contract wins the operation has moved to offices in Beehive Yard to accommodate four new members of staff.

The new space is double the size of their previous unit, and the move has also enabled the company to invest £10,000 in new equipment.

New staff members Zach Dowd, John Hackett and Dan Brandon have joined Jim Morrison, David Smith and Henry Everett as part of a team which has worked with companies including Dickies, American Express and Hewlett Packard.

Jim Morrison says that he puts the success of the business down to an innovative approach to gaining tangible results for businesses in what can be a difficult market place.

“The move to new offices has been a big step for us but we had simply outgrown the offices where I set the business up. It’s definitely an exciting time for Deep Blue Sky – we’re working on some big projects for a really diverse range of clients from national companies down to local businesses.”

“Deep Blue Sky always approaches contracts with a creative and pioneering mentality which has definitely helped to set us apart from the competition. It has certainly contributed to our success over the past 18 months as well as the success of the clients we work with.”

"One major area of focus this year is the extension of our web applications to iPhone, Android and iPad applications and the development of some very interesting new business tools for handheld devices."

In addition to its contracted workload, Deep Blue Sky ensures that time is set apart each week to allow the team to develop new and exciting ideas for the web.

As part its commitment to innovation, last year the company offered a prize of £10,000 worth of web design to the individual who could come up with the most innovative idea. The competition attracted entries from around the world, with the winning idea coming from Canada.

To keep up to date with all the news from Deep Blue Sky you can follow them on Twitter @deepbluetweets or visit www.deepbluesky.com

First up: Individuals.

The meaning and implications of “free” software.

Ubuntu is, in my opinion, already good enough to not have to compete on cost. So it is only a happy coincidence that it does: no license fees or distribution costs spells a cheaper computer, whether it is for yourself or your company. The word free in this context has another connotation though: it is free to use, and free to modify. Modifying Ubuntu and the majority of the software it runs is not just permitted, but encouraged. So if you’re an interested amateur or a professional with free time, you can do what you like with your operating system. If you’re just an end user this might not sound interesting, but the benefit for non-coders is simply that coders will usually share whatever they make in the same way that Linux itself is shared.
The outcome of this is that Ubuntu (and Linux in general) has thousands of applications, great and small, to handle virtually any task. Just a few examples are OpenOffice for your spreadsheets and word documents, Banshee to organise your music into a library and export it onto mp3 players, Firefox and Chrome for powerful, fast, secure browsers, and a lot more beside.

Setting it up, keeping it running:

Configuration is also simple: from the moment you hit “install” you use a functional but very pretty interface that hides everything you don’t need to look at. That’s a pretty broad category, because as you’d expect, it can work most things out by itself. All you need to do is make a few choices of applications to install and name a few users and you’re ready to go. Likewise, after installation, everything is covered: there are utilities for every task from networks to filesystems that let you look after your computer for you, while letting you play around and customise things your own way. Setting up networks, display settings, and all those little things that make your computer more enjoyable to use, can be considered trivial tasks.
There’s a little problem with this, though: this doesn’t “one-up” Windows or OSX on functionality, though: it attains parity, but without the price tag. The real advantages lie in Ubuntu’s package management system. Windows and OSX don’t have the same wealth of free applications, and they definitely don’t have the simple, elegant method of delivery that Ubuntu (and other Linux distributions) do.

Pierce de resistance: software, packages, and what might be thought of as “apps”...

There are several ways to use the package manager: if you’re from the early 90s and want to pretend you’re in a film with Jonny Lee Miller, you can use the command line, but if you’re from the 21st century, there are two main options: the first is synaptic, the second is the Ubuntu Software Center. Both perform the same job: installing things, and making sure that they work when they’re installed. The relatively minor difference is one is a little simpler, but one is a little more versatile.
The Ubuntu Software Center might seem a little familiar to those who have used the App Store for Android or iPhone: it is essentially the same thing, except for your computer. Software is categorised so it is easy to narrow down your search if you don’t know the exact name of an application you’re looking for. It’ll then download install your application and any other dependent applications, with a minimum of fuss and usually zero intervention. In short: if you can use the App Store for your iPhone, you can make the most of this.
Synaptic on the other hand is a little trickier: it works on roughly the same principle but is aimed more at power users and allows you more control over your packages: downgrading, accessing unstable developer packages, and so on. On the whole Synaptic is aimed more at power users and administrators, and provides an interface that balances flexibility with user friendliness.
Whether you use Synaptic or Ubuntu Software Center, your computer will always be updated automatically (though, being a polite operating system, Ubuntu usually asks you first). This keeps your computer secure, as you get security fixes within hours of their release, keeps software stable, as you get bugfixes within hours of release, and means your applications keep getting better, as, you guessed it, you get improvements within hours of release!
So that’s just a few of the many reasons to use Ubuntu: as a developer I find it lets me work in a pleasant environment while also letting me look underneath that nice environment at the beating heart of my system, at whatever level of depth I so choose. In the tech community however, there is a saying. The saying is “tl;dr”, which stands for “too long; didn’t read!”. So here’s the skinny:

• Ubuntu is Free and Open Source, and so has an enormous back-catalog of software to use at no cost.
• Ubuntu offers an experience on par (or superior to, in the author’s opinion!) with Windows and OSX while costing considerably less.
• Ubuntu’s software manager offers a way of finding and installing software that your mother could use.
• Ubuntu keeps your software up to date and keeps your computer secure and fast.

For Businesses!

The user case is covered above, but why should your business run Ubuntu? We’ve already covered the fact it is easily on par with Windows and OSX, the fact it is free, easy, and versatile. What we haven’t talked about yet is just how versatile it is.

Servers

Ubuntu isn’t just a desktop operating system, it can also be used as a server. It can serve your web pages, send your emails, run your databases and perform any other task a server might be asked to do. It is, however, a little harder to write about the distinct advantages of the server of Ubuntu, not because it lacks them, but because Linux server are and have been a standard for a considerable period of time: Ubuntu is one of the newer, shinier contenders in the Linux server arena, but variants such as Debian and RedHat (aka Fedora) and CentOS have been around for years. The majority of the world’s servers run some variant of Linux: any company from Google to your Internet Service Provider at home could be picked as an example, and with endorsements like Google, who needs to think twice?
The particular advantages of Ubuntu for a server are the ability to use applications such as Landscape, which allows for centralised administration of multiple machines, the availability of software (through the package manager described above) and support (one chat room dedicated to Ubuntu regularly has over 1500 users) which are both free and abundant, and the bottom-up configuration of the software itself.

Developers and customisation

This harks back to Free and Open source software again: when the source code for an application is available, that means we can build upon it ourselves. Windows and OSX are both proprietary (while OSX is based upon free software, the majority of the system itself is property of Apple and can’t be modified, which also holds true for the majority of OSX apps) where Linux isn’t.
So let’s say we have the majority of our needs fulfilled by a particular piece of software, but some functionality is lacking. There are a few things we can do:

• We could pay someone to write that software for us, release it into the community, and see if it will grow and be maintained by the community (which it often is).
• We could employ someone permanently to write the software and maintain it, as well as looking after our servers and providing support to the end users.
• We could see if someone else has already written the modification and made it available for everyone to use. The chances are if that’s the case, it can be installed through the package manager we talked about earlier!

This spells control, above all else: a huge outside vendor might not care about your concerns, but a company on a retainer or individual on the payroll has to. That means you get listened to, and it means problems are fixed sooner rather than later.

Security

Ubuntu is easy out of the box, but doesn’t have the same history of being flawed and insecure out of the box as other operating systems. This is a trait of most Linux distributions, but with the benefits which have already discussed, the general agreement is that Ubuntu is ahead of the pack due to its parity of security and advanced user features.

Lower barrier to entry

This is where we mention price. If you’re a small or medium business, you might want to keep your overheads down. Community support, no license fees, and a robust operating system all save money. That's all there is to it.
One thing people reading this might want to save is time, so here’s another brief summary:

• Linux is already the industry standard for servers, and for good reason. Ubuntu is one of many server distributions, but has a reputation for being shiny and pleasant to use.
• Cost: if product X costs £100 and is just as good as product Y, why spend more?
• Secure: you don’t lose your data or your sanity!

The Grand Finale: Governments!

Death and taxes

This might be construed as political. It shouldn’t be, though. Simply put, would you rather your tax money was spent on a license from a private company, or a developer whose work can be in the public domain and whose code contributions can be used by any business, anywhere? This is an investment opportunity that keeps on giving: software written once can reduce costs an infinite number of times, which engenders prosperity in an economy. A license amounts to a tax on computers, and without the need to pay a license, everyone benefits.
An example might be a piece of software (say, accounting software) that for instance, the French government wanted to be translated into French. If it is proprietary, it is a difficult and irritatingly long term process for all involved, but if it is open source, it can yield a real economic benefit, insofar as any French person or company can then use that software. Localisation is, in reality, a pretty trivial issue compared to most things, but the principle stands: functionality created once can be shared forever. Truly, the gift that keeps on giving: instead of replicating efforts, we replicate benefits.

But you forgot Ubuntu!

Settle down, settle down. I’m writing about Ubuntu first and foremost. With Ubuntu we have a large, established project already being carried forward by a huge community and an array of businesses and organisations who are invested in the software. So aside from the inherent power of Linux being customisable, auditable, and secure, it is actually usable by the average politician!

At DeepBlueSky both myself and Dan, our accounts manager, use Ubuntu on our home computers: the days of Linux being for specialists are over. Although that said, I like to think I’m a specialist. But it might be another story for Dan.

Brue Valley Farms approached DeepBlueSky to redesign their outdated website to improve their brand recognition and support their new business objectives in trade and supply.

The Challenge

To compete in such a tough industry, Brue Valley Farms needed to market their "brand" and credentials to consumers and trade buyers respectively.

DeepBlueSky were tasked with producing a website which was aesthetically appealing and "on brand" but was also able to effectively convey information about quality, business credentials and pedigree.

What we delivered

Having carefully studied Brue Valley's target audiences, our web design team produced a simple, yet visually rich design which accurately reflects Brue Valley's desired brand image to both consumers and trade buyers.

Given that both DeepBlueSky and Brue Valley had a history of viral video marketing (see CheddarVision) the use of video to engage an audience was an obvious choice. Through the use of carefully crafted video "shorts" the website delivers and engaging rich media experience which allows Brue Valley to communicate with their consumers in a friendly and light hearted manner.

Similarly, attention to detail in the design of content structure (sitemap, navigation..etc), layout and typography produces a website which is simple to navigate, browse and read. This ensures that Brue Valley's trade buyer audience can quickly and easily access the information they require, all whilst being immersed in the Brue Valley "brand".

Full CMS and Blogging

Brue Valley took advantage of the power of Deep Blue Sky's Spirit Framework development platform to manage their website content and publish their own Blog featuring updates from the farmyard.

Powered exclusively by the Spirit Blog module add-on, the Blog enables Brue Valley to write content, upload photos and manage comments all from a simple easy-to-use interface.

Want to know more?

Brue Valley Farm is yet another example of how DeepBlueSky can use the Spirit Framework to deliver a cost effective website for a small business.

To find out how we can help you call us on 01225 444674.

DeepBlueSky are pleased to announce the relaunch of Room for Romance, a highly sucessful Romantic Hotel Collection website now powered by the Spirit Framework.

The Challenge

Riva Publishing (owners of Room for Romance) came to DeepBlueSky looking for an agency who could provide the level of expertise necessary to support their growing online hotel business.

They also needed to rebuild their entire website on a foundation which was flexible enough to scale to meet a potentially explosive growth in traffic.

All this was to be achieved whilst maintaining and managing a current live website which regualrly received traffic in excess of 100,000 visitors per day.

What we Delivered

DeepBlueSky rebuilt the entire Room for Romance website on the latest version of the Spirit Framework; a development platform that can integrate Content Management, eCommerce, CRM and email marketing.

Our front end design team faithfully reproduced the original visuals of the Room for Romance website, going the extra mile to create a solid styling framework which would enable rapid development of new features.

Similar attention to detail was employed by our web development team, who quickly and effectively optimised the database and improved code performance to ensure the site was more than ready for the demands that future development might throw at it.

Social Media and Marketing Expertise

As experts in social media, DeepBlueSky were well placed to advise Room for Romance on strategies for increasing followers and friends on the emergeing markets of Twitter and Facebook.

Indeed, the launch of the new website in early July 2011 resulted in an 8% increase in people following the Room for Romance social media accounts on bothTwitter and Facebook.

The Spirit Framework's integrated email marketing suite also enables Room for Romance to schedule regular promotional campaigns to send to an automatically updated customer database. DeepBlueSky's understanding of Google Analytics allows us to ensure that campaigns are targeted, effective and show a real return on investment for our client's business.

I take no credit for this genius little bit of code but if you're using git, or the brilliant git-flow here's a few lines to add to your .bash_profile to bring you command-line usage of git to life.

Basically all it does it stick the current branch into your command prompt for you.

spirit@develop $ git flow feature start foo

To get this fired up just add the following four lines to your bash profile.  You can find this in ~/.bash_profile

parse_git_branch() {
      git branch --no-color 2> /dev/null | fgrep '*' | sed 's/* //'
}
export PS1="\W@$(parse_git_branch) $ "

And there you have it.  

Next time you log in you'll have a new command prompt.  To load up the new prompt right away you can use 'source' (Thanks to @zackkitzmiller for showing me this bit).

# source ~/.bash_profile 

Done? Great.  

Credit to @philsturgeon for finding this script.

Blindly approaching a fairly large project like this is a daunting prospect, so I started off cautiously implementing tiny pieces of functionality one at a time. The app's primary function was to display a large amount of data in a structured and easily navigatable way. Around 480 marine species and genera needed to be grouped into categories and filtered by various traits.

My initial inspiration for the app (named MarineLife) was the IMDB iPhone application which has a continuous process flow. When a button is tapped, a new view is pushed onto the Navigation Controller's stack which means you can essentially move through the app forever (or until your device runs out of memory).
I built a prototype of this design, but since the app is focused around the genus details, it didn't give enough focus on the genus itself and made it difficult for the user to understand which part should be the application's 'summit'. This can be explained by providing the iPod application which comes built into iOS as an example. The primary goal of any user using the iPod app is to play music. Everything up to the view in which the user can press 'play' is a path of filtering and sorting until the user finds the song they are looking for. The same methodology was applied to MarineLife. The view that the user aims for is the genus view which displays various pieces of information about that creature. Once a user reaches that view, they reach a dead end; in much the same way as when a user reaches the play button for a song in the iPod app, they can only move backwards through the view stack.

Apple provides a lot of helpful classes and it's amazing how simple it is to implement what seems like fairly complex mechanisms. Functionality such as the addition of the 'more' button on the Tab Bar when there are more than 5 items, is all handled automatically by Apple's TabBarController class. One thing that Apple doesn't provide on iOS is garbage collection, so you have to keep track of every bit of memory you allocate and release it yourself when it's no longer used. Xcode 4 contains an excellent code analysis tool which will attempt to spot memory leaks for you and even overlays arrows above your code to guide you through an object's journey from allocation to release.

The development of MarineLife went by comfortably with only a couple of small hitches that were easily solved by turning to Google. However, after launch, I was tasked with releasing an update which added a glossary function to the genus view.

I developed, tested and released without any problems, but soon afterwards I realised that I had made a pretty large error. iOS heavily caches the Core Data model which is important as it prevents the loss any existing data when an application update is released. Not realising this, I released the update containing the new glossary data which was incompatable with the old data model - causing the app to crash instantly on start up for those who updated from the original. After frantically trawling the documentation and the internet, testing and re-testing, I finally figured out how to tell the application to load a new model version by using lightweight migration (Detailed here).

If you are brand new to iPhone and iPad development, I suggest you read the following books from cover to cover:
Programming in Objective-C 2.0 by Stephen G. Kochan
iPhone Programming – The Big Nerd Ranch Guide by Aaron Hillegass

MarineLife for iPhone and iPad currenly resides on the iTunes AppStore and is free to download. Watch out though - it's a whopping 300mb due to the amount of images it contains.

Deep Blue Sky is approached probably once a week by a new start-up looking to make it in the world.

This has been happening most of my professional career so I thought it would help a few folk to share my philosophy ( and my reasoning ) on how to tackle a big project with lots of unknowns. 

Principally I believe in starting small, on a solid foundation, and building up from there.  

I believe this so much that I've spent years building a whole PHP Framework to allow really rapid prototyping which has become the cornerstone of Deep Blue Sky's business. I also believe in mitigating risk as much as is possible and guessing as little as possible.

So if you have a great idea for a new website here are few things to keep in mind:

• A minimum viable product will be viable
  
  Your customers will engage with your minimum viable product. They won't see what's missing and they won't mind that it's not there. Nothing else should be necessary at stage one and no more resources should be spent adding functionality that isn't strictly necessary.

• Priority is paramount
  
  The client's resources are finite so prioritising how they are used is of paramount importance.
   
• Small steps; engage the users & reduce risk
  
  By focusing on a quick, simple and engaging first phase we mitigate any risk associated with the development of more complex features. When the time comes to move to phase two a canvas of the current users will allow us to establish which new features are really likely to reap rewards. We're not guessing too far into the future and we are training up a strong evangelical user-base who feel involved and valued along the way.
   
• Build a solid foundation
  
  Firstly this relates to software. Creating a clean solid foundation will simplify the process of growing in the future. Knowing roughly where you would like to be building in three years will allow the developer to ensure the foundations extend in that direction at probably no more cost than ignoring the future and yet will be a massive help in three years time.
  
  Secondly this relates to your users. By launching a good, clean, simple product to begin with you create a solid foundation of core users who understand and believe in your product. As you grow they come to believe in your process too.
   
• Concepts that pivot are more likely to succeed.
  
  Statistically start-ups which pivot often (that is; check how they're doing and how they're being used and change direction if necessary) are far more likely to succeed. This has been bourn out recently by the Start-Up Genome Project
   
• Release early, release often
  
  All of the above comes to this. A quick release of minimal features gets a solid foundation built and live in the shortest possible time and provides a clean, simple and clear product foundation on which to build.
  
  By engaging with the users who engage with the site we will be able to learn what functionality is likely to produce a benefit and pivot our wish-list of future features to redefine Phase II, III and so on according not only to cost, timescale and client priority but also to user priority and a good estimate of the efficacy of each feature.

So these are my principals for focusing the minds of new clients who come to us with big ideas and no clear direction.  

For anyone who wonders if I only impose these principles on our clients I could also say I believe in this process so much that I've been building twiDAQ on the same basis. twiDAQ is a very basic, minimum viable product with a great user-base, a massive amount of foundation work done and it is currently pivoting towards a very clear beta release this summer with a much clearer objective than I would have been able to define if I'd tried to do everything at once.  

So as someone now sitting on the client side of the fence I can promise that this little list is a valuable guide to focus the mind.

Some resent research into gameplay for twiDAQ and UI design for Spirit 6 has lead to some great articles that look in some depth at what makes games great and what makes user interfaces effective.

It seems that great game design and great UI design share something really quite interesting in common: mystery & surprise.

Angry Birds, the massive mobile phone game dissected here by Charles Mauro, is riddled with unnecessary quirks, personality and mystery and as the game progresses the new birds revealed to the player have strange and unexpected skills.  This keeps the player engaged within each level and as the game develops.

In Helge Fredheim's great article on UI design and the importance of engaging the user he cite's Google Mail's missing attachment catcher as one of those truly great little bits of functionality that you never know is there until you need it. In a similar way to taking a user from level to level in a game, revealing all the time new and exciting toys, the appearance of this feature in gmail develops the user's experience and engagement with the product in a very positive way.

What's interesting to me is the similarity between good game design and good UI design:

• Development: The constant drip-feed of new, useful features.
   
• Timing: Bringing new features in slowly, at the right time. 
   
• Mystery: Engendering a feeling that there's more to discover.

The reason these rules work for both great user interfaces and games is clear.  

The reveal of features at just the right time gives the user the feeling that the interface or game is responding to them personally.  It builds a bond, however subliminal, between the user and the system and that feeling is positively reinforced, from then on, every time that feature is encountered.

Additionally it creates a sense of mystery - a sense that there are more undiscovered features to be found - and its this aspect thats possibly the most powerful because it creates a sense of reward in the user just for sustained use. Making mundane, every day use rewarding builds an exceptionally strong bond between the user and the system.

I actually started this article to parade a couple of other apps that I thought deserved some recognition for demonstrating just the right amount of features, timing and pleasant surprise that makes them, in my opinion, truly great apps.

I list them here just in case you're not using them already.  I invite you to suggest any I've missed.  

... and wish me luck!  I'm hoping all that I've learned will put twiDAQ on this list one day:

• Xero - simple, unobtrusive interface and not without fault but after 18 months of daily use it still rewards me by solving new problems I might face elegantly.  The Xero teams constant upgrades help no end.
   
• Gmail - obviously already listed by Helge but deserves re-listing.
   
• The new iPhone TweetDeck - took me a while to engage to be honest but every use is revealing a new, beautifully thought-out view of my twitter environment that has made it now my default client on my phone. 

Sometimes you may need want to make a Flash banner clickable without setting variables within the Flash itself. One way of doing this is to position the Flash object within a div and then layer a transparent anchor tag over it using z-index and absolute positiiong to completely cover the Flash.

Whilst this approach appears to work in most browsers, all versions of IE from 6-9 have a major bug - the link becomes unclickable!

The Solution

It's seems that setting a background value to anything other than "transparent" or "none" forces the link to become clickable. However if you want the anchor to remain visually hidden then this is not an acceptable solution.

My fix is to use a 1x1 pix gif and set it as the background-image with background-position values of -1px for both horizontal and vertical. This fixes the bug. Phew!

Really hope this saves someone a lot of time.

Deep Blue Sky was tasked to build a website for SC Global Recruitment.  

SC Global is a UK based multi disciplined organisation that together with its strategic partners provides international recruitment, executive search, training, risk management, security and logistics services.

Last Update: Monday, January 2011

• [v1.2] Fixed: Handling of few goals.
• [v1.1] Fixed: Handling of numbers > 999 (with commas)
• [-] Added: Source of the link for Chrome users...

Google Goal Conversion Values

Google Analytics Goal Conversion analysis is great... but on thing that annoys me slightly is that it only shows conversion as a percentage of clicks.

Personally I'd like to see actual values..

Consider: you send out a mailshot and 480 people click on link A and 76 on link B.

Google Analytics tells you that 3.54% of clicks on A were converted to sales compared to 23.85% of clicks on B.

Personally I think that information isn't immediately valuable... We I'd like to see is that really 17 people were converted from click A and 18 folk from click B.

Browser Bookmarklet: Google Analytic Goal Conversion

So we've built a little bookmarklet to convert the data on the page from percentages to numbers.

• GA Show Values « Bookmark this link! (Updated, v1.1)

Using the bookmarklet is simple.

1. Bookmark the link above and put it somewhere handy...
2. Go to Google Analytics » Traffic Sources » Keywords (as an example)
3. Click on the "Goal Conversion" tab to see Conversions versus Keywords
4. Click the Bookmark!

Chrome Users

For some reason Chrome doesn't like to let you add that bookmark... so here's the source for you to make your bookmarklet with.  Instructions are slightly different therefore for Chrome:

1. Open this page in Chrome
2. Copy the source code below
3. Hit Ctrl+Shift+B to open the Bookmark Manager
4. Select the "Bookmarks Bar" folder, or other folder of your choice, in the left hand panel.
5. Click "Organize" and choose "Add Page..."
6. Give your bookmarklet a name like "Goal Values"
7. Paste the stuff you've copied from below into the "URL" field.
8. ... and you're good to go.  Navigate to a Goal Conversions page and click yuor link... ( Ctrl+B to reveal the Bookmarks Toolbar in Chrome by the way...   or have a look at all the Chrome shortcuts here )

javascript:if ( ( t = document.getElementById('f_table_data') ) && ( t.tagName.toLowerCase() == 'table' ) ){for ( r = 1; r < t.rows.length; r ++ ){ex = [];try {if ( v = parseInt( t.rows[r].cells[2].innerHTML.replace(/,/g, '') ) ) {if ( t.rows[r] ) {for ( c = 3; c <= 7; c ++ ) {if ( t.rows[r].cells[c] ) {pc = t.rows[r].cells[c].innerHTML;if ( pc.indexOf('%') != -1 ){t.rows[r].cells[c].innerHTML = Math.round((parseFloat(pc) / 100) * v);}}}}}} catch (e){alert(e);ex.push(e);}if (ex.length){ alert('Something went wrong.. are you on the Goal Conversion Tab?nnmail opensource@icommunicate.co.uk for help!nnException details follow:nn' + ex ); break; };}if ( !ex ) {if ( ( sc = document.getElementById('f_scorecard_0') ) && ( c = sc.cells ) ) {if ( ( p = c[0].getElementsByTagName('p') ) && ( s = p[0].getElementsByTagName('span') ) ) {v = parseInt( s[0].innerHTML.replace(/,/g, '') );for(x=1;x<=5;x++){if ( ( p = c[x].getElementsByTagName('p') ) && ( s = p[0].getElementsByTagName('span') ) ) {if (( pc = s[0].innerHTML ) && (pc.indexOf('%')!=-1)){s[0].innerHTML = Math.round((parseFloat(pc) / 100) * v);}}}}} else {alert(s.cells);}}} else {alert('No goals to convert? Mail opensource@icommunicate.co.uk for help!');};void(0);;

The Challenge

The nature of Langley’s work means that they work within a market that requires a wealth of due diligence to be carried out. The challenge was to build a site and implement a navigation structure and information architecture that allows multiple audiences with differing needs to access the information they required quickly and easily.

How We Did It

Using the Spirit Development Platform we implemented a fully Content Management System enabled website that allowed Langley Waterproofing to manage Navigation, Content and Downloadable Assets from one easy to use interface.

For Langley good visuals are an important selling tool so we designed and built and slideshow that showcased their most current work and integrated this in the Spirit Asset Management Tool to allow their staff to add new pictures themselves.

Spirit also allows them to provide New Updates and upload new Case Studies going into valuable detail about each aspect of their business.

To find out how Deep Blue Sky can deliver an effective website for your business – whatever your sector or market – call us on 01225 444674.

But who am I?

Building your profile is a simple process that is beyond no-one’s capabilities. Just follow the instructions and bear in mind a few guidelines:

Tell them why they should care
Make sure your Biography is targeted, relevant and will make people want to follow you. Help them see the value in following you.

Show yourself
Put up a picture – people like to know who they’re following. The idea of Twitter is to be personal and human – people will not like following a logo.

Make a name for yourself
Your user name is an extension of your brand so use your company name. Avoid numbers and underscores – these are devices that people simply don’t use on Twitter.

Get personal
Personalize your profile – consider getting a web design company to put something together for you. It won’t be a long (and therefore costly) job and will be money well spent.

Learning to talk like a native

As with any social network there is a new language to learn but don’t worry it’s all simple stuff.

Twitter has 3 core functions:

• You can send a message to a group of people publicly
• You can send a message to a specific person publicly
• You can send a message to a specific person privately

Its core terms are:

• @username – This allows you to send a message to a specific user by typing@ and then their username. The message will be clearly addressed to this person but will be seen by all.
• DM or Direct Message – This allows you to send a message to a particular user that will only be seen by the recipient.
• HashTag – In the same way as using a Meta Tag for a Blog Article you can HashTag a message. This will enable users to search for your article via that HashTag. These are entirely user created – you simply type # and then the Tag you feel is most relevant.
• ReTweet – This is a great was to pass on Tweets that you’ve received you think will appeal to your followers. This is a great way to share useful information or ideas and create goodwill.

Finding your Voice

You should start slowly and find your feet in a new space. Take some time to look at feeds you think are relevant to you. Have a root around for relevant content and if you think something is useful follow it. Reciprocity is a big thing on Twitter so it’s likely they’ll return the favour and follow you.

Tone is important in the messages you send out. Remember, it should be relevant, conversational and have value. Many sceptics will tell you that Twitter is simply a conduit for people to send nonsense and banality into the wider world – in some instances that’s correct – but it doesn’t mean you have to.

Tweeting into the Ether

First off you need to find some people to follow you. The obvious choice are your customers, prospects and suppliers so make sure to tell them you’re on Twitter and why it will be of value. A new initiative is a great reason to talk to your clients so think about some direct marketing, an email out or just ringing around to spread the good news. Make sure you put a link front and centre on your website, on your email footer and print media as well.

Finding followers on Twitter proactively is simple. As I said above find people to follow and they will most likely follow you in return.

Make sure that you have a good balance of people who follow you and people you follow. Following more people than follow you will make it look like there is no value in listening to you so be mindful of that.

Some more rules for you:

• Use Twitter to build valuable relationships and not just to broadcast untargeted information.
• Don’t send un-solicited DM’s or @ Messages – it’s just Spam and won’t be appreciated
• Don’t always talk about your business – talk around the topic as well
• Ask questions and promote responses, feedback and interaction
• Pay as much attention to your critics as you do your advocates – don’t be afraid to engage with them and DO offer solutions. If you do it quickly you will gain or re-engage with a valuable customer

As with any PR or marketing activity it needs to be measurable and there are certain strategies you can you use to achieve this:

• Keep a tally of positive and negative messages – generate easy to use metrics such as a weekly percentage
• Use landing pages to track message response using Google Analytics

A Few Success Stories

Now before I send you on some merry way I’ll impart some inspiration. For a relatively young medium large companies and brands have integrated Twitter into their marketing armoury quickly and effectively:

• Dell use Twitter as a direct marketing channel. By sending out vouchers to their followers they have generated $3 million in sales that they can directly attribute to Twitter.
• Pepsi have used Twitter to “humanize” their brand and engage with customers who would normally be lost to their traditional customer service infrastructure and gained vital feedback and insight.

Go Forth and Tweet

So there we are – Twitter is not just for Stephen Fry it’s for us all. As always, make a plan, decide on your objectives, work out how it can deliver value to your business, implement and commit.

And don’t ever log-in after a few lemonades. It will be funny, but it won’t make you many friends!

Facebook is everywhere: The Shareholders Like This.

From its un-likely beginnings in Mark Zuckerberg’s Harvard Dorm Room Facebook has become a truly global phenomenon.

Since its launch in February 2004 its ubiquity has reached such a level that it boasts over 400 million active users. It has been banned in Iran, Syria, Vietnam and China, and is even used by the Australian justice system to serve the odd court summons!

Why Should I Care?
As small business owner what does this mean to you? If social networking is based on a series of natural human interactions in an online space then how can the money crazed world of commerce hope to get involved and make it work?

There is of course a solution to every problem but we have to be careful. The peer-to-peer referral of a product, service or experience in an online or offline social network has to have belief behind it. People have to believe in your product or service before they’ll spread the word on your behalf. You have to start conversations with your customers and inspire them just enough to have them spread the good news.

To Poke or Not to Poke
The first question you have to ask is whether you should get involved in the first place. From the first bit of research and test marketing you did when you started you’ve been asking these sorts of questions anyway so don’t worry – the answer is written down somewhere.

Is your product or service relevant to the medium? Marketing Equity Release Schemes through Facebook probably won’t work, but marketing a fun new juice bar just might so have a think and ask around. If you don’t think it’ll work for you then don’t go any further – you’ll dilute your brand and waste valuable time and effort.

Keep Your Eyes on the Prize
So what to do now? Do some research into what your competitors are doing and make some judgements about what seems to work and what doesn’t. Ask your friends and customers what they think and what they would find of value. Write it all down and decide what your objectives are going to be. Here are some examples.

• I want to get the world at large to engage with my brand or business
• I want to use Facebook to stay connected with my existing customers
• I want to use Facebook to engage with potential customers and keep in touch with them until they have a need for my product or service
• I want to use Facebook to improve the chances of my website being found through organic search

This isn’t an exhaustive list by any means but the point is to have an objective in mind and skew all of your actions towards it. If you are not mindful of your ultimate goal and if you do not have a strategy you won’t have the impact you want.

Start at the Beginning
Let’s assume that you’ve done your homework, decided on an objective and are good to go – what do you do now?

First of all you need to build your page. It’s a simple process so I won’t go into the details here – just suck it and see. But you do need to bear in mind a few points.
Do you want to make your group public?

The answer to this may seem an obvious and resounding no but think about it for a second. If you want your Facebook page to be an exclusive space for your committed customers (Friends or Fans) then keeping the group private is an obvious way to promote a feeling of exclusivity.

Let the people in

An easy way to create loyalty and “buy in” is to give a little away. Use your status updates to tell people what’s going on in the office and don’t be afraid to make it completely un-commercial. Share your thoughts about whatever you like but make sure it’s relevant and not at all banal. Think about putting some informal pictures in your Photo Albums – a few snaps of the office Christmas party perhaps? Or maybe some pictures of the boss doing a marathon for charity. Keep in mind that you are looking to engage with people on a human level so keep the conversation informal and give away the odd secret occasionally.

Make Your Friends feel Special
Your followers should have an incentive to be a Fan of your business so give it to them. Think about giving them first refusal on a new product, or releasing a product to them a week before the rest of the world. Give your Fans and Friends a discount or offer specific to them or invite them to a “Friends Only” Event. Again, give a little away and you’ll get it back. And remember, don’t message them exhaustively, Spam is still Spam regardless of where you receive it.

Be Committed
As with any kind of Social Media and Online PR you have to stay committed to build your audience and user base. Don’t rely on employee goodwill to ensure your page is updated; put it in someone’s job description and make sure they are logged in all day. Think about how a customer will feel if you respond to their message, wall post or comment quicker than a flash. You’ll build a relationship with them and word will spread.

Spread the Love but not too Far
A common mistake is to add everyone you ever come across as a friend. Be careful here as Facebook will know, and they will take action. Try and push people towards becoming a Fan or a Friend and let them jump the last hurdle themselves. Start off with your existing customers and suppliers and you’ll pick up more friends as you go. And don’t ignore a cardinal rule of online PR – just because it’s there the people won’t necessarily find it so make sure you shout about the fact you have a Facebook page. Mention it in your Offline PR and Marketing and tell your customers every chance you get.

The Bottom Line Likes This
That should give you enough to get started so go and graze your knees. Mistakes will be made but just be mindful of a few basic principles and you won’t go far wrong. See? Facebook isn’t just about stalking your ex’s is it?

If used effectively Twitter can become a great way to connect with your customers in a dynamic and real time environment. It is the web as a true leveller where opinions, ideas, thoughts and feelings can be shared, commented upon, aggregated and shared again in minutes.

My customers don't Tweet?
Twitter is the 3rd most used social network in the world. In old school marketing terms its base value can be found in the demographics of its users – a whopping 61.3% of its user base (by traffic on its site) are between 25 and 49. Why’s this important? Because they’ve got money that’s why and in B2B ter

What's the point? What is it really?
According to their site Twitter enables people to answer the question “What are you doing?” in real time and share that with as many people as who are interested in the answer. It is essentially an “evolution of mobile messaging”, a chat room made global or a universal micro blogging tool, depending on who you ask.

So why would you want to get involved?
In simple terms the business specific uses are endless and there is an unique opportunity to take a tool with a very broad base and focus it on the needs of your business and your customers.

A quick example:

Big Bites Sandwiches are based in a city centre crowded with competition and have trouble standing out from the crowd. They don’t get telephone orders because people are busy doing their jobs and feel that buying decisions are made due to proximity and convenience and not quality or service. They decide to use Twitter to take lunch orders and broadcast daily specials and deals quickly to their followers. Result: the buying decision is made on an informed basis and people become more willing to go a little out of their way for a great lunch and a good service. The consumer wins and so does the business.

It can help you:

• Promote your brand, service or product
• Interact with your customers and prospects
• Learn from open and honest feedback and new ideas
• Create a loyal following of brand advocates
• Help your customers solve problems
• Relate to your customer and prospect base

So where do you start?
As ever, you start with planning and research. Think hard about what you want to achieve through Twitter; ensure these objectives are directly related to your wider business and marketing strategy. Ask yourself some searching questions:

• Do I want to build my customer base?
• Do I want to publicize new products and services?
• Do I want to build my brand or businesses profile?
• Do I want to gain market intelligence about the attitudes, behaviours, needs and wants of my potential market?
• Do I want to establish myself as a thought leader?

Then think about what you can achieve specific to your business:

• If you’re a Recruiter you can Tweet out new jobs – this can appeal to “passive” job hunters who need opportunities pushed towards them.
• If you’re an Hotelier you can Tweet out last minute deals or ideas about what to do when your guests arrive.
• If you’re a Publican or Club Owner you can Tweet out promotions and offers to sway people potential customers making last minute plans.
• If you sell online you can Tweet out voucher codes and drive customers to specific offer URL’s.

As with any business decision work out what people will want from you and then give it to them. Make it relevant, targeted, valuable and exclusive.

A Cliff Hanger

So now we know what Twitter is and a little about the value that it can have for your business. Next week we're going to look at how to get started.

We're massively excited to announce that findmebyip.com - our HTML5 and CSS3 browser support website has been reproduced in full glossy print as the cover gift for this month's .net Magazine.

Modernizr 1.6

We've also been tirelessly updating findmebyip.com over recent weeks and the first of these updates is now live - Modernizr 1.6.  That means we've added:

• Text-Shadow
• Touch Support
• Inline SVG
• Web GL
• Flex Box

.. to our browse support tests.

Modernizr - Extra Tests

We're also toying with adding some of the additional test that Paul's added to the Modernizr wiki so you should see a few more tests arriving over the coming weeks.  If there are any you'd particularly like to see cast your vote in the comments.

Has.js

Possibly even more exciting for those of you on the techie side of the web developement is the 'alpha' addition of has.js.  Think of has.js as a bit like Modernizr but adding test for things like native bind(), native object and array manipulation and a load of tests for common bugs.  (Thanks to badassjs for spotting this)

We're showing the has.js test suite of test on the front page of fmbip.com from today so you can run these tests for yourself by visiting the site here and we'll be releasing a full litmus page as soon as we're comfortable with the accuracy of our results. 

Grab yourself a poster!

So if you'd like the full spread of latest HTML5 & CSS3 test results to stick up on your wall then all you need to do is get down to your local newsagent and grab yourselves a copy of this month's .net magazine or, if you're not in the UK why not grab a copy on-line?

Edge Financial Forecasting approached DeepBlueSky to design and produce a clean and professional website to help promote their growing business.

Content Challenges

The principle challenge presented by this project for Deep Blue Sky was to produce a site which could accommodate the wide range of content required by Edge without causing the visitor to become overloaded.

Working to a set of clear branding preferences our team collaborated with the business owner to create a bespoke design which not only conveys the core message behind of the Edge brand but also presents content in an organised and digestible format.

Full CMS and Blogging

As a growing business Edge FF took advantage of the power of Deep Blue Sky's web framework Spirit, to publish their own financial forecasting Blog and drive traffic to their new website.

Powered exclusively by the Spirit Blog module add on, the Blog enables Edge's owner to write content, upload photos and manage comments all from a simple easy-to-use interface. Social bookmarking and RSS feeds are included to help spread the word and drive traffic to the new website.

Want to know more?

Edge Financial Forecasting is yet another example of how we can use Spirit Framework to deliver a cost effective website that delivers exactly to the business objectives of a small business.

To find out how we can help your business call us on 01225 444674.

Deep Blue Sky are currently looking for two new team members, one technical and one less so.

Deep Blue Sky is a small but successful and growing Digital Agency and we offer some great benefits to our team such as:

• A Generous Pension
  We will match your pension contributions up to 5% of your total salary because we believe in looking after your future.
   
• WPA Health Care
  We will also provide you WPA health care.
   
• Free Fridays
  We aim to set aside all day Friday for blogging, research and developing our exciting internal projects which we, as a team, define.  Awarding Ideas, the winning idea itself (currently in production) and findmebyip.com are just a few examples of Friday's output.

Current Roles

• Account & Project Manager
• PHP / LAMP Developer

How to apply

If you are interested in applying for either of these positions please send your CV and a covering letter explaining why you would like to join the team tono.agencies@deepbluesky.com!

So you've seen all the hype around HTML5 video and you like the sound of native video without plugins on your own site. But where do you start? How do you get it all working?

Converting Video to "HTML5" Video

First off you need to convert (encode) your source video file into the formats supported by current browsers. Simple right? Wrong.

As of today (October 2010) each browser supports different set of video codecs which means we need to encode the same file multiple times for each Video (hint: check out findmebyip.com for the most up to date information).

The multimedia codecs we're concerned with are:

• Ogg Theora - Firefox & Opera
• H.264 - Safari, Chrome and - potentially - IE9
• webM - Opera, Chrome, Firefox and potentially IE9

We also need to convert to Flash to provide a fall back for older browsers.

Converting Video Files to "HTML5" formats

The best tool I've found for converting video files to "HTML5" formats is the Miro Video Converter produced by the team over at Miro (the "amazing open-source, non-profit video player").

Miro's desktop interface allows you to drag and drop files and then quickly convert them to all the formats we need (minus Flash). Simply process your source file to the other formats and your done.

Display the Video on your site

To get the video working on your site you'll need bullet-proof HTML markup to ensure maximum compatibility. Never fear however, as there are variety of tools out there that allow you to generate this quickly and easily.

Personally I recommend VideoJS which offers an Embed Code Builder which utilizes the javascript independent "Video for Everybody" synxtax to quickly create the markup you'll require for your video tag.

However, as the name implies, VideoJS also offers a javascript library which enables you to quickly and easily skin your player to mirror YouTube, Vimeo and other popular services. Nice.

Simply follow the instructions on the site, provide the correct paths to the video files we created earlier (don't forget the Flash!) and drop the whole lot into your site. It should all work, if not then read the docs and recheck your video files for errrors.

Caveat - don't try this at home kids

Obviously this tutorial is a quick guide and as such is an oversimplification of what is a complicated and wide ranging topic.

Therefore, I strongly recommend that you familiarise yourself with the topic of native video before you attempt to add it to your website.

For futher reading why not check out the Video chapter from http://introducinghtml5.com/ by Bruce Lawson and Remy Sharp?

Happy encoding!

Many businesses focus their on-line strategy on generating new customers while ignoring that building a revenue stream from repeat business is often stronger and easier to do. Many businesses can take around half their revenue from repeat customers. If most of your customers are new then there is a good chance you're missing a golden opportunity.

In this article we'll be looking at a few simple methods to turn your customers into either repeat customers or generators of business. We'll look at a few different business models and how they can all achieve the same goal.

This week's Goal

Our goal here is simple;

"Three months from now I will generate 20% of my revenue from repeat business."

Like all our goals they should follow a quick SMART test; simple, measurable, achievable, relevant and timed. Check.

Communication is key

The simplest tool to use here is email so we'll use email to build up a dialogue with your customers and be open and honest about what you're asking them for; repeat business or a recommendation.

The method you use will depend on your business model so here are a few examples to have a think about:

• E-Commerce / On-Line Shop
  
  If you're running an on-line shop then by the time a consumer's received their goods the chances are you've already emailed them a couple of times. Once to say their order was received and again to say it was shipped. All too often though that's when the conversation dries up - just before the point of satisfaction.
  
  So send one more message a few days after the goods were received and ask the consumer whether they are satisfied with their purchase. Make sure you're prepared for any negative feedback and never allow yourself to take it personally if it comes; focus your energy on fixing the problem instead.
   
• Hotels, Restaurants, Theatres & Shows
  
  If you're website is only the beginning of the relationship and your customers then come to you then have a think about when is a convenient moment for your customer to provide their email address without being awkward. And be honest.
  
  Why do you want to communicate with them? To gain their repeat custom. So what might you offer in return? A discount, early or priority booking, the best tables or the best seats?
  
  Find something in which your customers will perceive some value and reward them with that as a thank you for allowing you to communicate with them in a way that's convenient for you.
   
• Professional Services
  
  You might think that one-off service providers would be excluded from this challenge because customers are not likely to generate repeat business but that's actually very seldom the case.
  
  First ask yourself; do you really only supply one product or service? Next ask yourself; do I make every effort to ask for referrals from my clients.
  
  The answer to the first question is invariably 'no' because almost all business sell slightly different products or services to each customer and so consider that each customer has only seen one side of what you have to offer; introduce them to some of your other services.
  
  And as regards question two; referrals are almost as good as repeat business. So if you truly believe you can't possible sell a certain customer anything else then ask for a referral or two. If you don't want to ask up-front then ask for feedback on your service. If the feedback's positive ask them if they would consider referring you. If it's negative then make steps to rectify the problems and, having done so, ask them if your corrections have impressed them enough to justify that referral. Just don't be afraid to ask if you think you deserve it.

A simple, honest email...

The method for generating this repeat business will differ therefore depending on how you interact with your customers. At one end of the scale (e-commerce) you're trying to put a face to an otherwise automated on-line transaction. At the other end of the scale (professional services) a far more personal conversation needs to be had with your customer.

In all cases though try to manage the process as much as is practicable. Prepare an email that can go out to your customers asking for feedback, introducing other products or services, or introducing the idea of a referral.

Speak to your web team about automating the process; for e-commerce sites this should be trivial and for sites where the sale takes place off-line but where the initial enquiry came from the website have your web developers build a link into the enquiry email that you receive on day one that you can click a few weeks later to trigger the email to the customer. File these emails somewhere safe.

Where possible lead the reader back to the website and make sure your tracking responses statistically - Google Analytics is the easiest for this.

Measure your success

Finally, make sure that you're measuring where your revenue comes from! Again, to take e-commerce as a simple example, you can use Google Analytics to track the source (including email) of all your revenue down to the penny. Make absolutely sure this is in place and set up an "Advanced Segment" for repeat business so you can track it easily.

If your business is a little more off-line then make sure your recording source somewhere; it doesn't have to be complicated but you can't improve what you don't understand - and if you're not measuring it you're not understanding it as much as you'd like to think you are!

Achieving 20%

20% of your revenue from repeat customers is perfectly achievable - whatever your business model - so long as you start today. And in three months time you can look to increase it further, of course.

Repeat business provides stability and predictability and its usually far cheaper to generate than it is to go out and get new business of the same value. What's more it grows. Happy customers can sell your business just as well as your sales team.

So remember:

"Three months from now I will generate 20% of my revenue from repeat business."

... and then you can stop obsessing over Google.

Recently I was having trouble with a few lines of javascript in which I used the setTimeOut method to defer the running of a function called goToLocation. Here's the code:

var t = setTimeout(goToLocation('/download/'),2000);

In Firefox everything appears to be fine and the code executes as expected. However, IE will throw an error "Invalid argument". For once this is a good thing...

Why the error?

Whilst it would be easy to blame this on Internet Explorer, in fact the reason for this error is that we're using the setTimeOut() method incorrectly.

According to a well respected reference setTimeOut expects either:

1. A "script expression" - either a line of code as a string or an actual function (eg: myFunction() ).
2. A reference to a function - ie: a function name without the parenthesis

In the example above we're trying to call the function goToLocation() and also pass one argument to the function. The issue is with the way we're passing the arguments.

The problem with arguments

According to various references, trying to pass arguments in the first parameter of setTimeOut() is not valid. The method won't be able to interpret the function call and will throw an error.

In fact, officially setTimeOut() accepts 3 parameters:

1. A function expression or reference (as above)
2. An interval in milliseconds
3. A set of arguments to pass to the function defined in parameter #1

Knowing this then we should be able to rewrite our code thus:

var t = setTimeout(goToLocation,2000, '/download/');

However, this syntax is not supported by explorer and will fail. 

Solution - Fixing the Internet Explorer Error

So how do we get the code working?

It seems there is a simple, elegant solution to this problem. Simply wrap your function call in an anonymous function and everything will work as expected.

Therefore my code from the previous example now becomes:

var t = setTimeout(function() {goToLocation('/download/')},2000);

Hope this helps someone and let me know if there's a way I can improve my code.

It's easy to become obsessed with getting your business to the top of Google. But if you are then you're missing the point; getting to the top of Google is a means to an end, it is not the end itself.

In this series we're going to go back to basics and look at those things you really should be concentrating on to drive your business forward, on-line and off-line. We'll provide you with practical advice on how to set goals and how to achieve them.

By the end of the series you should have a better understanding of where you're really trying to get your business and how you're going to go about doing it. You'll discover that success in the on-line world is no different than success anywhere else and that all it requires is a little focus, strategy and understanding.

Using the internet to make your business a success is straight forward enough so long as you stop obsessing over Google.

Simple Advice, Smart Goals

In each article we're going to look at how to set yourself a goal to make sure you're using what you've learned to move your business forward.

Our goals all follow the SMART principal. That is to say that they should all be Simple, Measurable, Attainable, Relevant and Timed.

In the series; 5 cornerstones of success

• You don't need new business...
  
  All too often on-line strategies and websites are focused on new-business to the detriment of existing customers. Don't lose sight of the fact that current customers are often your best source of revenue and your strongest ambassadors at driving the new business you crave.
  
  In our first article we'll look at how to ensure you're making the most of your most valuable relationships and we'll discover that by taking care of the customers you have already those customers will want take care of you.
  
  Read: You don't need new business...
   
• Listen to the man on the street, not your boss...
  
  It's a very common mistake that the design and execution of a website is driven by the person paying the bill. But does your boss, or your client, have the most objective view or are you allowing their subjective and emotional attachment skew the project away from the people you're really trying to engage?
  
  In our second article we look at objectivity and approach. We show you how to use empathy and a staged development lifecycle to save time and money and deliver and effective result.
   
• You can't fix what you don't understand...
  
  If you're not measuring your website how will you know which changes were good and which were bad? How can you tell what traffic brings you business and what doesn't? Measuring your website's performance is far more simple than you may think and it's absolutely key to your success.
  
  In our third article we touch on the basics of website tracking - enough to get your measuring the important things - and we'll point you at a few more in-depth subjects to whet your appetite.
   
• Engage your channel at both ends...
  
  Everyone operates in a channel - that is you have suppliers and consumers. Many of us spend all our time looking one way - towards our consumers - and miss some golden opportunities to leverage strong relationships with suppliers.
  
  Our fourth article looks at identifying some simple ways to engage your channel and we'll touch on a concept called "circulation"; turning customers into suppliers.
   

• Stop working and socialise...

  Finally a look at how to have fun. If you approach social media from a "We need to be seen to be Twittering" angle and you're doomed to fail. Likewise ignore social media at your peril. Your customers and your peers are out there whether you like it or not and they're already talking about you and probably try to talk to you. Take your head out of the sand and go and engage!
  
  In our fifth article we look at how to engage. We'll show you a simple strategy for Twitter and Facebook that really works, for all the right reasons. We'll show you how powerful a medium social media can be and how simple it is to get right.

Coming soon...

The articles in this series will be published each week in during October 2010 so be sure to grab the RSS feed or follow us on Twitter if you don't want to miss them.

If you use the Google Analytics software package you may have noticed that they've recently launched a new version of the tracking code which uses asynchronous JavaScript to improve the performance and accuracy of the data collected.

As with any change however, there is a small amount of pain involved. In this case the pain is that Google has asked developers to conform to new code requirements and an alteration of the syntax required to get Analytics running on a web page.

Whilst these changes are relatively simple and well documented, I've decided to write a mini-guide to help you upgrade the various parts of your Analytics installation to run with the new code.

Step #1 - Remove the old Analytics Snippet and insert the new code

First you need to completely remove the old Tracking Snippet (the bit that causes Analytics to start tracking data on your website) from your website.

• Find the old snippet (usually the last item before the closing body tag)
• Make a note of the "Web Property ID"
• Delete the code from your markup.

Insert the New Anaylitcs Snippet

• Copy the new tracking snippet from Google's docs
• Replace "UA-XXXXX-X" with your own "Web Property ID"
• Paste as the last item before the closing HEAD tag in your web page.

It's worth noting that to help improve page rendering times, Google previously  recommended placing the traditional tracking snippet as the last item before the closing BODY tag on your page. However, as the new code is asynchronous we no longer need to worry about this.

Therefore, Google now suggests you insert the new code at the bottom of the <head> section of your web page.

Step #2  - upgrading your "_trackPageView" goal tracking code

For those of you using "_trackPageView" to track goal data for items that don't generate pageviews you'll also need to update your code.

Luckily that's relatively easy as it's fairly similar and is certainly recognisable.

After you've sucessfully completed Step #1 and verified everything is working, all you need to go is change the code from:

onClick="javascript: pageTracker._trackPageview('/goal/brochure-download');"

to

onClick="_gaq.push(['_trackPageview', '/goal/brochure-download']);"

Simple really.

I hope this makes someone's life a little easier. If you need more detailed information I suggest Google's extensive documentation.

Anyone with a beedie eye will have noticed a conflict between the fmbip.com/litmus tests for Microsoft's new IE9 Beta and the results you get if you actually test the browser yourself. This is because one result has been doctored following a request from the IE9 team to correct, or so I thought, a bug in Modernizr.

After reading a listening to some experts in the field of HTML5 testing and doing a lot of digging and reading of the W3C specifications for HTML5 <video>, the RFC specification for codecs defenition and reading Microsoft's examples of testing I've come to the conclusion that this is a bug in the IE9-beta's parsing of the codec defenition.

For the moment I don't know, entirely, whether this assumption is correct?

HTML5 Video Testing

Because HTML5 supports lots of different audio and video compression systems and because these can be delivered in different 'wrappers' defined by different MIME Types you have to ask the browser or device your user is using whether or not it thinks it can support the format combinations you have available.

This can be done using the type attribute of the <video> tag or, in these examples, the canPlayType() method of the same video object the tag represents... like so.

// The test for H.264 Video (including AAC audio) // Returns 'probably'
document.createElement("video").canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
                          ^                      ^                   ^           ^
                          |                      |                   |           |
                          /                      |                   |           |
The <video> element                      
        The MIME Type, wrapping video & audio                  
                               The specifier for baseline H.264 video          
                                       The specifier for low-complexity AAC audio

Bug? IE9 or Modernizr?

In this test we're asking the browser whether it can support H.264 video and AAC audio wrapped up in an MPEG-4 container, which IE9 correctly answers "probably" (as good an answer as HTML5 will give you).

The problem lies in testing for the H.264 component without the AAC audio track. If you ask simply whether it supports the H.264 without AAC audio the response is no.

// The test for H.264 Video (without AAC audio) // Returns '' (false)
document.createElement("video").canPlayType('video/mp4; codecs="avc1.42E01E"');
                          ^                      ^                   ^     ^
                          |                      |                   |     |
                          /                      |                   |     |
The <video> element                       
        The MIME Type, wrapping video & audio                    
                               The specifier for baseline H.264 video    
                                               NB; no audio codec specified... 

Because Modernizr is only interested in the video element (at the moment it runs this specific test) it only tests for the video codec... which gives a false negative result. But is this a problem with the way Modernizr asks the question or the way IE9 responds?

Getting a better response from IE9

It is possible to get IE9 to provide a better reponse ('maybe') to the question do you support H.264 video in isolation:

// The test for H.264 Video (without AAC audio) // Returns 'maybe'
document.createElement("video").canPlayType('video/mp4; codecs*="avc1.42E01E"');
                          ^                      ^            ^
                          |                      |            |
                          /                      |            |
The <video> element                        
        The MIME Type, wrapping video & audio                   
                                          NB: The "*" (asterisk)

Feature or Bug?

The question are:

1. does IE9 support H.264 video without an audio component?
2. what is this the right way to ask?

According to RFC4281 which defines how these MIME and codec blocks should be compiled the codec parameter must be

"A single value, or a comma-separated list of values identifying the codec(s) indicated to render the content in the body part."

So from reading this I think the problem lies in the way IE9 parses the codec and not the way Modernizr asks the question but I would be very interested to learn whether that rather wild assumption is right?

The * case

Yes, there is this test that works: codecs*="avc1.42E01E".

Reading the very small portion of text about this in the RFC4281 I'm not really left feeling like I fully understand why this works and the other test doesn't.

I read the clause to be suggesting that including the asterisk is a method for specifying that you're encoding your codec defenitions... I don't read it to be some sort of wild card as the 'maybe' result IE9 returns would suggest.

Wrapping Up - Questions to be answered.

The bottom line is I'm not sure whether the issue lies with Modernizr or IE9.

• Are the Modernizr & html5test.com correct?
  In all the specification examples I can find H.264 is always defined as a pair of audio & video. So is it a legitimate to test for a video codec in isolation?... and is it legitimate to ask for this specific video codec in isolation?
• Does IE9 treat the asterisk properly?
  Why does IE9 return 'maybe' for codecs*="avc1.42E01E" and '' (false) for codecs="avc1.42E01E"? Is this a bug in IE9 or have I misread the RFC?

Until we get a conclusive answer from someone who knows more about this than I do fmbip.com will, I'm afraid, continue to give what appears to be the wrong answer to the question; does IE9 support H.264 video.

Next week will see the release if Internet Explorer 9.  But despite the invitable fanfare from the massive PR machine at Microsoft does this new release really represent something groundbreaking or is it too-little, too-late?  We're going to explore what's new in IE9 to see what's really on the horizon.

Where is the web going?

As Internet Explorer loses browser-market share developers and designers have been bolstered by the emerging big-player's desire to bring forth standardisation.  This approach is necessary because what the internet is, in essence, is moving so dramatically from the collection of static text that it was fifteen years ago to the fluid conversation of content, images, video and audio that it is today.

What's more dramatic perhaps is that it has escaped the confines of the conventional browser.  Content is now created and consumed on devices like mobiles and TVs through bespoke apps that are not confined to an HTML environment. 

What new features are important?

For a year now we've been plotting the progress of HTML5 and CSS3 development and standardisation.  We've broken these new features down into a couple of slightly arbitrary sections:

• CSS3 - Browser capabilities that allow designers to describe design more simply.
• Embedded Content - Audio & video content and in-browser drawing.
• Web Applications - New tools for complex services like on-line mail.
• Forms - New models for accepting user input in an organised, accessible way.

Eye on the prize...

What is so sad about the new IE9 release is that Microsoft have, it seems, concentrated most of their effort on two things:

• Canvas
• CSS3 Selectors

... and the reason this is so sad?  Because IE9 seems to have concentrated on the two features that are pretty well supported through third party plugins; Explorer Canvas and Selectivizr

What the update completely fails to address are those items of functionality that are actually quite hard to address without native browser support that would have a real impact on the lives of users, designers and developers;

• CSS3 Properties
  Many of which would ubiquitous (and therefore useful) if Microsoft would support them.
   
• Web Applications
  Features that would make a practical difference to their user's experience and which again often have full support from Opera, Webkit & Mozilla.
   
• HTML5 Form Controls
  Features that provide more than the basic set of form controls which otherwise hasn't changed since the Internet Explorer 1. 

Why these changes?

It seems apparent to me both from the choice of developmental direction and the tone of the IE9 Preview site that the concentration has been squarely focused on wowing the media and has entirely ignored both the development community and their user base.  

The elephant in the room.

Finally, yes, I haven't forgotten the elephant in the room: IE6.  Whether Microsoft has oganised themselves into a strategy that does anything about the stalwarts still using IE6 remains to be seen.  It seems there is some doubt the IE9 release will have any effect at all.

What I would be interested to know is will those people who do move away from IE6 do so towards a new version of IE - in which case why have they not done so already - or will they move to a new browser all together.  

Is Microsoft leading or lingering?

Well they're lingering aren't they? Our browser support charts show this quite clearly.

There is not a single feature where Internet Explorer trumps another browser and yet there are dozens of quite important features where Microsoft fails to meet otherwise universal support.

Furthermore most of the ticks that are appearing in the IE9 column can be made to appear with a Explorer Canvas and Selectivizr making, in my opinion, a bit of a mockery of the whole release and certainly no demonstrable difference to anyone who's not benchmarking their PC.

The truth of IE9

This new browser seems entirely focused therefore on demonstrating that a bit of hardware acceleration makes all the difference without addressing the key IE problems that the wider comunity complains about so vehemently and so constantly.  

IE9 will, I predict, become derided by developers just as all the other itterations have and Microsoft will continue to lose market share to Apple, Google and Mozilla.

IE9 itself will be shown for what it really is; ego rubbing and a few rather irrelevant benchmarks. 

Moody Yachts, a luxury yacht charter and sales brokerage in Golfe-Juan, South of France, have trusted Deep Blue Sky with the redesign and redevelopment of their website; launched today.

Preserving SEO Strengths

The Moody website which we are replacing today already enjoys an extremely good standing with Google so it has been imperative to ensure that the new website preserves those aspects of the old website that draw traffic.  

Coupled with the skilled man-hour requirement of transferring all the information held within the previous, static website Deep Blue Sky have developed the site in two halves.  While much of what you see is totally re-developed within the Spirit Framework the Motor Yacht Charter and Motor Yacht Sales sections of the website are generated using a mixture of the old Dreamweaver Content and the new aesthetic framework.

This ensures content continuity and a smooth transition without disrupting those pages that draw considerable traffic from the search engines.

Making Maintenance Easy

The Motor Yacht and Sailing Yacht Sales sections have been completely overhauled and are now managed through the Spirit Framework.  Despite the complexities of a full boat sales listing Spirit allows the team at Moody to update the fast paced brokerage portion of the website quickly and easily.

Spirit is also learning; enabling us to cross-reference similar boats to make navigation easier for the buyer.

Challenges

• SEO
  Preserve the strong SEO standing of the previous website
   
• Detail Presentation
  Present detailed boat listings in a clean, easy to read format
   
• Simple Updates
  Make it easy for Moody to add boat listings, in detail.
   
• Room to Grow
  Provide a strong content management framework that will allow the site to grow 

What do you think?

If you have any comments to make regarding the Moody Yachts France website; don't be shy.  Add your comments below. 

A little tip to make your life easier... especially when emailing attachments around in a Windows environment.

Situation

So you've thrown some data into a Word document or a Spreadsheet and now you want to send it to the client.  You've saved it somewhere sensible - 53 directories deep in the appropriate project folder.

Now to attach it to an email you'd have to click "Add Attachment" and go folder hunting?

Chrome & Gmail HTML5 Drag & Drop to the rescue!

1. Compose a new email.
2. Save your Document/Spreadsheet etc.
3. Hit the "Save As..." dialogue in Word/Excel/Etc.. 
   ( Don't hit Ctrl+Shift+S 'cos that doesn't work. Don't get me started! )
4. Don't re-save... but you'll find the document you saved last time... drag that to Gmail to attach.
5. Cancel the "Save As... " dialogue... you don't need it.

Chrome Downloads Bar

NB this also works very well from the Chrome downloads bar...  go into one mail, download one or two attachments, compose a new mail and drag the attachments back up from the download bar.

Firefox too, but not IE or Safari?

As far as I know this works in Firefox and Chrome only guys, sorry.  Someone correct me if I'm wrong about that.  

Any tips you'd like to share?

Leave a comment... do... 

A big an hearty "congratulations" today goes to Duncan Moore from Montreal, Canada who's web-app idea has won the Deep Blue Sky Web Innovation Awards 2010.

Tough Decisions...

We had so many entries to our competition this year, of such a high calibre, that it's taken us a lot longer than we were expecting to come to a decision.  In the end it came down to just a few short-listed ideas and after an interview with each of those who were short-listed Duncan's idea was chosen.

What was the idea!?...

Things move pretty quickly in our industry so we've taken the decision to keep the details under wraps until it's released later in the year.  What we can say is that the app is a tool, a very user-centric, social utility to make everyone's life a little easier, particularly those of you who use Twitter every day.

What do the runners up get?...

As a big, big thank you to all those people who took the time to enter their ideas it's been decided that they will be the very first people to be invited to use this new app when it's launched.  What better critics could we find?

The work begins...

Now work begin's to bring the idea to life. We're expecting a build time of two to three months after which the application will be released to a small, invite-only audience and will grow from there.

We're extremely exited about this project and we hope you are too.  If you would like to know any more about the competition or if you would like an invitation to the app when we launch please leave your name and email address and a little comment below.

Deep Blue Sky were tasked with producing a website which targeted a specific customer base and made good use of photography to showcase Pure Buildings' recent work.

Working with only recently defined brand guidelines, Deep Blue Sky created a concept which not only looked appealing to visitors but addressed the client's key objectives of being easy to navigate and providing a platform for displaying recent work.

Old graphics cards don't tend to have support for the now common screen mode 1366x768.  ( As far as I know old modes were in factors of 8 ( roughly base 2 increments ) ).

So if you're like me and you're firing up a nice new little screen on an old, second slot, PCI graphics card then you'll end up with horribly blurred text on your Acer X193HQ.

Check the clock ( not the focus ).

Before you start rummaging around for drivers or running down to the shops for a new card make sure you've had a play around with the clock timing on your Acer screen because the chances are you can get the focus back.

I've personally found that a clock at around 36 is pixel perfect running 1360x768 @ 60hz but I'm guessing it's different for different graphics cards.

Trick is to hold your finger down and run the clock from end to end.  You'll see a sweet-spot in the middle where the moire phases out and back in... you're aiming for the centre of the interference pattern... where every pixel is smooth and sharp.

If you've found findmebyip.com at all useful over the past few months we'd be over the moon if you could nominate us for the 2010 .net awards.

Nominations only take a second to complete and, since fmbip.com is a spare-time project for us, it would mean a lot to be nominated.

Nominate FMBIP.com for the .net awards

Thanks!

OK - so my apologies for the rant but iOS4 seems like the worst thing I've ever installed on my iPhone in the year or two that I've had it.  It's not just frustrating but has actually lost me hours of work.

iPod

So we'll start with the iPod - the one thing Apple should be good at.  Two problems have appeared with iOS4; first is a little thing but the iPod now skips a beat when you lock/unlock your phone or enter/leave the iPod app.  The second, even more annoying, is that it simply fades to a stop of its own accord - as if the phone was about to ring - but then it doesn't.  Either they've shagged the "Phone" app aswell and I'm not getting calls or there's something wrong with the iPod.

Mulitasking

Next is multitasking.  Plenty of apps are not multitasking ready, which would seem like nobodies fault, except I have to include some of the core Apple apps in that list.

• Notes
  We'll come to this in a moment...
   
• Safari ( +Quicktime )
  When watching a QuickTime movie in Safari ( read: Question Time on iPlayer ) all is well.  However if you leave Safari and re-enter at a later date QuickTime fails.  Usually audio but no video.  You have to actively destroy Safari and start it again to get the video back.

So the question is: why is it mandatory?  I can understand the principal of state-saving to make task switching more smooth but why do they force the behaviour?  I don't want an app I've opened for ten seconds to stay in state and the fact they all do just makes the whole thing pointless because you can never find your common apps from the task list because there's a calculator and weather and 10 other things you don't really care about in the way. 

Why, oh why, isn't this optional?  I have already learned which apps don't hold state or have multitasking bugs ( hipstamatic, tweetdeck )... and which apps I occasionally use but don't want to keep in state ( calculator, phone!? ) why can't you switch the behaviour off for some apps?

Folders

Ok - this is a tiny thing but folders get in the way more than they save space.  The icons are too small and there's no option to pick an icon to represent the group.  On a 3GS screen you have to Eskimo kiss your phone to see which folder you want.  Then, having exited the app you're using the folder's there.. staring at you... all open and completely in your way.  Surely the 80:20 rule dictates you're unlikely to be back in the same folder?  Go away.

To open a foldered app is therefore:  search for the folder ( +a few swipes, +3 seconds ), open the folder ( +1 Click, +0.5 seconds ), re-assess what you were doing ( +1 second, +1 head-scratch ), click the icon ( +1 Click, +seconds )... and then, to rub it in, you can add ( +1second of confusion, +1 more click ) to the end of your task to close it again.

Clock? Surely not?

I also set the clock to French time on landing only to be woken up an hour late the following day to almost miss my flight home. I am convinced I didn't do anything silly but somehow I just can't bring myself to think that a phone could foul up a setting like that.  

Can you believe that after all this I'm questioning my own sanity before believing there could be a bug so simple in the clock..

Genuine Bugs: Notes

Finally there's the fun I had with notes.  On Friday, on a flight to see a client, I wrote some really quite inspirational ( no - really ) notes about a fabulous new and exciting project we're working on here at DBS.  An hour and a half of considered opinion on a project that's going to change our lives and yours.

When I got back onto the flight home where were my notes?  Where oh where?  Could they be under the multitasking toolbar? No.  Could they be behind one of my handy folders? No.  

Surely - saving your work, properly, is one of the most important criteria for the app?  Good grief I'm cross.

In conclusion.  iOS4 is Beta

OK - so people who build glass websites shouldn't throw bloggy stones - I realise that. Nobody's perfect.  But I find it extremely frustrating that Apple, a large and supposedly reputable company, would release something which is effectively beta onto an unsuspecting public who has paid a great deal for a product ( my iPhone 3GS ) which is now full of bugs.  Had they labelled it as a beta, clearly, I might have thought twice about it or might have used a pen to make notes - if I can remember how to write...

I won't go into the fact that it looks like the hardware to go with iOS4 was just about as beta!

PS

During the course of scribbling this rant my iPod has iPhaded the music out and iPhaded back in four times.  (*6 times including corrections) I've checked with my wife and she's not trying to phone me so it must be a bug in the iPod!

It's been a couple of weeks now since Modernizr 1.5 was released and we've been inundated with requests to update our Litmus test page which shows browser "support" for CSS3 and the HTML5 family of technologies.

Well now it's finally here and we're pleased to re-launch the Web Designers Browser Support Checklist with tests for:

• HTML5 Web Applications
• HTML5 Embedded Content
• HTML5 Audio & Video
• HTML5 Web Forms & Attributes
• CSS3 Properties
• CSS3 Selectors

New tests for SVG, Web Sockets and much more

Thanks to the guys over at Modernizr, we can now provide test results for a wide variety of new features including the long awaited SVG tests (I'm sure Bruce Lawson will be happy at that!).

The full list includes:

• SVG (including SVG Clipping Paths and SMIL)
• Web SQL Database
• IndexedDB
• Web Sockets
• hashchange event
• History and Session Management
• HTML5 Drag and Drop
• Cross-document Messaging

Even Better Accuracy

Know how important it is that our results are accurate and so we're really pleased that the Modernizr library we rely on to produce our results is becoming increasingly bug free.

The issues with Font Face in WebKit have now gone and we're now seeing more accurate results for basic CSS3 properties such as border-radius which is fantastic.

On top of this our developers have spent a lot of time rewriting the site code in an attempt to reduce the likelihood of false results being returned from our end so hopefully our results should be more accurate than ever.

What we don't offer

We'd like to make it clear that the results we provide as only a summary of browser support for HTML5 and CSS3. We strongly recommend you test you code fully to ensure that you get the expected results.

We also don't test for every last feature or browser idiosyncrasy. Beware! Browser manufacturers implement the spec in different and occasionally buggy ways. Again, we strongly recommend testing - there really is no substitute.

Provide us with feedback....please!

We really need your help to make FindMeByIP 100% accurate. If you notice a bug just let us know. You can reach us either by:

• Commenting on this post (preferred)
• Twitter - @deepbluetweets

Just let us know the error, where it's appearing and which browser and we'll make a temporary fix immediately.

Then as soon as we have a spare moment on Friday our developers will fix the root cause to avoid the issue creeping back in.

We really hope you find these tables useful.

We're very pleased to announce that the FindMeByIP litmus results are now available in JSON format for anyone who wants to access the results in code.

JSON Results: CSS3 & HTML5

http://fmbip.com/json/export?callback=myCallback

Using the Data

If you decide to use the data for anything we'd love to hear about it.  Likewise if you would like the data organised in a different hierarchy, if you need the 'average update' results or any other changes you can think of please do let us know.

I think it's fair to say that IE9 looks to be about the most exciting and positive thing Microsoft have done with a browser for a long, long time.  

Microsoft's browser market share is in what looks like terminal decline so releasing a browser that gets the support of the web development community should surely boost, or at least stabilise, their share.  And what is it that makes the web development community deride IE? ... well partly its the legacy of IE6 - a browser that still makes up nearly 10% of the market - and partly it's IE7 and 8's total lack of support for any of the new technologies that are driving web innovation... 

Is that all about to change?!

Looks like it.  Certainly moving in the right direction anyway.  Today we're very proud to be adding IE9 to our list of browsers on our Web Designer's Browser Support Checklist.  

What's remarkable is that those big columns of crosses we've all been sniggering about for months are finally starting to disperse.. there are a few chinks of green-tick emerging from the IE columns after all.

What does IE9 support? Are these real results?

Well, largely, the new IE9 results are real results.  They were recorded with the help of one of the IE9 developers who was kind enough to guide me through a couple of details as to what IE9 will and won't support - because my IE9 preview is having some script gremlins...   Most of the results were recorded with the IE9 Preview #2.  We've had to patch the target-selector result ( because of a bug with the way fmbip redirects to the hash-tag ) and a couple of the codecs but that's all.

The good news

The good news therefore is IE9 will bring full support for CSS3 selectors and HTML5 embedded content to the third of the world who use IE.  There'll also be limited support for CSS3 properties and HTML5 web applications, the latter available since IE8.

The bad news

From what I understand IE9 will still miss a lot of the newer, designer's CSS3 properties that Safari and Chrome (and FF to an extent ) provide; Border Image, Gradients, Reflections, Animations & Transitions etc.

There's also no sign of any of the new form elements or attributes either... but then, as you can see from our scores these are still so poorly supported by other browsers that they're not really usable yet.

A thank you

A big thank you to Eric in the IE9 team for his help and support getting this column together.  I was struggling to get my IE9 preview to behave so I'm very grateful for all his help.  Here's to a great new browser to up the game a little for all the manufacturers involved!

As web designers we want to know when we can start to roll out HTML5 and CSS3 functionality on our client's sites and we want to share that knowledge.  So last Autumn we built findmebyip.com; a free testing tool that sends you a live, detailed report of what your client's browser supports.

Since the 23rd of October 2009 findmebyip.com has collected some 56,000 detailed, real-world results of HTML5 and CSS3 browser capabilities. Today we've added those results to our massively popular litmus test summary page. 

View: HTML5 & CSS3 Browser Support Scores

And the winner is...  CSS3 Selectors

The most promising areas seem to be CSS3 Selectors.  Some selectors which have picked up support in IE7 are now nearly ubiquitous.  Post prominent are are the three attribute match selectors - begins, ends, matches - and the general siblings selecto.  The other CSS3 Selectors enjoy good support across the other browsers with only the earlier FF3s missing a few things.  The lack of earlier FF3 support for things like n-th child accounts for a 2% drop off for those features. 

/** Available in all but IE6(!) **/
.foo[ attr ^= "string" ] { }
.foo[ attr $= "string" ] { }
.foo[ attr *= "string" ] { }
.foo ~ bar { }

CSS3 Properties - Font Face is here!

Most widely available of the CSS3 Properties is of course Font Face which has been available in IE for decades.  With Google's recent release of their font API the deregulation of typefaces looks like a real possibility. 

A few other notable properties are the use of RGBA and HSLA and Opacity.  Guess what, yes, IE doesn't support them yet so you'll still have to hack about with proprietary filters if you want your sites to look the same in IE.

Web Applications Coming of Age

IE8 support for HTML5s storage architecture and Google's shift to supporting HTML5 over Gears is all looking very promising for the future of faster, less bandwidth intensive web application development.  Chrome 5 has in fact, just recently become the first browser to tick all of our HTML5 Web Application boxes.

Geo Location is still trailing behind according to our test although good mobile support for Geo Location isn't really illustrated in these results.  There's a mobile version of our litmuse results page coming soon incidentally... just waiting for the amazing guys behind litmusapp to launch their mobile browser tests. ( I think they're a bit too excited about their email analytics to care right now! )

What's not ready?  HTML5 Forms

HTML5 form input types and form attributes are quite a long way behind the rest of the class. This is down to little or no support from Firefox or IE.  Chrome 5 again gets a big gold star for having the most comprehensive HTML5 Form support.

War of the Codecs

I'm going to be honest here and say that I'm not massively familiar with all the different HTML5 Audio and Video Codecs.  From our results it would seem that both the ogg/vorbis audio and video codecs have the widest support.  I am slightly concious that there were some recording bugs when we first added A/V codecs though. This is partly why we've excluded all the earlier results, calculating our scores from just the last 20,000 (2 months of) results.  I' d be very grateful if someone more knowledgeable about HTML5 Audio & Video codecs would take a look and give an opinion.

A word about Internet Explorer and IE9

Yes, I'm sorry, it has to be said...  the world is waiting for IE to get its act together on this one.  

Firefox and Apple are providing pretty wide support for CSS3 and HTML5 already.  The litmus charts show the leap that Firefox made with FF3.6.  

Google seem to have just stormed ahead of the field taking Chrome 5 to almost universal support for all of our tests save for two form attributes - autocomplete and list - and two audio codecs.

What about IE9??  Well, lots of people have been asking for us to add IE9 results to our table.  Unfortunately at the moment the javascript used to record the results doesn't seem too happy in IE9.  We use a combination of prototype.js, modernizr.js and a little jimbo.js to test and record and we haven't had a chance to diagnose where the problems lie.  If anyone is familiar with IE9's javascript capabilities please, please get in touch and we'll add IE9 to the results.  Everyone's waiting to find out how it fares!

At The Royal Crescent Hotel this morning Spot the Lion was introduced to his peers and to the media in event organised to launch the Lions of Bath public art exibition in Bath.

The Lions of Bath event has attracted sponsors and artists from across the country who have been working tirelessly all year to decorate one of a hundred identical lifesize lion sculptures.

Deep Blue Sky's lion Spot has drawn a great deal of attention today as he looks to be the only interactive sculpture this year.  Spot has been decorated with QR Codes, small 2-dimensional barcodes that can be snapped with a modern camera-phone.  The codes contain information that tells your phone to navigate to Spot's website spotthelion.com where you can learn about and discover all of the other lions in the pride.

Stay up to date - Follow Spot Today

If you would like to know where to find the lions as they go out into the wild you can follow Spot on Twitter or befreind him on Facebook making you the first to know about new lions released to their new habitats.

So you've found a YouTube on your computer but you want to step away from your desk and take the video with you.... what a hassle?  Nope - here's a quick-as-a-flash solution...

Drag to your bookmarks bar: QRify!

Now, visit any page, click the bookmarklet and snap the resulting QR code with your phone!

What is this?

QR Codes are a form of two-dimensional barcode that the Deep Blue Sky team has been using to decorate our lion, Spot, with over the past couple of weeks for the Lions of Bath public art event.

Most smartphones support QR Codes either natively or through a reader app.  You'll need to browse your own App Store for a reader but there are plenty of good cheap or free ones available.

Basically a QR code can store a whole lot of information - geo-locations, web links, contact data - and when your phone's camera sees the information it interprets it and acts upon it... opening your map app at the right location, browser on the right web page or adding the contact.

How does the bookmark work?

Well, it uses Google's URL shortener to create a short link. ( The shorter the link, the less information for the barcode. The simpler the barcode, the easier for your phone to scan... ).  Google's URL shortener has a cute extra feature that means you can have the URL as a QR code instead of redirecting you to the site.. 

All you do is add .qr to the end of your short link:

• http://goo.gl/y0vX -> Deep Blue Sky
• http://goo.gl/y0vX.qr -> The QR Code pictured above.

Now the bookmarklet itself uses a server side script by a chap called Matthew Flaschen who has provided a simplified API for creating the links.  I've basically lifted his example script, added the .qr concatenation and stuck it in a link to be bookmarked.  Standing on the shoulders and all that!

It's only a small variation to Matthew's original but serves a slightly different purpose. 

There's also a very good Google Chrome extension for doing much the same. 

On Tuesday Google released the new, faster Google Chrome 5 in beta.

Better support for HTML5

This new Chrome release, as well as being much faster than its predecessors, now has even fuller support for HTML5 Web Applications and HTML5 Forms

To help people better understand what features are available across the major browsers and platforms we've added Chrome 5 to our Web Design Checklist, here.

Almost Perfect Support

It's really great to see Google making big strides towards full HTML5 & CSS3 support.  Chrome ti

What's missing

According to our tests - which are not immune to error - only the following items are missing from the new Chrome 5 beta:

• Native Audio Support for MP3 & WAV
• 2 New Form Attributes "autocomplete" and "list

Of course there are probably lots of things we're not testing for.  If there are any new browser features you'd like to see added please let us know by leaving a comment below. 

The web is moving forward and here at Deep Blue Sky we like to stay ahead of the curve. That's why we invest 10% of our week each Friday working on internal projects with the aim of enhancing our capabilities for the benefit of ourselves and our clients.

Helpful Web Applications

In September 2009 we produced the initial concept for a web app which would present browser support for HTML5 and CSS3 in a simple and easy to read format.

This site would go on to become FindMeByIP.com, a site which is now used by thousands of web professionals around the globe to help them implement progressive techniques on their websites.

From Tiny Acorns...

Although initially only a limited concept, the popularity of the site spurred us to develop it into a full browser testing suite, enabling us to provide statistics for all the major web browsers. As a result we went from receiving a couple of hundred visitors a day to over a thousand.

The ability to scale a project so rapidly was made easy thanks to our web development framework Spirit, the platform on which all our websites are based.

Deep Blue Sky is very proud to be helping Dickies, the leading workwear brand, find the UK's most deserving worker.

Yesterday, 29th April 2010, we launched ukworkeroftheyear.com a website where any of the UK's workforce can put themselves forward for this prestigious prize.

Capitalising on Social Media

We wanted to make sure that the competition and the Dickies brand reach as many people as possible while the competition is running to ensure a rich seam of candidates from which to judge the finalists.

So we're delighted that Dickies have agreed to our addition of a "Peoples' Choice" award, voted for by the general public, to run in the months of June, July, August and September.

Holding a public vote allows us to encourage those who enter to spread the engagement of the competition to their friends and family through the common social networking channels such as Twitter and Facebook.

Rapid Web Development

We're very proud that the whole site was designed, built, tested and launched in just a couple of weeks to meet some pretty strict press deadlines.  This rapid development of intricate systems is only possible because of our development framework, Spirit, on which all our web solutions are based.

Are you the UK Worker of the Year?

If you think you deserve to drive home one of the Renaults on offer why not enter yourself and become Dickies UK Worker of the Year!? 

Twitter was founded in 2006 and four years and over a billion tweets later we are still using it to let others known "what's happening now". The service is very popular amongst web designers. Unsurpising really, as they tend to spend 90% of their day in front of a screen.

If you're anything like me you probably follow a few "celebrity" designers/developers in the hope that some of their skill talent magic might rub off on you. These "weblebrity's" are usually professional tweeters, but even they had to start somewhere. I've compiled a list of 13 top web designers and their first ever Tweets.

First Tweets by 13 Top Web Designers

• Paul Boag: "Sitting in my hotel room at the Refresh06 web design conference" (5:37 AM Nov 17th 2006)
• Zeldman: "scratching" (9:15 AM Dec 12th, 2006)
• Elliot Jay Stocks: "Working through a number of bug fixes in preparation to moving on to the Carsonified redesign project!" (2007-08-16 13:15:02)
• Remy Sharp: "Signing up to twitter and having a flitter." (12:12 PM Jan 16th, 2007)
• Andy Clarke: "working on an interface design for a national research organisation" (9:11 AM Dec 1st 2006)
• Mike Kus: "Uh oh!" (6:55 AM May 10th, 2008)
• Mark Boulton: "has finally caved" (3:47 AM Mar 10th, 2008)
• Joe Hewitt: "coding" (6:19 PM Mar 15th, 2007)
• Larissa Meek: "eating tacos" (8:54 AM Mar 21st, 2007)
• Ryan Carson: "Leaving for Venice!" (3:36 AM Nov 22nd, 2006)
• Jason Santa Maria: "Trying to wake up." (4:12 AM Dec 12th, 2006)
• Grace Smith: "Just had a crap takeaway so am consoling myself with a large cup of tea and a large dose of Arrested Development Series 2" (2:48 PM Dec 15th, 2007)
• Megan Fisher: "Being horribly bored at work. Can't wait for the WWDC to start." (6:48 AM Jun 11th, 2007)

Who's missing?

Have I missed anyone out? Found amusing/interesting first tweets? Share them with the community - leave a comment.

Data

Data for these tweets was sourced via the very cool My Tweet 16 web app.

Update: This issue has been filed as a bug report and has been fixed as of Firebug 1.6a9 (see here for bug report)

I recently had a problem with the latest version of Firebug whereby when inspecting the DOM via the HTML tab, the view would automatically refocus and highlight an element that had been updated via a piece of Javascript

Is Firebug "buggy"?

This was very annoying. For a long while I wasn't sure how to fix the issue and so I tweeted about it.

The best response came from none other than Paul Irish, who responded explaining that I should have a drop down list on the Firebug HTML tab. This would have the option to disable DOM Highlighting.

Having checked and rechecked however, I was sure I didn't have this dropdown.

The Solution

As with all things computer related the classic "uninstall/reinstall" combo did the trick. I simply removed the addon and reinstalled it using Firebug's built in AddOn manager.

This updated the faulty install of Firebug and revealed the hidden HTML tab dropdown.

I then went in and unchecked "Highlight Changes". This fixed the highlighting issue.

Ongoing Problems

Soon after fixing the issue however the HTML tab dropdown disappeared again. The auto focus problem didn't return but the dropdown had mysteriously disappeared.

If anyone has an explanation for this behaviour (am I doing something wrong?) or a better solution please let me know.

Necessity is the Mother of Invention?

At Deep Blue Sky we do like to think we’re a bit “different”. We’re not saying we’re “zany”, we don’t say “you don’t have to be mad to work here but it helps”, and we certainly wouldn’t be caught dead in a comedy tie but we do like to take a different approach to problems and their solutions.

We accept that client work is not always going to give us the opportunity to experiment, which is a shame because it’s this experimentation that allows people like us to find new and creative solutions to a client’s problem.

Kicking Back in Binary

In order to give us time to work on projects that aren’t necessarily going to bring in the bucks, but are going to make us better at our jobs we made a decision a few months ago to work a 4 day week. We’re not saying we send all our staff off to the pub for 8 hours of the working week – far from it – we just do work that makes us happy, and gives us the opportunity to try out new ideas.

Stuff What We Did

So what do we do in the time? What could we get up to in the 384 hours of free time this gives us? We work on web applications, joint ventures, or stuff that’s just plain cool (from our point of view anyway). Here are a few examples…

FindMeByIP.com

This is a simple web based app that tracks your web browsers ability to support the more advanced features of CSS and HTML5. It’s useful because of the way it presents its findings, making testing very easy for geeks like us.

Gate54

Gate 54 is our hotel directory that provides booking services for over 75,000 hotels worldwide. We built it using our Spirit Framework development platform to prove it could handle a massive and multifaceted database with a booking engine bolted on for good measure and you know what? We were right.

Returntags.com

Return Tags – like most great ideas on the web – is very simple. You buy a set of Return Tags which you stick to high value items like an iPod, iPhone or a Grandmother. If someone finds the items they go to Returntags.com, punch in a code and it’s matched to a set of registered contact details that allow the finder to contact the owner.  Stick it, lose it, get it back!

We built the site in conjunction with a client using our Spirit Framework Development Platform with a simple user registration and database module.

Awarding Ideas

Awarding Ideas is a competition we’ve started to find the next great idea for the web. We’re giving away £10,000 of free design, development and hosting to bring it to life. There are no barriers to who can enter (apart from we’re not allowed, that would be silly). The competition is an example (we think) of our commitment to innovation in everything we do.

For more examples of our Friday Projects keep checking the Deep Blue Sky Blog – and if you have any great ideas you can enter Awarding Ideas here…

When Google started crawling CSS files some years back there was a lot of noise amongst SEO experts about how much rendering was going on in their data-centres.  But without working at Google ( or Yahoo or Microsoft ) it's very difficult for any of us to tell quite what's going on... until now.

FindMeByIP.com

fmbip.com is a service set up for the web design community to help understand what CSS3 & HTML5 capabilities their clients browsers have.  Basically you send your client to a page and we send you a table showing you exactly what browser they're using and what CSS3 & HTML5 capabilities their browser supports.

"Googlebot", "MSNBot" & "Yahoo! Slurp"

Like many of us it seems that Google, Yahoo and Bing have all been along to take a look at findmebyip.com and I was surprised to find this morning that we've caught their spiders submitting their own results for what CSS3 and HTML5 capabilities those spiders support.

Fingerprinting a Spider

While Googlebot appears to have broad support for HTML5 & CSS3 I was surprised to find that it's not quite at the level of Chrome 4.  Microsoft Bing's MSNBot, even more remarkably, has quite good support for HTML5 & CSS3 where their IE browser, well, doesn't! 

So we ran a fingerprint comparison of the Googlebot, Bing and Yahoo results against our full set of tens of thousands of "in-the-wild" results and found a startling result: it looks very much like all of their web spiders are running Firefox!!. 

• Googlebot 2.1 : Firefox 3.6
• MSNBot 1.1 : Firefox 3.6
• Yahoo! Slurp : Firefox 3.0

Sharing the Wealth

We like to share here at Deep Blue Sky so we thought we'd make the information available to everyone.  So for all you SEO experts who need to know exactly what these bots are capable of here's a table of the three biggest 'bots and their capabilities:

Deep Blue Sky were tasked with upgrading the aesthetic of the AnimationBase website and making the navigation and user experience more intuitive and rewarding.

Taking into account clear directives from the client and feedback from users we implemented updates to make the site easier to use, give access to key information more quickly and portray the AnimationBase brand well.

Spirit Recruitment

AnimationBase is built using Deep Blue Sky’s “Spirit Recruitment Development Platform”. The flexible nature of Spirit allowed us to create a new skin for the website without having to change any of its core architecture.
The Spirit Recruitment module includes the following features as standard: 

• Management of Jobs Listings and Content
• Email list Management
• User Registration and CV upload
• User Profiling and Search Tools
• Search Engine Optimisation and Promotion
• Usage Reporting and Statistical Analysis

AnimationBase is one of many recruitment websites that have been delivered by Deep Blue Sky using this platform.

To find out how we can breathe new life into your Recruitment website call us on 01225 444674.

After much delay we've updated FindMeByIP.com & the Web Designers Browser Support Checklist; the web services that display browser support* for HTML5 and CSS3 in a clear and easy to read format.

The last few months have seen two of the major browser vendors - Mozilla & Opera - release new versions of their web browsers. Modernizr , the javascript library that drives the testing behind FindMeByIP, has also jumped to version 1.1 offering a wealth of new features.

As a result we've relaunched FindMeByIP with better accuracy, a greater number of tests and a larger number of browser results.

What's changed?

The biggest change is probably the upgrade to the latest version of Modernzir, the javascript library that drives the testing behind FindMeByIP. This means we now test for:

• new HTML5 input properties (eg: autocomplete, pattern,step.etc)
• HTML5 Audio and Video codec support
• Mozilla Firefox's new CSS Gradients syntax

...to name just a few.

We've also added test results for two of the world's most modern browsers:

• Opera 10.50 - the "World's fastest browser"
• Firefox 3.6 - the "World’s best browser

99.99% accurate

We're confident that the results produced by FindMeByIP.com are more accurate than ever.

Tweaks to the site's mechanics combined with the much improved Modernizr 1.1 testing library mean that you can be confident that the results you see will be a fair summary of your browsers' support for HTML5 and CSS3. However...

"Nobody's Perfect"

As the old saying goes, "Nobody's perfect" and whilst we've endeavoured to ensure our results are as accurate as possible there might still be a few bugs waiting to be squished.

That's where you come in. Notice a bug? Let us know in a comment and we'll fix it. We want FindMeByIP.com to be bug free as much as you do (we're web designers after all!). 

A High Brow Introduction

Blogging (from the Latin Web Log) is an integral part of Web 2.0 – the development of the web from a controlled medium to “an architecture of participation” where people become not only consumers of content but generators of it.

A Bit of Common Sense

Blogging isn’t only for ultra web savvy technocrats – it’s a useful tool in the marketing armoury of all small businesses. Learn how to use it, commit to using it, and you might be pleasantly surprised by the results.

Why Get Involved?

Blogging achieves a few useful things that should matter to you:

• You get to demonstrate to your visitors and customers that you’re an expert in your field
• You’ll make your website “sticky” and increase the amount of time visitors spend on your website – increasing your chances of a sales or enquiry
• You’ll help your site be more visible to search engines
• You’ll increase the chances of creating 2 way conversations with your customers and engage them with your brand or business

Be That Golden Rule

All of these are good things but we have to get a few basics right before we send you off into the Blogosphere. Stick to a few rules and you should do OK:

Pick a voice and stick to it

Work out in advance the tone you’re going to take in your Blog. Are you going to be conversational and chatty? Are you going to knowledgeable and informative? Make sure your tone is relevant to your brand or business – if you’re an accountant using text speak will not go down well with the business community.

Be Committed

Building an audience for your Blog will take time, so don’t give up at the first hurdle. Make an Editorial plan and stick to it. Try and produce articles that are relevant to events and deadlines. If you’re an Accountant cluster relevant articles around HMRC deadlines, if you’re an Event Planner base articles on Holidays and Occasions, if you’re a Taxidermist…you get the idea.

Make it SEO friendly

Blogging will help your search rankings if you make sure your content is optimized. In English that means you need to use your top keywords in your article. Don’t shoe horn them in for the sake of it, you’ll just look silly, but keep it in mind when writing.

Write for the Web

People read differently on the web. They don’t read, they integrate content to get to what they need. They look for key words and like bullet points and titles so keep it punchy, keep it short, and make life easy for the reader.

Remember Your Audience

Keep the content relevant to who’s going to be reading it. Accepted wisdom is that you should write for an educated 12 year old. I’ll be honest – I feel patronising even writing that but just me mindful of your audience. Which of these statements work better?

or...

You get my point.

Writing the Thing

Make life easy for yourself and keep to a process when writing. Finding the time will be difficult but if you get into effectives habits life will be a lot easier for you.

Plan, Plan, Plan

Plan your article before you start writing. Sketch out some sections and titles that keep up the rhythm and tempo of an article and lead logically to the conclusion you want people to reach.

Plough On Through

Once you’ve started writing, don’t stop until you get to the end of the article. You can edit it later.

Edit the Hell out of it

When you’re editing keep in mind that you have to keep it short and punchy. Ruthlessly get rid of anything that isn’t vital to your core message. Your readers will thank you for it.

There Endeth The Lesson

So that’s it, I send you forth to Blog your little hearts out. Blogging will work but you have to make a plan, be mindful that you won’t get success overnight and keep it at it.

One last point – just having a Blog does not mean that people will read it so get the word out. Mention it in your Direct Marketing, E-Mail Outs, PR, on the phone and in conversation with your customers. Shout about it and you’ll start to get some love. And just so you know, that whole Latin thing at the start was me making a funny. I know, aren't I priceless?

YouTube videos are great but they can often be long, especially if they are tech related. What if you want to cut to the chase and link to a specific point in a video?

Linking to a Specific Point in the Video

YouTube allows you to append a "Time" parameter (t) to the video's URL. So, if your video's URL is:

http://www.youtube.com/watch?v=-SLcruwnkLk

...then to link to the point in the video at 18 minutes and 25 secs, just add the following (in bold) to end of your URL:

http://www.youtube.com/watch?v=-SLcruwnkLk#t=18m25s

Explanation

"t" stands for "Time". All you then do is specify the point in minutes (m) and seconds (s) where you'd like the video to start playing.

Don't forget to include the hash "#" character as well.

Very simple but extremely useful.

Example

Try it yourself. Here's a link to an amusing video of a talkng cat:

http://www.youtube.com/watch?v=1KrfjeEqQGk#t=0m13s

If anyone has any more useful YouTube video hacks leave a comment and let us know.

Since we launched FindMeByIP.com back in 2009 we've collected tens of thousands of results for you all showing what HTML5 and CSS3 features your client's browsers support.

We thought it was about time we shared that information so from today we've a (very experimental at this stage) chart showing each feature and what percentage of results show that the feature is available.

Check out the Availability Chart here

At this stage we're asking you all to let us know how we can make this data more useful so please, if you've any thoughts on the subject let us know.

This coming Friday we'll set to work to implement your ideas.... or, if no-one makes any suggestions I guess we'll just go to the pub early!

On Saturday the 7th of March I'll be running the 13.6 mile 2010 Bath Half Marathon to raise money for a wonderful local charity; SWALLOW.

Sponsor me now
... it's quick and easy.

SWALLOW's aim is to promote independence and equality for people with learning difficulties, supporting its members to gain the skills and experiences required to live their lives as they choose.

If you could spare just a few dollars, euros or pounds to help me raise money for this wonderful, local charity I would be ever so grateful.

Many thanks,

Jim

With today's launch of Firefox 3.6 we thought we'd update our web designer's browser support checklist and see what's new with this new, apparently faster browser.

You can compare Firefox's support for HTML5 & CSS3 in version 2, 3, 3.5 and 3.6 on this checklist.

Multiple Background Support

It looks to me like the only thing that's been added is support for multiple backgrounds, now supported by all the browsers except Opera... and, oh yes, you've guessed it, IE.

Deep Blue Sky are extremely pleased to announce the launch of the very first Web Innovation Awards, a competition to find the most exciting and innovative idea for the web.

Register your idea on-line today.

Here at DeepBlueSky we enjoy creating websites and web applications that make people's lives better and so we're offering an award of up to £10,000 in design, development and hosting costs to the person who can come up with the most exciting idea.

Who can enter?

The competition is open to anyone and your idea will be judged against 5 main criteria assess it's merit:

1. Innovation
2. Value
3. Engagement
4. Realism
5. Originality

How do I enter?

You can enter online and revisit your idea at any time. Entries close on the 30th April 2010 and the winner will see their site built and developed by our expert team, becoming a reality and going on-line within months.

We'd like to wish everyone the best of luck and we hope to see some really exciting entries.

Register your idea on-line today.

Staying together for the Users

Choosing a web partner for your business is a difficult process; get it right and you will forge a relationship that will breed understanding, partnership, success, a great user experience for your audience, and a wealth of ideas and innovation you thought not previously possible.

Get it wrong and your experience will be a frustrating one characterised by misunderstanding, the dilution of your core sales message, and wasted investment.

Whether you choose Deep Blue Sky as your web partner or not taking some key steps before you start your journey will save time, effort, and money.

Know Thyself

Most businesses will now have a website of some description – from a brochure website to a full blown interactive experience connecting with their customer base on every conceivable level.   The inherent pressure to get a business online can cause some basic questions to be left unanswered. Ask and answer these and you’ll be off to a great start in your web project:

• What do I want to achieve?
• Who are my audience?
• What do I want the users experience to be?
• What is the core message I want to send?
• What action do I want the user to take? Buy? Call? Subscribe? Email?

If you do not know the answers to these questions then you will not be able to communicate your goals effectively leading to a muddled brief and an ineffective end product.

A Bass-line of Ability

There are a few things that you have every right to expect from a web partner as an absolute minimum. Ask for examples and question effectively and if you’re unhappy move on to the next candidate.

• A Grand Design  - Can they produce effective, practical designs that will enhance your brand and your users’ experience?   Some designers can fall into the trap of doing too much or producing clever designs that showcase their talent and know how, but fail in the ultimate objective of winning you business.
  
• Delivering the Goods - Make sure that you set a workable deadline for your project. This will ensure that your project will not get lost in the daily grind of running your business. Ask for examples of when they have achieved these core competencies for their clients.
• The Technical Stuff - Can they deliver a strong development platform on which your websites runs? Will you have the ability to update it yourself and keep your content current? Again, ask for examples and get them to demonstrate an ability to deliver a website that delivers value to your business.
• A Sound System - At its core web design and development is delivering a tool to help you achieve your business objectives. This process should be flexible but solid with ample space for feedback and focussed and relevant change.   A good web partner will have sound project management systems and processes in place to ensure effective and timely delivery.

It's Love, Actually...

At base a good relationship comes through understanding.   You will be able to trust a well chosen web partner to tell you when something is possible and sometimes more importantly, when it is not.  Make sure that they have taken the time to understand your business and understand your motivation and objectives.

If this happens they will be able to suggest changes, additions and ideas that you hadn’t have thought which can transform the success of a project.

Trust your gut – will you be able to work with them?  Will you get on with them?   If not, move on to the next one.  Like speed dating - but a lot more heart-breaking.

The Good Client

The customer is always right….except when they’re wrong but won’t admit it.  If you have a good relationship with your web partner you will trust them when they disagree with you.  It’s usually for a good reason and it will be based on knowledge and experience.   Give them the ability to do their job through a clear brief, a reasonable deadline, and stationary goal posts and they will deliver something exceptional, rather than satisfactory.

The Happily Ever After

Take on board these simple steps and your online life will be plain sailing and lead to a long, enduring, and successful working relationship based on integrity, innovation and partnership.

Love your web partner, and they’ll love you right back.  

I use Fireworks (CS3) for design work and like any designer I regularly rely on the simple keyboard shortcuts (nudge, delete, undo...etc) to improve my productivity.

The other day however, disaster struck when Fireworks crashed and suddenly all of the keyboard shortcuts stopped responding.

After trawling the net  I found this simple fix:

1. Start Fireworks.
2. Go to Edit -> Keyboard Shortcuts.
3. Select "Fireworks" from the "Current set" dialog.
4. Select "Miscellaneous" from the "Commands" dialog.
5. In the large drop down below scroll down and select "Nudge Up (UP)".
6. Focus the "Press Key" dialog below and press the UP arrow cursor key on your keyboard. This should reset the "Nudge Up" command to be UP.

As a result of resetting this one shortcut Fireworks seems to get the kick it needs to restore the keyboard shortcuts. Phew!

I hope this helps someone out, but please remember I only tested this in Fireworks CS3. If someone has this problem in another version of Fireworks please comment below with your fix.

Building on the solid foundations of the original iStylista.com, founders, and recipients of The Independant  "Top 100 Online Fashion Award" Chantelle Znideric and Hayden Allen-Vercoe needed a website to deliver a unique user experience.

The Challenge

We were asked to construct a unique structure and system that would:

• Allow users to construct a unique personal style profile taking into account personal preference, build, and colouring
• Enable users to profile clothing options against a range of different criteria
• Automatically provide users with details of suitable items, discounts and promotions via email
• Be flexible enough to incorporate additional clothing lines via data feeds from participating stores, fashion houses and retail

It was a given that the site would also require an intuitive and simple user interface that would enable the user to take advantage of the full power and breadth of the site with a minimum of fuss and maximum of effectiveness.

How we created iStylista

We used Spirit Framework, our development platform to affect a quick roll out of a beta version of the site and integrate clothing and accessory feeds into the iStylista database. This allowed the iStylista team to begin categorising and reviewing products in parallel with our design and development work. This saved valuable time on the project and enabled the project to go live quicker than anticipated.

Having completed the design, build and development phase we integrated a Blog Module and automatic email generation to enable iStylista to keep in touch with their audience on a regular basis.

The End Result

iStylista.com has gone from strength to strength garnering broadsheet coverage, awards and incorporating new lines of clothing regularly. The Blog is popular within the fashion community most recently – it was most recently featured – with Chantelle – in the January 29th Edition of the Telegraph Magazine.

Their website was poorly structured, lacked direction in its design and failed to make use of the incredible opportunity to sell its fantastic location.

What We Did

In the initial phases of the design process we made sure to collect as much as possible from the client in terms of their thoughts, opinions and ideas they had but could not translate to the web. We developed a clear content strategy, ensured that all the necessary Calls to Action were properly placed to convert visitors to bookings utilizing our Spirit Framework development platform.

The Unique Selling Point (Just Look at that View)

The site is designed to draw as much attention as possible to its Unique Selling Point – its stunning location and the views from its charming rooms.

We developed a prominent slideshow that could be updated regularly and complimented this with accessible content and simple descriptive text that did not detract from the imagery of Snowdonia.

Big and Small

Bryn Melyn is a great example of how we can use Spirit Framework to deliver a cost effective website that delivers exactly to the business objectives of a small business.
We are now assisting the client by targeted SEO advice to drive as much traffic as possible to the site and stimulate new bookings.

To find out how we can help your business call us on 01225 444674.

View Updated Site

Support for Forms, Web Applications and Selectors

Since launching a couple of months ago we've had lots of great feedback. We've listened to your requests for a wider range of tests and now added support for:

• HTML5 “Forms 2.0”
• HTML5 “Web Applications”
• CSS3 Selectors

Full Browser Support Tables

On our blog we also promised to make our results more accessible to our users.

Therefore we've used the testing service LitmusApp to create a fully comprehensive table of browser support results, with features broken down my section and clearly labeled for your convenience.

View Browser Tables

Coming Up...

We're introducing more browsers to our tests including "edge cases" such as Flock, Konqueror and older versions of the major browser vendors.

We're also consider adding tests for Flash version & Screen Resolution.

If you have any features you'd like to see added to FindMeByIP, or you've got some feedback for us then please let us know by leaving a comment on our blog. We'd love to hear from you!

We would like to point out that of course none of our clients over the years have ever said anything to us that would make us post their emails on this site... 

... but we do love it nonetheless:

http://clientsfromhell.tumblr.com/

Clients beware! :-)

Most of our clients presume that keyword stuffing is all that's involved in search engine optimisation.  

We think your website is possibly the least important part of your SEO strategy and so we thought we'd provide our 3 golden rules of seo here for all to see in order to put that fallacy to bed for good.

1: Quantity of inbound links - Volume

Think of your website like a celebrity. There are two basic principals at play here:

1. Volume
   The more you are discussed the more important you must be.
    
2. Importance
   The more important the people are who are discussing you the more important you must be by association.

This is the underlying principal that lead two students, Laurence Page & Sergey Brin, to invent a thing called Google, a search engine that used link citation or references to describe a graph of importance known as PageRank.

If lots of important websites refer to your website that makes your website more important which makes Google, Yahoo and Bing more likely to send people to you.

2: Quality of inbound links - Context

Quantity isn't enough on it's own so you need to make sure that inbound links are of good quality too.  

There are three areas to consider here;

1. Website Context
   If there are links from David Beckham's blog and the Manchester United website to your website it's safe to assume your website is within the "context" of football.
    
2. Link Content
   If David writes the following "and so if you want find a great football shirt shop then they're the best" then it's safe to assume that your website is a football shirt shop.
    
3. Link Depth
   If David links to your home-page that's great but if he links to a specific, page deep within your site ( like mywebsite.com/football/shirts/ ) then it's safe to assume that this page is more specifically related to the subject.

The second point is vitally important.  This link is independent, descriptive and trustworthy.

The content and context of links on other people's websites is far more useful to Google than the content of your own pages because it's independent and so can be trusted a little more than the content on your own site.

3: Your website - Phrasing & Markup  

Last, and - yes - least, is your website itself.  Your website is, of course, really important but we can't stress enough that it's the least important of our 3 golden rules of SEO. 

When optimising your website there are, again, two things to consider:

1. Phrasing
   Think about the phrases people use when searching for your service.  The more closely the phrases of your website mirror the phrases people use when searching the more likely you are to appear.
    
2. Markup
   Make sure every page of your website has a good title and that you're using headings correctly.  You need to turn off all graphics & CSS to get an idea of this though.

What your website looks like ( to the average visitor ) is irrelevant to getting people through the door.  You need to treat Google as if it were a visually impaired visitor - it can't see any of your images.  Additionally it doesn't run scripts and it doesn't fill in forms.  Making your website accessible and optimising it for search engines is really the same thing. 

Is that it then?

Of course not - there's a massive amount more to say on the subject and this is as good a place as any to start. 

I'll be adding a 4th and 5th rule shortly.  These are a little more technical but explain a little about what to tackle first to get the best results.

In the meantime if you think I've missed anything let me know!

I'm by no means a writer - I design and I code, but working on the web means that I encounter examples of web copy (both good and bad) on a daily basis. Therefore, although I'm not an "expert" per se, you could say I have some experience in this area.

I regularly try and pass on my knowledge to clients who are coming to write web copy for the first time. To help them (and us) with this I've compiled a short list of principles which serve as a basic guide to writing text for websites.

1. Make Content Easily Scanable

Reading copy online is harder on your eyes than reading from paper based mediums. This is partly due to the relatively low resolution of monitors (eg: 96dpi) compared to print (300dpi+) which means that our eyes/brains have to work harder to decipher the letter-forms.

Research has shown that rather than reading from top to bottom, users tend to scan copy using visual cues to determine what they want to read. Therefore, large chunks of unbroken text simply won't cut it.

Things to do

• Break text up using descriptive headings.
• Use lists (bullet points) and short punchy paragraphs to break up copy.
• Sprinkle copy with visual cues such as occasional emphasis and links to add interest.

2. Get to the point

Considering that it's difficult to read large amounts of copy online it's generally best to use the Inverted Pyramid style of writing. Make your conclusion first and then proceed to provide a few examples to illustrate your point.

The advantage of this approach is that  your users won't have to invest time in reading the whole paragraph before they can decide whether the content is relevant to them or not.

With web users becoming increasing impatient, this style will make you popular with your visitors.

Things to do:

• Read a few newspaper articles both off and on-line to get a feel for the style.
• Read Writing Inverted Pyramid by Jacob Nielsen.

3. Be concise

You may have lots of information to convey to your readers but nothing is more frustrating than a paragraph that goes on forever and comes to no conclusion.

Get to the point, fast.

Unless your cater for a specialist market, your users probably only want the essential information about your product/service. You might be an expert with lots to say, but don't overload them with too much information which could be found elsewhere.

As regards length, if we consider that studies have shown that reading on screen is 25% slower than on paper, you probably need to be looking at reducing your word count by at least 50% to make your copy effective.

Things to do:

• Look for areas where you are saying something that is not crucial information and remove it.
• Strive to cut out all unnecessary words.
• Remember: "Get to the point and be concise".

4. Write in "Plain English"

Don't be unnecessarily complicated. Keep your wording and naming conventions simple and unpretentious.

For example, you might have internal naming conventions for your products/services but if these are potentially confusing for your audience then you need to replace them with simpler versions.

Many professional web copy writers advocate aiming your copy at a medium reading level so as to achieve maximum comprehension across a wide section of the public.

Don't dumb it down too much, but don't use terms that are going to confuse your readers either.

Things to do:

• Avoid internal naming conventions
• Remove confusing terms or phrases
• Keep everything simple

5. Make it keyword rich for search

Make no mistake, web copy should be written primarily for humans not machines. However, as long as it doesn't impact on readability there is no harm in trying to include keywords/phrases that will help position yourself in the Google search rankings.

For example if you are a self catering business in Scotland, you might try sprinkling relevant keywords throughout the copy of your website.

eg: "There is a wealth of accommodation in Scotland..."

If you are obeying the points outlined above the keywords should slot naturally into your text, especially in your descriptive headings and internal links.

Things to do:

• Write primarily for humans not search engines.
• Research keywords/keyphrases and sprinkle your copy with these.
• Focus on headings and links.

Final Points

This is by no means a comprehensive review of how to write effective web copy and other authorities on the subject have written far more exhaustive guides. Nonetheless, it should prove useful as a beginners guide.

I'd love to hear if you think I've missed out something crucial. Why not leave a comment below and I'll get back to you with my response.

The web-sphere gets more and more exciting as each year passes.  International phenomenons like Facebook and YouTube often eclipse the equally amazing apps which, while not as appealing to the sofa surfing masses, are making a real difference to the way we, an you work and interact each day.

We thought we'd round up just five of our favourite web apps; on-line tools that have made a real impact on our day to day lives.  There must be a hundred more equally deserving apps out there.  I'd love to know what they are!  I'll write this article again next November so if anyone wants a shot at that please put your favourite apps forward!

1: Freshbooks - On-line Invoicing

• 
  On-line Invoicing

According to their website since May 2004 Freshbooks has acquired one million new users and I can tell you why.  They've taken the pain out of the arduous task of invoicing your clients and made the whole process a breeze.

I can't believe that once upon a time we used to raise our monthly retainer invoices manually!  Can you imagine what a dull task that was?  Freshbooks has changed all that.  

A simple, slick and solid interface allows you to raise estimates quickly and easily, ping them at your client to one-button-approve and then, when the time comes, convert them to a digital invoice.  Recurring invoices like bills for hosting are raised and sent to the client without any intervention at all.  Just the time it saves for any small company like us is enough to justify the tiny cost ten times over. 

Those of you in the US will get to enjoy slightly better integration with PayPal that allows for repeat billing but nevertheless even here in the UK hooking up Google Checkout, PayPal and so on is super simple and very effective.

Things to improve:

• Ability for clients to enter a purchase order when approving an estimate would be great.
• Improving the 'context' of the page you're on so it's harder to lose your place.  Basing the pages on a URL structure ( "/invoices/client-name/create-new-invoice" ) would make bookmarking a breeze and (imho) fix the problem.

2: ActiveCollab - Collaborative Project Management

• 
  Project Management

ActiveCollab is a host-it-yourself project management tool that, again, has changed our world quite a bit! If I'm honest we've been using ActiveCollab since its version 0.7 days but a total re-write and commercialisation of what was ( I think ) a bit of a pet-project has seen this app mature into a solid, extensive and fundamentally important tool for us.

Collaborative project management means inviting your clients in to share in the process of planning out your project and keeping it on track. AC provides segmentation of projects from Milestone -> Ticket -> Task, all of which can be both independent and associative, time-tracked, assigned, etc. etc.  

Like all good apps it's also extensible and the guys over at AppsMagnet have developed two great add-ons for reporting and planning, the latter providing interactive Gant charts of multiple projects which is a massive help for managing your working week.

There are a couple of extensions which, largely because we've already other things in place, we haven't even looked at yet.  These are invoicing and Version Control.  I'm doing AC no justice at all with this quick little mention.  If you want to know more about the document sharing, time tracking, iPhone version, inbound email etc., etc., take a quick tour.  

ActiveCollab has become the bedrock of our planning strategy and the time it saves us means that we can afford to hit deadlines and still keep Fridays to ourselves!

Things to improve:

• Wiki-Text for the collaborative pages, and tickets would be brilliant, particularly wikiLinks a la Trac 

3: LitmusApp - Email Client, Spam and Browser Testing

• 
  Email & Browser Testing

Browser testing is one thing, particularly these days, because on the whole most browsers do most things the same way ( with the obvious magical-mystery exception of Internet Explorer ) but email testing remains a real pain the the Outlook!  

To the rescue - LitmusApp! Fire your email at a magic email address ( or just upload the source ) and the guys at Litmus will render your email in seventeen email and web-mail clients.  For each you'll get opened, unopened, full page, with images, without images etc..  

You can also publish your results so your clients can see...take a look at this example which is a email to the golf members of The Park Resort - a local hotel and golf resort that we look after.

It doesn't stop there either.  The same email will go through all the big spam filters and spam testing of the major clients - twelve at present - advising you if you're missing text/plain or your font sizes are too big etc.

Using a tool like this makes me wonder how we ever managed before.  A combination of blind faith, a lot of RAM and a massive amount of patience and we were no-where close.

With Chrome, Opera, Safari and Firefox all pulling in the same direction HTML & CSS standards are coming on in leaps and bounds.  The sad fact is that html-email rendering standards are going just as fast backwards.  Microsoft in their infinite wisdom have decided that Word is the worlds favourite html renderer and even Gmail is pretty awful in some areas.  The point is that Litmus mitigates so much of the potential hazards of html email by showing you exactly what everyone else sees.

Things to improve:

• Would be nice if they tested web-pages too.  Oh, no, they've done that...
• Would be even better if you could test pages you only see once you've logged in..   dammit! ;-)
• Could do with looking into the buggy Outlook 2007 capture.

4: DropBox - File Sharing & Storage

• 
  File Sharing & Storage

Celebrating their first day on their rightful domain dropbox.com is, again, a very simple idea, blindingly well executed.  

Download ( if you wish ) a little app to your Mac, PC or Linux box and sign up for a (to start with) free account and hey presto you've a folder on your computer that follows you everywhere.  That's it. Done.  My stuff that I'm working on in the office is now in my study at home, on my lap on my sofa or even on my phone.

What I think gives DropBox some credibility is that we've been doing this ourselves for years...we've servers in various places around Bath and indeed Europe and tools like rsync provide an amazingly quick model for synchronising [the changes in] files between your servers.  So what's new?

First; Execution. DropBox is a desktop tool and it's not intrusive in any way.  You just get used to the fact your files are always there - like synchronised bookmarks ( in Chrome 4 beta - woo hoo! ).

Second; Collaboration.  Invite clients in seconds to share specific files or folders and suddenly you've done away with FTP and "I can't email you these high-res photos, I'll burn a CD" entirely... on a day-to-day basis it's totally changed the way we work with clients like Dickies who have lots of catalogue data and thousands of high-res images to deal with.  We just have a shared drop box folder and the stock of photos lives there.

Third; Access.  Because you don't even need to install the app.  Just visit dropbox.com and there are all your files... wherever you are in the world.

Things to improve:

• Excel.  It's a sad thing really and the guys at dropbox do know about it but Excel touches its files when you open them - triggering an update of the file even if you don't save any changes.  The conflict management does spot it if two of you have the same file open and take evasive manovers so it's hardly a big problem.
• Locking.  Conversely the Excel touching thing could come in handy as much as it would actually be nice if it knew if someone else had the same file open.  Particularly relevant to documents and spreadsheets.

5: Xero - On-line Accounting

• 
  On-line Accounting

Last, by oh-my-no means least is Xero.  

"But everyone uses Sage and they always have" said my accountant,  "It'll never catch on, it won't know what it's doing, it'll take too much learning" he continued.  (Sorry Simon!) 

Xero is possibly one of the most comprehensively well put together pieces of web-software I've come across ( except for back-end of our Spirit Content & Business Management Framework of course! ;-)  Even if you've no interest in Accounting, if you're just a web designer, you should still take a good, long, hard look at Xero for its UI design.  Even the help-centre is impressively well organised.

Underneath it's beautiful UI is an incredibly capable and ever improving accounts platform that already blows Sage out of the water.  All the standard things from repeat invoicing to account journalling are there as you'd expect.  

But it's the end-to-end integration of everything that makes the difference.  We're lucky enough to bank with HSBC who will feed your bank statement data straight in every day ( no importing ), as will PayPal.  From there the reconciliation process is practically automatic - Xero will recorgnise most of your statement lines and match them to the corresponding invoices.

All the reports you'd expect from your VAT return to full end of year accounts are just a click away. 

Accounts doesn't often get exciting but Xero really does rock.  It's making a massive difference and, like all the apps here the time and hassle it saves more, far more than compensates for the small running cost it represents.

One last thing to say is this:  moving from Sage will seem like a massive struggle.  Believe me; persuading your accountant will be most of the battle.  When it comes down to it it's actually very straight forward and simple and definitely worth it.

Things to improve:

•  We would've saved time knowing that you could complete the setup and retrospectively import outstanding invoices but then, well, we probably didn't RTFM.
• Automatic/bulk mailing of recurring invoices ( although I heard a rumour that was on the way! Yippee ).
• Integration with Freshbooks... oh, yes, I think I can hear that round the corner too. Nice!
• ... and possibly, if I'm being picky, Xero suffers a similar workflow problem as Freshbooks that, if you're looking at a client getting to that clients invoices and, particularly, when you've finished a task being returned to that client's invoices doesn't seem to happen.  It's not a massive problem - Ctrl+clicking things into a new tab or a few extra clicks but...

What have we missed out??

I'm sure I've missed so many great apps from this list and I'd love to know what they might be.  If you've got a favourite app, something that's really changing the way you work I'd love to know about it.  If it's something we might use then I'll test-drive it in 2010 and, if it really is great, I can talk about that next year!

Since the launch of FindMeByIP.com we've received some really great feedback from everybody. You've let us know how we could improve the service and it's provided a great insight into the kind of problems web designers run into on a day to day basis.

Retrieving Client's Browser Information

For me one problem really stood out above all others - the need to find out what browser your client is running.

We've all been there. The client rings up to tell you there's a bug on their site. You ask "What browser are you using?" but they don't have a clue. You then spend ages explaining to your client how they can find out their browser details.Tedious!

We set out to solve this problem...

The Solution

We've taken the original FindMeByIP.com engine and added the ability to run reports on your clients' browser environment.

To get detailed reports you simply:

1. Sign Up for an account
2. Send your client a dedicated (and customisable) URL (eg: findmebyip.com/my-company-name)
3. Receive complete FindMeByIP reports on their browser and system environment.

It really couldn't be easier!

What Information will I get?

You'll get a full report on your client's:

• Browser version
• Operating System
• Browser support for [a selection of] HTML5 and CSS3 features
• Full User Agent String

We're adding new tests all the time so watch this space for:

• Plugin detection (Flash...etc)
• Screen/Window resolution detection.
• CSS3 selector tests.
• Extra HTML5 tests.

Let us know what you think

Think we've missed something? Found a bug? We'd really like to hear from you. Just leave a comment on this article and we promise to get back to you.

We don’t need to tell you that social media has taken hold of the net… and isn’t about to let go, that’s old news. What we do need to tell you is that social media holds the key to more reservations  perhaps much more than you think.

Here are our top ten ideas for how hotels, conference centres and spas can really embrace social media:

1: The twitter concierge service.

Set up a twitter page and encourage visitors to your website (through a link) to ask questions and get immediate responses through twitter. Hyatt have done this very successfully, take a look at Hyatt's concierge twitter account. 

2: Share your positive reviews.

Post your positive reviews to your blog and set up a twitterfeed to help you propagate the good news through twitter and Facebook.

3: Find new staff through social networks.

Trust me, if you’re looking for new staff then try tweeting about it… you’ll see for yourself just how powerful a medium it is when you have CVs flying in and no recruitment agencies hassling you for fees.

4: Set up a blog and double organic traffic.

Download a Wordpress blog template for free and start writing engaging, search optimised content that is going to get picked up through natural searches. See Grayshott Spa for one of our examples of how providing valuable content for your guests provides rewards for you in terms of traffic.

5: Want more weddings, conferences etc?

Demonstrate your position as an expert. Use blog posts and tweets to position yourself as an industry expert. What are the biting issues or advice in those sectors? Content doesn’t necessarily need to be related directly to your hotel – think laterally and on topic.

6: Promote your best pieces of content.

You’ve just spent a couple of hours writing a killer piece of content around a subject that is relevant to your market or industry. The worst thing you can do is let it sit there and fester… pro-actively offer the article to your industry magazines (on and off line) as well as other thought leaders (bloggers) relevant to the topic.

For example you write a great piece around the importance of having a Christmas party as a business. Take it to small business blogs. If they publish it, you’ll not only get their web traffic but you’ll also get a valuable link back to your website.

Some great places to start in relation to hotel marketing are www.hotelemarketer.com and www.hotelmarketingstrategies.com.

7: Bad press?

Start managing your online reputation effectively. Many hoteliers have had sleepless nights thanks to the likes of social sharing sites like TripAdvisor. These sites are definitely here to stay so stop ignoring them and hoping they’ll disappear. If you get a negative (or positive) review you must respond. You have the opportunity to do this on TripAdvisor. If the review is particularly negative then we suggest featuring your response on your blog. Sounds like madness? Of course not; you’re showing the world that you have nothing to hide and therefore will gain respect.

8: Keep prospects and customers informed.

Social media has made it easy to share information and now it’s time to get your head around how to do this. Build up a twitter following or perhaps a Facebook Group over time and give them exclusive offers and discounts before anyone else… your following will grow faster than you think!

9: Keep abreast with what the competition are up to.

Find other hotels on twitter through Twellow, a very useful twitter directory service. Follow them and keep an eye on what they are promoting and when. This may give you inspiration, but will ultimately allow you to gauge just what’s going on in their world.

10: Get personal.

Take pictures of your guests holding parties, conferences, weddings etc and feature them on your blog (with their permission of course) and you’ll be building a loyal community without even knowing it. They will feel attached to your brand and no doubt share the picures/stories with their friends… hey presto new clients and a lot of trust!

It looks like Google aren't letting up on expanding the power of their (free) analytics tool.  A recent announcement lists a number of great advancements many of which we're already finding very useful.

Many more goals...

I'm a fervent believer in measuring "Goal Conversions" not "Visitors"...  this website's a perfect case in point.  FindMeByIP.com and a couple of Dave's recent blog articles about CSS3 & HTML5 have brought more visitors per day than we usually get in a year but does that mean any more business for us? ... well no, sadly.. probably not immediately anyway.

So we don't just track visitors, we also track "Goals" because this is a real measure of what the website is contributing to the business. And don't be fooled into thinking Goal Tracking is just for E-Commerce sites.  With a little ingenuity you can off-line the goal tracking process, putting you in control of the conversion.

Goals used to be limited to four per profile - meaning that if you had plenty of contact forms you want to track ( The Park, for example, has enquiry forms for Golf, Weddings, Meetings and Leisure Breaks - ok that's four Goals already - so what about online reservations, membership, jobs, general enquiries.. ).

Expanding the number of goals that can be tracked is a great development.  Google now allows you 20 goals, in 4 groups of 5.  More than enough for most of our clients.

If you need more than 20 you can, of course, just set up multiple profiles for the same tracking-id... giving you potentially hundreds of goals to track.

Double Analysis...

Another great new feature is double analysis.  This is a very simple addition ( cosmetically I mean ) that allows you to add a second level to your segmentation of results.  Try it in any of your reports...  if you're looking at a report by "Medium" you can add "Source" as a second breakdown, giving you ( source X medium ) rows of information.

This is very useful, for example, to help you understand the different landing pages that different referring sites send your traffic to.  Something that's previously required some digging.

Custom Variables...

Most exciting of all is custom variables... but this is, sadly, where this article's going to have to go on hold because I've discovered, having looked more closely into the announcement that the reports aren't yet available to everyone.

To give you a quick idea of the power we expect them to provide...  

Spirit has a pretty cool "Role Management" framework within it.  In simple terms, when someone logs into or interacts with one of our websites Spirit analyses a tree-structure of roles and assigns that user to a few appropriate roles.  Membership of a role can effect dozens of low level systems within Spirit - all configuration, row-level database access, consequence of form interaction, access to pages, content , emails communication or just behaviour of the website.

In probably no more than an hour on Friday afternoon I was able to identify add "Role Membership" of a few selected roles to Google Analyitcs as Custom Variables.

I'm experimenting, first off, with a client website iStylista - a personal shopping service.  

I've chosen two branches of the Role Management tree to look at:

• "Logged In" (or not)
• "Profile Complete" ( or not, and if not how much is complete ). 

iStylista provides two principal services for women. First, it provides a 20-30 page personalised Style Guide helping women choose what styles suit them according to thousands of variables the user provides.  Secondly it provides personal shopping advice based on slightly fewer variables.

In the latter case the customer doesn't need to provide any information to use the service but the more information they provide the more accurate the choices the website makes based on the information the stylists have provided.

What intrigues me is whether the people who use iStylista to help them shop are getting the most out of it.  

With Google's new Custom Variables we're now recording roughly how complete the consumer's profile is and whether the user is logged in.  This should tell us whether we need to make it easier for people to profile themselves, what bits of the profiling ( bodyshape, sizes, budget ) people find most useful and so on.  All of this should help us make the experience quicker, simpler and more accurate for the ladies who use the service.

All we're waiting for now is for Google to provide us the report that shows us all the data we're collecting!! 

Download Icons Now

Most of you will be only too familiar with the problems associated with Internet Explorer 6 and alpha transparent PNG images. It's inability to correctly render semi-transparent pixels (alpha channels) mean that web developers constantly have to use javascript hacks to remove the ugly blue border which appears around these graphics.

This situation is bearable if you are using only a few PNG files in your design, but what if you have a design that uses many smaller images, such as icons? When this happens you can quickly find yourself having to "fix" numerous instances of the dreaded "blue border" in IE6, which is not only inconvenient but can also really slow your website's rendering speed.

For example, here at DeepBlueSky we regularly use the fantastic Fam Fam Silk icon set by Mark James. It's a brilliantly useful set of 16x16 png files which make full use of the alpha-transparent format. It's great for modern browsers, but it produces unacceptable results in IE6.

The Solution

Thankfully however, there is a method for exporting png files which contain alpha transparent pixels so that they look acceptable in IE6 whilst still looking great in modern browsers. This solution has been well documented and effectively removes the problem of the "blue border" in IE6 allowing you to drop in your png icons without having to worry about backwards compatbility.

I've used Adobe Fireworks to create a PNG-8 versions of the whole Silk Set icon library making it  "backwards compatible" in Internet Explorer 6. Modern browsers get the full alpha channel experience whilst IE6 gets an acceptable compromise similar to that seen when you don't specifiy a Matte colour on transparent .gif graphics.

Download

You can download the full IE6 Silk Set (with kind permission from Mark James) direct from here. All the original licenses still apply so please see Mark's site for full details.

Last week we launched FindMeByIP.com, a simple app which reveals your browsers' support for CSS3 and HTML5 features in an easy to read format using Modernizr.

We've had a great response and we're going to be implementing some of your feedback in the near future.

For now though I thought people mind find it useful to know the state of support in the current browser market.  I've taken all the A-Grade browsers and tested them one-by-one for their feature support . Needless to say it's produced some interesting results.

Safari 4 (Win)

Safari (on Windows) has by far the best  feature set in the current market, outdoing competitors like Firefox 3.5 and even Google Chrome.

Particularly interesting is the excellent support for CSS3 animation properties such as CSS Transforms & CSS Animations, which enable the developer to define javascript-like rotation, movement and easing via CSS (advanced demos).

HTML5 features are well supported with Canvas, Video and Audio all implemented. Only the Geolocation API is currently not available, although apparently this is in the pipeline.

Firefox 3.5 (Win)

Firefox 3.5 has good support for features that you might be looking to use in your client work on a day-to-day basis. @font-face, box-shadow, rgba() and border-radius all work nicely.

Although, it doesn't quite match up to Safari when it comes to CSS animation, it makes up for this with solid implementation of HTML5 media (video and audio).

A major plus is that Firefox 3.5+ implements the first public draft of the Geolocation specification from the W3C which I anticipate will be very useful in future web applications.

Google Chrome (Win)

As you'd expect for a WebKit browser, Chrome has really excellent support for almost all of the Modernizr tests generated by findmebyip.com.

The big let down is the lack of support for @font-face. This has been widely documented and there are known work arounds for it.  Google has promised that the next version of Chrome will add native support for web fonts.

I was very surprised to see 3D Transforms return positive.  I believe this is currently only supported by the iPhone and iPod Touch so I'm not sure about the accuracy of this result.

Opera 10 (Win)

We got quite a few comments about Opera's perceived lack of support for advanced features. It's true that support for CSS3 features is poor, especially when border-radius still hasn't been implemented.

Nevertheless, as Bruce Lawson has suggested to me, Opera does have good support for other important web standards which are currently not being tested by findmebyip.com.  He highlights  "Web Forms 2" and SVG support as two primary examples of Opera's excellence in these areas.

Nonetheless, I still feel that Opera needs to catch up with the CSS3 spec if it wants to be adopted by the mainstream web dev community.

Internet Explorer 6, 7 & 8

And now the one you've all been waiting for.  Lets all have a good laugh! Well not quite, because unlike some other contenders, Internet Explorer does actually support @font-face (all be it only in .eot format). In fact it's supported it for a while, with even IE6 providing complete support!

Nonetheless, with the exception of font-face, Internet Explorer does display a marked lack of support for almost every kind of advanced/progressive feature.  Hopefully the IE team will be able to look at this in a future release, but I'm not holding out any hope.

Summary

There is now a consistent level of support for many of the CSS3 and HTML5 features that the average developer might use for progressive enhancement.  From my survey the most widely supported features were:

• rgba()
• hsla()
• opacity()
• border-radius (except Opera)
• canvas

Outside of these however, support is patchy and is largely dependant on the whim of the browser manufacturer.  Some browsers are way ahead of the game (Safari), whilst others have a intermediate (Firefox) or even poor(?) support (Opera).

It should be noted however, that findmebyip is not perfect and as a result doesn't report on all advanced features.  We'll be upgrading the site in the near future to include a full range of tests for Web Forms and even SVG graphics, so perhaps another test will be in order then.

Finally a request to you Mac geeks out there.  Unfortunately, we don't run Mac's so I can't comment on OSX versions of these browsers.  If anyone would like to let us know how the Mac versions of these browsers perform and post them as a comment we'd be very grateful.