Business logo design

We wanted to create a clean, strong image for Mark, without the usual rooftop shapes and  gimmicks. Here is the final logo we arrived at:

Times New Roman, Helvetica, Arial, Verdana, Georgia, Tahoma, Tebuchet etc., For the longest time, web designers were stuck with using so called “web safe” fonts. These are fonts that you find on most common operating systems, such as Microsoft Windows, Apple Mac OS, and various Linux distributions (distros). By sticking to these core fonts you can be pretty confident that your website is going to render in the way you intended, and that a serious typographical faux-pas can be avoided.

We’re going to look at a few ways to introduce (with reasonable safety) some typographical variety into your website, along with the advantages and disadvantages associated with each method. It is important to understand, there is no “best” solution for everyone, but hopefully this article can help you explore the possibilities.

When Times isn’t Times

For anyone who hasn’t already cottoned on, web browsers rely on the fonts already installed on your PC in order to render them on screen. Even “web safe” fonts are not strictly the same from platform to platform. Times New Roman on a Windows 7 machine isn’t necessarily going to be the same typeface as Times Roman on an Apple Mac.

Depending on other factors (some people love installing lots of fonts), even the same font name on two installations of Windows might not be identical, especially if the default system fonts have been over-written with commercially purchased alternatives – so the differences in default tracking, kerning and other nuances may serve to create an inconsistent result – especially if you are using type at display sizes, and need finer control.

It should be noted that all of the methods we are looking at, offer excellent accessibility for text readers – even the Flash based sIFR. Also, and most importantly, you must ensure that you possess the relevant license for the font you wish to use before uploading it to a web server. Not all foundries allow the usage of their fonts on the web, so beware lest you find yourself on the wrong side of the law.

So, lets dive in and start looking at ways you can pimp up your web fonts!

sIFR – Scalable Inman Flash Replacement

Mike Davidson created sIFR as an open source JavaScript and Adobe Flash dynamic substitution system. It is based upon the original HTML text-to-flash replacement pioneered by Shaun Inman. Now several years old, it filled a gap for many, and continues to be used by many.

You can read more about sIFR at the developer’s website http://www.mikeindustries.com/blog/sifr

Advantages

• You can effectively embed just about any font you own (not just Truetype) by creating your own flash “font library”.
• Final output looks as beautiful as any Flash generated typography.
• All files can be retained locally on your server – no links to external service providers are needed to render your fonts.

Disadvantages

• Harder to configure due to the requirement to build the Flash font library.
• sIFR needs JavaScript and the Flash plugin to work. If either is disabled or missing, the reader’s browser will fall back to traditional CSS based styling.
• sIFR is not ideal for body copy due to the processing requirements. Although this is not such an issue with today’s machines, it’s far from ideal for slower machines.
• Being flash based, sIFR may be vulnerable to add blockers, and other browser plugins that block Flash content. Oh, and of course, Flash won’t work on current iPods, iPhones, or iPads.

FLIR

FaceLift Image Replacement is similar in concept to sIFR, insofar that javascript is used to replace html text on the fly. I instead of replacing text with Flash, it is replaced with 32bit bitmap PNG images, generated on the fly via a server side PHP script. The results vary, especially with more elaborate fonts, depending on which PHP module is being used to generate the output (usually GD, but ImageMagick can give better results).

You can find out more at the FLIR website – http://facelift.mawhorter.net/

Advantages

• Does not require Flash to work
• Any Truetype/Opentype compatible font can be used.
• All files can be retained locally on your server – no links to external service providers are needed to render your fonts
• Easier to set up than sIFR
• Configurable via plugins and config php file

Disadvantages

• Relies on PHP to render the output – character spacing sometimes requires tweaking.
• Places extra processing and caching load on the server – which can create large numbers of files.
• The final output, being a bitmap, is not readable as text, and therefore reduces accesibility unless javascript is disabled by the user.

Cufón

Cufón, once again, uses javascript to replace the html fonts, but in a far more elegant way. The initial step in using Cufón is to generate a proprietary font library, which is effectively an SVG font embedded in a javascript file.

Generating this file is a relatively painless process, requiring the upload of your desired  font from your computer to the Cufón website and choosing some options before it gets “Cufónised” and downloaded back to your computer as a compressed javascript file. This file is then placed on your webserver.

The rendering engine for Cufón involves 3 components. A core API, and two rendering engines, one for Internet Explorer (which almost directly reads the VML data from the javascript font library), and another for browsers that support the HTML5 <canvas> element. Both renderers are very efficient and fast, and simple to install.

Cufon can be found via the project website – http://cufon.shoqolate.com/generate/

Advantages

• Client driven – no extra burden on the server other than to download the initial Cufón framework.
• Able to vary the quality/speed ratio of the font library file’s produced.
• As fast as your browser can render.
• Reasonably screen readable (although see below) by sight impaired.
• Any Truetype/Opentype font can be used.
• All files can be retained locally on your server – no links to external service providers are needed to render your fonts.

Disadvantages

• The basic installation only allows fonts to be assigned to basic html tags, and relies on external selector engines, such as jQuery, MooTools, Prototype or Dojo to assign fonts to other selectors – not a biggie, and is well documented.
• Generates a lot of extra DOM objects (specifically <span>) on the fly, which has caused issues with various screen readers, making accessibility a little more problematic. Again, not a show stopper, but not perfect. See http://www.paciellogroup.com/blog/?p=299 for more details on AA accessibilty status and Cufón.

Typekit

Typekit leverages the @font-face CSS rules that despite having been bounced around for almost 10 years, have only recently been supported in a consistent way by the big browser developers. @font-face is a major step forwards in many ways because instead of trying to patch a gaping hole in the capability of web browsers, it has aimed to actually fix it by building the functionality that we have all been screaming out for.

Working with Typekit is about as painless as it gets – Which is why yours truly has opted to use it on this website. Once you have signed up with Typekit, (they even have a free account option with a respectable set of fonts available), you create a “Kit” – a Kit defines the domain name, and fonts to be used. Once the Kit has been published on the Typekit system, all that remains is to add a couple of lines of javascript to your site, and you’re away. Typekit can even automatically replace CSS selectors with your new fonts for you – or, you can use them in the normal font-family CSS rules as you would with any typeface.

The FOUT issue (Flash Of Unstyled Text) is one of the only real problems with using Typekit. This is due to the time taken for javascript to load up the new font data, and replace the fallback fonts on the rendered page. It’s a little unfair to level this argument solely at Typekit, because every other method also takes some time to do the switch (anyone with experence of sIFR will know this).

Typekit are very aware of this, and recently produced some extra documentation at http://gist.github.com/401726 on “Typekit Font Events”, to help developers control what happens at load time (most opting to simply not show anything until the system is ready – like the other web font substitution systems) – but it is impossible (currently) to avoid this issue.

However, this is probably outweighed by the superb accessibility this system offers, as no extra un-necessary inline <span> elements are introduced to achieve the results, keeping your markup semantically correct.

Advantages

• Does not alter your HTML markup – maintaining excellent accessibilty, and copy/paste ability.
• Very simple to implement – and I mean SIMPLE!
• Futureproof – as Typekit improves, so will the javascript they put on your page – minimising future maintenance worries.
• A growing library of legally available fonts, so less hassle for designers.
• At $50 a year for unlimited domains and fonts, and 500,000 page serves a month, it’s unlikely to break the bank. I was going to put this as a disadvantage, but come on… fifty bucks!

Disadvantages

• Relies on font data stored externally (albeit on super-fast, geographically dispersed sources).
• Hiding the base content until the javascript switch has taken place needs to be coded in on top the default install.

In Conclusion

For me, in terms of usability and long term planning, Typekit would seem to be the weapon of choice here. Most importantly, it does not need Flash, or extra server time to create “quasi-text” with bitmaps. It is readable by people with accessibility needs, and search engines get an easier time too, which is important from a business point of view.

Typekit’s use of @font-face is the most forward thinking solution, and I’m sure as time goes by it will develop into an even more elegant form of web font delivery. The main issue here is that the fonts are being loaded by javascript as part of the page loading process. The html elements are already rendered by the browser by the time that the new font is made available. This would still be the case, even if the font files were locally hosted, instead of streaming from Typekit’s servers.

The standard is going in the right direction, but fonts still need to be loaded before everything else so that the DOM has access to them as soon as it initialises – and this is going to require some further co-operative thinking between W3C, and the browser developers, and I’m sure it will come in time.

However, for the time being, and FOUT notwithstanding, Typekit is the one for me. Waiting an extra few hundred millseconds for the final typography to activate is a small price to pay for maintaining accessibilty.

Enjoying rapid growth, and having little resource to spare in-house to the website, Managing Director Phil Alliband gave us a reasonably open brief to re-launch the web presence using an easy to use CMS, and a design which would allow the regular addition of new pages and, most importantly, news and case study articles.

We used the existing content as a guide for the new copy, which we wrote over a period of a few weeks in liaison with Alliband. During this time we created most of the graphical elements for the new site, and started to build the content on the WordPress back-end. Phil comments :

We approached Sant Media May 2010 to help us construct a brand new website that would feature the new services we can offer our existing and potential clients. Steve advised us that a “WordPress” solution would be ideal because it would allow us to add Case Studies, News, Testimonials etc. These can all be added live without the need to download, edit and then reload the complete Web Site.

WordPress is very simple to use, in fact if you can use a word processor you can edit your website with this fantastic tool. The most impressive part though was the Service from Sant Media.

It became apparent to Steve very early on that my work commitments meant that I wouldn’t have time to create much content for the new site. Steve realised a more proactive approach was necessary, and he looked at our business, discussed all areas I wanted covered and then got “stuck in”, built the website, and wrote the copy.

It was virtually ready to go live before Steve asked me to proof it. He had done a fantastic job and it was 95% there. A few slight amendments and 24 hours later, we were live with a site I am proud to show off at every opportunity.

The site also required a secure area for their customers to get support, which is initially very simply, but has the facility to grow as the business requires.

• Hands free mobile phone car kits
• In Car Entertainment (ICE) systems, including iPod kits
• GPS tracker devices
• Parking sensors

Managing Director, Jason McComb, was struggling with the BT Site Builder solution, and needed a more professional appearance for the company that would provide a platform not just to promote their installation services, but also to expose the vast knowledgebase of mobile technology the company has amassed in it’s almost ten years of trading.

“The WordPress platform was a no brainer”, says Jason – “it’s going to allow us to share our knowledge with the world, and hopefully encourage people to come back to us again and again, as our expertise in the field is not being fully utilised to our advantage”.

As a new startup, our CubeCart solution offered the best value, and great SEO options out of the box. We created a logo based on the customer’s desire for a modern, stylish and un-pretentious image, and set about designing the theme for the store. Within a few days the store was ready for the customer to start adding products. Using PayPal as the primary payment system is so easy to set up, and offered the easiest way for KS Fragrances to get started in the world of e-commerce.

Congratulations on going live! Visit www.ksfragrances.co.uk

• Are you a member of a UNISON or UNITE trade union branch?
• Are you reeling from the onslaught of the Tory cut backs?
• Do you need to gain more members, and improve communication with existing members?

Now, more than ever, you need to reach out to the workforce!

A branch website you can manage for only £350+vat

There – that’s the bottom line. I’m not messing about! To find out more go to either of the following sample websites:

• UNISON demonstration website
• UNITE the UNION demonstration website

There’s no catch. It’s the best deal you are likely to find from a professional designer. Why? Because I believe it’s necessary to help trade unions everywhere to gather strength for the political and economic s**t storm we now find ourselves in.

Why am I doing this?

For the longest time I believed in not allowing my political beliefs to interfere with my business.

My friends and family will be well aware that my principles have cost me dear throughout my life – one of my biggest moments was while working for the NHS, when blowing the whistle eventually led to my current status as my own boss.

It’s ironic then, that despite a tainted experience of life in public service, that I have decided to “out” myself as a firm supporter of the nations public services, and the people who work for them.

I’m not talking about the university vice chancellors on more than 300k a year, or the top-heavy management structures which protect themselves by cutting the wages of the lowest paid workers, while they themselves enjoy a bonus – I’m talking about the cleaners, cooks, caretakers, and bottle washers that slave in the background to keep our public services moving.

We all (although many don’t know it) rely heavily on the trade union movement to protect their pay, conditions and pensions. Bank holiday’s, Statutory Sick Pay, health & safety, the employment rights act – there is an incredibly long list of legislation that wouldn’t be there if it were not for the trade union movement.

It’s the main reason we are not all dead by the age of 30, and spending most of our working lives producing Nike trainers for a bowl of rice a day (unlike many people who still work in countries dominated by market forces).

To see how we’ve been doing, here are some examples of recent Google results (leave out the quotes when entering the queries in google):

• “midlands contract plumbing” – allroundplumbing.co.uk are at number 1
• “falconry experience” – thefalconrycentre.co.uk are at number 1
• “used pallet racking” – usedstoragesystems.co.uk on page 1
• “battery management” – adverc.co.uk are number 1
• “midlands laser clinic” – cottage-surgery.co.uk on page 1
• “interior refurbishment” – kvinteriors.co.uk on page 1
• “vw service” – vwrescue.co.uk are page 1 – higher up than most official VW dealerships
• “uk battery distributor” – manbat.co.uk on page 1
• “dog behaviour wolverhampton” – dog-behaviour.co.uk are number 1
• “mesh fencing” – urbanfencing.co.uk on page 1
• “alfa romeo service” – wad-alfaromeo.co.uk on page 1

Some of these sites have been around for a while – whereas others are relatively new. In all cases, customers have employed us to create SEO optimised content, and have taken our advice to carry out their own link building, or have employed us to do it for them.

Now even better Search Engine Optimisation

We are getting ready to launch a range of SEO link building services to our customers – with prices ranging from £90/month upwards. These packages will use various techniques (mainly carried out by human beings, not machines) to grow the number of quality inbound links to your website.

To keep in the loop – subscribe to our blog by email and watch out for the launch of this new service. We’ll be announcing full pricing details in forthcoming blog posts.

Or, if you can’t wait for us to get the details published – get in touch today and we’ll get you started!

Anyway, July 8th was a little cooler than previous days, and despite having done some preliminary planning to go to Croft Farm (near Defford, Worcestershire), I was half in mind to just spend a little time with my instructor consolidating precautionary landings, and some other areas that needed brushing up.

There was a weak warm front approaching the south coast, and despite my chicken little approach to bad weather, I was persuaded it wouldn’t spoil the conditions in the midlands for a good few hours. So, with my full english breakfast rolling about my already nervous stomach I set about completing the flight log for the route. Croft Farm is PPR (Prior Permission Required) only, so I gave them a ring, and booked in my arrival, allowing myself 45 minutes. Then, armed with my cross country ticket, I topped up the fuel tank, and set off. It was a great flight, and although it still got nice and warm, I coped fine. Croft Farm, like so many farm strips, completely vanished from my view on downwind, and I only managed to re-aquire it once I was on base. After a bit of side slipping, I got things nicely set up for landing on 27, and managed to get her down, and off at the halfway point.

I had my eyes peeled on the return flight as a Chinook passed to the east of the field travelling north-south at low level a couple of minutes before I took off. Must have just been the one as I didn’t get mashed to a pulp! The return flight was pretty uneventful, and thanks to a few knots of tailwind, also a few minutes quicker – although it was more bumpy due to the increased mid-day thermal activity. Before I knew it I was back on home turf, and landing on RWY28 at Halfpenny Green.

The icing on the cake was that the following day I passed my Meteorology exam, so now all I have to do is one more hour of solo flying, and polish up my skills with some mock exam flights, and then do my GST (General Safety Test). Beer and curry was consumed, and a lockyears farm strip guide ordered to start planning some more missions into the wilderness.

It’s not over ’till the full bodied lady sings, as they say, but I still marvel at how I got this far. Again, a huge thanks to Les, my instructor, and Steve Wilkes at hadair.co.uk for the use of his Ikarus C42 microlight.

Paranoia around child abuse is not good, and leads to the sort of thing that appeared in the papers a few years ago. So, I’m going to attempt to help others better understand the implications of getting out of bed in the morning, and risks that can expose us all to.

Have you looked for “baby” lately on Google images? 340 million image so far. Search for baby photos on istockphoto.com, fotolia.com, alamy.com – in fact any large stock image library carries tens of thousands of baby images for professional use. I’m guilty myself of paying a mother money so I could get some saleable photos of her baby – it’s what professional photographers do. Those images hopefully wind up on packaging, advertising, or in editorial content such as magazines and books. Oh don’t worry, anyone I photographed under age was always done so with guardians close by and with model release forms signed off).

Look at this alamy page here! – thousands of babies for the perverts to look at – some are even, shock horror, unclothed! Does this make the world a darker place? If you think so, then I would suggest you need to take a reality check, and review the inner workings of your own mind.

The Facebook issue

How many people do you trust with photos of your kids on facebook?

You might trust those people as individuals not to be a wierdo, but are they all experienced IT professionals? How do you know their PC’s haven’t been compromised by malware and being secretly looked at by wierdos? And if your friends, or their friends choose to share your posts, are you equally confident about all of their friends too, and their computer security? What if they print those pictures off, do you have any control over that? Are you even sure your own computer or phone hasn’t been compromised?

Did you ever take your photos into a high street photo printer for quality prints? How do you know that system is secure and that the operator isn’t another of those wierdos? What about people who might save the images locally to their computer – and then take their computer to get it fixed by some wierdo IT tech? Worse, what if they emailed those photos to someone else? Email is inherently insecure, and wierdos who work for ISPs can easily take a look at your pictures.

Don’t think that your facebook uploads are secure either – they are NOT encrypted, open to being listened in on by anyone with access to an interposed device on the route between your node and the Facebok cloud. This includes people with access to your phone carrier’s network, and other wierdos sat on the same shared WiFi hotspot if you use cafes or bars to do your surfing.

Inherently insecure

If you want to use Facebook, then consider everything, and I mean everything you put on there to be insecure. To do otherwise is plain stupid. Even the founder of Facebook has said that he doesn’t believe in privacy for heaven’s sake!

Even if Facebook was totally secure (which has been proven otherwise again and again), it is a SHARING network, and we all know what happens when you share things. Your friends share stuff with their friends, intentionally or not. And they, in turn can further share, and so on. This is where the security fades into non-existence. It’s why we all suffer from the common cold, and cold sores!

If you really want to make sure “wierdos” aren’t looking at your baby then I would seriously recommend not putting ANY pictures of him/her ANYWHERE other than on a bit of paper in a frame on the wall under the stairs – and keep the curtains shut, just in case someone walks by. CRB check any visitors. Cancel your broadband connection, your mobile phones (they know where you are, you know). Pay for everything in cash at the till, and wear a false beard, wig, spectacles and ha-jib whenever you leave the house. Oh, and buy a roll of bacofoil and wrap it around your head to make sure the wierdo space aliens aren’t getting an eyefull of your child using their powerful mind probing devices!

Get things in perspective

Am I being harsh? Not really, I’m just trying to help you put this into perspective. It is staggeringly naive to think that anything you do online (apart from maybe log into your online banking) is designed with security at the top of the agenda. Believing that limiting with whom you share your facebook images will in any way save you from the weirdos is sadly mistaken.

Should you be afraid of Facebook? In terms of child safety derived from putting a couple of happy childhood pictures to share with friends and family, I don’t believe so. If someone really wants to take an unhealthy interest in your child, then a couple of photos on Facebook are going to be the least of your problems. There is also the issue of security through obscurity. As I have already said, there are hundreds of millions of child photographs legitimately placed in the public domain (internet, libraries, magazines, books etc) – there is more chance of a weirdo seeing your child in the street than online – plus, don’t forget that almost all child abuse cases are perpetrated by the family itself, or people close to the family.

The world isn’t THAT dark

This is the reason parents are no longer allowed to take a camera to their kid’s sports day, theatre productions, or other memorable ocassions. It’s why men are falsely accused of all sorts of crap week in, week out. It’s why as a professional photographer shooting special events (even for the organisers), I’ve had more than one run-in with paranoid parents (I must have looked like a very suspicious pedo wearing a bright yellow bib with “PHOTOGRAPHER” writ large across my back) – but that’s another story.

If you want my honest opinion, you are in more danger from people who see your child regularly, or of him/her being snatched in the street than you are from someone (who should, after all, be your friends) on Facebook seeing an innocent picture.

If it’s the “principle” that someone “might” use your child’s image for unhealthy activities, then you have to seriously consider if you are being too risk averse. By the age of 5, your child will be “seen” in person by thousands of people  - many of those people will live locally to you. It’s not impossible that one of those people “might” be the wrong sort. Is this a reason to insulate your child from a normal development? If you believe so, then you should perhaps consider talking to a health professional.

Am I worried that my grand-child’s picture is on Facebook. No.

Do I like Facebook? I treat it for what it is… a public noticeboard. I post NOTHING on there that would embarrass me if the whole world were to see it.

WordPress now has a simple gallery shortcode, to enable the inclusion of a gallery of all images associated with your post. By default, you just get a grid of images that either link to another page containing the image, or a link directly to the image. Either way, it’s not terribly pretty, and it seems tantalisingly close to something that would look half decent if only something like prettyPhoto (a lightbox clone) could be leveraged. It can!

The gallery shortcode goes something like this:

Code block

[gallery link="file"]

It is fully documented here. Basically, this uses the function wp_get_attachment_link inside the /wp-includes/post-template.php file. You could either hack the core function (line 970 on WP3.0) changing:

Code block

return apply_filters( 'wp_get_attachment_link', "<a href='$url' title='$post_title'>$link_text</a>", $id, $size, $permalink, $icon, $text );

to

Code block

return apply_filters( 'wp_get_attachment_link', "<a href='$url' title='$post_title' rel='prettyPhoto[slides]'>$link_text</a>", $id, $size, $permalink, $icon, $text );

A better solution

After a bit of reading (thanks to ThemeShaper), I figured out how to use the hooks system, to build a simple function, and filter to modify the output of wp_get_attachment_link. Just pop this code into your template’s functions.php file:

Code block

add_filter( 'wp_get_attachment_link', 'sant_prettyadd');
 
function sant_prettyadd ($content) {
	$content = preg_replace("/<a/","<a rel=\"prettyPhoto[slides]\"",$content,1);
	return $content;
}

Obviously, you could alter the regex above to do just about anything you like to the output of wp_get_attachment_link, but this does what I set out to do.

PrettyPhoto installation

Obviously, this requires prettyPhoto to be installed and activated on the page for the effect to work. prettyPhoto is available as a WP Plugin – much easier than hacking it into your theme manually. Here’s a sample of how it works: