iStylista Launches

A new and revolutionary virtual personal stylist service that will help you define your style within minutes.

  • Blogging can be a frustrating business
    Blogging can be a frustrating business

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?

Web 2.0 and Social Media, where deployed in a joined up and strategic manner can be axiomatic in a successful online marketing strategy.

or...

Using Social Media well can increase your profile and boost sales!

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 URL hacks
    YouTube URL hacks

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.

  • The charts are coming!
    The charts are coming!

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!

  • I'm not a natural runner!
    I'm not a natural runner!

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

  • Firefox 3.6
    Firefox 3.6

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.

 

  • Web Innovation Awards
    Web Innovation Awards

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.

  • Generic Ironic Image
    Generic Ironic Image

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.  

  • Fixing shortcuts in Fireworks
    Fixing shortcuts in Fireworks

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.

 

  • iStylista - Personal Shopping
    iStylista - Personal Shopping

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.

  • Screenshot of Bryn Melyn website
    Screenshot of Bryn Melyn website

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.

  • FindMeByIP.com has been updated!
    FindMeByIP.com has been updated!
 
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!

  • Clients Beware!
    Clients Beware!

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! :-)

  • Google, the biggest and best?
    Google, the biggest and best?

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!

  • Web Copy - it's a Geek to me
    Web Copy - it's a Geek to me

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.

  • Top 5 Apps of 2009
    Top 5 Apps of 2009

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

  • 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

  • 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

  • LitmusApp - Email & 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

  • 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

  • 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!

  • Get started with client reports
    Get started with client reports

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.

  • Engage with your guests online
    Engage with your guests online

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!

  • Custom Variables - Coming Soon!
    Custom Variables - Coming Soon!

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!! 

 

  • Fireworks export settings
    Fireworks export settings

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.

  • CSS3 and HTML5 feature support
    CSS3 and HTML5 feature support

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)

Modernizr support in Safari

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)

Modernizr support in Firefox 3.5

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)

Modernizr support in Google Chrome

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)

Modernizr support in Opera 10

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

Modernizr support in Internet Explorer 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.

33 Comments on this post

  1. Jon said “Fab insight Dave!” last year
    Gravatar for Jon

    Thanks for this post Dave, lots of great insight into whats happening with browser support as the tech changes! I follow with a keen eye on this!

  2. Russ said “Great work, but make it more usable, accessible?” last year
    Gravatar for Russ

    Hi David,

    The work you've done is great. However, each result is an image with very limited alternative text such as "Modernizr support in Opera 10" (which means it is not accessible for unsighted people who may want to access the content), and does not allow users to compare a single feature across different browsers.

    Would it be possible to see all this in a comparison table?

  3. Ann said “Mac results” last year
    Gravatar for Ann

    Safari 4.0.3 returns the same results as the Win version. Firefox 3.5.3 supports nothing on the list (which strikes me as odd). Both tested on Intel Mac running Leopard.

  4. Lucas said “Mac browsers…” last year
    Gravatar for Lucas

    Mac versions of Safari, Firefox and Opera act the same, according to this test.

    Chrome developer preview for Mac doesn't even get the page's encoding right.

    Flock and Camino don't go well.

  5. Simon said “Details of browsers on OS X 10.6” last year
    Gravatar for Simon

    Here's a screenshot on Flickr - hope this is of use.

  6. Adam said “Mac Browsers” last year
    Gravatar for Adam

    Safari 4, Firefox 3.5, and Chrome all have identical results to their Windows counterparts.

  7. Magne said “A few notes...” last year
    Gravatar for Magne

    "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."

    It was added to the "regular" Webkit in June this year. See: http://webkit.org/blog/386/3d-transforms/

    As of now, it is only supported on Mac OS X, Windows support will most likely come soon too.

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

    I was a bit surprised when I read that, as Google Chrome runs on Webkit. Since they do not appear to implement many of their own features, I do not find it surprising that Safari supportes more things than Google Chrome.

    Also, a last note on CSS Transformations and CSS Animation. These have been proposed and implemented by Webkit long before they became part of the CSS3 specification.

    While this is a great initiative, and I truly like the features these brings, it might be a bit unfair to judge other browsers with them included, since they weren't a part of the spec until recently.

    Nonetheless, support for CSS Transformations is coming to Firefox quite soon it seems.

    Opera appears to have made quite a few bad choices when choosing what to work on to support. They support a huge amount of things that other browsers does not, but almost none of those things has been "popular" aspects of HTML5 and CSS3.

    http://a.deveria.com/caniuse can give you about the same conclusion, but a bit more detailed.

    Also, http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29 and the similar pages can give a perspective of what Opera has implemented that other browsers have not.

    All in all, this was a short and good presentation of the current support in browsers. Good work!

  8. Chris said “Mac Browsers” last year
    Gravatar for Chris

    Chrome 4.0222.5: http://imgur.com/UTFaJ.png (No @font-face or Geolocation API)

    Firefox 3.5.4: http://imgur.com/0hKaw.png (No CSS Animations, CSS Reflections, CSS Transitions, Multiple Backgrounds, CSS Gradients, CSS 3D Transforms)

    Safari 4.0 (5530.17) : http://imgur.com/N5GG5.png (Same as Chrome, no @font-face or Geolocation API)

  9. Magne said “The browsers on a Mac...” last year
    Gravatar for Magne

    I forgot to add, all of the browsers perform exactly the same way on a Mac as it does on Windows it appears, which makes me just a bit surprised that it gave you the "green light" on 3D-transforms on Windows. Maybe they got support for it there now, you tell me. Thanks!

  10. Doug said “Further Thoughts” last year
    Gravatar for Doug

    Couple of things:

    Firefox currently doesn't get border radius right. Yes it's implemented and works on most elements but it cannot do it on images or elements containing images unless they're a background. Which is really bothersome.

    There are also issues with both Safari and Firefox using border radius on an image that has a border that's less than the border radius. It doesn't make a smooth curve, as would be expected.

    Safari for Mac and Safari for Windows are, for all intensive purposes, identical. Apple works very hard to make this the case so that you can, in theory, test your iPhone web-aps on your desktop in Mac or Windows.

    I can't comment on Firefox but I've never noticed any major differences.

  11. Arve said “Neat.” last year
    Gravatar for Arve

    Nice testing. I must say, I am slightly disappointed by Opera - they are supposed to be one of the big'n'great, why so little CSS3/HTML5 support?

    And doesn't IE8 support more than 6?

  12. Jesse said “Mac Version Results” last year
    Gravatar for Jesse

    Linked are the results using your test for the listed. The listed broswers in the post are:

    Firefox

    Safari

    Chrome Dev. Preview

    Opera

    Camino

    Head over to http://vanderpol.me/post/214980950/here-are-screen-captures-from-5-major-browsers

    for the results.

  13. Chris said “Mac Browsers” last year
    Gravatar for Chris

    For the record,

    Safari 4, Firefox 3.5, Chromium (Google's Chrome development port for Mac) are the same as their PC counterparts, as far as this test is concerned.

    Opera 10 is the same, but does not support @font-face.

    Oddly enough, the Webkit nightly build (@17 Oct 09) shows @font-face not supported, unlike Safari.

  14. Stewart said “RE: Mac user” last year
    Gravatar for Stewart

    I tested Safari 4 on Mac Snow Leopard and it checked out except for Geolocation API.

    Also, you might consider separating your "Post comment" and social media icons from the "About author" box. They're rhetorically distinguishable content not related to the author and would be better emphasized in their own div.

  15. Fred said “Mac versions” last year
    Gravatar for Fred

    Safari 4/Webkit r49550/Stainless 0.7 are all the same, as seen in this screen grab:

    http://www.ball-ball.net/images/findmebyip-webkit.jpg (basically full support except GeoLocation API)

    Firefox 3.5, screen grab: http://www.ball-ball.net/images/findmebyip-ff35.jpg

    (basically supports most things except gradients and reflections but does support GeoLocation API)

    Hope that helps a little. Great post. Thx!

  16. J said “Safari / OS X” last year
    Gravatar for J

    Exactly the same results as your windows test

  17. Mark said “3D Transforms [or the lack thereof] in Chrome” last year
    Gravatar for Mark

    The test that Modernizr uses to detect 3D transforms checks only that the CSS object model preserves the value of the “perspective” CSS property. Google Chrome is able parse, save and return this property, but is not able to render 3D CSS transforms. It’s misleading to extrapolate support for 3D transforms based only on the ability to save and restore this single property.

  18. cj said “safari 4/ff 3.5 on os x (snow leopard)” last year
    Gravatar for cj

    exact same results as the windows versions.

  19. David said “Modernizer on Safari 4 Mac...” last year
    Gravatar for David

    ...looks exactly like Safari 4 Windows. The Geolocation API is the only thing that failed the test. Go Webkit!

  20. Vaibhav said “Webkit Adaptation.” last year
    Gravatar for Vaibhav

    Microsoft should use webkit instead of trident.They know their rendering technology is worst, they know how painful it is to maintain the compatibility of websites. May be someone should start a campaign notrident. com and force them to adapt webkit. They give the excuse of innovation window. Cmon MS u r forced to innovate u don't innovate by urself. Even if webkit is used there is plenty of room for innovation.

  21. Yngve said “Ubuntu 64bit” last year
    Gravatar for Yngve

    Here is a similar test for my browsers. I run Kubuntu 64bit (i.e. Ubuntu with the KDE desktop environment), and have the following browsers available:

    Arora 0.5 (webkit, same engine as Safari)

    Konqueror 4.3.2 (khtml, is a fork of webkit as far as I've understood it)

    Opera 10.00

    Swiftfox 3.5.3 (Firefox, just with optimized compilation for different architectures)

    Please save the screenshots if you want to keep the results for some reason, I will probably remove them from my server eventually...

  22. Lars said “A few things missed” last year
    Gravatar for Lars

    Modernizr is great, but it has an implementation that is slightly webkit focused. As said, it does not test for SVG or uses of SVG that is supported by Opera or Firefox, such as SVG background images or indeed SVG used with the img-tag (Opera). SVG clip-paths and filters for HTML content and the über awesome paint servers in Firefox is also not detected.

    I also think one should test for better JavaScript support. Significant parts of ECMAScript 5th ed. has been around in Firefox for ages and the missing parts are being added on a daily basis right now.

  23. Ralph said “Tested on Mac” last year
    Gravatar for Ralph

    Since no one else has responded, I ran your test with the same versions of Safari, FF and Opera on my Mac, and the results were identical. :-)

  24. Paul said “on Modernizr..” last year
    Gravatar for Paul

    As one of the Modernizr devs I wanted to jump in here real quick.

    The 3D transform test is exactly how Mark described it. It's causing a false positive in Chrome.

    It's certainly a bug; I've filed a ticket on it. Should be a fun one to fix. :)

    Lars, I'd love to hear your thoughts for the SVG tests that would be most valuable. I've been tracking this issue here. It's definitely something we want to see in Modernizr 1.5

    Also, Modernizr is hosted on github so we'd love to get more people looking at the code and forking it. http://github.com/Modernizr/Modernizr

    Cheers

  25. David said “Thanks for all the great responses” last year
    Gravatar for David

    Thanks for all the great responses guys. Some of my comments are below:

    @Russ I take your point about accessibility of alt text. I did consider this and made the judgement that as the service was JS dependant there would be little requirement for fully descriptive alt attributes. However, if people feel that this is a necessary feature I'll redo this info as a table when we release the new version next week.

    @Magne Thanks for the info on CSS Transistions and your comments regarding the post. Glad you liked it.  I was aware that it was a Webkit initiated addition to the spec and as a result I've tried to be fair in my post by not slamming browsers which don't support these features. However, it'd be unfair not to give Safari the praise it deserves for being ahead of the game.

    @Doug That's really interesting Doug. I wasn't aware of these "bugs" in the implementation of border-radius. Hopefully they'll be overcome in future releases or when the CSS3 spec is more stable.

    @Stewart Good point about the structure. I'll consider changing it.

    @Mark That's really cleared up the "CSS 3D Transforms in Chrome problem" up for everyone. I notice that Paul has filed a bug on this.

    @Paul Thanks for your input. I'll certainly get more involved in the community over at Modernizr GitHub. We all love your work.

  26. Joel said “"all be it" vs albeit” last year
    Gravatar for Joel

    http://www.merriam-webster.com/dictionary/albeit

    thanks for the review

  27. Raju said “Exactly what we need for HTML5/CSS3 adoption!” last year
    Gravatar for Raju

    Great, I like the app. Wanted to build something like that with OpenLaszlo, and I think I'll still do that. The idea there was to have a real time analysis for an app, where the app can tell the developer which browers are going to support the HTML5/CSS3 features, and which browsers need the SWF10 version of the app instead.

    With the different state of support for open standards in popular browsers it becomes increasingly complex to track which browsers will support a certain app. Great work!

  28. Raju said “Safari4 OS X - @font-face supported!” last year
    Gravatar for Raju

    I have Safari 4 with Snow Leopard running, and @font-face is reported as not being supported, which is not true. Still, very useful app!

  29. Ryan said “Geolocation, Transitions” last year
    Gravatar for Ryan

    Technically iPhone 3.0 was the first to support the geolocation API.

    Firefox nightly (3.7) has support for css transitions, and Firefox 3.6 has support for css gradients, although there syntax is different (they split linear and radial into 2 seperate properties)

  30. James said “Linux browsers” last year
    Gravatar for James

    Just for your info and for those who use linux (like me) Firefox 3.5.3 and Opera 10 behave the same as the Windows amd Mac versions, Knoquera 4.3.2 (webkit) was disapointing with only 5 ticks and @fontface wasn't one of them.

  31. Nick said “IE info...” last year
    Gravatar for Nick

    Arve said "And doesn't IE8 support more than 6? "

    I heard somewhere that microsoft are not supporting any css3 untill it becomes a 'standard'. So untill its officially released, they're not planning on implementing it at all. So i dont think ie8 actually implements anything thats on the list that was tested. It supports more css2 than ie6 and 7 though.

    Anyway, I'm really surprised by Safari and just how much they support but by how little its used in comparison to Firefox which in comparison uses very little.

    Thanks for the test! :)

  32. Ted said “One Comprehensive Chart?” last year
    Gravatar for Ted

    Great roundup! I found myself going up and down to compare each browser for certain CSS3 elements... any chance you're planning on combining each of the browser charts? Kind of like Campaign Monitor does for their email css rules: http://www.campaignmonitor.com/css/

  33. Antony said “Alas!...Still no dice” last year
    Gravatar for Antony

    I'd dearly love to start using CSS3 in real projects, i'm loving using it in mock ups.

    BUT at the end of the day most clients don't want to hear about why something won't work in certain browsers (because MS IE is predominantly non-standards compliant) or want a site that degrades gracefully in IE, they just want the thing "to work" across browsers consistently

    So alas! it's not quite ready for me to use yet, but great article nonetheless

Add your comment…

  • Screenshot of the website
    Screenshot of the website

Here in the DeepBlueSky offices we've been making a new effort to dedicate Friday afternoon's to "in house" projects. This week I've created FindMeByIP.com, a simple little app that uses a combination of CSS and the Modernizr javascript library to clearly display your browsers' support for advanced CSS3 and HTML5 features.

Why did I build FindMeByIP.com?

As we all know different browsers have varying levels of support for advanced features. If we follow best practice, then it's generally accepted that people using more "modern" browsers get a better experience than those using older models.

At DeepBlueSky I use the Modernizr javascript library to enable advanced features to display in those browsers that support them. The problem is that I keep forgetting which browser supports which feature which means I continually have to inspect the classnames  on the <html> tag!

What does FindMeByIP.com do?

FindMeByIP.com solves this problem by presenting your browsers' support in an easy to read bullet list format. Each feature is tested by the Modernizer javascript library and then shown with either a "tick" or a "cross" icon to designate the level of support.

How does it work?

The website relies heavily on Javascript and the use of CSS descendant selectors to achieve its results.

  • The Modernizr library adds a suitable classname on the <html> tag if a feature is supported by your browser.
  • The site's CSS file contains a list of rules which mirror those used by Modernizr and apply a background icon of a "tick" if matched.
  • Each "feature" is enclosed within a list-item and given a class which matches the rule used in the CSS file (eg: the "border-radius" list-item has a class of "borderradius" and the "canvas" list-item has a class of "canvas").
  • The result is if the feature is supported then a tick appears next to the list-item with the classname that matches that added to the <html> tag by Modernizr.

It's certainly not the most accessible method ever seen, but as the whole site (necessarily) doesn't work without Javascript it's something I can live with.

The future

In the coming weeks we'll be adding some great new features to the site and implementing some of the feedback we've received so keep checking back for upgrades.

We'd also love to hear from you. So if you have anything you'd like us to know please leave a comment below.

18 Comments on this post

  1. Mark said “Typo” last year
    Gravatar for Mark

    Your title element says "FindMyByIP" — seems to be a typo.

  2. Jim said “@mark - oops, yep!” last year
    Gravatar for Jim

    Thanks Mark, so it is!! Oooops. Fixed.

  3. Andy said “Findmebyip - Location” last year
    Gravatar for Andy

    Strangely findmebyip reports I am in Crewe, Cheshire when visiting with Firefox but in Cardiff, Wales (closer!) when I visit with Internet Explorer (8)!

  4. bruce said “Findmebyip - Modernizr” last year
    Gravatar for bruce

    You seem not to be reporting anything about the browsers' html 5 webforms support (in Opera, Chrome, Safari) although those are given to you by Modernizr (see http://miketaylr.com/pres/html5/forms2support.html for an example).

    Modernizr only goes so far with testing html5 support; Remy Sharp has some extra tests for html5 features at http://jsbin.com/aroho - see the bottom 9 tests).

    Lastly, Modernizr ignores scalable vector graphics (SVG) which allows animations of text and shapes, and scripting of graphics that don't pixellate at any level of zoom. There is an entire test suite at the w3c. See for example these 2 tests Re SVG tests, there is a whole W3C test suite where the SVG much match the PNG image, for example:

    Try them in Opera and Chrome and compare with IE or Firefox, for example. These are w3c test suites, but seem to be open for reusing http://www.w3.org/Consortium/Legal/IPR-FAQ-20000620#GNU1.

    Be great to see some smaller versions of those tests in findmebyip, particularly testing animations and transforms, SVG fonts, text manipulations, filters, SVG background images linked in CSS and the other "cutting-edge" support.

  5. David said “Thanks for the feedback” last year
    Gravatar for David

    @bruce

    Thanks for this Bruce. We'll definitely be looking to add these extra tests very soon.

    I'm very interested in the SVG stuff. We want to keep the main page load down, but I'm sure we could add some demo pages.

    I'll update you when the site gets an update.

  6. Bernie said “One more thing...” last year
    Gravatar for Bernie

    This site might be useful as a way to debug things when someone reports having a problem on one of my pages. Could you add a script that opens up a text window with all that information in it?

    If that were present, I would ask users to go to your page, copy that text and mail it back to me. (or, I guess, I could write something like this and put it on my own site and then just have them click on a link.)

  7. Andy said “Microformats” last year
    Gravatar for Andy

    Please add some microformats to the output; not least Geo for coordinates, but also hCard/ adr for places.

    Happy to assist.

  8. Adrian said “Chrome for IE misreports IE” last year
    Gravatar for Adrian

    I hit the site in IE8 with the Chrome plug-in installed. It comes up in the user agent string as "chromeframe," while still clearly IE8. The Browser portion says that I am running Chrome when I am not.

    User Agent String:

    Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; chromeframe; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8)

    Browser:

    CHROME

  9. Michael said “Opera” last year
    Gravatar for Michael

    @brucel replied to me in twitter with similar information.

    I'm a long time Opera user and fan dating back to Opera 2 and 4. Huge fan. And it is great that Bruce has tests that show progress in other areas. Have in these HTML5 areas they are clearly behind. Rather than say Opera is behind it is almost like saying it doesn't matter because we ace these other different tests.

    There have been labs version of Opera that supports <video> for a long time but the feature never crosses into a production or beta version. I really want to use Opera and see it perform on par or better than the other browsers.

    However, I think @brucel is saying it won't report well in these Modernizr tests but it is OK because we do better in other tests.

    Here is a comprehensive list of proposed or standard technologies that Opera does not support on the Opera forums - Proposed standard technology that is NOT in Opera 10 (by now) - http://my.opera.com/community/forums/topic.dml?id=284355

  10. Jim said “@Bernie - sure!” last year
    Gravatar for Jim

    We've made a whole "Version 2" of findmebyip.com which will allow this... watch this space!

  11. David said “Thanks for all your comments” last year
    Gravatar for David

    Thanks for all the great comments guys. I've responded below:

    @Bernie As Jim has mentioned (above) we're working on this and its going to be released on Friday. Check back for a much more powerful experience.

    @Andy I totally agree. I've been wrestling over the best way to implement the "support/not supported" list. Now I've made a decision I'll try and add some better markup. Watch this space (although I can't guarantee for Friday's launch)

    @Michael You make some interesting points. I've always found Opera to be an nice browser to use but as I've said before I can't find a place for it in my web life. I've invited @brucel to reply to your comment. I'm sure he'll have some good points to make in Opera's defence.

  12. Jim said “@adrian - chromeframe & IE” last year
    Gravatar for Jim

    Hi Adrian,

    Thanks for highlighting this. The serverside browser sniffing is largely just a big regex and I think it's short circuiting on "chrome" in the user agent.

    Well spotted and will fix! Thanks, J.

  13. Allan said “Communicate Results” last year
    Gravatar for Allan

    It would be invaluable to be able to emai the results of this information to someone, e.g. for user testing or customer support.

  14. bruce said “r/e Michael said “Opera”” last year
    Gravatar for bruce

    Hi Michael

    "I think @brucel is saying it won't report well in these Modernizr tests but it is OK because we do better in other tests."

    Apologies if it came out like that. What I mean is that you shouldn't assume that Deep Blue Sky's subset of the current Modernizr tests are the be-all and end-all gauge of a browser.

    Many people make use of SVG and SMIL, for example, yet they are unrepresented in these tests. There are no tests for WAI-ARIA, either, yet IE and Firefox would do very well if there were. Many HTML5 features are untested by Modernizr (web database, web workers etc).

    About the list of unsupported standards in Opera 10 you point to - thanks. I've been watching that thread for some time, as have many others in Opera. I can't speak about future releases (last time I did, our PR people nailed my ears to a wall for a month) but until the next main release comes out, I'd point to the other innovations that we've come out with:

    • Opera Turbo that speeds up desktop browsing by up to four times for those on slow connections.
    • Opera Unite that connects devices and computers together to share content.
    • Opera Widgets that allow web developers to make applications for desktop (or mobile, or any other web-enabled device) using Web Standards.

  15. David said “New features on Friday” last year
    Gravatar for David

    @Allan - thanks for suggestion Allan. This functionality and much more besides will be available when we launch the new version of Friday. Follow @deepbluetweets or subscribe to RSS for updates.

    @bruce @Michael -  Bruce is right to point out that findmebyip's implementation of Modernizr's tests is somewhat incomplete (it was only meant as a side project one afternoon).

    We're going to be adding new tests in the near future which should provide more complete/balanced results. 

    He's also right to mention Turbo, Unite and Widgets which are all excellent examples of Opera being innovative.

  16. Paul said “the be-all and end-all gauge of a browser” last year
    Gravatar for Paul

    I'll echo Bruce here, while Opera fails a few of these, they dominate with the webforms stuff as well as with SVG.

    The tests mentioned above will be going into Modernizr 1.5.

  17. bruce said “Modernizr” last year
    Gravatar for bruce

    "findmebyip's implementation of Modernizr's tests is somewhat incomplete (it was only meant as a side project one afternoon)."

    I wasn't bashing findmebyip. It's a nice Friday afternoon experiment. It's easy enough for you to add webforms reporting.

    Modernizr seems currently to have a pretty arbitrary set of features it tests: no css 3 selectors (test suite here), a couple of the background and borders stuff but not all of them; and box-shadow but no text-shadow.

    And to my knowledge (i might be wrong; I'm not on the CSS Working Group), CSS reflections is not a standard, hasn't been proposed as a standard and is a single vendor proprietary thing, so its inclusion in a list of "modern" browser attributes, to the exclusion of other more widely-supported real standards is somewhat puzzling.

    It will be nice when more tests are added that gives a level playing field.

  18. Jim said “@Allan - Next Friday! (And blog subs)” last year
    Gravatar for Jim

    I'll leave Dave to answer Bruce & Paul - all this css stuff is a bit beyond me.

    @allan - we're re-launching on Friday with developer tools to so you can send your clients to a short link and have the results emailed to you. We ran out of time last Friday and I had a beer festival to get to. Lots of client work on this week so sorry you'll have to wait till Friday.

    Follow us on twitter and we'll let you know on Friday when we go live (@deepbluetweets)

    @* - to everyone else who's expecting to get email updates when blog comments are posted, please bear with me, fixing (ie. writing the code;-) as we speak. J

Add your comment…

  • Gravatar
    Gravatar
  • Google Mail
    Google Mail

Do you love Gravatar? Do you want a little a more control over which image shows up?...  Here's a simple trick to allow you to convey your mood when you comment on somone's blog using Gravatar..

Ingredients:

  • 1x Gravatar Account
  • 1x Google Account (optional)
  • 2x Pictures
  • 1x Cup of Coffee 

How it works (plus symbols in email addresses):

GMail ( and some other MTAs I think? ) will allow a plus symbol (+) to appear in the left-hand-side of your email address.  The plus and everything after it - up to the at symbol (@) - is ignored.

That means that these two email addresses are effectively the same and they will both route to the same inbox:

  • jimbo.morrison@gmail.com
  • jimbo.morrison+helloworld@gmail.com

Gravatar, meanwhile, allows you to have lots of email addresses and assign different images to your different email addresses.

So armed with as many email addresses as you like through your one Gmail account, your Gravatar account, your library of self portraits and a cup of coffee we can start to have a bit of fun with this...

Step 1: Google Account

First thing you'll need is a Gmail Account.  If you don't want to use gmail don't worry - you don't need to.  Google have a very open policy and you're welcome to either forward all your gmail to Hotmail, Yahoo! or anywhere really or you can pick it up from IMAP or POP.  You never need visit Google again. 

Step 2: Gravatar Account

Next you'll need to get yourself a Gravatar account.  This just takes a few minutes too - you can sign up for a Gravatar  account here.

Step 3: Upload a few pictures

Now you've a gravatar account you can upload a few photos of yourself in different moods, poses or, in my case - because I'm camera shy - a picture of your dog and the cow you met on holiday!

Step 4: Invent some mood-accounts

You'll now be able to add ( and verify ) a few mood accounts in Gravatar.  In this example we've gone for jimbo.morrison+megan@gmail.com ( Meg is the dog ) and jimbo.morrison+highland@gmail.com ( and it's a highland cow )...

Step 6: Assign the pics to the mood-accounts

Now you can select each of you your 'mood accounts' in Gravatar and select the picture you want to associate with each.

Step 7: Show us what you've got!

Last but by no means least - test your new mood-gravatars out and show us what you've created by commenting below!!

 

3 Comments on this post

  1. Jim said “Possibly the coolest cow...” last year
    Gravatar for Jim

    This is a very friendly Highland Cow we met in Pitlochery... which I've decided to call Norman in honour of the City Slickers calf.

  2. Jim said “Everyone - meed Megan” last year
    Gravatar for Jim

    This is Megan, the office dog, with the smallest stick she could find. Woof!

  3. Debasish said “Never thought of this!” last year
    Gravatar for Debasish

    And this is the all-weather-ruff-n-tuff me :D

Add your comment…

  • Social Media (marcofolio.net)
    Social Media (marcofolio.net)

There’s much more to life that Facebook and twitter... in fact these two platforms represent just a tiny part of what social media is all about.

Imagine for a moment that social media platforms are like cocktail parties and you or your brand are guests. The concept of mingling and communication works in exactly the same way – social media has broken down the barriers to communication and now allows you to talk to prospects and customers like never before. Now we’ve made that clear, hopefully you’re now starting to get an understanding why so many people bang on about the importance of social media.

Here’s our top 5 reasons to embrace the good of social media as a business:

1. It’s free

OK, maybe that isn’t directly true... you need to pay for your broadband connection after all, but in essence it’s free to use many of these social mediums (some charge). It also takes time to engage in and this is where many businesses falter... social media marketing is a medium to long term strategy on the whole and you need to be committed to it. Twitter for instance is entirely free and possibly the fastest way to build a list of prospects, but it doesn’t stop there – you need to keep them entertained and informed and that takes valuable time. The platforms are ready to use... so what you waiting for – start with twitter.

2. It's where your peers are 

There are so many deals waiting to be done out there. Whether it’s aligning your brand with another, a JV or perhaps even finding someone to bounce an idea off – social media lends itself perfectly to connecting you with other people just as passionate about a particular industry. Start by looking on twitter and sending a direct message to someone of interest, retweeting their messages or even go to the lengths of making positive comments about articles they may write on their blogs. Anyone who’s anyone is joining the social media revolution so don’t get left behind.

3. It's the best way to get publicity

From experience I have found that most journalists are using social media to communicate and listen to buzz. Twitter, especially, is a great way to communicate directly with journalists and pitch exclusives and breaking news. Prominent blogs are also a fantastic new resource worth sharing your news with. You’ll need to know how to speak to bloggers in the first instance (no, sending a plain ‘round robin’ release just doesn’t work), but if you make friends with them and respect their work you’ll find a link from their site and a steady flow of web traffic is worth a lot – and you haven’t spent a bean!

4. It helps you make more sales

Whenever you are communicating through a social medium you are helping to build a little more awareness about yourself, especially if you have something truly interesting or exclusive to report. Coming back to my ‘medium – long term strategy’, the more online publicity you get, inbound links you attract, journalists/bloggers you bond with etc... the more web traffic you get and therefore more likely to increase sales – simple eh!

5. It’s the future

No business wants to get left behind right? Every single day that passes the more your competition promote across social media. This wave of social media marketing is here to stay... and if you don’t jump on board now you are severely hampering your chances of longevity online – which is where more business is going.

So where next?

Before you go blindly winging your way into the social mediasphere, a word of warning if you will:

Plan your attack!!!

You can waste hours on social media marketing to no positive effect, therefore allocate some marketing budget to dip your toe and get some assistance if you are not 100% sure of how to approach the medium. Also beware of cowboys. There are lots of agencies springing up claiming they know the score when it comes to social media, many of whom are PR or SEO agencies who are scared of being left in the cold – get some references!

  • Opera Software logo
    Opera Software logo

I really like Opera. They've always been way ahead when it comes to pushing for web standards, and with people like Bruce Lawson onboard they're paving the way for HTML5 and CSS3 to become "main stream".  As a web designer I like Opera.

Knowing this then, it's hardly surprising that the latest web browser to roll off the Opera production line (the imaginatively named "Opera 10") is a really cute piece of kit.  Opening it up for the first time you know it's going to be cutting edge when a little notification pops up to tell you that "Turbo Mode" has been enabled!

As you'd expect with Opera you get the usual plethora of gadgets including Mouse Gestures, Opera Dragonfly (Firebug for Opera) and a Session Manager.  There are UI improvements too, with new resizable "Visual Tabs" (thumbnail previews of your open tabs) and interface design by respected designer Jon Hicks.

However, it seems the main development budget has been invested in rendering speed improvements with claims that Opera Presto 2.2 is now 40% faster on resource intensive apps like Gmail and Facebook.  This has been coupled with Opera Turbo, which uses Opera's servers to compress web pages, boosting your browsing speed by (a claimed) two times.

The Obvious choice?

In light of all this amazing technology you'd expect that as a hard-core web user I'd have Opera 10 set as my default browser.  Or would you? In reality, I just can't find a place for Opera in my web world.

Opera for Front End Development?

I do a lot of CSS work and whilst Opera's Dragonfly is a good bit of kit, I'm way too comfortable with Firebug to consider learning a new tool.  Inevitably then Firefox 3.5 is my browser of choice for web development and that ain't going to change any time soon.

Opera for Utility?

As good as Firefox is, I find that all my web development addons do tend cause it to become pretty visually bloated.  I crave a clean interface with minimal clutter where I can focus on content and not be distracted. I could choose Opera for this task, but I actually opt for Google's Chrome browser.

The reason for this is Chrome's ability to create "Application Shortcut's" for certain web pages which removes the browser "chrome" (see what they did there?) from around the view port.  This is great for things such as Gmail.  I just make a application shortcut and add it to my quick launch bar and I want to open my email quickly I just hit the icon.  So convenient and there's nothing to distract me.

Opera for Speed?

Ok ok, so Opera's got to win on this front surely.  Well yes...and no.

Whilst Opera's speed is a really great selling point, it's just not enough to prise me away from either Firefox or Chrome.  I'm sure that if you measured one against the other, Opera might be 2/10ths of a second fast at rendering a page, but even to someone who works online everyday this simply isn't a noticeable enough difference.

So what is wrong?

I really want to use Opera 10.  I think it's great but I just cannot find a reason to have a 3rd browser in my life. Despite all it's great features the overall package doesn't incentivise me to ditch either Firefox or Chrome.

I'd be really interested to hear your thoughts on this.  Do you use Opera 10? What features make it stand out for you? Why do you think that's it's still not making any inroads in the browser market?

8 Comments on this post

  1. Jim said “What about IE” last year
    Gravatar for Jim

    You gonna tell us what's wrong with IE?

  2. David said “Where would I start!” last year
    Gravatar for David

    @jim

    I wouldn't even know where to start!

  3. Daniel said “Well, I do use Opera 10” last year
    Gravatar for Daniel

    For a very simple reason: It has a more lightweight interface than FF and uses less ressources which makes it load easier. I also noted a faster response from web pages and I think this is still because of the lightweight interface. Chrome's interface is even more lightweight but it just doesn't offer all the options.

  4. philipp said “what's wrong on mac” last year
    Gravatar for philipp

    well, at least for the mac version, opera is too slow and safari too quick for me to change.

    maybe windows is different?

  5. Jim said “@Daniel - I agree about FF” last year
    Gravatar for Jim

    Hi Daniel,

    Yeah - I agree about FireFox... we all use Firebug heavily here ( it's totally changed our lives ) but it does make FireFox clug along eating up your RAM.

    I tend to use Chrome for email, browsing ( and the newer Chrome release has a great new search which is brilliant for quick searches on some sites like "php.net [TAB] [command]" for quick doc lookups ).

    I have to say I haven't tried Opera for ages but thing I might give it a test drive for a week :-)

  6. Stewart said “Opera 10 on Mac Snow Leopard” last year
    Gravatar for Stewart

    I've not looked into this yet, but Opera 10 is achingly slow on my sixth generation MacBook with 4GB memory and running Snow Leopard. Whatever the reason, it's made a terrible impression on me. Furthermore, in your recent post about HTML5 and CSS3 browser support, Opera 10 seemed to fail miserably compared to browsers like FF and Safari, which I found strange because I've always heard that Opera is an exemplary advocate of Web standards. I realize CSS3 and HTML5 are not yet standards, but I figured Opera would be more progressive. So I agree with you--I also don't see any incentive to use Opera 10.

  7. David said “Opera isn't all that bad...” last year
    Gravatar for David

    @Stewart Thanks for your comments Stewart. I'm not sure about the speed issue (Opera 10 is fine on Windows), but you're right that it's a little less progressive than other browsers when it comes to CSS3.

    However, as Bruce Lawson has pointed out, Opera 10 does have great support for other advanced features which as yet aren't tested by Modernizr or FindMeByIP.com. Bruce cites "Web Forms 2" input types and SVG graphics as prime examples.

    Opera do great work for web standards but I think they need to get on-board with the CSS3 spec (even if it's in a proprietary format) if they want to attract the web dev community and compete with Safari/Firefox.

  8. Mia said “i love opera” last year
    Gravatar for Mia

    I love Opera, even though theres things Id like to change!

    It is so so fast (on my windows pc), and the password manager and speed dial makes my day!

Add your comment…

  • Aerial Photography
    Aerial Photography

What a lovely introduction to business networking.  Thanks to the FSB, Homeward Park and to everyone who attended this morning.

Photographers

Two of  the chaps I met were photographers.  

Tim Gander strikes me as an incredibly talented, traditional, journalistic photographer of all kinds of people, places with a real eye for capturing a moment.  Bath being such a small world it turns out we've both done work for a mutual client - Bray Leino PR over in Bristol.  He's done some really fabulous work... which you can see for yourself.

My other photographic encounter was Robert Brown a 'high impact aerial photographer' - and the photos are really very striking - but it's done not from an aircraft but from some sort of modified army tank mast...  Robert tells me that he can get to pretty much any location, set up the rig and get the photos done in just an hour or two which is just not the way airborne photographers work.   

You can see some of Robert's work here and I've already recommended him to one of our clients, Langley Waterproofing, who are I'm sure always keen to get good shots of the roofs that they've comepleted. 

Green Roofing

Talking of Langley I also chatted briefly to Will Sturges who's company Sturland is all about keeping building green.  Putting green roofs ( I'm talking about living, breathing, grass roofs ) on buildings seems to me like a pretty good idea.

Getting out and meeting people

I'm sure there are a million and one little networking groups like this and after FOWD a couple of weeks back and now this great introduction to the FSB I think I've got the bug.

Can anyone recommend any other groups in the South West that are worth meeting up with?

  • Screenshots of the three hotel websites
    Screenshots of the three hotel websites

A Unique Challenge

Designing and building 3 sites that needed to express the uniquity of each hotel yet maintain a common thread in branding was a unique challenge that we were happy to take on.

Each destination has its own character so in order to retain that and maintain brand consistency we chose a simple yet effective device – colour. By making colour a variable across the 3 sites we retained brand consistency while allowing each hotel to project their unique identity onto their site.

Planning Saves Money

To ensure that all 3 sites were consistent in their layout and the typography used we utilized a core CSS (Cascading Style Sheet) file to control all of these elements centrally. Each site has its own unique “style code” which determines it colour, imagery and the backgrounds used which means that any alterations cane be made across the portfolio of sites with one action – saving our time and the client money.

Continuing the Good Work

We have continued to support each hotel with further application development, email marketing and Search Engine Optimisation work which has achieved the following results:

  • Identifying, driving and converting up-selling opportunities to create £216,000 of revenue through online bookings
  • Generating 140,000 visitors and achieving top Google rankings for key search terms

This project is an example of the power and flexibility of our Spirit Framework development platform and how seriously we take not only delivering a great website but also ensuring that our clients achieve a significant return on their investment through targeted consultancy and online marketing work.

  • Powabyke Bike Detail page
    Powabyke Bike Detail page

DeepBlueSky are pleased to announce the launch of the new website for Powabyke, UK's premier electric bike manufacturer.

The Challenge

Supporting and portraying the Powabyke brand through their new website was a given from the start of this project. It emerged that the main challenge was to design and develop a site that provided the experience required by 2 distinct audiences with differing needs; customers and dealers.

What We Delivered

In order to meet this challenge the design we produced included:

  • A clean and modern aesthetic that allowed focus to remain on the products
  • A clear and descriptive primary navigation that allowed both Customers and Dealers to access the information they required
  • Effective use of Product and “lifestyle” imagery
  • Clear Links and Calls to Action leading to the Customer and Dealer information zones

A Foundation for Development

In building this site we made use of our Spirit Framework development platform that can integrate Content Management, eCommerce, CRM and email marketing without the necessity of a full re-build. In doing so we have provided a web site that will be able to grow with Powabyke.

We are presently working with Powabyke to introduce eCommerce functionality to allow customers to purchase spares and accessories online.

  • Dickies Workwear Catalogue page
    Dickies Workwear Catalogue page

When Dickies Workwear asked DeepBlueSky to oversee the re-design and launch of their flagship catalogue website we were only too pleased to help.

The Brief

Dickies clothing is hardwearing, functional, and great value making it the preferred choice of thousands of professionals worldwide. Over time it became clear that their previous website no longer reflected their brand or the wide range and quality of the products they offer.

The primary focus for the new website was to allow users to:

  • Browse Dickies products by collection or type intuitively and quickly OR
  • Easily locate a product by name or product code

The finished site also needed to:

  • Work in tandem with Dickies offline marketing and catalogue AND
  • Stay within corporate branding guidelinesWhat we produced

What We Delivered

Deep Blue Sky produced a website that met and exceeded Dickies requirements. The site features:

  • A solid and scaleable architecture built on our Spirit Framework platform allowing future eCommerce functionality and any required systems integration
  • A strong design which conforms to all brand guidelines and creates an intuitive user experience
  • A clear, well structured and useable navigation between product ranges
  • A seamless integration of lifestyle imagery to enhance the user’s visual experience and further support the brand guidelines
  • A fully functional site search which accepts codes derived from the Dickies Printed Catalogue further reinforcing the link between online and offline media.

We have continued to work with Dickies management, operations and technical teams to introduce further functionality and integrate the website into their logistics, sales, CRM and business development strategies.

  • MySQL Logo
    MySQL Logo

Scenario: 

You send an export of your content database to be translated into French.  When it comes back you want to pipe it back into MySQL but the text you copy out of Excel's not UTF-8.

We often handle foreign language data given to us as Excel spreadsheets and use CONCATENATE() to build up the SQL to pour the data into MySQL... it's not pretty but it's pretty quick and flexible.  We use the following four lines in our pipe to make sure the data's UTF-8 when it goes in.

#!/usr/local/bin/perl -w
use strict;
use Encode qw( from_to is_utf8 );
while (<>){
from_to( $_, "iso-8859-1", "utf8");
print;

Usage:

All you need to do is save that somewhere sensible and add it into your pipe:

#cat foo*.sql | ~/to-utf8.pl | mysql -p database

Question:

Anyone know why some French hyphens and apostropies are still difficult?

Next month we will be launching the all-new istylista.com and we're very excited about what we've been up to!

On top of some upgrades and changes to our personal style guides we're launching a totally personalised shopping experience designed to save you time, money and above all save you from fashion overload! 

If you've not already done so why not sign up to istylista.com today and your account will be automatically upgraded when the new service is live!

Here's goes - changing the way you shop!

  • Fireworks' Stroke Dialog
    Fireworks' Stroke Dialog

I tend to use Fireworks to create my web visuals. I find it to be quicker than Photoshop and more suited to a pixel based design medium. It's a great programme but it does have some flaws. One of which is the Dash stroke style that can be a applied to vector shapes and lines. I always find the individual dashes to be too long which doesn't mimick the behaviour of most modern browsers whose border-style: dashed CSS property has short dashes.

For a long time I wasn't aware that it was possible to customise the styling of strokes. There is a way however, and it's hidden under  Stroke Options => Advanced in the "Stroke category" menu. In the dialog that appears, simply navigate to the "Options" tab and at the bottom you will notice "Dash" options where you can set the length and spacing of the individual dashes.

There's also tonnes more options there to play with and most Stroke types have options you can set. Give it go!

  • Prototype Javascript Framework
    Prototype Javascript Framework

Some time ago I came across jQueryify; a bookmarklet that dynamically inserts the jQuery library into any webpage. Well I came to thinking: "Why isn't there a version of this for Prototype?" After searching the net and coming up with nothing, I decided to modfy Karl's script and change it to insert Prototype instead of jQuery.

If you want to you use it as well, all you need to do is Bookmark this link (I added mine to my Bookmarks Toolbar).

One thing to note is that the script gets it's source from the Google AJAX Library, so you'll need to update the "src" value if you want to upgrade to the latest version of Prototype.

I've noticed a few bugs and issues with the script so I'm hoping to come back with a new, improved and entirely original version sometime in the near future. In the meantime please be sure to visit Karl's website and thank him for his work.

2 Comments on this post

  1. said “is it safe ??” last year
    Gravatar for

    hello, i's like to know is is safe to do someting like this ? i mean it looks like XSS to me. i really wait for your reply.

    thank you

  2. David said “Yes it's basically safe” last year
    Gravatar for David

    Hi o orcinus,

    It's really as safe as you make it.

    All it does is insert a script tag (pointing to prototype.js) just before the end body tag on any webpage.

    There's nothing malicious going on at all I can assure you.

    If you're nervous take a look at the original concept  jQueryify.

    Hope you find it useful...

    Dave

     

Since we all use a multi-desktop app to keep our workspace organised your Gmail window isn't always there when you need to write a new email...

.. but a little playing with Google Chrome's "Application Shortcuts" means you can have that "New Message" button on your desktop to quickly compose a new message.

You'll need Google Chrome to do this.  You don't need to set it as your default browser so don't worry, nothing else will change... but making Application Shortcuts like this is a Chrome feature so you'll need to install it and login your Gmail this once through Chrome.  If you've not done so already; download Google Chrome here.

Setting up your first shortcut - to Gmail...

  • Vist Gmail and log in..
  • Click the icon in Chrome and choose "Create Application Shortcut" and add the shortcut where you'd like it.  ( Quick Launch toolbar in this case )

Making a new shortcut for "New message"...

  • Find the Quick Launch toolbar and right-click ( don't right click on an application icon, find a little space so you're clicking on the actual toolbar itself ).  Choose "Open Folder"
  • Now duplicate (copy & paste) the Gmail shortcut
  • Rename it to.. "New Message" or something similar.

Getting hold of the web-address for your new shortcut...

  • Now go back to Gmail and Shift+Click the "Compose Message" link to get a new message in a new window.
  • We want the "Web Address" of this window... so click on the icon (probably a Chrome or Gmail icon) that's right up in the top left of the window to get the window menu.
  • Choose "Copy URL"... which will copy this URL/Address into your clipboard.
  • Now go back to your "New message" short cut, right click and choose "Properties"
  • Make sure you're on the "Shortcut" tab.
  • Change the web-address in shortcut... so find where it says "--app=https://...etc" and select everything beyond the "=" and paste (Ctrl+V) our new web-address in here.
  • Done!  Close this dialogue and test your new shortcut.  You should have a new window with a new message in it.

Setting up a pretty icon...

  • Click "Change Icon"
  • Change the location at the top ( "Look for icons in this file" ) to "filbble" and click OK.
  • Windows will complain that it can't find and icons.  That's fine; it'll now present you with a default set of icons to choose from.  Choose one you like and click OK.
  • Now OK the Properties dialog.

 

Our comprehensive hotel directory - Gate 54 - has, this week been relaunched with some great new features and lots more to come.

Gate54 has, for many years, provided a hotel reservations service for some 75,000 hotels, spas and resorts worldwide.

Now totally re-designed and re-built the new Gate54.com also provides access to last minute theatre booking, cruises and guided tours in most major cities; from tours to find Nessie to a moonlit tour of Milan everyone should be able to find something that takes their fancy!

  • RGB ain't CMYK - and image by bryhal@rogers.com
    RGB ain't CMYK - and image by bryhal@rogers.com

Being a web guy I live in the world of RGB and the thought of CMYK and the finality of print scares me (alot!). However, I reguarly need to convert a logo to CMYK in Adobe Illustrator from a graphic that is in RGB colour mode. To do this in Illustrator you simply do the following:

  • Go to File » Document Color Mode and check CMYK

Yeh I know it's simple but being a AI newbee, I have spent ages searching for a solution before remembering. This process also works in reverse (CMYK to RGB):

  1. Go to File » Document Color Mode and check RGB.
  2. Select everything in your document and go Filter » Color » Convert to RGB.

A good way to check what colours are being used in your document is to:

  1. Open up the colour pallette.
  2. Bring up the menu by clicking the little arrow in the top right hand corner and select "Small List View". This brings up (suprise suprise) a list view of all colours with a little symbol representing the colour mode type (ie: RGB, CMYK...etc).
  3. Now click on an element in your document and the list will jump to the colour being used. You can then determine whether it's CMYK or RGB...etc

Hope this helps?

Dave

1 Comments on this post

  1. said “Remind me” last year
    Gravatar for

    Thanks, it is really helpful. I'm a GD, I really forgot got such function for converting into CMYK/RGB colors because I only using that converter you mentioned to convert the CMYK/RGB color into gray. Haha.. now then remind me, thanks again

     

    cheers

  • Final Envato style text
    Final Envato style text

This tutorial is based around the original which can be found at PSD Tuts. However, unlike the original I'm going to show you how to do this using Adobe Fireworks. I'm going to assume you have a basic knowledge of Fireworks, but if you don't then check out this post for a quick primer.

Can't wait?

If you're impatient and can't wait you can see the finished article here.

Step 1

Create a blank document (I used 500 x 500) and create a square shape which fills the entire canvas. Fill this square with a subtle gradient running top-left (#434343) to bottom-right (#1C1C1C). The gradient creates the illusion of light shinning onto the canvas from the top-left corner.

Step 2

Using the text tool write some text onto the canvas. It pays to use a typeface which is bold and blocky - I used "Avant Garde BT" with the bold option turned on.

Demonstrating creating linear gradient

Now with the text selected click on the text-fill pallette (directly right of the font size box in the "Properties" window) and set a linear gradient running top-left (#FFFFFF) to bottom-right (#C2C8D4). This further reinforces the illusion of light shinning onto the canvas from the top-left corner.

Step 3

Next duplicate your text layer, remove the gradient and set the fill to be solid white (#FFFFFF). Now hold Ctrl and press the DOWN arrow to move this text layer one layer down the stack, so that it sits behind your grad fill text layer.

Now with the text layer still selected hit the UP arrow once and then the LEFT arrow once to move it 1px up and out from behind the original layer. This should create the subtle highlight effect we're looking for where the text looks slightly raised.

Step 4

Highlighting the unwanted step

What we have looks quite good but we can see an obvious step gap of 1px where we've moved the solid white text out from behind the grad fill layer. We can solve this duplicating the solid white layer, moving it down 1px and reducing the opacity to 70%. This covers the vertical step. We then repeat this to cover the horiztonal step, this time reducing the opacity further to around 55% (you'll need to experiment to get the best effect).


 

Final Product

Final product - subtle light effect text

There we have it. A subtle highlighted text effect where we've used light and shadow. This effect is used a lot by the Envato network on all their tuts sites and it's really nice, although I fear it may become a cliche trend all too quickly!

Let me know if you have any thoughts on how we could improve this effect.

Dave

This solution is the work of Shaun Inman over at www.shauninman.com.

Basically the solution involves 4 simple steps:

  1. We wrap the input with a label tag.
  2. We assign a background image to the label tag and apply some dimensions.
  3. We hide the input tag using CSS opacity rather than "visibility" or "display" (this ensures that the input is still clickable)
  4. Javascript is used to ensure that the button of the file input is always positioned exactly underneath the cursor.

 I'm not going to go over the details here, but if you want to see exactly how it's done you can read the original tutorial or see the demo. Great work Shaun!

Gmail now allows multiple-file uploads from a single dialogue box - something which I thought the HTML file upload mechanism wouldn't allow.

Yes - before you think that it's done using <input type="file"> it's not... it's flash.

Still it is very cute, very useful and so long as you have Flash installed ( which almost everyone does ) you'd never notice a different peice of technology in use.

Flash has always provided nice little bits of add-on functionality.  Many years ago, before the phrase AJAX was coined we used it as a model for powering html-updates in the client without polling the server constantly because flash provided proper socket-level connectivity to the client.

Anyway - a very nice little trick, probably not original and well worth investigating for implementing in Spirit's asset-management systems me thinks...

  • Screenshot of Fireworks' image export panel
    Screenshot of Fireworks' image export panel

The PNG image format has three types:

  1. PNG8
  2. PNG24
  3. PNG32

If you usually use Photoshop then at this point you may well be thinking "What's this PNG32 thing?". Well basically PNG32 is PNG24 but with support for full alpha transparency. This means you can have varying degrees of transparency for each pixel, whereas GIFs can only have transparency turned on or off for each pixel. Therefore, when placed on complex or ill-matching backgrounds, transparent PNGs will have nice smooth edges.

Yes I know what you're thinking, "But Photoshop can produce alpha transparent PNG images!". I know! It just doesn't present it to you correctly and that's what had me confused.

Image montage showing Adobe Fireworks image optimiser and Photoshop's Save for Web dialog side by side

Being a keen advocate of Adobe Fireworks I have always realised that PNG32 was the only PNG file type to support true colour alpha images. However, if you regualrly use Photoshop then you'll know that "Save for Web" only offers PNG8 or PNG24 file types in the drop down.

As I'm sure most of you know all you do is tick the "transparency" box in "Save for Web" and you get a alpha transparent PNG. But really what this is doing is creating a PNG32 graphic - Photoshop just decides to hide this from you. Strange...

1 Comments on this post

  1. said “Thanks” last year
    Gravatar for

    Always wondered about this. 

I often see sites such as Smashing Magazine presenting lists of free icon sets. This sounds great, but to be honest I'm often left feeling less than impressed by the quality of the sets. That's why I was so impressed by the Function Set of icons by talented designer Liam McKay. Liam runs www.wefunction.com  and produces templates and icon sets for fun and for profit. His totally free set features full-colour, clean icons that cover almost every possible requirement.

You can download the Function set from wefunction.com/2008/07/function-free-icon-set/. All that Liam asks is that you provide a link back to his website - a small request for such a great product. Thanks Liam!

We're very proud to report that istylista.com, the personal stylist & shopping site has recently been awarded "best in class" at Surrey Enterprise's Online Marketing Workshop.

Hayden Allen-Vercoe, marketing director at iStylista said: “We recently attended an online marketing workshop with the stylish lot over at iStylista.com which turned out to be rather fun.”

The site was given the once over by a couple of incredibly tough talking techies who analysed its SEO, build structure, functionality and usability and gave it a chic 8 out of 10 all round. There’s a couple of areas marked for improvement... but with a cutting edge online concept there always is eh!”

We're getting very close to launching istlista - phase II, with some really great, new and exciting features so hopefully next year that'll be 10/10!

I came across this Internet Explorerbug (IE6/7) when working on site recently, whereby if two container div's (#nav & #content) have position:relative then any drop down navigation will appear (render) underneath the content div. This is a problem as links can't be clicked and of course it looks awful!

I won't go into the details here (Aleksandar Vacić provides a comprehensive overview and test in this article) but there's a very simple fix to what could be a extremely annoying problem.

Fix

Simply apply a z-index: 1 to the content container (whichever div your menu is hiding underneath) and a slightly higher z-index of 2 (z-index: 2) to your navigation container. I believe that both containing div's must be position relative for this to work, but it fixed the problem for me.

Please let me know if you found this helpful or if you need extra advice.

Dave

I've recently found out about a great little event happening in Bath called Bath Camp. It's basically an informal gathering of web professionals talking about "interesting things". Ok, so that doesn't sound overly interesting until you learn that Paul Boag of Boagworld fame will be the guest speaker. Paul and the team run an excellent web design podcast that dispenses lots of interesting advice and he's well respected in the industry so I'd imagine he'll be worth listening to.

If you think that sounds interesting, the event - hosted by Ryan Carson - takes place on the 4th February, at 8pm upstairs in the Revolution bar ("Revs"), Bath. Worth going along I'd say.

The new Google Talk Labs Edition is very cute.  More of a one-window style of interface.  But it's got some prohibitive bugs - like you can't select text, you often can't click links and so forth.

Well here's a quick solution to get you the nice new interface but without the bugs:

  1. Open (or download and open!) Chrome 
  2. Visit this page: GTalk Browser Edition
  3. Click the page menu  
  4. Choose "Create Application Shortcuts" 
  5. Add the shortcuts wherever you find useful.

... now you have the new interface ( a flash file effectively ) running in a Chrome app.  The interface is the same (afaik) as the Labs Edition but doesn't have all the bugs that the labs edition seems to have.

  • Traditional Boundaries
    Traditional Boundaries

DeepBlueSky is pleased to launch Traditional Boundaries - a small business Spirit Foundation 'Starter' website for those seeking natural solutions for estate and woodland management near Surrey.

Traditional Boundaries features a unique web design and is powered by Spirit Framework.  It has also been optimised to provide the best possible change of ranking well for choosen keywords in Google and other major search engines.

To learn more about Traditional Boundaries please visit the live site now at www.traditionalboundaries.com.

Search & Navigation
Ctrl + E or K Google Search
Ctrl + L Select Full Address
Tabs & Browsing
Ctrl+ 1,2,3 Skip to Tab 1,2,3
Ctrl + T / N New Tab / Window
Ctrl/Ctrl+Shift + Tab Next/Previous Tab
Ctrl +/-/0 Bigger, Smaller, Reset Font
Tools
Ctrl + H Searchable History
Ctrl + J Searchable Download History
Ctrl + B Show/Hide Bookmarks Bar
Ctrl + Shift + B Bookmarks Manager
Developer
Ctrl + U View Source
Ctrl + Shift + L Debug Javascript
Ctrl + Shift + J Javascript Console

PS.  Yes - I'm sure they're in the documentation somewhere but I didn't rtfm :-)

This article explains how to force Windows XP to allow you to restart the Windows Time service in the Service control panel, in order to allow you to synchronise your computer time. To see the solution please skip to the solution, otherwise feel free to learn how I arrived at my discovery.

This week I've been working on a front end development project with an external company who use Dreamweaver to develop their websites. Being a bit of a purist myself I would never dream of using Dreamweaver to create a site (Homesite and Firefox for me!) but needs must when a client says jump.

Everything went smoothly until I needed to "Check In" my files to the live server via DW's FTP functionality. Every time I tried, it simply would not allow me to connect and upload my files, even though FileZilla could manage it perfectly. After much hunting I came across this sitepoint article which explained Windows Time not being in sync as a possible cause. Thinking I'd cracked it I went straight to Windows' Date and Time Properties -> Internet Time and clicked the "Update Now" button to manually synchronise my computer with the time.nist.gov website. Unfortunately I got a big ERROR - windows could not - it seemed - sync my time.

Having recently discovered the value of Windows "Services" control panel I suspected that I could restart the Windows Time service and possibly solve the issue. However, upon locating the service it provided no option to Start/Stop (i've not idea why this happens but it does). Luckily I was able to find a fix that forces Windows to allow you to Start/Stop the service again.

Just go to the "Run" command line (under the Start Menu) and type:

regsvr32 w32time.dll

Please note that this makes a change to your registery so please do this with caution! I'd advise you to create a system restore point before attempting this step at the very least.

This command should fix the issue and allow you to Restart the Windows Time service. As for the DW problem, I still can't figure it out - no wonder no one uses it! Let me know if this fix works for you.

2 Comments on this post

  1. said “UK Time” last year
    Gravatar for

    A simpler fix is often to just change the time server to 'uk.pool.ntp.org'.

  2. said “Thanks but I tried that” last year
    Gravatar for

    @Tennant

    Hi,

    Thanks for your comment. I did in fact try that but it refused to work. In fact I tried numerous other time servers but windows "failed to connect" with them.

    I'm not sure exactly what causes the issue I had (although I suspect networking problems) but I do know that that regedit fix sorted things.

     

It's -5° outside... so while my fingers thawI thought I 'd jot down a list of podcasts I'm currently listening to on my way into work....

Web & Tech

  • Boagworld - slightly off the wall but fun an interesting...  David recommended these guys to me. It's an hour long show from Paul Boag & Marcus Lillington.  Full of useful insights & some interesting interviews..  the first show I listed to, for example, had an interview with Joe Stump from Digg about web scalability.

BBC, History & Comedy

Most of the rest of what I'm listening to comes from the BBC at the moment.  Quick list for now because I must get on...

  • FOOC - From our own correspondent is a weekly collection of short reports from the BBCs foreign correspondents.  Always interesting, insightful and simply different to the normal homogonised and sanitised drivel that you get on the news.  A definate must.
     
  • In our Time - A slightly random Radio 4 (Wed 10am?) show hosted by Melvyn Bragg and discussing odd bits of history, science, politics and philosophy with a few experts.  Always pretty interesting; previous topics in the past few weeks include 'The Great Fire of London', 'Heat (the history of the concept of thermal energy - seriously, for an hour)', 'The Great Reform Act' etc..
     
  • A Point of View
     
  • Start the week
     
  • Friday Night Comedy

... any recommendations are extremely welcome!

Silly little thing, but for the benefit of anyone else who misses this;

When installing the PECL Package APD for all your profiling, stack-tracing fun if you get the following error...

PHP Warning: PHP Startup: Invalid library (maybe not a PHP library) 'apd.so'

... then make sure you add your extension as a "zend_extension" not just a normal extension thus:

; My Extensions
extension = runkit.so
extension = memcache.so
extension = xcache.so
zend_extension = apd.so

Hope this is of some help to folk :-)
 

  • Prototype/Scriptaculous Slideshow
    Prototype/Scriptaculous Slideshow

Dave has recently been playing about with a little slideshow.js that we found on Tom Doyle's blog.

It's a great little script (thanks Tom) but I thought it could do with a litte upgrade to encapsulate it in an object so that it doesn't get interfered with.

Here's our version of much the same code: slideshow.js

It's very simple to use so I've dropped the documentation into the top of the script.  Basic synopsis is:

oMySlides = new iSlideShow({

slides : [

'image-div-a',
'image-div-b',
'image-div-c',
'image-div-d'

]

});

16 Comments on this post

  1. said “Extending it with panning..” last year
    Gravatar for

    Do you think it will be possible to add a panning option to the slideshow?

    Like seen on this jQuery slideshow:

    http://www.gruppo4.com/~tobia/cross-slide.shtml

    and this Mootools slideshow

    http://www.electricprism.com/aeron/slideshow/

    As far as I know there are no public slideshows using the Prototype/Scriptaculous framework with such features.

  2. Jim said “Pan & Zoom” last year
    Gravatar for Jim

    Hi Ralf,

    Sure - I'll take a look at this next week...

  3. said “IE 6, 7 support?” last year
    Gravatar for

    Any chance you got this working in IE? I get this error message saying "Object doesn't support this method or property".

  4. Jim said “@Jon; IE support” last year
    Gravatar for Jim

    Hi Jon,

    Could you check out Natural Boundaries (an example site, the big image on the front page) and let me know if that's behaving for you?

    Also what version of Scriptaculous and Prototype are you using?

    J.

     

  5. said “Figured out IE problem” last year
    Gravatar for

    Hey Jim,


    I've figured it out. The problem was that I put this bit:


      oMySlides = new iSlideShow({

        slides : [

          'image-div-a',

          'image-div-b',

          'image-div-c',

          'image-div-d'

        ]

      });

     

    at the the end of the document rather than in the head.

    Thanx

    Jonathan

  6. said “Expand counter” last month
    Gravatar for

    Thank you for this great work, it's very instructive.  I'm trying to modify for our usage and am almost there, but not quite...

    How would I go about expanding the counter to list the numbers, ie. 1 2 3 4 5 with hyperlinks to the corresponding images, and change of class for active state to indicate which slide is being shown? This would somehow involve swapping the current image for the one clicked on, right?  I can see how to do this with a "glider" where the images are only "hidden" off the page, but not via display:none.

    Any pointers appreciated.

    Sarah 

     

  7. said “Problem with two intance” earlier this week
    Gravatar for

    Hi, thanks for this great Class.

    But i have a problem trying to create two intance of the class in the same page, they don't start animating. And on the other hand i have the previous and next button and when i click one of them returns an error that said  "termObraSlide is not defined"

    i'm creating my instance by calling a function, like these:

    var ultObraSlide = new iSlideShow({

    autostart : true,

    start : 0, /* optional (default:0) */

    wait : 10000, /* optional (default:4s) */

    slides : [

    'foto-1',

    'foto-2',

    ],

    counter : 'contador-slide',

    playButton : 'botonPlay'

    });

    var termObraSlide = new iSlideShow({

    autostart : true,

    start : 0, /* optional (default:0) */

    wait : 10000, /* optional (default:4s) */

    slides : [

    'foto-term-1',

    'foto-term-2',

    'foto-term-3',

    ],

    counter : 'contador-slide-terminada',

    playButton : 'botonPlay-terminada'

    });

    thanks in advance for your time and attention and sory about my english, it's not my native language

    Agustin

  8. said “SOLVED: Problem with two intance” earlier this week
    Gravatar for

    Hi again, sory about the las post... i've been trying for 4 hours, and the only problem was that i didn't specified a div with the id for the pauseButton, i feel like a real idiot.

    Sory for bother you

    Agustin

  9. Jim said “Pause & Play Buttons” a few weeks ago
    Gravatar for Jim

    I'm glad you've fixed your problem Agustin.  The new release should also fix your problem.  

    At the moment, if your play/pause button's aren't defined it doesn't work which I find kinda annoying so I've made it so they're no-longer required.

    All the best,

    Jim

  10. said “Timerstart” a few weeks ago
    Gravatar for

    Hey, ver nice script from you, but i've a question:

    I want to start the first picture with a much less delay than the other ones;

    any suggestions, what i can do, to get fixed this problem ?

    thx for your answer.

  11. said “Javascript Error” a few weeks ago
    Gravatar for

    There seems to be a javascript error when this script is used, it doesn't show up as a popup but can be seen when viewing the console or in the error status bar in IE. It says "this.play.bind" is not a function.

    Has anyone else come across this?

  12. Jim said “@ J R - Javascript Error” last year
    Gravatar for Jim

    Hi J.R.

    .bind() is part of the prototype javascript library... so if it's missing it looks like prototype is.

    Can I check that you are including prototype & scriptaculous ahead of trying to use the slideshow?   

    Hope this helps,

    J.

  13. said “bind error” last year
    Gravatar for

     

    Hi

    First off I would like to say great work on this, its just what I've been looking for.

    I'm having the same problem as J.R with regards to the play.bind error. I am certain however I've included the latest prototype and scriptaculous libraries. I did however yesterday upgrade to the newest 1.6.1RC2 prototype library, but I doubt there is any compatibility problems.

    Hope you can shed some light on this.

    regards

    Andrew

  14. said “Initiliaze loading.” last year
    Gravatar for

    Hi, this script is really awesome but i've got some idea that would be very cool if it would be added like adding some initialization of slides to be loaded instead of the entire slides. By adding this method, it would help the page to load more faster if it has more slides.

    Again, thank you so much for the script.

    Sincerely,

     

    Shio

  15. Jim said “@ Initialize loading.” last year
    Gravatar for Jim

    Hi Shio,  great idea, thanks!

    I'll see if I can include that in my next set of updates.

    All the best,

    Jim

  16. said “Example CSS?” last year
    Gravatar for

    Can anyone give an example of suitable CSS and structure for this?

    I don't know how to get the images stay in the same spot all the time (tried position: absolute + others) and still work nicely in the surrounding block, e.g. centering.

Add your comment…

I'm often left wondering why Microsoft didn't include a "Create New Folder" shortcut in the toolbar buttons in Windows Explorer. Many a time I've been forced to wait whilst I right click, wait for the menu to load and then locate the appropriate icon. If you have to create multiple folders it can quickly become tedious.

Today I became so fed up with this state of affairs that I had to hunt down a Windows Explorer add on which would fix this problem. May I present bxNewFolder courtesy of our friends at BAXBEX. It sets F12 to be the shortcut for creating a new folder and if you're lucky enough to still have Windows XP you even get a icon added to the toolbar of Windows Explorer.

However, if you don't wish to download any software you can still use Windows' built in HotKeys. Simply go in to Windows Explorer, hold the ALT key and then hit F followed by W. This should open the file menu and navigate you into the "New" menu where Create New Folder should be selected automatically. Easy, but I still prefer F12! 

1 Comments on this post

  1. A said “Improved version of this for Vista” last year
    Gravatar for A

    Actually XP already has its own "Make a new folder" button too, to create a new folder in Windows Explorer, while it's located in XP Webview Panel/Common Task Pane, see screenshot: http://img243.imageshack.us/i/standardxpnewfolderbutt.jpg/ (and just like Windows 7 RTM Explorer now), but yeah some people would love it's on the explorer toolbar as well as Open/Save dialog box .

    Since Baxbex new folder offered only old Windows 98 style icon (not matching with new XP visual style), just download free add on new folder button in XP Explorer Toolbar (my created-skinned/reshacked bxnewfolder with Vista style icon etc) + hotkey and floating dialog box, fully functional and working as well:

    Screenshots: http://img263.imageshack.us/i/newfolderbuttoninxpexpl.jpg/ and http://img263.imageshack.us/i/cleanerusefuldialogboxa.jpg/

    Download: http://www.4shared.com/file/140689147/273f676f/New_Folder_Button_in_Explorer_Toolbar.html

Google have just released a great little SEO Starter Guide for the uninitiated.

Isotope has long stated that we don't offer SEO as a service because we vehemently believe that the way we build websites through Spirit provides the best optimisation of your content.

This Starter Guide is a great illustration of exactly what this means and how we acheive such great search engine success for our clients.

You can download the Starter Guide here or read more about what motivated Google to write it on the Webmaster Central Blog.

Recently I was sent a PDF of a marketing poster which a client had asked me to turn into a HTML email. The design firm who had produced the poster had used a non web standard font (ie: not Arial, Verdana or the like) but I still wanted to use it as my primary typeface in my font stack (the CSS font-family rule) and allow the typeface to degrade for those users who didn't have it installed on their system. The problem was that I didn't recognise the font!

Having exhausted all other avenues, I turned to my boss, who promptly showed me the following technique to extract font information from a PDF:

  1. Open your PDF.
  2. Go to TOOLS -> Advanced Editing and select the "TouchUp Text Tool".
  3. Click on the text that you wish to extract the typeface from and a bounding box should appear.
  4. Highlight a portion of the text and right click to bring up a menu. Select "Properties".
  5. Information about your font should be displayed under the "Text" tab, including the font name. Easy!

The one issue with this technique is that - to the best of my knowledge - you need to have Adobe Acrobat Professional (I used Version 8.1.2) to use the advanced editing functionality.

If hope you find this useful, and if you do be sure to comment.

David

 

 

 

 

Isotope is always extremely proud to be involved in high-profile projects and never more so than when they win awards!

Cheddarometer.com a micro-site build for Bray Leino and West Country Farmhouse Cheesmakers has just won a silver at the Chartered Instituite of Public Relations' Pride Awards.

This award follows in the footsteps of the highly successful cheddarvision.tv website we developed with Bray Leino and West Country Farmhouse Cheesemakers last year.

You can read more about how Bray Leino made such a success of this campaign here.

For many years raising monthly invoices for hosting and maintenance was a pretty dull and time-consuming enterprise for us.

Six months ago though we found a great solution - FreshBooks - which we now not only use but are very happy to recommend to any of you out there who are looking for a similar solution.

Much like Isotope's Spirit Framework based websites and business systems, FreshBooks is an online 'software-as-a-service' accounts and invoicing solution so there's no software to install and keep up-to-date.  It also means you and your clients have access wherever they may be...  all you need is a browser.

And although we are heavy users of ActiveCollab for all our project management needs FreshBooks also includes lots of time-tracking tools on top of the basic invoicing and accounts platform.

If you're looking for a good solution for your regular invoicing look no further...

If you want to take a look why not sign up for a free account.

Features:

  • Easily create, send and manage invoices.
  • Track time (for you and your staff).
  • Send invoices by email or US post.
  • Accept payment with PayPal, Authorize.Net and more.
  • Automatically send invoices and late payment notices.
  • Create robust reports and import/export your data.

 

  • Therapy Network Design
    Therapy Network Design

DeepBlueSky is very proud to announce the launch of Therapy Network, a new directory of therapists, counsellors, coaches and therapeutic services operating in the UK.  DeepBlueSky worked closely with Aylmer-Kelly to develop Therapy Network.

Therapy Network's aim is to create a first point of contact for people looking for therapeutic support, providing quality information so they can make informed choices about their care.

If you'd like to know more about Therapy Network why not read the FAQs or Sign-Up here?

 

 


Before

After

Last Update: Monday, February 9th 2009

  • [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.

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 )

3 Comments on this post

  1. said “Not working correctly?” last year
    Gravatar for

    I keep seeing "NaN" instead of the actual figures for certain stats? any ideas? Thanks.

    Great idea by the way....

  2. Jim said “Fixed - v 1.1” last year
    Gravatar for Jim

    Hi Paul,

    Should be fixed.  The NaN's were caused by the javascript no parsing numbers > 999 ( ie 1,234 ) that have commas in them.  

    You'll need to delete the bookmark and re-bookmark the link in the article above.

    Let me know if that solves it.

    All the best,

    Jim

  3. said “Fixed!” last year
    Gravatar for

    Thanks Jim

    Working really well now - it's a great tool.

    Paul

Add your comment…

Isotope are very pleased to announce the release of two new website packages aimed at the small business market.

Spirit Foundation provides simple, affordable solutions to get our clients started on a strong footing. 

Framework - The power behind foundation sites:

Foundation sites are built using the latest release of the Spirit Framework so they can extend and grow to the most demanding client requirements.

Starter Package : £999

The starter package has everything a small enterprise needs to get started:

  • Up to 25 pages of content
  • A professional & unique web design
  • An automatic site-map
  • A quick and easy customer contact form
  • A web site built to the highest accessibility, usability & search engine optimisation standards

Freedom Package : £1,499

The freedom package comes with all the great features of our starter package plus the added advantage of 24 hour access to online content management allowing clients to manage and maintain their websites at their own pace.

Finding out more: 

For more information about our Starter or Freedom Packages or if you'd like to see some example sites please visit our dedicated Foundation Website.

 

Today we are extremely proud to announce the release of Spirit Framework version 5.3. 

Spirit 5.3 is the final release of our PHP5 branch of the Spirit Framework and includes our new, faster and stronger data model tuned to product complex web pages and blinding speeds.

Key New Features

  • PHP 5.2 Compatible
    Spirit 5.3 is PHP 5 compatible running on new PHP5 servers in our German data centre. 
     
  • New Data Layer
    We have totally re-built our data layer taking full advantage of PHP5's improved object orientation model.  This makes Spirit 5.3 considerably faster at building complex pages that require heavy use of the database.
     
  • .css & .js gzip compiler
    All CSS and JavaScript resources are now compiled into single files and served in gzip compressed format.  This not only considerably reduces download times but also vastly improves page rendering times by obviating the bottleneck in most modern browsers relating to threading of CSS and JavaScript requests.

Spirit Foundation

Spirit 5.3 has been developed in tandem with our new Foundation Packages to provide fast, accessible and cost effective websites to the small enterprise market.

 

  • Google Docs Toolbar Button
    Google Docs Toolbar Button

A user Lars Bern just got in touch to say that the Google Docs Toolbar Button was no longer providing a list of recent documents.

It seems that the easy mechanism we were using to get an RSS feed of documents out of Google is no-longer available.

So..  we've upgraded the button to fix the problem.  You'll now be asked to grant us lot access to your document list and we'll go fetch it from Google on your behalf.  (You can of course revoke permisson at any time by going to your Google Account)

We recommend that if you use the button already you upgrade by clicking here!

Features ( Docs Button )

  • One-Click to your Google Documents
  • Dropdown list of your most recently edited documents NEW!
  • Search your Docs from the Toolbar

Install Now!

4 Comments on this post

  1. said “Docs button authorisation error” years ago
    Gravatar for

    Do I need to re-authorise the button at some point?  Clicking just on the button will take me to the google docs main pg, but choosing any items from the drop down list returns an "Authorization required, Error 401"

    Also...

    When I say I've given you access to my google account, does that mean you've got access to ALL my google content?

  2. said “Re-Auth & Security” years ago
    Gravatar for

    Hi Dave,

    Are you seeing the list of documents in the dropdown?  If so this is just the feed we get from Google, we don't do anything with it so I'm not sure why you're getting an authentication error.

    Could you try re-authenticating? 

    You can re-authenticate (and otherwise get to the original page about authentication) by visiting http://fiji.mediaisotope.com/google-docs-feed/?show-page=true

    As far as whether we have access to your Google content is concerned:  I think, probably, we would have access to your documents - yes.

    I don't think we have any access whatsoever to anything else (mail or calendar for example).

    You can read up on the Google Auth API and Google Auth in general if you're interested.

    If you're concerned or interested to know what's going on I've made the source code for the page that does the magic available for you to have a look at.  It's pretty straight forward.

    Initially we negotiate a token with Google that gives us permission to gather information from your docs account.

    Once we have that token we store it in your browser for future use.

    Each time your toolbar updates we grab the document feed from Google (using the authToken) and return it to the toolbar.

    As far as I'm aware though there's nothing to stop us gathering all your document data so if you want to use the button you need to be sure to trust that we won't and that this source code is genuine. 

    While I can assure you the link below is the source code in use if you're unsure then go here to your Google Account settings and revoke our permissions.  (Revoke: fiji.mediaisotope.com)

    Let me know if re-authenticating solves your problem.

    Cheers,

    Jim

    Source:

    http://fiji.mediaisotope.com/google-docs-feed/index.phps

  3. said “error 401” last year
    Gravatar for

    it will work at times but mostly the above error is diplayed.

    Any ideas on this. Using latest version of Firefox.

  4. Jim said “@ error 401” last year
    Gravatar for Jim

    It's strange - it sometimes does that to me...

    .. I think it's a google authentication problem but if it keeps doing it please post another comment and I'll get in touch with you directly to see if we can sort it out.

    J. 

Add your comment…

Recently a client specified that they'd like users to have the ability to email a pages from their website. I therefore went ahead and used the following Javascript function to create a HTML mailto:

function mailpage() {
mail_str = "mailto:?subject=I found a website that might interest you.";
mail_str += "&body=" + document.title "This might interest you too, " + location.href;
location.href = mail_str;
}

Unfortunately the body text of the email then displays on one line, which as one client remarked looked "...a little ungainly". Therefore we set to work to find a solution and discovered/remembered this - the Javascript escape() method. Basically this accepts a string to be converted into url safe encoding. So all you have to do to see line breaks in your email is add "\n\n" and the rest is done for you. Finished code below:

function mailpage() {
mail_str = "mailto:?subject=I found a website that might interest you.";
mail_str += "&body=" + escape( document.title+"\n\nThis might interest you too, " + location.href );
location.href = mail_str;
}

2 Comments on this post

  1. said “THANK YOU!” years ago
    Gravatar for

    Thanks  A LOT !!!

    After trying SEVERAL tips from multiple sources, FINALLY your example WORKED.

    Great Job !

     

     

  2. said “Add more lines” last year
    Gravatar for

     <script language="javascript">

    function mailpage()

    {

    mail_str = "mailto:?subject=Webpage xxx " + document.title;

    mail_str += "&body=I found...." + escape ("\n\n") + document.title;

    mail_str += escape ("\n\n") + "You can find this information on the following location: " + escape ("\n\n") + location.href;

    location.href = mail_str;

    }

    </script>

The cheese sandwich - in all its guises - has long been a British favourite. Now, thanks to Bristol University taste experts, West Country Farmhouse Cheesemakers and the power of the internet, the quest for the perfect cheese sandwich is finally at an end.

The co-operative of farmers who produce authentic handmade Cheddar, in conjunction with the sensory analysis team at Bristol University, have uncovered a mathematical formula which reveals the perfect thickness of a slice of farmhouse Cheddar when used in conjunction with bread and popular accompaniments.

The formula, which includes nine algebraic variables, has been used to create an online calculator at www.cheddarometer.com. The calculator enables the world’s cheese lovers and caterers to specify their choice of fillings and then works out the optimum quantities of each ingredient required to complement the complex flavour of the farmhouse Cheddar.

The formula is:

where W equals the thickness of Cheddar in millimetres, b the thickness of bread, d the dough flavour modifier, s the thickness of margarine or butter, m the thickness of mayonnaise, c the creaminess modifier, v the thickness of tomato, p the depth of pickle and l the thickness of the lettuce layer.

The formula is the result of research conducted by senior research fellow Geoff Nute and colleagues at the university’s Sensory & Consumer Group in the Division of Farm Animal Science. Using human assessors and complex technological measuring devices, Geoff’s team has successfully ‘mapped’ the flavour profile of hundreds of samples of Cheddar.

Geoff explains: “We used specially trained human taste testers to sample a range of Cheddar cheeses in a carefully controlled environment and combined results from these tests with instrumental data obtained using colorometers and pressure sensors to obtain precise measurements of variants such as yellowness, crumbliness, creaminess and tanginess.

“The results of our research have been extrapolated to produce a formula which takes into account modifying characteristics of individual cheeses and the ratio of popular fillings and achieves a mathematical balance of flavours in order to gauge the correct thickness of the Cheddar.”

Philip Crawford, chairman of the West Country Farmhouse Cheesemakers group, adds: “We are very proud of our authentic farmhouse Cheddar which we make by hand on our farms using only milk from our own cows. This means each variety of West Country Farmhouse Cheddar has a unique character and we were fascinated to know which combinations of sandwich fillings work best with each cheese. Collaborating with Mr Nute and his team we have managed to create the Cheddarometer and reveal the blueprint to everyone’s perfect cheese sandwich.”

The West Country Farmhouse Cheesemakers group is committed to educating the food loving public on all aspects of making, choosing and enjoying authentic handmade Cheddar. Last year it turned a traditional round of Cheddar into an internet sensation by attracting 1.8million visitors to www.cheddarvision.tv to watch the cheese mature live on the web over the course of 12 months.

Formulate your perfect cheese sarnie using the online calculator at www.cheddarometer.com
 

Google's E-Commerce Analytics tools are absolutely invaluable to anyone conducting business on the web.  But because they're designed for transactions that start and end on your website it would seem that sales generated on the web not confirmed or closed until later would get missed out of your analysis.

In this post we're going to show a quick and simple solution to make sure those all-important sales that you follow up off-line can easily be included in your E-Commerce analysis.

We're going to take for granted that you understand the basic principals of Google Analytics (GA) Goal Tracking and you've at least had a play about with the E-Commerce engine.  Don't worry if you don't but it might be an idea to have a quick look at this article first.

The example: Health-Spa Reservations Enquiries

We came to this problem setting up an Online Reservations System for Grayshott Spa in Surrey.  The bookings are complex and professionally tailored to the individual guest so although the guests are able to run through an online booking system, choosing their dates, spa-breaks and so on, their booking is only finally confirmed by a member of Grayshott's reservations department over the phone.

It's these confirmed bookings that we're interested in for our e-commerce analysis not un-confirmed enquiries.

The system: How the booking engine works

  1. A guest arrives at the site ( from a search-engine, another site, an email-newsletter etc. )
  2. They browse around and find something they like
  3. They compile a reservation for their party
  4. They submit their reservation
  5. An email, including all the details of their reservation is sent to Grayshott Reservations
  6. A member of the reservations team calls the guest, goes through all the details and takes a deposit
  7. That member of reservations clicks a link in the enquiry-email we've sent them which takes them to a panel of Spirit where they can confirm the details and close the enquiry

The problem: By the time we confirm the sale the customer's offline

The data collation part of GA is client-side, cookie based system designed to be light-weight for Google to run.  Google's servers aren't doing any real work to create and collect the data, the real work is in the analysis later on.  GA's farms just serve a little javascript file to do the work in your browser and all the tracking & session management is done using a cookie ( a small text file stored in your browser ) containing all the important data. 

Every time you view a page on a website that's running GA this little bit of Javascript picks up your cookie belonging to that site, does a little work on it and sends a single request to Google's servers.  These little requests are then logged and analysed a few hours later.

The problem we have is with Step 7. 

Although we've known for some time the details of the reservation; the spa-breaks, number of nights, rate etc. critically only at Step 7 do we know for sure that the enquiry made by the guest has resulted in a confirmed booking.

But Step 7 is carried out in the browser belonging to the member of the reservations team.  If we feed the data to GA here Google will forever think that it's only the people on the reservations team who are booking rooms because it will always be using the reservations team's cookies to track the e-commerce transactions.

We'd loose all that lovely information that shows us that people searching for 'health spas' on Google tend to book for 3 nights or fewer, or that September's newsletter or that article in Conde Nast has generated $n of revenue and this is precisely the data we're after.

The solution: Cross domain tracking.

The solutions, as luck would have it, has already been provided to us!  It's based on the cross-domain feature designed to ensure continuity of GA information across third party shopping carts.

As a fundamental security feature of all modern browsers cookies, these tiny nuggets of text-data in your browser, should never cross the divide between one site and another.

When someone leaves http://myshop.com and visits https://secure.checkout.com to provide their credit-card details GA has to provide a method for sharing the GA tracking data between the two sites.  This is GA's cross-domain feature.

The cross domain methods ( particularly _link() and _linkByPost() ) lift the cookie data out of the cookie and this data is then added to the destination web-address.  The setAllowLinker() method on the desination page then tells GA to re-absorb the information about the consumer from this data in the web-address, rather than look for data in a cookie.

The finesse: Tracking the right cookie when the deal closes

At Step 4 in our list above we make sure to run the _link() method to get the tracking data somewhere where we can see it. 

At Step 5 when we send the email through to reservations you'll remember that we provide them with a link to click that takes them to their back-office panel where they can confirm the reservation.

So all we do is ensure that this link also carries with it all the data the the _link() method added to the URL during the enquiry.

When we reach Step 7 - so when the reservations team member clicks the link in their email - all the data that _link() produced is still in the web address.  All we do is ensure that we call _setAllowLinker() which tells GA to ignore the reservations team-member's cookie and instead use the data from the URL.

Finally the reservations team member submits the booking as "Booked" (hopefully!*) and on the subsequent "Thank You" page we feed all the data about the reservation - rooms, breaks, rates, nights etc - through to Google.

When Google runs its analysis of its logs later that day all of this e-commerce data will quietly join up with all the previous data for that cookie... where the visitor came from, how many days & visits to book and so on.

* we've actually added this first page to our Goal Path so that the booking getting to this stage show up in the funnel analysis even if the reservations team member clicks "Failed" as apposed to "Booked".

Results: Was it all worth it?

Definately.  We've only had the system running a few weeks but already we're starting to gain an incredible insight into the distiction between traffic & business... which is ultimately the motivation for doing this analysis.

Through careful tracking of landing pages from offline (ie. magazine) referral, through tracking of email-traffic (something Spirit provides by default) and through Google's native tracking of search engine and website referral we're now able to truly understand which search-terms, which referrals and which offers and incentives drive people to book.

We're also getting some very interesting information about the correlation of breaks, room-types and length-of-stay as a product of GA's great ability to allow you to visualise your data.

 

 

I've had a couple of queries about our pseudo 'transaction' system...   probably better referred to as "SQL Rollback" since it could quite easily be ported to any database engine, ACID or otherwise.

Anyway - I though a little demo of what it can do would be helpful.

This demo runs through a sequence of (currently) 9 statements and then rolls the whole lot back.  Each statement is executed as the page request runs.

At each stage a little method dumps the data from the tables out for you to see, highlighting any changes since the last time it ran.  Each statement itself is also dumped out so you can see what's going on.

So here it is: live demo of (software) SQL Rollback...

  • Google Maps
    Google Maps

Further to posting my article Definitive IE PNG Fix I have discovered a potential problem which involves the Google Maps API. The problem is that the Google Map won't render in Internet Explorer 6 or 7 if you use the PNG fix in the "wrong" way.

The original post detailed how to attach a CSS behaviour to img tags to script the browser into correctly rendering PNG's. I also suggested that it was possible to attach the behaviour to other HTML tags such as div's and ul's:

img,div,ul {
    behavior: url(iepngfix.htc);
}

Whilst this an excellent solution for saving time it causes problems for the Google Maps API in Internet Explorer as the map is enclosed within a <div> tag. As the API automatically deals with IE's inability to render PNG images, there is a conflict between the .htc behaviour and the Google Map's javascript. This results in the Google Maps failing to render correctly in Internet Explorer 6 and 7.

The solution is simple. Just assign the .htc behaviour to a class, and then add that class to each element you need a PNG fix for.

.png-fix {
    behavior: url(iepngfix.htc);
}

2 Comments on this post

  1. said “Thanks so much :)” years ago
    Gravatar for

    Thanks for taking the time to post this, I've had this exact same issue today and came up clueless until I found this post - it would have probably taken me ages to realise that the PNG fix was the cause!

  2. said “Great idea” years ago
    Gravatar for

    This is a great suggestion and very helpful.  However, can we include the behavior into an existing class for an image? 

    When I attempt to do that, the behavior does not seem to apply to the image.  Any ideas?

Isotope is proud to announce the public launch of the new Debt Collection Solutions website.

Debt Collection Solutions Ltd is an ethically responsible debt collecting agency who maintain the highest standards of quality and customer care. They recognise that people have different needs and believe in treating people fairly, openly and honestly.

With a proven record of delivering results whilst taking fair approach with customers, we believe they offer excellent debt collection services and superb advice on resolving debt issues.

Isotope have been pleased to work alongside Aylmer-Kelly IT services on this project.

For more information why not visit Debt Collection Solutions' new website at:

www.debtcollectionsolutions.co.uk

After many months of searching we have finally found the ultimate solution to the perennial problem of Internet Explorer 6 not supporting Alpha Transparent PNG images. Initially posted at http://bjorkoy.com/ the method involves using a .htc hack to script IE6's behaviour, and adding the following line to your css:

img {
    behavior: url(iepngfix.htc);
}

What makes this method so much better is that this PNG fix also works on css background images (as well as the standard <img> tags). To download the full code please go to www.twinhelix.com/css/iepngfix/. Hats off to Mr Turnbull for his sterling work!

1 Comments on this post

  1. said “PNG fixes and Google Maps” a few weeks ago
    Gravatar for

    Further to my initial post here about the definitive IE PNG fix we have discovered a potential pitfall.

    Internet Explorer fails to render the Google Map when you use the PNG Fix in the "wrong" way.

    To see my full explaination please read:

    IE PNG Fix and Google Maps

     


Download

[Update:March 2008]

The MyTransaction library is now available to download under the MIT Open Source License.

  • Download: transactions.zip version 0.1.1

    • Original [0.1.0] 19.03.08: Uploaded.
    • Change [0.1.1] 19.03.08: Added one little class I forgot... oops!
       
  • View the documentation online
  • Full running example

If you use the library, please let me know how you get on...

Background

Everyone who's ever built a MySQL database app has made a choice about which database engine to use. You may not realise it of course but you have.

In short the difference is; if you need ACID transactions, foreign key-constraints and row-level locking use InnoDB, otherwise use MyISAMs.

There are also a couple of more subtle differences which can bite you later on like COUNTS. SELECT COUNT(*) FROM big_table; will return in a milisecond from a MyISAM but the same query requires real work from the InnoDB engine.

Like many people I started with MyISAM; it's fast, it uses less disk, memory and effort. I never missed the foreign key constraints because Spirit's aesthetics engine can deal with that for us and I've not yet found we really need row-level locking. The one thing though that would be really handy to have in MyISAM would be transactions.

What're transactions and why would you want them?

A transaction is simply a way of telling your database "All or nothing at all". It's about database integrity.

Take for example the following sequence of commands, following Johnny paying Billy £5:

  • Take £5 from Jonny's account
  • Add £5 to Billy's account
  • Record a £5 transfer in the transfer ledger

At the end of the week you can look at Jonny's starting balance, his current balance and all the items in the ledger which mention him and you know that all is right in the world.

Now it doesn't matter what order you do this in, if the process stops half way through your database is going to be a mess, your totals at the end of the week will be all wrong and you won't have a clue why.

Transactions are part of the answer to the problem because although you issue your commands as normal, with a transactional database your changes are only pencilled into the database and only right at the end, when you're sure you happy with everything do you tell the database to commit it to pen.

Any other reason for transactions?

Well - in our case yes. Testing!

Many of the sites we run walk the user through a long sequence of web-forms. At the end of the form the system has collected a lot of data together and has to comit it to the database. It may be committing a dozens of records to dozens of different tables so the queries can get pretty complex.

When you're testing a new process the last thing you want to do is to click through the whole process filling out forms every time you make a little change. And when you get to the end you don't want the system to be doing something different the second time based on the data that went in the last time.

Wouldn't it be lovely if, when in test mode, your website could do everything, 100% as normal... but if anything goes wrong, or even if everything goes right, it would undo everything it's done and leave you back exactly where you started so you could test it again!?

Transaction & Rollback for MyISAM

And so I set about writing a transaction & rollback mechanism for MyISAM... and it works.

If your DB class is abstracted properly (and is written in PHP) you should be able to add in this functionality with just a few lines of code.

Features:
  • Commit & Rollback of statements in MyISAM
  • Full support for single-table INSERT, DELETE, UPDATE
  • Support for multiple-table UPDATE
  • Support for concurrent-transactions
  • Support for concurrency of transaction & non-transaction statements
  • Automatic Rollback on_exit_handler()
Features waiting to be written!
  • Support for table aliases
  • Support for multiple-table DELETES
    (should you even be doing that though?)
  • Support for tables with no PRIMARY KEY
Caveat Emptor
  • This is not an excuse to ignore InnoDB
  • This is not for production environments, it's a testing tool

How does it work?

It's really not very exciting or clever and it works like this:

First you start a transaction, for which you get a numeric ID.

Then rather than executing your statements yourself you pass your statement to the transaction object which takes care of executing it for you.

Just before it executes your statement it records, within the database, the state of what you're about to change.

If you want to rollback your transaction the transaction library simply executes another sequence of statements on the database to undo the changes you've just made and revert the database back to it's original state.

If you're happy with your changes and wish to 'commit' them to the database then the transaction library simply does nothing.

Finally, by default, if your process completes and no commit() has been received the transaction library will automatically rollback all transactions.

A few last notes and FAQs

What happens on a fatal error.

If your process dies completely and the on_exit_handler isn't called then you're stuck back where you were. Also if you disconnect from the database you're equally scuppered. (See above: Caveat Emptor)

Doesn't that make it pointless?

Of course not. It's an invaluable testing tool. It allows you to re-make the same request again and again in the knowledge that, when you're done, the database will be back exactly the way it was.

How fast is it?

I haven't benched it (yet) but it should be pretty fast depending on the amount of data you're changing. It stores the data in temporary tables and has little or no requirement for indexes etc.

Why don't you just re-image the database each time?

Because this is easier, because other people may be working in other parts of the database. Because don't want to keep re-imaging every step.

Any things it doesn't do?

Yes. No support for aliases such as UPDATE foo AS t1, bar as t2 SET t1.xxx = 1 WHERE etc. as yet ( partly becuase I don't tend to use them )

Also on the list to add is management of LOCK TABLE WRITE which at the moment it doesn't bother with.

Can I have it?

Yes, by all means. I need to upload it somewhere really, if there's any interest. For now if you want a look at the source just nudge me (jim) and I'll email it over.

Oh - and silly me, I should mention.. it's PHP (4) although it's not very long or complicated so it could easily be ported elsewhere.

3 Comments on this post

  1. said “A few suggestions...” a few weeks ago
    Gravatar for

    I just checked it out, and it works awesome so far!

    I noticed/did a couple of things:

    • I modified some lines of code that produced the "Call-time pass-by-reference has been deprecated" - Warnings by removing the ampersands and putting them where the function is declared.
    • I had to move the block that declared the stored_query class up to the top of transactions.php (Classes in PHP are something that I never really worked with, but trial and error always helps ^^)
    • $_verbosity is declared 3 times, in order to prevent from debug information being sent to the browser, I had to change all 3 of them
    • Also, since my web hosting provider puts a hyphen in the database name (which is not really good with SQL), I had to do a little bit of escaping (example: SELECT [...] FROM `$db`.`$table`)
    • When you roll back an INSERT-query, the query is being rolled back; however, AUTO_INCREMENT doesn't change back. I don't know if the real MySQL rollback does that, and it does nothing bad other than just looking odd.

    Your idea is really good and you also worked it out very good!

    Thanks

    Paul

  2. said “Great!” years ago
    Gravatar for

    I've stumbled upon this, and just want to cheer you up. Seems great for implementing a undo system for a webapp.

    The only thing that stops me for trying it, it's the alias thingy. All my queries use alias, so it would be a little pain in the ass to change them.

    How difficult would be to implement it? 

  3. said “Great Indeed” years ago
    Gravatar for

    Sounds great, MyISAM is my choice for most things but I often end up using a library that provides fake transaction support. This one looks like it's worth looking into!

    @Paul: Yeah, I hear what you're saying about the auto-increment keys not being rolled back. I think that you're right and that the expected behaviour in native (InnoDB or Berkely DB) transactional support is to NOT roll back auto-incrementing keys in event of a booboo.

    I guess you could design something that would automatically roll the keys back, but I don't see the point. I guess if you needed monthly stats for some special project you could just run some kind of re-keying function over a copy it that one time. Probably be safer anyway, particularly on a big table..........

Add your comment…

We're very proud to be part of the launch of a great new financial advice service here in Bath.

Bath & City Financial is a new Independent Financial Advice business based in Bath and is a joint venture between Bath Building Society and City Financial Planning Ltd, a successful Bath-based IFA. Hence the name, Bath & City Financial.

Being a locally based business, Bath Building Society has been building relationships with its members and customers for over 100 years. We believe that building great relationships is the cornerstone of good financial advice.

For more information why not visit their Bath & City's new website at www.bathandcity.com

I'm sure I should have better things to be doing today (namely getting two sites live) but, while reading a recent paper about a parallel programming model I got to wondering: what does google weigh?

I'm very happy to report this took about 10 seconds to work out with, yes, Google.

I think many people probably go years without discovering Google Calculator so this is perhaps a good example of how insanely useful (or useless) it can be for helping you with your maths.

Now the article in question states that Google is "searching a multi-terabyte web index for every query with an average response time of less than a quarter of a second".  But what does a terabyte weigh??

Ok.. if a 4GB iPod nano weights 1.74 ounces that means a couple of terrabytes weights around 25Kg and if Google are serving 150 million requests per day that's around 7'000 requests per second  (bear with me!)

... so even a conservative estimate of indexes in the region of 2TB that's about 44 tonnes of data per day ... if there indexes are closer to 100TB that's more like 2000 tonnes.

The paper - which is far more interesting - is here!

Systems Affected: Bath Office; Development Environments.

We will be powering down the Bath studio at 1600hrs on Monday 21st January '08 while work is carried out in the local substation.

We expect the work to take no more than 2 hours.

This does not affect any live services.

Update 22.01.08: The work on the Bath office power supply was carried out yesterday as expected.

Much as I love Google Docs & Spreadsheets I find it a bit annoying that you have to go to the GDocs main page first (which can be slow to load) before you can then get to your document or spreadsheet... added to which you're then left with the main page which you probably don't want any more.

The solution? 

A toolbar button providing handy access to all your Google Documents from your browser toolbar.

Features ( Docs Button )

  • One-Click to your Google Documents
  • Dropdown list of your most recently edited documents NEW!
  • Search your Docs from the Toolbar

Features ( Calendar Button )

  • One-Click to your Google Calendar
  • Search Google Calendar from your Toolbar
  • Drop-down & click for:
    • Today
    • This Week
    • This Month
    • My Agenda

Install Now!

Isotope is currently interviewing for a PHP/MySQL Web Developer and a Web Designer / Production Assistant to join our team in Bath.

Both roles are a fantastic opportunity to work in a busy agency developing exciting and internationally acclaimed projects.

For more information about both roles come this way.

CVs & Portfolio material should be sent to jobs2007@icommunicate.co.uk

Davina McCow and Dermot O'Creamy invite you to sit back and relax, take in the beautiful Westcountry vista and fall in love with our 110 beautiful Jersey cows.

A network of carefully positioned network cameras will be beaming the day to day life of our herdmates live, across the internet, 24hrs a day, 7 days a week.

Log on to Big Udder each day to watch the milking or watch the girls at breakfast and tea at the feeding troughs or sit back of an evening to see the ladies out in the field, chewing the cud.

Each month a hamper of Jersey & Gurnsey goodies will be given away to the winner of the nominations competition.

 

Isotope is extremely proud to announce the public launch of iStylista - a revolution in personal styling.

iStylista allows ladies the world over to discover the cuts, styles and colous that suit them best, online and in minutes.

Packed with tips and advice on everything from the right jewellery to how to make the most of your budget every style guide iStylista delivers is unique to each customer.

iStylista has been a fantastically interesting challenge for us.  Pushing at the boundries of Spirit|Framework's already advanced personalisation engine it's unique requirement for impeccable page setting of large, complex and unpredictably unique PDF documents has certainly raised the bar.

All you ladies out there are very welcome to get your free sample Fashion Diva style guide today!