So, you’ve set up a Facebook public profile for you, your brand and your company, now what?

I thought I’d share a few interesting ways for you to tweak your profile for maximum impact:

1. Create the perfect profile picture

Facebook recommends that profile pictures should be 200px wide, while the height can vary. What is less documented is how the thumbnail that Facebook uses across the system is generated from your profile picture. You’ll find that the system will crop your image when generating a thumbnail which means you lose the information around the edge.

After some testing, we can tell you that when you create your profile image that’s 200px wide, if you leave a 12 pixel border around your crucial information (brand name or logo) you will avoid being automatically cropped out.

Don’t forget that regardless of the shape of your profile image, Facebook thumbnails are square (with rounded corners) so if you design a rectangular profile picture, make sure you keep your desired thumbnail imagery within a square boundary.

2. Optimise your website’s Share Preview

One of Facebook’s key strengths is the ability to spread your shared links into the news feed using the Links application, which is now built into your Publisher box at the top of your wall.

Your link can be accompanied by a relevant thumbnail image, however if your site is mainly Flash-based or has no suitable graphic components for a thumbnail, you should define a custom Share Preview image. Facebook can provide you with specific information on how to do this here.

Again, no guidance is given as to the perfect size for a Share Preview, but we’ve found that a 100 pixel square preview is optimal and it will require no resizing by Facebook.

Remember that you can also add a Facebook Share button to your site to encourage your visitors to share it.

3. Display different content for non-Fans

For the Non-Fan landing area, you can display a “Become a Fan” incentive in an FBML box or Tab. Here’s a quick way for to create your own FBML box which will display different information to different users depending on their Fan status:

- Create a 1 cell borderless table, with a fixed height and width; for example, 100px

- Create and define a background image for that cell to the same dimensions, which contains the information you want NON-fans to see

- Create a same-sized image that contains the information you want Fans to see and insert that into the cell

- Use the following FBML tag to surround the cell contents – <fb:visible-to-connection><img src=”insert your image URL”></fb:visible-to-connection>

This FBML Tag only displays content to Fans who are logged in. So what we’re doing here is creating a table with a background image, and then covering it up with another one IF you’re a Fan.

Here’s some example code for you to try:

<table width="xx" height="yy" border="0" cellspacing="0" cellpadding="0"><tr>
<td background="http://www.yourdomain.com/linkto/nonfans.jpg">
<fb:visible-to-connection>
<img src="http://www.yourdomain.com/linkto/fans.jpg" height="xx" width="yy" />
</fb:visible-to-connection>
</td></tr></table>

4. Vanity URL, or Custom Domain?

Vanity URLs are available to all brands whose pages have at least 100 fans. However, you can still make use of your own domain by pointing it to your Facebook Page using a domain redirect. If you do own your own domain then you can set up http://facebook.mydomain.com so that it points to your profile.

5. Define a publishing schedule for your content

You should try and get into the practice of scheduling your updates so that they remain steady and consistent rather than being either too persistent or too few. By setting up a calendar for yourself, you’ll be able to stay on top of things and decide how much time you need to allow your fans to read comment. Try and mix up your posts with status updates, Links, Notes, Videos and Photos. 

The only time I had previously come across the word, ‘bespoke,’ was when I was flicking through pages of designer dresses in an issue of Vogue. Before now, bespoke always meant an absolutely beautiful, one-off, custom-made dress… absolute glamour.

So when I heard bespoke and web development being used all together, I’ll admit I wondered what my dream dress had to do with web development. In my quest for answers, very journalistic of me, I found a few bits of usual information I though you might like to know…

- Bespoke web development is a consideration of striking, intuitive designs and commercial elements so that your website can be developed for the right reasons

- There are plenty of existing websites that are developing for the wrong reasons – they may be pretty but they’re definitely not clever

- Bespoke web development is effective in taking you ahead of the market place competition

So, instead of that custom-made dress I was imagining, think of it like a custom-made website with functions that often stretch far beyond the imagination. 

Here at Ph. we have our very own in-house content management system, Ph.Use, which means we can make anything possible - from online redeemable vouchers to innovative scraping technology.

The main thing about bespoke web development is to make sure you always have your client’s commercial goals in mind, navigated with Search Engine importance.

If you can offer something completely new, well that’s just showing off really…

Last fortnight I posted about changes to Twitter - Twitter Lists, allowing you to create lists of Twitter users that others can follow.

Improvements to its Lists feature has been rolled out, starting with one that many Twitter users have been asking for, descriptions. Only the title of your list could be indicated what it was about.

However, now when you go to edit any list, you will find a new field, 'Description', that allows you to describe the list you have created in 100 characters or less, which is optional.

Will we see more developments to Twitter Lists? What would you add or change?

At a recent presentation entitled “Getting the best out of your website” the speaker mentioned how it doesn’t matter how your website looks as long as you can get their contact details easily.  I disagree.
How many times have you clicked onto a website and clicked off it almost immediately because it’s just a bunch of text, text and more text?  In this consumer focused environment looks ARE everything!
Look at these two websites ↓↓↓

www.therenewableenergycentre.co.uk

www.eco-environments.co.uk

Both websites provide information on renewable energy and the benefits from using all the various sources. However, which website would entice you? Personally, Eco Environments looks slick, fun and professional whereas the renewable energy centre, whilst it’s oozing with information, is an immediate turn off due to the sheer amount of block text.
Influencing your clients through your website is relatively easy; all you need to show is your creative side to wow your audience. Five key areas that I always encourage anyone trying to improve their website include:

1. Make it impressive- using your Company colours ties your Brand and website together.
2. Easy to Navigate- don’t bombard your potential customers with hundreds of pages, all full corporate info. Keep your titles focused so everyone can find what they need easily.
3. Quality Content. Your website should be informative but NOT boring. Remember it’s about enticing your potential clients not killing them with dull, uninspiring jargon.
4. Keep it up-to-date! Let your public know what you’ve been up to. Which clients you’re working with, who’s written a testimonial about your company etc. You’re proud of your company so why not shout about it.
5. Finally, (and arguably the most important) Contact Information. Have your telephone number, email address, Blackberry Pin, Linked In Address, whatever it is, on show!
“There’s nothing worse than scrapping around a website trying to find a phone number... Usually I’ll get frustrated and try another site” (Victoria Wareham-) DONT LET THIS HAPPEN TO YOU! 

I hope this has been helpful, and remember the greatest thing about a website is that it's accessible to an enormous volume of people from almost any location. Therefore why not make it as read-able and polished as possible to persuade your potential clients.

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!

The National Legal Trade Exhibition came to the BT Convention Centre last week, and Ph.Creative were of course one of the top local businesses to join the action.

This was a great opportunity to showcase our distinctive brand, the expertise of our ingenious creative team, and get out there and network with the people!

 

Always one for challenging the norm, and in true Ph-style, never being partial to a table-clothed trestle table, a few leaflets and branded biros, I donned my creative cap and got to thinking outside the box.  Over a coffee-fuelled brainstorm with the team, we pondered over a concept for our exhibition that would really make us stand out from the crowd.

 

As a surprisingly enthusiastic response was drawn from the childlike cartoon sketch of my exhibition stand vision…  

 

 

 

Ph.Creative Surgery was born...

Free IT Health Checks for those sick and tired of ineffective SEO and suffering aches and pains with online marketing strategies.

As the exhibition visitors filtered in, Ph.Creative Surgery was in full flow, consulting and advising on website effectiveness and prescribing remedies for the ailments of unsuccessful online marketing tools to the masses.

Bryan Adams presented yet another outstanding seminar on Online Marketing Tactics, which further prompted some technophobic patients to bob along for a check-up.  And if one mastermind lecture wasn’t enough, the medical team took a mid-afternoon respite to attend Sales Guru - Andy Bounds’ enlightening seminar, which was nothing short of inspirational team-building.

Diagnosis: Another great day at the office!

Having made a memorable impact (be that positive or negative!? You decide) Ph.Fever was certainly in the air!

If you missed out on your check-up this time, fear not... it won’t be long before the Doctor is back in town! (Or in case of an epidemic, give us a call!)

Twenty of our favourite high street stores have gone under the microscope of Webcredible in order to find out how good their usability is. The sample was taken for the first time last year and it found that webcredibly many of the sites really weren’t taking advantage of the potential revenue in the run up to Christmas.

This year they looked at the same 20 high street stores, judged them on 20 different criteria and gave them an overall mark out of 100.

With the results just out, in first place, drum roll please …

With 83/100 points … WHSmith and M&S

This is the second year at the top spot for WHSmith, no points gained but no points lost. On the other hand, M&S snatched an extra 15 points this year to zoom them up into joint first.

M&S re-launched their brand new site just before the report was made and it seems they paid attention to improving their user experience. Well at least someone did! Unfortunately the average score across the sample only increased by 5.5%, the top score isn’t any higher and the lowest score was still 56.

The sites are judged on search results, browsing, product pages, basket and checkout; all things you would expect of an ecommerce site. For simple things like ensuring there is a link to the basket and checkout on every page – all sites should be scoring 5/5, but they weren’t.

Debenhams was the only website out of 20 that changed the colour of the link once you have visited it. Nothing is more annoying than trying to remember what you have already seen. Tut tut to the other nineteen stores who don’t know what their customers want.

How about the guidelines- you know when you click on, for example, women’s department, clothes, tops, evening tops and then when you don’t like the one you clicked on, you go all the way back to the start of the process. How about just taking us back to the evening tops? This is a long term guideline and it is not particularly hard to implement. If not implemented, then it won’t be long before customers start visiting their competitor’s site.

You would also think ‘Proceed to Checkout’ would be a major priority for all the sites but guess what; it was the only guideline with a lower score than last year. Site designers should carefully consider where to place and how to design this button to ensure that customers don’t get lost and drop off at the most crucial stage.

Any website scoring in the 50’s and 60’s, such as Topshop would you believe, really need to up their game. A good ecommerce site is now just as important as the shop itself. If you’re not taking advantage of the online market then your not taking advantage of big money and ultimately you’ll be losing customers to competing stores who know where to put their ‘Buy it Now’ button.

Making your webpage easy and enjoyable for your visitors is the key to usability success. There are plenty of tricks and tips to try out…

1. Making Faces

Whether you’re walking around town or visiting a bar, you can’t help but take a look at the faces around you. Subconsciously you are absorbing much more than you realise. You can take advantage of this fact by featuring people’s faces on your webpage, sounds simple you think? Well hold on, there’s a bit more to it than that. Studies have found that we actually look in the direction of the face we see on screen, so if you want to share some specific information make sure your friendly face is looking straight at that information.

2. Quality Counts

As shameful as it is to admit, we humans really do have a tendency to judge a book by its cover. Therefore the quality of your webpage is key. Visitors are going to believe that your product or service will be as good as your webpage looks, so make sure you invest in making it perfect.

Once the user has checked out how you look, they will then be judging you on personality. It’s one tough crowd out there! So they will be looking at the actual quality of your website, the amount of errors, how often information is updated and its ease of use. If you tick all the boxes, then you’ll be more than likely to guarantee a second date.

3. Keep Scrolling, Scrolling, Scrolling

Once upon a time only around three-quarters of all visitors to your website would not have bothered to scroll. Those who panicked at hearing this information made the dire mistake of attempting to cram all their information into the top half of the site. Unfortunately no one lived happily ever after.

Flash forward a few years and it appears we are now the generation who love to scroll. People are much happier to have content well spaced out with plenty of white spaces as it makes it clearer and easier to read. People are now so keen to scroll that they will even make it right down to the bottom of the page, so make the most of every inch.

4. Blue is the Colour

As important as it is that your site stands out from the crowd, it seems people still love their home comforts. When people visit new websites they look for something familiar, this is called usage patterns. People expect certain things to be the same, such as the location of the website’s logo and the behavior of tabbed navigation. People know what they know and in this case, they know that links are blue. Google sticks to this time-honoured tradition and so should you.

5. How wide is your Search Box?

Time for some specifics - the ideal search box is 27 characters wide. A fact that is clearly not known by many, as the average search box is just 18 characters wide. So take note and remember that by giving the user more space allows them to review, verify and submit their enquiry quickly. Sounds simple enough but yet so many people still choose to ignore this, make sure you’re not one of them.

Center A Web Page Layout

One of the most common layout questions asked about when building a website has to be how to create a fixed width layout, with the container floating in the middle of the page. Add the following code to the CSS:

Then add <div id=”container”></div> in the body of your HTML to give an automatic margin on both its left and right, ensuring that it's always placed in the centre of the screen.

To quickly see if your container is there simply add:

If a red box appears in the middle of your page, you know the container is sitting in the correct place.
You can then remove the height and background from the CSS for this ID.

Font Shorthand

When styling fonts with CSS you may be doing this:

You can use this CSS shorthand property instead:

Please Note - This CSS shorthand version will only work if you're specifying both the font-size and the font-family. Also, if you don't specify the font-weight, font-style, or font-variant then these values will automatically default to a value of normal.

Content Selection Colour

When selecting content on a web page by holding down the left mouse button, your browser makes the selected the content background colour blue and text white. This can be styled but unfortunately doesn’t work in IE, but it's still a nice touch. Add the following to your style sheet and view your site in Firefox.

*::selection
{
background: black;
color: yellow;
}

*::-moz-selection
{
background: black;
color: yellow;
}

Using Two Classes Together

Usually attributes are assigned in just one class, but this doesn't mean that that's all you're allowed. You can assign as many classes as you like!
For example: <p class="left dark”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both ‘left’ and ‘dark’. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

Image Replacement

It's always advisable to use regular HTML mark-up to display text, as opposed to an image. Doing so allows for a faster download speed and has accessibility benefits. However, if you've got your heart set on using a certain font and your site visitors are unlikely to have that font on their computers, then really you've got no choice but to use an image.

For example, you wanted the top heading of each page to be ‘SEO Tips’, as you're an SEO Blogger and you'd like to be found for this phrase in the search engines. You're pretty set on it being an obscure font so you need to use an image: <img src="seo-tips.gif" alt="SEO Tips" />

This is OK but there's strong evidence to suggest that search engines don't assign as much importance to alt text as they do real text (because so many webmasters use the alt text to cram in keywords). So, an alternative would be: <div id=”logo”><h1>SEO Tips</h1></div>

Now, this obviously won't use your obscure font. To fix this problem place these commands in your CSS document:

The image, with your fancy font, will now display and the regular text will be safely out of the way, positioned 9999px to the left of the screen thanks to our CSS rule.

It’s also worth making your H1 a hyperlink: <div id=”logo”><h1><a href="#">SEO Tips</a></h1></div> and adding the following to your CSS:

Our latest project ‘Eco Environments’ recently went live, which we’re really proud of. So much so, we thought we’d brag about it a little!

We decided to incorporate an energy saving concept by urging site users to turn off the light before they leave.

We added mouse detection to the site in the flash, so when the mouse cursor went above the top navigation towards the top of the browser, a warning sign appears.

For the actual light switch we used jQuery. Clicking the light switch switches the CSS Style Sheets, giving the impression the lights have been switched off. Highlighting only the data capture form for their latest email campaign.

You’ll also noticed the flash at the top also changes from day to night, with house lights flickering on and the sun changing to a moon.

Of course you can always switch the lights back on... if you’re afraid of the dark!