Archive for the ‘Tips and Tutorials’ Category

Free Syntax Highlighting Class Developed with MooTools

May 6th, 2009 No comments

Lighter.js is a free syntax highlighting class developed with MooTools. It was created with the MooTools developer in mind and takes advantage of many of the Framework’s features. Using it can be as simple as adding a single script to your webpage, selecting the elements you wish to highlight, and Lighter.js takes care of the rest. Lighter.js has been tested on Safari 2+, Internet Explorer 6+, Firefox 2+ and Opera 9+.



Categories: Tips and Tutorials Tags: ,

Excuse me, maybe, the foundries, erm, let’s mess with em?

April 28th, 2009 No comments

Mark Pilgrim has a certain style, and it was in full force on his latest post on font issues that we have on the Web.

Some people are offended by tone and such, but if you ignore that, Mark is actually normally spot on!

In this case, the font world feels like the DRM world of music. They can battle up hill all they want, but if they don’t start working with their users (who are willing to pay for fonts, just like we are willing to pay for music!) they will find themselves in big trouble.

I was chatting with a GFX engineer on Firefox and after a fun time talking about how freaking fun it is to get fonts right cross platform (holy subtle-ties batman!) he pointed to a nice M+ font :




There are tons of great open source fonts out there. One day, instead of looking up to the foundries in their ivory towers in the sky, we will look down on the floor and see the gold is right there! And, then what? What will the foundries have after they push everyone to go the open source route?

Let’s enjoy font squirrel and find some nice friendly fonts and use them to make the Web more fontific, and hope that the other chaps work out how to play nicely.

Categories: Tips and Tutorials Tags:

Dynamic Content Injection with HTML5 Canvas and Video

April 24th, 2009 No comments

Paul Rouget and Tristan Nitot are having a lot of obvious fun with Canvas and <video> these days. The latest goodness is a demo by Paul that shows real-time dynamic content injection.



Notice the Firefox logo in between the two phones with bright screens? That is injected into the world thanks to Canvas.

How did Paul do this? He told us:

Obviously, I use the <video/> tag.
But what you see is not the video element (display: none;), but a
<canvas/> tag.
All the patterns you see on the top right are regular <img/>,
<video/> and <canvas/> elements. The play/pause button is
a <svg/> element
(position: absolute;) on the top of the main <canvas/> element.

A canvas element provides a method named drawImage which let you
inject the content of a DOM element in the canvas (like a screenshot). It works
with three kinds of elements: <img/>, <canvas/> and

When you click on the <svg/> button, the Javascript code launches the
main video. Then, the main javascript loop is executed each 10

Here are key things that occur during the main loop:

  • first, the content of the video is injected in the main canvas. That’s why
    the canvas element looks like a video element;
  • second, the position of the 2 brighter areas of the canvas are computed
    (you have access to all pixels values);
  • third, the required transformation is computed (rotation, scale,
  • fourth, the content of the selected pattern is injected in the main canvas
    following the transformation.

A little drawing:



More Web Workers in Action

April 24th, 2009 No comments

Another day, another Paul Rouget HTML 5 demo :) This time he does something fun with Web Workers to allow you to see the difference that you can get when you use them.



His latest simulation has him implementing Simulated Annealing (in video) which is useful for finding the shortest path between several points in a canvas.

If you run the demo demo and watch the animated PNG you will see how smooth the world is based on if the animation stops from time to time. Try it with workers on and off to see.

We have been using Workers in Bespin from the get go. Malte Ubl is doing very cool work to ironout the differences between different Web Worker implementations (Firefox, Safari, and Gears). For example, through his abstraction you get the standard importScripts in Gears too, and it includes a mutex abstraction to boot. This has been crucial for us as we add more JS intensive features to the code editor such as realtime syntax checking, rich syntax highlighting, JSLint error reports inline, and more.

We have found that you do have to be careful with Workers though. You don’t want to fire too many off as you end up with a raging CPU if you aren’t careful, so Malte and others are working on a slicing plan that will keep the CPU down but also keep the UI responsive. We will report back.

His latest simulation has him implementing Simulated Annealing (in vide) which is useful for finding the shortest path between several points in a canvas.

If you run the demo demo and watch the animated PNG you will see how smooth the world is based on if the animation stops from time to time. Try it with workers on and off to see.

We have been using Workers in Bespin from the get go. Malte Ubl is doing very cool work to ironout the differences between different Web Worker implementations (Firefox, Safari, and Gears). For example, through his abstraction you get the standard importScripts in Gears too, and it includes a mutex abstraction to boot. This has been crucial for us as we add more JS intensive features to the code editor such as realtime syntax checking, rich syntax highlighting, JSLint error reports inline, and more.

We have found that you do have to be careful with Workers though. You don’t want to fire too many off as you end up with a raging CPU if you aren’t careful, so Malte and others are working on a slicing plan that will keep the CPU down but also keep the UI responsive. We will report back.

Categories: Others, Tips and Tutorials Tags:

Starting A Business – 2nd Month Review

April 3rd, 2009 No comments


Where did March go? I feel like I’ve been short changed on time this last month. 31 days just seems to disappear in the blink of an eye! Thankfully though, I got a huge amount done, so once again it’s time to take a look back at the things I set out to achieve and whether or not I got there.

The Business

Since last month when I wrote about my progress in February, it feels like I’ve done almost double the amount of work again. I blogged this month about the hours which I’m currently working, well that hasn’t changed much yet – I’m still up early, and in bed very late.

Here’s some of the stuff I managed to get done in March:

  • Totally cleaned out my office, hopefully this’ll be a guest post on FreelanceFolder soon
  • Got invited to do a guest post on Darren Rowse’s TwiTip (I need to write this up)
  • Opened my business bank account (which took a LONG TIME to do)
  • Fully reviewed the SitePoint Web Design Business Kit (as pomised)
  • Networked with a lot [MORE] really great people!
  • Didn’t take on any new projects, but got lots of enquiries. See my post on Dry Patches
  • Designed/coded/released the intial version of WPress’d
  • Put together some new sets of documents including my new-client needs-assessment form
  • Totally coded up and released a brand new Lyrical Media site (big accomplishment!)
  • Managed to get Lyrical Media bumped up to PR6 with the latest pagerank update
  • Got my credit rating sorted out! Natwest finally came through and fixed their mistake!
Reviewing Goals From March

In my first month review I set myself some goals to achieve for the month of March, let’s have a quick look back and see what I did (and didn’t) manage to get done.

  • Grow my twitter account to 700 followers – Sucess! I smashed this one, over 1,000 now!
  • Grow my rss subscribers to 60 – Success! Feedburner is currently showing 65!
  • Look into an advertising budget with BuySellAds – Fail, simply haven’t got the budget yet
  • Set up a monthly newsletter with Campaign Monitor – Half success, opened an account and started using it, but I haven’t actually set a newsletter up yet.
  • Complete and release the Neophyte wordpress theme – Total Fail, this one is on the backburner for the time being
  • Learn some more PHP, Javascript, and Ruby – Success! I did all three!
Goals For April

I set 6 goals last month, this month I’m bumping that up to 8 – and they’re slightly more ambitious goals too, because what would be the point of succeeding at the same rate?

  • Set up Newsletter – back from last month, really want to get this done
  • Review the SitePoint Email Marketing Kit on this blog (fits in with the above)
  • Review the Rockstar Freelancer Book on this blog
  • Win (at least) two new client projects
  • Complete the first sample of my top secret Lyrical Media project (watch this space)
  • Grow my twitter account to 1,500 followers
  • Grow my rss subscribers to 100 people
  • Sell (leave a comment if interested)
Other Stuff Coming in April
  • An interview with Brendon Sinclaire (author of the Web Design Business Kit)
  • Some more free applications for freelancers
  • A couple of guest posts by me on other freelance / web design blogs
  • More ‘personal’ style posts from me about the trials and tribulations of self employment
  • New and improved business cards!
What Are You Up To?

I love hearing from everyone who comments on this blog, so please tell me what you’re up to and if there’s anything that I can do to help out. If you’re doing anything related to web design business, drop me a line and maybe we can get you a guest post slot! This site received 24,000 page views in March compared to 18,000 in February, so it’s on the up!

5 Things Your Clients Should Know

March 25th, 2009 No comments

Do you ever feel like you are endlessly repeating the same day? I do, every time I attend a kickoff meeting with a new client. Each time I find myself covering the same old issues from explaining the client’s role, to encouraging investment in content. I find it incredibly frustrating and this is what ultimately led me to write the Website Owners Manual.

This is not a criticism of clients, however. There is so little information that clearly defines their role. Sure, there is no shortage of material on usability, accessibility, online marketing and copywriting, but who has the time to read all of it?

The problem is that the client does need to have a very broad understanding (certainly more than can be communicated in a single article), however I have found that understanding certain key issues can make an enormous difference to the efficiency of a client.

What follows is a list of the 5 things that I believe will have the biggest impact on a client’s site. At least they should, if the client understands them and chooses to implement them.


1. The client is the secret to a successful website

I have worked on hundreds of websites over the past 15 years and each site’s success or failure has always been attributed to the quality of the client.

As web designers we, of course, like to emphasis our role in the process. This is what justifies our fee, however we can ultimately only point our clients in the right direction. It is their decisions that shape the site and their commitment that defines its long term future.

As web designers, I believe we need to clearly communicate to the client the importance of their role and dispel the misconception that they can hire a web designer and walk away.

Not only do we need to emphasis the importance of their role, we also need to define the extent of it.

2. Clients have a diverse and challenging role

I believe that the role of the client is by far the most complex and challenging in web design. Sure, dealing with IE6 is a pain, but that pales in comparison to the shear extent of issues that most clients need to handle.

A client has to be a:

  • Visionary – capable of establishing the long term direction of their site
  • Evangelist – able to promote the site both internally and externally
  • Content guardian – responsible for ensuring the quality and relevancy of content
  • Project coordinator – overseeing all aspects of the site as well as dealing with suppliers
  • Referee – making final decisions between conflicting priorities

What is even more is that the client is supposed to know enough about a broad range of disciplines (from marketing to interface design), in order to make informed decisions. It is hardly surprising that, as web designers, we sometimes feel our clients “just don’t get it!” They are simply expected to understand too much.

Unfortunately their role is also often massively under resourced. Most of those responsible for websites are not dedicated website managers. Instead, they run their websites alongside other responsibilities in IT or marketing.

It is our responsibility to explain the role of the client and ensure that they understand how much work is involved. We cannot assume that they instinctively know this.

The danger is that if you do not clearly define the clients’ role, they will end up trying to define yours instead.

3. Clients identify problems, designers provide solutions

One of the biggest problems in most web projects is that the client starts making the decisions that are best left to the web designer. Not only does this lead to bad decisions, but also inevitably leaves the web designer feeling undervalued and frustrated.

This problem can manifest in a variety of ways, however ultimately it comes down to a single issue – the client is trying to find solutions to their problems instead of relying on the web designer.

Let me give you two examples. The most obvious occurs at the design stage. After seeing your design the client comes back with comments such as ‘make the logo bigger’. This is their solution to a problem that they have with the prominence of the branding. If they had expressed the problem instead of the solution, it would have enabled you to suggest alternate approaches. Instead of making the logo bigger, you could have possibly added more whitespace or changed its position.

Another less obvious, but more significant example, is in a client’s invitation to tender. These documents are inevitably a wish list of ideas that they have for the site. They are the client’s attempt to solve an underlying issue. For example, their problem might be a failure to engage with customers, therefore in their invitation to tender, they suggest adding a forum. Of course, in reality there are many other ways to engage with customers, however unless they express the problem to you, you will never have the opportunity to suggest a solution.

At the beginning of every project, encourage your client to focus on problems and not solutions. Whenever the client suggests a solution ask why. This will enable you to understand the underlying issues.

Unfortunately by the time we have been engaged as web designers, the scope of a project has already been set and it is hard to contribute ideas. This is because the way clients commission websites is fundamentally broken.

4. Sites should evolve

A typical website goes through a constant cycle of redesign. After its initial launch, it is left to slowly decay. The content becomes out of date, the design begins to look old fashioned and the technology becomes obsolete. Eventually staff stop referring customers to the site and it is perceived as a liability rather than an asset. In the end, senior management intervenes and assigns somebody to ‘sort out the website’. This inevitably leads to the site being replaced by a new version, and the cycle repeats itself.

This problem primarily occurs because there is no real ownership of the website within the organization. Often the client you deal with is only assigned to it for the duration of the project. Afterwards, the site is left to stagnate.

This cycle of redesign is wasteful for three reasons:

  • It wastes money because the old site is replaced, and the investment put into it is lost.
  • It is bad for cash flow, generating large expenditure every few years.
  • For the majority of its life, the site is out of date and not being used to its full potential.

We need to start encouraging our clients to invest regularly in their websites. They need a permanent website manager and an ongoing relationship with their web design agency. Together they need to keep content up-to-date, improve the user interface and ensure that the technology keeps pace with change. Ultimately this is more cost effective than replacing the site every few years.

The ongoing management of content is an area that needs particular attention. Unfortunately it is often massively under resourced and generally neglected.

5. Content is king – Act like it!

I am constantly amazed at the difference between what clients says and what they do. Take, for example, content; most clients fully accept that content is king, yet few are willing to spend money on ensuring its quality. This is all the more absurd considering the amount they spend on implementing complex content management systems.

Most clients that I encounter feel that hiring a copywriter to ensure the quality and style of their content is unnecessary. Perhaps this is because they feel they are capable of writing copy themselves, however writing for the web is not like writing for any other medium. It presents some unique challenges that cannot be under estimated.

It is strange because clients are perfectly happy (well… maybe not quite ‘happy’) to pay for design. They realize that they cannot do the design without a professional designer, so why then do they believe that they can write good copy themselves?

Often when clients do write copy, it ends up being verbose and inaccessible. Stuffed with sales copy and jargon, which is largely ignored by most visitors to the site.

However, in many cases the reality is even worse than poorly written copy. In my experience, clients under estimate the time involved in producing copy for the web and resort to copying and pasting from a wide variety of offline printed material. This leads to Frankenstein copy, using a mix of styles that are often entirely inappropriate for the web.

It is our role as web designers to educate our clients about the importance of copywriting and explain the size of the task, if they choose to take it on themselves. Without previous experience most clients will significantly underestimate this task.

Categories: Others, Tips and Tutorials Tags:

IE 8 Launches at MIX09, probably without one of your features

March 24th, 2009 No comments


You may have noticed that day 2 at MIX was IE8 day (compared to the Silverlight 3 day one) in that the puppy launched!

This is good news in that IE 8 is better than IE 7, which is better than IE 6. Maybe, with 6 being two versions back, we have more weight to get rid of the chap. However, even though Microsoft has recently claimed that IE 8 is the fastest browser, its legacy weight still shows for now, and the other browsers are sprinting ahead.

I have a sneaky suspicion that IE 9 is going to be different and a lot better (new team? got the old greats back? or are they on Azure?), but that is wild speculation on my part.

We had a lot of comments on the news today, and one person who will rename anonymous purely because I don’t know if he would like to be attached or not said this:

When you do your IE8 post, don’t forget to toss out a line indicating the writing-mode bug was not fixed. Their only CSS3 feature and they’ve now effectively prevented the entire web for using it for the next x years. Hilariously, they also tried to cover up the bug by marking it fixed and forcing me to open a new one with the same description.

  • OLD
  • New

I also count two regressions in IE7 compatibility mode that make it different from IE7. Kind of a headache for those counting on sending that header.

So, thanks for the better browser guys, and we can’t wait to see what happens next. Shortly we will have IE 8, Firefox 3.5, Safari 4, Chrome 2, Opera 10, and others….. and the Web will have nicer cars to drive around on it. Let’s build applications that take these cars on a decent joy ride instead of boring them in the slow lane.

Explorer Canvas updated for IE 8 and more

March 24th, 2009 No comments

Erik Arvidsson, one of our Knights, has shared a new Explorer Canvas release that has enabled excanvas folks to keep on trucking wrt IE 8 users. The way IE 8 does VML has been tweaked, so the library had to be changed accordingly.

You can also check out the Silverlight bridge too.

Here are the release notes:

  • Implement transform and setTransform. This passes all the tests in the HTML5 canvas tests for 2d.transformation.*
  • Remove fallback content that caused some issues when resizing the canvas element.
  • Fix issue where strokeRect, fillRect and clearRect incorrectly cleared the current path.
  • Added 2 new tests and modified an existing test to ensure that the new code works as expected and tested this in all modern browsers
  • Fix for IE8. This involved passing one more argument to namespaces.add as well as ensuring all CSS lengths have units (px). Passes all the test cases in all modes in IE8.
  • Fixes for linear gradients.
  • Added two test cases for linear gradients.
  • Changed the calculation method of line width. An averaged line width is calculated from the determinant of matrix, which is valid even when transform() method is implemented someday.
  • Improved the rendering of lines. Lines with the width less than 1px look better now.
  • Fixed the bug that stroke() ignored lineCap, lineJoin and miterLimit when fillStyle attribute was set.
  • Removed the settings of strokeweight, strokecolor and fillcolor. They are unnecessary since they are overridden by the weight and color attributes in <v:stroke> and <v:fill>. </v:fill></v:stroke>
  • This fixes issues where translate, rotate and scale is used during a path is being constructed. Previously we did the coord translations just before we draw the path. That is incorrect and now we do the translations when we add each individual piece to the path
  • Added very limited support for scaling of the stroke width. Currently we do the scaling by calculating the position in the final coordinate space and we therefore cannot do non uniform scaling of the stroke. For now we just do the max x/y scale factor.
  • Fix stroke. It should not close the path
  • Fix memory leaks
  • Fix issue where the path was not closed when strokeRect/fillRect was called.
  • Use the document.createElement('canvas') hack that was exposed by Sjoerd Visscher last week. This allows us to remove fixElement_ completely.
  • Added globalAlpha to the list of attributes copied for save/restore, as per the canvas specification.
Categories: Tips and Tutorials Tags: , ,

Firefox support for CSS3 multiple backgrounds

March 24th, 2009 No comments



James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support.





  1. background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);

  2. background-repeat: repeat-y;

  3. background-position: top left, top right;

Safari 4: New look, but what about the engine

March 24th, 2009 No comments

Great news for Web developers and users, Safari 4 has a public beta, and it comes with some nice features such as: tabs on top and top sites (a la Chrome), full page zoom, history view, and ARIA Support.


The Twitter thumbnail is interesting

But, what about the engine? Here are some of the features as Apple see’s them:

Speculative Loading

Safari loads the documents, scripts, and style information required to view a web page ahead of time, so they’re ready when you need them.
CSS Effects
Pioneered by Safari, CSS effects help developers add polish to websites by stylizing images and photos with eye-catching gradients, precise masks, and stunning reflections that require only a few lines of code.

CSS Canvas
Using CSS Canvas, web designers can position canvas elements anywhere an image can be placed using CSS. Safari is the first web browser to support CSS Canvas.

Acid 3 Compliance
Safari is the first — and only — web browser to pass Acid 3. Acid 3 tests a browser’s ability to fully render pages using the web standards used to build dynamic, next-generation websites, including CSS, JavaScript, XML, and SVG.

Nitro JavaScript Engine
Safari 4 introduces the Nitro JavaScript engine, an advanced bytecode JavaScript engine that makes web browsing even faster. In fact, Safari 4 executes JavaScript up to 6 times faster than Internet Explorer 8 and up to 4 times faster than Firefox 3.1.

HTML 5 Offline Support
Web developers can now create applications that you can use even when you don’t have access to the Internet. Thanks to HTML 5 offline support, designers can build web applications that store themselves on your computer, where you have immediate access to them. Along with the application, web developers can also choose to store the application’s data on your system, so you always have the information you need. Applications and data can be stored in a traditional SQL-like database serving as an application cache or as a “super cookie,” which stores data in the familiar cookie format.