Ph.Creative Blog

Happy 5th birthday, Firefox!

2009-11-09T10:56:00+00:00

After its first release on 9th November 2004, quickly became a firm favourite with web developers.

Firefox has been downloaded more than one billion times and is the world’s second most popular browser after Internet Explorer.

For web developers like myself, Firefox’s greatest appeal is the add-ons system, with favourites of mine including Firebug and the Web Developer Toolbar.

Checkout the video for Five Years of Firefox: www.spreadfirefox.com/5years/en-US/

Online Pirates

2009-11-06T12:48:00+00:00

Lord Mandelson announced last week that he intends to stop people from downloading music, films and television by cutting off their internet connection if they get caught three times.

Thinking of something else I read last week… in a league of ‘happy’ countries, the UK only ranked 12th due to the high number of rules and regulations we’re all expected to obey. Hmmm, I see another rule coming into play thanks to Lord Mandelson.

France has just passed a similar law themselves; in that anyone caught illegally downloading three times will have their internet disconnected and guess what! France is an even more unhappy country that we are, they ranked 17th!

This announcement has come after months of pressure from the big shots in the music industry who basically aren’t making as much money as they used to.

If Lord Mandelson gets his way, a suspension could mean that parents could be at risk of losing their family internet connection if their children repeatedly use it to violate copyright.

Your internet would only be disconnected after a series of offences but at first you’ll only receive a warning letter and then you’ll have your internet connection slowed down so downloading takes a lot longer.

BT and Carphone Warehouse are two big names who have complained mainly because they’ll lose customers who lose their internet connection. If you’ve ever tried to get out of a contract with BT or Carphone Warehouse then you know how much they hate to lose customers, so it looks like Lord Mandelson could have a fight on his hands!

More than likely though, we’ll follow the French and implement another law. Before you know it we’ll probably rank even less than them in ‘happy’ lists. I wonder if there’s anything you can get for free anymore that doesn’t come with the risk of a secret charge or prison sentence.

Custom Checkboxes with jQuery and CSS

2009-11-06T11:17:00+00:00

A short and sweet piece of code, but very powerful in giving you total control over the design of your checkboxes.

Click here to view the demo.

The problem I set out to solve here was a combination of two things. The first was the ability to change the look of checkboxes in web forms. By default they cannot be altered using CSS as the style is determined by the user’s operating system. The second problem was that the existing JavaScript solutions to this problem were bloated with a lot of unnecessary code.

My solution solves a simple problem using very little code, so I hope it comes in useful! Let me walk you through the steps…

Step 1, add a block container around your checkbox.

<div class="container">
    <input type="checkbox" value="1" class="checkbox" />
</div>

That’s all the HTML you're going to need!

Step 2, style your checked and unchecked states as an image. (It’s a good idea to optimise these as a sprite instead of two separate images to save on HTTP requests and avoid a flicker when the images switch.)

Step 3, add your CSS.

The checkbox image should be added to the checkbox container rather than to the checkbox itself.

.container {
    width:20px;
    height:20px;
    background:url(checkbox.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
}

Add your ‘checked’ class, which should just be a change in the background position if you’ve used a sprite.

.checked {
    background-position:0px -20px !important;
}

Next, we want to position our checkbox so it appears outside of the container.

.checkbox {
    position:relative;
    left:30px;
}

If you have a look at your page now, you should see your custom checkbox and your default checkbox sitting pretty beside each other. Next, we’ll move on to the jQuery.

Step 4, add your jQuery.

The theory behind the idea is for the user to click on the block container and use jQuery to automatically check the checkbox that sits inside it. Then we use CSS to hide the default checkbox.

var $this = $(".container");
$(".container").toggle(function(){
    $this.addClass("checked");
    $(".checkbox").attr("checked","checked");
},function(){
    $this.removeClass("checked");
    $(".checkbox").removeAttr("checked");
});

The toggle function here will allow you to add your checked class as well as check the checkbox itself, and then remove the style and checked attribute on every 2nd click.

If you run this in your browser now and click on the custom checkbox, you should see that the default checkbox is being toggled automagically! If you are seeing this, then all that is left to do is hide your default checkbox using CSS. So in your container class, simply add the following:

overflow:hidden;
position:relative; /* IE fix to hide overflow */

So the whole container class should look like this:

.container {
    width:20px;
    height:20px;
    background:url(checkbox.gif) no-repeat;
    cursor:pointer;
    overflow:hidden;
    position:relative; /* IE fix to hide overflow */
}

I’ve tested this code in Firefox 3, IE6, IE7, IE8, Safari, Chrome and Opera all on Windows and it works fine in all browsers. Have a look at the demo and let me know what you think!

Google Logo - Sesame Street

2009-11-06T09:21:00+00:00

Over the last few days Google's Logo has being changing daily to celebrate the 40th anniversary of the children's television program Sesame Street!

Sesame Street is known for its Muppets characters created by Jim Henson.
It is the longest running children's television program in the U.S. first premiered on 10th November 1969.
Am sure Google will continue to change it's logo over the next few days...

Who was your favourite character?
Mine has to be 'The Cookie Monster'!

You look where the face looks

2009-11-05T12:06:00+00:00

I've recently been working on a site for a brand new skincare product and have had numerous conversations about models. Not only is it important to use the right faces for the product, but also the positioning of them can play a big part in website usability. By using faces that capture the user's attention, we can guide them to key content on the site and encourage them to take certain action, leading to an increase in conversion.

When looking at people images on a website we tend to focus on their faces and eyes. This gives us a good technique for attracting attention. Studies from UsableWorld show that we actually look in the same direction that the face is looking in.

Take a look at the following image where the baby is looking directly towards the user. Using eye-tracking, a heat map shows where 106 people focused their eyes. The redder the spot, the more time people looked at it. Notice that there is a lot of focus on the baby's face and little on the text.

Now take a look at this second image where the baby is looking at the content. Notice the increase in people looking at the text as opposed to the baby.

A face looking directly out towards the user will simply result in the user looking back at them. Using an image where the model is looking towards key content will draw the user's attention towards it.

Look out for the new Dr Larhrib site coming soon to see how I've applied this technique!

How Effective Is Your Email, first_name?

2009-11-05T11:44:00+00:00

Last week, I proudly introduced the miracle that is our very own Phuse Marketing Manager. Relieving the stress of the mail merge, and providing the solution to the heart-aching speculation of whether that laboured email actually landed in the inbox of anyone who was moderately interested. Sadly, in all it’s brilliance, the Phuse Marketing Manager doesn’t have the ability to write your email for you (we’re working on it folks!) and sadly, this week I have been subjected to further reams of dreary email marketing waffle. Come on folks – engage brains…

It’s Not What You Say, But How You Say It…

Whilst you’re busy chewing over which key points you need to cram into your mail, are you actually thinking about the words you’re using?

Spam filters are infatuated with keywords that scream ‘sales’ and will weed your mail out straight into the Junk Box. In contrast, Gatekeeper PA’s are allergic to sales-rich keywords and on browsing your email, any sign of sales lingo sparks a finger-click reflex towards the Recycle Bin.The word ‘contract’ reeks of legally binding documents – which ironically require legal support to get out of! Consider opting for an ‘agreement’ or “strategy”. But don’t get trigger happy with the thesaurus – you won’t gain any points for a ‘legitimately long-term transaction’.

Mail Merge Mistakes

If you’re going to ask for their business, at least get their name right.Yes, we all know it’s very clever to insert a your contacts name half way through your subject, well done. But at least check that it’s relevant and makes sense. An email starting with "Hi firstname" is equally as cringe worthy as “A Special Offer Just For You name!”

What’s In It For Me?

Whilst it’s all very nice to read about what you do and your prolific list of clients, what exactly are you doing for your prospects business? Don’t just tell people what you do, give them the benefits of using your product. Be a resource – know the market so that you can assist in making good decisions and provide your prospects with the tools to improve their business. People that trust your opinions will become loyal clients.

Excite!

Your punchy, power-packed email has it’s recipient captured at their desk. You have them in prime position for closing with the result you want. Yet, as the end of the email looms, they are faced with nothing but an email signature and a lame ‘give me a call”. Your powerful email has now become nothing but a good read. Engage! You have their attention – keep it! A simple link to your homepage or a call to action button will direct that little cursor towards your site, as opposed to the ‘delete’ button. It goes without saying, always check your links work, are relevant, and professional. Something IT gurus, Experts Exchange (”expertsexchange.com”) might have wanted to look into.

Go Fish!

Would you send out invites to a party and not bother to call round to see who’s coming? Bashing out 300 emails and not bothering to follow them up makes for a poor salesperson and lazy business practice. The sooner you follow up on your marketing campaign, the more likely it is that you are fresh in their mind, they are available for any dates/deadlines you have specified, and less likely to have taken their fat wallets to the competitor that bothered to call. A tool such as the Phuse Marketing Manager allows you to see who has opened your email, enabling you to plan your follow ups accordingly. If you require a response, or action, it’s up to you to be tenacious enough to chase it. Cold leads = no sales.

If your campaign is simply to create awareness, a quick call in to the right people may just prompt them to pass it on to their own trusty database of contacts. If you don’t ask, you don’t get.

Wind up your marketing rod, cast it out into your swarming sea of contacts, rein them in. And keep them warm... There’s never any value in dead fish.

Dream Blogger...

2009-11-05T11:38:00+00:00

It was interesting, clever, witty, a huge hit with everyone and catapulted me into being a highly respected and much loved blogger…but it was all a dream!

How frustrated I was to realise I couldn’t remember what it was about and had no chance of recreating my dream blog into a reality. I’m now having trouble sleeping for fear of dreaming up my next big blog whilst asleep instead of in real life. So, if you’re having difficulty sleeping over your blogging or like me fear you only have good blog’s in your dreams here are some tips to help you get some sleep...

1. Keep a notebook by the bed.

This is for flashes of inspiration - not for working on new posts when you should be sleeping. Have some discipline!

2. Maintain a sensible schedule.

Work time. Home time. Play time. Blog time. Sleep time. Set aside time for each activity, and don't let things overrun. Stick to your schedule as much as you can.

3. Ban all questions after a certain time.

Does your significant other show an interest in your blog? Great! Just tell them to button it when it's time to sleep. Make sure you button it, too.

4. Pretend you don't have a laptop and wireless Internet.

It's just too convenient to hop into bed, go online... and stay online. It might be fun, but don't do it if you have to get up in the morning. Or if you feel like sleeping anytime soon.

5. Don't go coffee-crazy.

I like a coffee in the morning. Not every morning, but every now and again. I avoid coffee in the evenings though. Too many coffees will keep you up all night. Unless you're immune to the effects of caffeine.

6. Don't hide your ideas under the bed.

Notebook? Sure. Anything else? No! It's fine to jot down an idea to make sure you don't lose it, but don't get carried away and start developing some of your post ideas. And don't go thinking you can hide things in the bed, either. It's not going to be a comfortable night for you if you try that one.

7. Sit in the bath.

I'm not expecting you to use the bath as your bed. Having a bath is a great way to relax. Do keep a notebook fairly close by, but be careful not to drop it in the tub. Whatever you do, don't bring your laptop or mobile phone into the bathroom - leave them outside where they won't electrocute you. Seriously. Be careful!

8. Set a cut-off time for snacking.

Blogging can be hungry work, but eating doesn't usually help you sleep. Separating food from blogging and sleeping can make the difference between getting a good night's sleep, or losing track of time and having to pick the crumbs out of your bed, laptop and clothes.

9. Resist the urge to blog if you wake up early.

Do you have a tendency to wake up in the middle of the night? It's best to try and get back to sleep - don't go and start writing a new post. Of course, if you do have an idea, jot it down... but leave it at that.

10. Don't be too good at it!

Whether you're basking in the glory of blogging, or you've convinced your perfect partner that you really are all that... if you don't want to be up all night, be mediocre! (Maybe staying up late isn't such a bad thing...)

Twitter Lists

2009-11-02T16:30:00+00:00

Twitter have recently added a new 'Lists' feature which is a new way to organise people you’re following on Twitter, or find new people. In other words a groups feature.

Twitter List’s are really easy to create and manage. Simply login to your twitter account and click 'Create new list' on the top left.

First, you’ll be asked to provide a name for your list (i.e. friends, co-workers, family).
The name is also used for your list’s URL, which will be 'twitter.com/username/list-name'. You’ll also be asked if you want your list to be public or private.

Public Lists – These lists can be seen by anyone, and anyone can follow them.
Public lists are ideal for lists of recommended follows.

Private Lists – When Twitter says private, they mean private. Only the creator of private lists will be able to see or subscribe to them — not even those on the list can see private lists. That means, for example, you could create a list of your competitors and keep an eye on them without them being any the wiser.

Once you’ve clicked the 'Create list' button, you’re ready to add users.
After you create a new list, you’ll be prompted to search for people to add to your list, but there are really two ways to add users to lists. First, you can add users from their profile page, by clicking the lists button and checking off the lists you want to add them to from the drop down menu. You can add a single user to multiple lists.

Checkout Ph.Creative’s TEAM list!
http://twitter.com/phcreative/team

How Enjoyable Is Your User Experience?

2009-10-30T15:55:00+00:00

Usability Guidelines

Making your pages easy and enjoyable for your visitors to use is a key aspect of web design. Many studies have been carried out over the years on various aspects of usability and the findings are valuable in helping us improve our work.

Over the next few weeks I will be giving you a series of usability guidelines that may help you improve the user experience on your websites.

Part 1: Form labels should be placed above the field

Using eyetracking to evaluate the usability of search forms, a study by UX Matters has found that the ideal position for form labels is above the fields. In a test where users were asked to complete a series of forms, gaze-path recordings were completed to reveal the following findings.

Test 1: Left-Aligned Labels to the Left of Input Fields
The first test performed was on the most commonly used method on the web: left-aligned labels that sit to the left of the field. Left-aligning makes the form scannable but disconnects the labels from the fields, making it difficult to see which label applies to which field and forces users to take more time to interact visually with the form.

Test 2: Right-Aligned Labels to the Left of Input Fields
In the second test, labels were placed in the same position (to the left of the field) but this time right-aligned. Right-aligning connects the labels to the fields making it much easier to see which labels apply to each field. Although the form becomes far less scannable, form completion times were cut nearly in half.

Test 3: Left-Aligned Labels above Input Fields
The final test had labels placed above the input fields. It is obvious that a label that is placed nearer to its input field will enable the user to move more quickly from the label to the field. Placing a label right over its input field permitted users to capture both elements with a single eye movement and the eyetracking data shows that most of the fixations were right on the input fields rather than on the labels.

Conclusion

Because forms are generally vertically oriented; i.e. users fill the form from top to bottom, labels to the left of the field are not the easiest to use. Users scan the form downwards as they go along, and following the label to the field below is easier than finding the field to the right of the label.

A label placed above an input field will work better in most cases, as users aren’t forced to look separately at the label and the input field. If you do choose to place them to the left of input fields, at least make them right aligned!

The Good, The Bad and The Ugly

2009-10-30T14:55:00+00:00

This week in the Ph.Creative design studio we've come across the weird & wonderful of web design. In this weeks’ design blog, we've picked out the good, the bad and the down right ugly of websites.

We've come across loads of great looking sites this week but the one that stands out for us is the events.carsonified.com. As if Carsonified weren't cool enough as an agency, the events site continues to push the creativity and userbility. It not only looks great but is packed with tonnes of videos of seminars from all areas of the industry. The bold colourful typography and the use of different illustration styles in the mast and the footer is really refreshing and a nice change from the standard free vector graphics that are flooding the sites nowadays! For us it’s the attention to detail that makes the sites stand out, the old 'less is more' theory. This is a great site. Nice & simple yet very informative! 5 out of 5!

The site we've chosen for this wins hands down. If there was a room 101, this site would be first in the queue! www.genicap.com. The designers of this site, for us, broke every rule in web design. From the homepage, the user has no idea of what they do and its just doesn't engage the user at any stage. In fact, it’s so boring that the web designers couldn't even be bothered laying out some of the text so just dropped in dodgy jpgs of the copy! Poor work guys. We've come across lots of bad sites but this one is right up there.

This is almost tongue in cheek. We actually wanted to email these guys and ask if its a joke? At least on this site we know what they do, they're a driving school but how bad is it!
http://www.drivingskills.on.ca/ has more clipart on a site than we’ve ever seen. The nasty background, lack of understanding of colour and typography has to make this the ugliest site on the web.

So that’s it for this we, our small collection of really bad sites. If you’ve seen any howlers out there that deserve to be in our blog, please feel free to send them in to us.