Freelance web design development by Jim Callender

How to tell HTML5 from HTML

Jim — Thu, 16 Feb 2012 13:57:43 +0000

Trust in the things you love

Jim — Tue, 31 Jan 2012 09:23:47 +0000

The best work is when it comes from the heart.

Micky Smith is the very best of nature. The video is breath-taking and has left me speechless. Thought I should share this..

Create your vision board

Jim — Tue, 10 Jan 2012 16:10:42 +0000

Wildly exciting goals lead to wildly exciting results. (Not always, or even often, the precise results you visualized. Don’t let that worry you.)

Some time before December 31st, take an hour and write down the most perfect imaginable day for yourself. Where you wake up, what you see, what you have for breakfast, what you do and where you go and how you do it. How you feel about everything you’re doing and seeing. How you look. What you smell and hear.

Use every ounce of writing skill you’ve got to make this description vivid. Sell yourself on it.

And try not to be too “realistic.” Let your dreams soar a little.

Then set a reminder in your calendar to take a look at this “perfect day” once every three months in 2010. Each time you revisit it, re-copy what you’ve written, making any tweaks you want to.

This can be done for your personal life and for your business / career. Ie: types of clients, type of work, what you’ll be an expert in, how to market yourself..

I promise you, in December next year, you’ll be a little spooked by some of the “unrealistic” things you wrote down this year, and how much more realistic they’ve become.

I’ve used it, and it’s the only way to know where you are heading each year, otherwise you have nothing to drive you. Try it!

Blogging WordPress tips at WordPress Designer

Jim — Mon, 28 Nov 2011 10:57:02 +0000

To keep up to date with current web technologies and to increase my productivity – I like building up a library of code, snippets, and solutions to a number of different WordPress issues – whether it’s theming or delving into the functions of complex actions.

As WordPress is open-source, I thought it would be only fair to share some of my favourite WordPress tips. You can find them at www.wordpress-designer.co.uk

There is also information on custom WordPress theming I have done recently, as well as the various WordPress services that I offer.

BTW, I use Evernote to capture all my notes, tips and thoughts when required. It’s great for note taking and also sharing between computers and colleagues.

It’s about the user, not the device..

Jim — Mon, 11 Jul 2011 20:20:15 +0000

Close to 1.5 billion people worldwide use a computer, but that figure pales in comparison to the 4.2 billion (75% of the planet) who use or have access to a mobile phone.

If you’re new to mobile design, you may be looking for guidelines or best practices to improve your work.

Read the list of best practices for mobile user experience at UX Booth.

Tips to stay professional when freelancing

Jim — Mon, 23 May 2011 11:13:23 +0000

Some good tips to how to manage and maintain a good reputation when working on and off-site for clients.

My favourite is..

Remember why you’re there
Your client brought you in to do a job. The manner in which you get that job done is everything. If you sit quietly and get it done in a day you may not make any friends, but you’ll be remembered as the efficient, reliable freelancer. If you spend 45 minutes flirting with the person sitting opposite you’ll be remembered as “chatty jim”.

» Read them all over at Freelance advisor

My Favourite WordPress functions – body class & browser detection

Jim — Wed, 06 Apr 2011 09:29:10 +0000

The body_class() Function

From WordPress 2.8, themes were able to take advantage of the body_class() function to place location-specific classes on the opening tag, usually located in the header.php file of most themes.

Notice, those are two separate classes, either of which you can use as a selector.

However, if you are on a particular post, the body tag might look like this:

And if you are currently looking at a page, then body_class() will generate something like this:

Essentially, body_class() will generate dynamic CSS classes based on the type of content, and under what circumstances, you are currently browsing. For instance, if you are a registered user, and are currently logged in, body_class() will generate a logged-in class on the body tag.

The following is a full list of possible body classes – see WPEngineer.com:

rtl
home
blog
archive
date
search
paged
attachment
error404
single postid-(id)
attachmentid-(id)
attachment-(mime-type)
author
author-(user_nicename)
category
category-(slug)
tag
tag-(slug)
page
page-parent
page-child parent-pageid-(id)
page-template page-template-(template file name)
search-results
search-no-results
logged-in
paged-(page number)
single-paged-(page number)
page-paged-(page number)
category-paged-(page number)
tag-paged-(page number)
date-paged-(page number)
author-paged-(page number)
search-paged-(page number)

How To Add body_class() to My Theme

This is actually the easy part. Assuming you are running WordPress 2.8 (currently in beta, soon to be released), all you have to do is add a new template tag. You’ll need to locate which template file generates the opening tag. This is usually the header.php file.

After you’ve located the tag, just change it to this:

Save the file (and upload to your server, if necessary), and you’re done!

Browser Detection

As with being able to style dynamic pages in wordpress using page classes. You can go one step further and style specifically to each browser – if required – usually when you are coding a very complex design that you want to be pixel perfect in all browsers.

Add the following code to your functions.php file:

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
	global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

	if($is_lynx) $classes[] = 'lynx';
	elseif($is_gecko) $classes[] = 'gecko';
	elseif($is_opera) $classes[] = 'opera';
	elseif($is_NS4) $classes[] = 'ns4';
	elseif($is_safari) $classes[] = 'safari';
	elseif($is_chrome) $classes[] = 'chrome';
	elseif($is_IE) $classes[] = 'ie';
	else $classes[] = 'unknown';

	if($is_iphone) $classes[] = 'iphone';
	return $classes;
}

The Result

The final result will look something like this, if you view the source code of your page:

How to Use the Browser Body Class

Now that we have the tag outputting a class for the browser we’re using, we can use CSS to target particular styles to elements being viewed in certain browsers. For instance, let’s say this was my default link style:

a {
	color: blue;
	text-decoration: underline;
}

Now, let’s make the links a different color when a user views the site in FireFox:

.gecko a {
	color: red;
	text-decoration: underline;
}

Notice, all I had to do was prepend the browser class-selector to the style, and now, any time someone using FireFox visits my site, all their links will be red, instead of blue.

One of the most useful applications I’ve discovered is the ability to target Internet Explorer with certain styles. It’s great to be able to just apply slightly different styles to certain elements in order to account for the many bugs in Internet Explorer.

Conclusion

Adding this code to the tag in your header.php file will add extra robustness to your site when targeting CSS selectors to styles and browser inconsistencies.

The resulting code will look something like this when you view source:

This simple line of code has saved me so much time, and hopefully will save your time too!

Highly commended at National Freelance of the Year Awards

Jim — Mon, 04 Apr 2011 13:14:20 +0000

It is with great pride that I have been ‘highly commended’ in Xchange team’s 2011 Freelancer of the Year awards last week, in the ‘Digital Excellence’ category.

There was a record number of entries this year, and some very tough competition – so this added nerves to all finalists on the night.

I have been fortunate enough to work on some really exciting projects over the last 12 months. Most unfortunately are under non-disclosure agreement, so I cannot advertise them on this site.

What I can tell you are the fabulous agencies that I have collaborated with on these projects are: Digital Outlook, Momentum Worldwide, iCrossing UK, and Ogilvy PR to name just a few.

A combination of user experience design, social media campaigns, microsites, email marketing and custom CMS builds and WordPress development has not only got me the attention of the judges at this years awards, but also trained me up to a high level – using some leading web applications and technologies.

Here’s what the judges said:

The complete freelancer, Jim is not afraid to take original, highly creative approaches to high-pressure assignments. With so many clients unaware of the vast, untapped pools of creativity out there in the freelance market, his work is a reminder that that a fresh approach can be worth a whole boardroom of full-time company thinkers.

Jim Callender, Will Russell, Matt Potter & Emma Brierley, Chairman

Bring on the next 12 months!

I had previously won the award in 2007 – read the post here.