Squawk - Weblog

Keats’ Negative Capability and the creative process

2008-03-18T01:00:00Z

Negative Capability, that is when man is capable of being in uncertainties, mysteries, doubts without any irritable reaching after fact & reason. (John Keats, 1817)

Negative Capability is a perplexing concept that is often made to be more difficult than it really is, even though Keats provides us with a detailed definition that is almost too concise to paraphrase. Nevertheless the accounts of what Negative Capability truly is seem to differ a great deal.

Negative Capability could be seen as a creative trance, which is supported by its references in Keats’ odes: In “Ode to a Nightingale” the speaker hears a nightingale from a forest, upon which he enters a trance-like journey “on the wings of poesy”, which is only interrupted when he remembers events from his past, therefore invoking reason.

Alternatively, you can describe Negative Capability as an intentional state of mind, allowing you to effectively ignore fact & reason in favour of “a sense of beauty.”

These are just some quick attempts at trying to box in what the concept of Negative Capability stands for. However, what I am much more interested in doing is discussing what it means in relation to the creative process. While Negative Capability is most commonly associated with literature, it translates easily any area of expertise as it is simply a “quality that forms a man of achievement”.

A while ago I had a discussion with Anne from Hot Cards about how Negative Capability could influence the creative process. According to her Negative Capability allows you “to explore creativity without the constant self-editing that can paralyse productivity”.

On the other hand she suggested that Negative Capability can be “an excuse for laziness”; a trance of creative expression can prevent a “passionate intellectual struggle”. Yet this is exactly what Keats was trying to explain in his letter to his brothers: Abolishing the intellectual ping-pong game in favour of a sense of beauty. Genuine Negative Capability might circumvent the classical creative process, yet that does not reveal anything about the quality of it’s outcome.

Negative Capability is a creative ideal, which some argue cannot be achieved. This forces us to re-evaluate Negative Capability as an excuse for laziness yet again: A false sense of Negative Capability may be an excuse, while sincere Negative Capability is an artistic ideal that even Keats struggled to achieve.

Negative Capability always has a final outcome, one that ignores fact & reason in favour of a sense of beauty. I agree with Anne that “languishing in a state of euphoric uncertainly could be career suicide” as selling your idea becomes increasingly difficult when you are locked into trance.
Knowing when to stop is the key to producing anything beautiful, whether produced through the laborious process involving fact & reason or through Negative Capability, even though true Negative Capability is not an eternal trance and should signal resolution automatically.

No matter whether Negative Capability is achievable or not, it is a creative asymptote, something that you should always try to reach. And if you believe that Negative Capability is unattainable, do not forget that it is you, who has to end your creative process after having found beauty.

The dos & donts of online portfolios

2008-02-12T01:26:01Z

If your online portfolio looks like this, you might as well not bother uploading it. Image by striatic

It is lots of little details that make a great portfolio. A well-executed portfolio could be the difference between receiving a commission or not. There are enough online portfolios with amazing content that fail when it comes to usability. Even the best work will not keep visitors on your site, so make sure that your portfolio is accessible.

Over the last year I have seen a lot of different takes on what portfolio design should look like, especially during the build up of trying to design my own one. Therefore, I would like to share some of the dos and donts of presenting work online.

Before I start rambling about how the eye moves along a page or whether users like to scroll, lets establish a basic premise: The internet is the medium that it is because it allows users to quickly access information. If this information is not available or not presented in a friendly manner, users will not absorb your information, scroll on or leave your page.
Therefore, it must be your goal to present your portfolio as user-friendly as possible.

The basics

Keep your portfolio up to date.
Make sure that your portfolio loads quickly. This is pretty obvious, but I have seen portfolios that took a couple of minutes to load all the images (on a broadband connection).
Sort your projects either by date or in such a way so that what you want people to see is at the top.
Give visitors the means to contact you.
Reserve a spot on your webpage to tell your visitors that you are available for hire/freelance work. Most people are shy and might not contact you otherwise.

"Creative" interfaces

Unless your want to bore your visitors with loaders, next buttons and fancy animations, stay away from Flash. Great things can be done in Flash, but I believe that it should complement any page (including your portfolio) and not replace it.
Flash portfolios might look impressive but I find them very hard to navigate. The place where you try to win new customers is not the place for interface experiments: Keep it simple and let the content speak.

Portfolio pictures

A portfolio should showcase your work and make it look its best. Use big, representative images. I found that sometime cropping helps to make an image look more interesting, even if you are essentially missing information.

Additionally, consider the environment for your images. A plain screenshot of a webpage looks boring, but if you show it in a browser window of the right size with a subtle drop-shadow, the matter starts to look different. (A photoshop style to create OS X like window drop shadows.)

One page vs. multiple pages

Some portfolios, especially those with flash interfaces, use the next/previous system to let users navigate their portfolio. Personally, I dislike this approach, as it creates the need for unnecessary clicks. Letting the user scroll though a list of projects is not only more effective, it also allows them to see the overall picture, the relationship between your work.

Independent of which approach you choose, include a brief, yet juicy descriptions for all the items in your portfolio. If you need more space, create a "Click here for more" link. (In my portfolio I created ‘detail’ pages.)

The number of items in your portfolio

The number of items in my portfolio is what I though about the most when I redesigned this site. Too few items, and visitors will doubt your skills. Too many and they will become bored or think that you do not make a selection of what goes into your portfolio. Neither impression is good and the line between too few and too many is very thin.

Personally, I prefer to have a smaller selection of work in my portfolio, rather than creating a large all encompassing list. Smaller, newer pieces of work that wouldn’t necessarily make my portfolio will then be published in my blog. This also has the advantage of allowing visitors to provide you with feedback.

What do you think?

Quite a few of my points are subjective, so I would like hear your input on this. If you have already created your online portfolio, what was important to you during its creation. And if you are in the process of building it, what do you value in a well-executed portfolio?

Blackletter black sheep

2008-01-26T19:11:01Z

It is time again to upload a page from my sketchbook. I withheld this particular one for a while as I thought that it might be used somewhere else… it wasn’t… so here it is:

The Blackletter Black Sheep: (In)proper capitalisation makes you lonely

Blackletter black sheep

The typographers out there probably already know this, but the story goes as follows: In 1936 the type-designer Fredric Goudy received a certificate for excellence in type design. After having glanced at it, he remarked that the person who designed this certificate would probably also steal sheep. The reason for this assault was that the type was set in all-caps Blackletter, which not only looks ridiculous but is also incredibly illegible.

Targeted marketing & Sesame Street

2007-12-13T01:45:00Z

A couple of days ago I posted a link to a video of a Sesame Street episode: Suspicious looking salesman Lefty is trying to sell Enie an O. While everybody agrees that one could not possibly refuse this offer to buy an O for only a nickel, the video ends with Ernie not buying the O.

You can deduce a great deal about talking to your own customers or weblog visitors from the conversation that takes place between Lefty and Ernie, even if you do not sell letters of the alphabet. I re-watched Lefty’s sales pitch multiple times and jotted down some notes:

You are special

“Hey you. Who, me? Ssshh. Who, me? Riiiight.” This one of the standard openings to any Sesame street video that features Lefty trying to sell Ernie some totally useless object. Whether it is a letter of the alphabet, an empty box or a bit of air, Ernie always turns around and starts a conversation with Lefty.

A more successful version of the opening line is “Hey Ernie. Who, me? Sssh. Who, me? Riiiight.” The only difference is that Lefty addressed Ernie with his name, instead of “Hey you”. One of the best way to reach someone that you don’t know is using their name. Research shows that the most suggestive word for people to listen up to is their name and not “Free” or “New”. Let’s face it: We are all a bit egocentric and literally flattered when someone wants to identify with us.

Differentiate yourself and do not sell O’s

Even though Lefty’s sales pitch is slightly ridiculous, he tries to differentiate himself and tailors his offer specifically to Ernie. He provides reasons why Ernie should buy the O, (even if they are not as substantial as you would hope that they would be.) “It is not often that I offer, what could you ask for more”, “And for no extra money” or even the hint of additional services such as quick checkout. ("Just buy the O and take it home tonight.")

Ernie does not buy the O in the end. The reasons for this are twofold. Even though Lefty provides a great performance trying to sell his O, the O is really useless. In the real world you need to set yourself apart and offer something of real value. This needs to be great content or even better service. If you try to sell O’s, customers will quickly turn their back on you.

Whenever trying to create repeat visitors to your weblog or selling your services, give them something to remember you by. The one thing that they tend to remember is the fact that you remember them. If you reinforce this impression with great content and services you are set to go. Riiiight.

Adjust your posting frequency to keep the quality of your weblog entries high

2007-12-06T02:34:00Z

The worst way to start an entry in your blog is by apologising to your readers that you have not posted more often.

So here is what I will do: I would like to apologise for not posting on this weblog over the past two weeks. Partially because I really have not written anything over that period, but mainly because I want to make a point.

Quality vs. quantity

There are many people who say that it is not your posting frequency that attracts readers but rather the quality of your content. While this is true, it is also a blatant lie.

The quality of your content attracts readers, especially RSS subscribers. Yet these readers will quickly abandon your ship if you cannot continue to provide quality content.

Continuity is key

That being said, it is important to find a rhythm. Readers do not expect weblog entries every day, in fact it thoroughly annoys them if their RSS reader gets flooded with posts from only one site.

If you are comfortable with posting every day, do so. If you are comfortable with posting every week or even every two weeks, this is also fine. Yet visitors should be able to anticipate your next weblog entry by looking at your archive.

Taking quantity out of the equation

It should not really be a question of quality vs. quantity, but whether you manage to find a posting frequency that allows you to keep the quality weblog entries at a high level. Take quantity out of the equation.

Applying this to my own habits, comes as a harsh realisation: I have one of the worst posting frequencies, ranging from daily to almost monthly. I will hopefully learn from it and no longer have to apologise to readers in the future. Hopefully.

I would like to hear from you, which posting frequency you find comfortable to read? If you have your own weblog which frequency do you find comfortable to write for? What dictates this frequency? Should you increase or decrease it? Answers and questions alike, please find your way into the comments.

The hidden Inspector of Safari 3

2007-11-21T20:13:59Z

Quite a few web-developers use Firebug, a Firefox plugin that allows you to view, inspect and debug your source code. A graphical load-time graph is also included to analyse performance.

With a few Terminal hacks, Safari 3 now supports this without a plugin. Even though the new Safari browser still crashes regularly, I really like this feature.

Safari’s new Inspector showing a load-time graph of squawkdesign.com

Since Safari’s new inspector is not enabled by default you have to open Terminal (which you can find inside your Utilities folder) and run the following command:


defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Re-launch Safari and you will find a new list item when you control-click on any element on your page: Inspect.

Control-click (right-click) on any element and you will see a new menu item: ‘Inspect’

Initially, the Inspector is shown in a new window. However, if you click on , then it is shrunk into the window that it is inspecting.

Additionally, if you click on , then you will get some additional items in the sidebar. One of them shows a load-time graph, shown in the first image of this article.

Of course you can also simply look at your html code, stylesheets or any file that is being loaded. Just select it in the sidebar on the left.

Have a play around with Safari’s new Inspector and tell me what you think. I have been using it for a couple of days and up to now I cannot complain.

How to capitalise headlines?

2007-11-17T13:43:00Z

With the introduction of the weblog to this site I often asked myself how I ought to capitalise my headlines. This gets especially tricky as I was born in Germany, where all nouns are always capitalised.

The practice of capitalising all nouns was also common in English before the 1800’s but has gradually become extinct.

The American Declaration of Independence. Observe the capitalised Representatives.

An example for this is the American Declaration of Independence, in which all nouns were capitalised.

Capitalisation in today’s publications

Nowadays, capitalisation is a science of its own with every major publication adopting a different technique.

As a rule of thumb, British publishers tend to use sentence-style capitalisation, which capitalises only the first word and all proper nouns. A proper noun represents a specific person, place or thing, unlike a common noun, which is more generic. All names are automatically proper nouns, as there is only one instance of the person, place or thing. London or the French are both proper nouns, while city or people are common nouns.

Practice among U.S. publishers is more varied. Some choose to capitalise all words except prepositions, internal articles or conjunctions, while others simply capitalise words with more than 3 or 4 letters.

In the English language there have been relatively few style-guides for capitalisation. One which I did come across was the The Oxford Guide to Style. (Also check out their link section: It has some typographic goodies.)

Unfortunately, due to the few regulations on capitalisation, almost anything is allowed, including the bad practice of SHOUTING. Please, even though it might be allowed, do not fall to such depths, do not resort to getting attention at the cost of good typography. (If you are interested check out the initiative to abolish the CAPS key.)

The equally varied capitalisation in creative works is just as ignorant of (the few) typographic rules, yet is acceptable as it aims for feedback from the viewer/reader.

Bringing our attention back to headlines, it does not matter (to a certain extent) how you choose to capitalise them, but rather that you are persistent in your practice.

In the future I will employ sentence-style capitalisation with the possible, occasional exception as long as it is justified. I still have to fix a couple of older weblog entries, but from now on, sentence-style capitalisation is all that you will see on this weblog.

99 Reasons why we should put an end to bullet lists

2007-11-16T00:48:02Z

Many blogs have now specialised in internet marketing, providing tips on how to increase the number of RSS readers or how to write content that ‘goes viral’. While these resources are very helpful I believe that they are often too long.

Imagine the headline “99 ways to gain RSS subscribers”. I am sure that most of these ninety-nine tips will work, but most readers will not be able to focus on any of them due to their sheer quantity.
The article ceases to be helpful and simply becomes a marketing machine to attract more visitors to the authors blog, instead of also helping you do the same.

Due to the information bombardment that many of the weblogs practise today, I have decided to start something different: I want to highlight one issue at a time.
I might not be able to make the information as easily digestible as a bullet list with ninety-nine items, but thorough explanation will make up for this.
Of course this does not mean that I will abolish bullet lists, but simply that I want to focus on a single topic in an article.

For those still waiting for a sensational revelation about my choice of headline, read the last paragraph again. (This weblog post is an announcement of the juicy things to come.)

Stay tuned for some in-depth analysis to captivate your readers on your own blog. I hope I am doing the same on my own right now. (If I am, good. Otherwise,… tell me in the comments.)

A non-related addendum

Some of the other weblog entries that I will be planning are packaged as the plain old goodie. Fasten your seat-belts for some more photoshop brushes, a roundup of great free icons and a couple of illustration blurbs.

Can the blogosphere see beyond black & white?

2007-11-07T16:48:00Z

A couple of days I eagerly commented on a weblog entry over at the German FontBlog.de that announced the arrival of the so called FontStars 2007: This years newcomers to the world of type.

Later I recognised through the aid of a fellow commenter that my positive reaction in my comment was most likely not justified. While this might simply be a difference of taste, I can see hasty comments all over the internet and I have to ask myself whether the blogosphere can see beyond black & white.

Common comments are based either on like or dislike: Yes, this is great or no, I do not like it. However, these comments do not add anything to the conversation and are often not well-thought out as they have been written too quickly.

Most things are not black or white and neither are weblog comments. The blogosphere can be improved greatly if readers refrain from giving a biased account of their own opinion, if they are no longer afraid to be in the grey.

Of course, it does happen that you completely disagree with the content of a weblog post. In this case, the ‘ideal negative comment’ should include constructive criticism and not a blatant attack on the author.

And if you truly agree with the author, ask yourself why you agree with him, as well as how you can put this into words. This not only increases the level of the conversation, it also prevents you from writing a comment that you might regret later. (For example, after you read the weblog post a second time.)

This is a short weblog post from my site with a short conclusion: Think about your comments and ‘do not be afraid to be in the grey’.

P.S.: An illustration that would fit this weblog post brilliantly is Kevin Cornell’s Amorphous Blob.

13 Free Photoshop Brushes: Coffee Stains

2007-11-02T16:37:59Z

If you spend a couple of nights working on one or the other project you will appreciate coffee.
However, I found that I seem to like the coffee stains on paper even more. So I decided to share this visual sensation and created 13 free coffee stain Photoshop brushes.

Download .abr file

Click here to download the coffee stain brushes
8.4MB—Includes one .abr file

How to install

Download the .abr file.
Copy the file into your Photoshop/Presets/Brushes folder.
Restart Photoshop or load the file manually by clicking on the small arrow on the top right of your brushes palette.

Alternatively you can just double-click the .abr file once you downloaded it to append it to your current brush selection.

More Brushes

Earlier this year I collaborated with BittBox to create Photoshop Ink Splatter Brushes.. The original ink splatter images can still be found here.

Squawk redesign part 3: Type choices & SIFR

2007-10-26T10:40:00Z

This is the third instalment of the series on how the redesign of this site developed. This time I will be focusing mainly on typography, as well as on the implementation of SIFR.

If you have scanned my archives you might have found a link to a site explaining the differences between the versions/substitutes of Lucida Grande on different operating systems. I will reiterate the content of this link, mainly because I want you to stay on my site;-)

I am big fan of Lucida Grande, but unfortunately it is not installed by default on windows machines. I do not know about Linux, but I suspect that the font is also missing on quite a few systems.

Since Lucida Grande is not installed on at least half of the systems visiting this website, we revert to Lucida Sans Unicode and Lucida Sans. Both of these have a couple of flaws:Lucida Sans Unicode looks almost like Lucida Grande, yet is a menace to look at in Bold and Italic.
On the other hand Lucida Sans looks great in bold and italic, yet is an insult to look at, when displayed normally.

So what can be done to make sure that we get the nice traits from the different font-families: Selective CSS here we come....

*                    { font-family:'Lucida Sans Unicode', 'Lucida Grande', ' Trebuchet MS', Helvetica, Verdana, Arial, sans-serif; }
strong, em            { font-family:'Lucida Sans', 'Lucida Grande', ' MS', Helvetica, Verdana, Arial, sans-serif; }
strong                { font-weight:bold; }
em                    { font-style:italic; }

This way all strong or italic elements use Lucida Sans, while all other text is rendered in Lucida Sans Unicode. Lucida Grande is invoked on most Macs, because they have neither of its alternatives. Trebuchet MS, Helvetica, Verdana and Arial are the remaining fallback options for those that do not have any Lucida version installed.

The headings

As you probably saw the headings on this website are not displayed using Lucida Grande. If everything works well, you should see them drawn in a slabserif font. (Let’s thank SIFR for font goodness at this point. Go on, kneel on the floor...)

The choice of font for my headings was determined by readability and price. By the latter I am referring to ‘free’, which (of course) limits my selection significantly.
Through some research online I decided that a slabserif font would be the best choice for displaying titles, especially because it remains readable down to very small sizes.

The font used in the titles is called GeoSlab703 Md BT. If you do a standard search with Google you are bound to find a download link. I will not link to one directly, because they seem to change every couple of days.

SIFR: Font heaven & testing hell

I used SIFR 3 to dynamically replace my standard Times font with the GeoSlab703 Md BT. If you are interested in SIFR you can read up on how to use it in the SIFR 3 wiki. Remember to do lots of testing in different browsers.
There is only one thing about SIFR that took me a long time to find out: How to style child nodes of a sifrerised element differently. So I will quickly outline my mistake and method, hoping that it will save you time:

sIFR.replace(font, {
  selector: '
 ,wmode: 'transparent'
 ,css: [
   '.sIFR-root { color:#2f3d4a; font-size:23px; background-color:#fff; }'
  ,'a:link { text-decoration:none; color:#2f3d4a; }'
  ,'a:visited { text-decoration:none; color:#2f3d4a; }'
  ,'a:hover { text-decoration:none; color:#105496; }'
  ,'a:active { text-decoration:none; color:#ffa000; }'
  ,'.span { color:#969086; }'
 ]
 ,ratios: [8,1.41,10,1.33,14,1.31,16,1.26,20,1.27,24,1.26,25,1.24,26,1.25,35,1.24,46,1.23,67,1.22,70,1.21,71,1.22,75,1.21,76,1.22,80,1.21,81,1.22,1.21]
});

In this case the ‘.span { color:#969086; }’ styles all the elements with a class of ‘span inside the h3 element. I found out that I have to specify a class, just selecting a span element like this ‘span { color:#969086; }’ does not work. (Effectively I use a span element with a class of span. Talk about doubling up here...)

To be continued

Next time (the last part of this series), I will have a look at the coding process for this site. Expression Engine goodies all inclusive.

The LZ Avocado

2007-10-22T16:42:01Z

This is one of the more random doodles resulting from the redesign of this site. I have gone slightly astray, but then again… lets call it postmodernist content.

The LZ Avocado: A discontinued thought from my notebook.

Zeppelins have never been known as a very secure way of travelling. Supposedly, they were very comfortable, though.

But what is comfort to anyone, when you know that there is a couple hundred cubic meters of flammable hydrogen above your head? Just like so many things today, comfort seems to come at a prize! A high one in this case.

Imagine all the people, ehm, I mean imagine all the passengers frantically clamping on their armrests when the flight attendant asks whether they would like to buy some cigarettes, with a free lighter. Duty-free, of course!

Squawk redesign part 2: Colour palette & illustration

2007-10-19T20:33:00Z

Welcome to part 2 of the write-up on the new site. In this weblog entry I will focus on the illustrations that I used on this site.

As I mentioned in an earlier weblog post about the requirements for this redesign I wanted to add a personal attachment to this site. By personal attachment I do not only mean something by which a visitor will remember this site, but also something that allows me to emphasise with it.

In the beginning of this redesign process I had a play with words revolving around the existing ‘Squawk’. In fact I did not change the concept of Squawk being onomatopoetic for the noise that a surprised chicken would make when it discovers a juicy worm (Excellent content and design), yet the brainstorming/sketching allowed me to outline the new style of this site.

The colour palette

I started experimenting with a rural image in the background of the page, partially relating back the henhouse/squawk idea, yet this greatly decreased readability: No font renders great on crops.
What stuck was the beige/blue combination. The dark-blue heading just looked great on a light Toscana sky and grey text was very readable on the beige that the image faded out to. The basic colour palette was determined.

The colour palette for the redesign of this site.

Resulting from the many doodles that I did during the brainstorming for this site, a style was born. Below is the first menu that I drew in a small sketchbook. I don’t know where the boards, pipes and gloves came from, but after all this was only one of the first ideas.

One of the first ideas for the menu. The Contact & About sections were later combined and the links themselves transformed into text-only-links

The typewriter

Through some more doodling, the typewriter idea, as means of representing the weblog section of the site, was born. One of my old English teachers used to brag that he had the exact same model of typewriter as Ernest Hemingway, and I remember being rather fond of that particular typewriter as well.

If you think that this is a little odd, take a good look at the next typewriter that you find: Unlike computers they have style and are also much more productive, since you do not get annoyed by emails, update notifications and God knows what.
(Check out WriteRoom, a very productive writing environment for the Mac.)

The typewriter that identifies the weblog section.

The typewriter was later joined by the pencil for the portfolio section of the site.

The doodlebush

On the double page that I drew the typewriter on there were also a great amount of random doodles: leaves, arrows, flowers, gloves and umbrellas.

Two pages from my notebook that later formed the doodlebush. (There were many more, though.)

While the glove hasn’t made it to the final layout due to some negative connotations, all the other elements were mixed in Photoshop to create what I call the doodlebush.

This rather disorderly style is something that you seem to find in quite a bit of my work, and I decided that it was something that could identify me on my website.
By ‘my work’ I obviously do not mean commercial work as not many people would be thrilled to have sketchy lines on their site that is trying to ‘sell a professional product’. Rather I am referring to some of my fine art based work and more importantly my sketchbooks. (In the future I might post some examples from these...)

For those interested on how I created the images that I used in Photoshop: A healthy supply of fine-liners and lots of doodling is all you need.

To be continued

In the next instalment of how the redesign of this site developed, I will focus on font choices and Typography. See you then…

Should you aim to develop flawless web-projects?

2007-10-17T15:04:01Z

Browser discrepancies are normal. You have to accept them if you are developing for the web.
Of course, there are ways to circumnavigate these ‘bugs’ as some web-designers and developers like to call them, yet it is a labour intensive process that sometimes is rooted more in gut-feeling and common sense than logical analysis.

Therefore, I dare to ask whether web-developers should aim to hand off flawless products to their clients? Please note that I am not suggesting that you create faulty code that does not validate, but rather I am questioning the almost holy ritual that some developers seem to run through for every project in order to make their site work perfectly in Internet Explorer 4.

Of course, you should always aim to keep the basic functionality of a site, yet small browser differences usually take more time to resolve than what they are really worth.

In fact, it is impossible to create a website that renders and functions exactly the same in all browsers. So rather than trying to achieve this golden goal, web-developers should embrace browser differences and only create suitable fall-back options.

An important aspect of achieving this is the separation of content, style and scripting, as well as the use of semantic code.
I will not reiterate the almost unlimited sources on how to achieve this; I want to ask whether web-developers should go even further and stop trying to provide full functionality to older browsers?

Not only could we save time and money, but over time users might actually be re-educated to use new browsers.

How far can we go in only creating a box, within which a site is freely able to transform across browsers? There is a fine line between a compatible, well formed site and a fanatic developer who is wasting his clients money.
Where do you place that line?

Squawk redesign part 1 - Requirements & establishing the grid

2007-10-15T23:06:00Z

{ column_width:75, column_count:12, subcolumn_count:1, column_gutter:3, align:'left' }

Just like I promised I will outline the steps that I took to redesign my own site. (If you are reading this in a RSS reader you are missing out.)
Firstly I will describe what requirements I had for the new design and how I used these to develop its grid and general layout.

The previous version of this site used a 14 column grid layout.
8 columns were used by the main content, while two sidebars filled up 3 columns each.

Version 1 of squawkdesign.com

The advantage of this was that there was more room for sidebar content, such as 'Recent Weblog Posts', 'Recent Comments' or my 'Sidenotes'
Unfortunately, the relatively high number of columns meant that content was squashed, decreasing readability.

As many of you will not actually have seen the previous design; I dug up an html version: Click here to check out v1 of Squawk.

Something else that bothered me about the old version of Squawk was the lack of colour and the relatively high loading time for the background image.

But most importantly, I was not able to identify with the design: The grunge splatter image in the background looked nice, but it did not tell visitors anything about me. (The initial idea was dirt in a henhouse, but this was far from obvious.)

A small note in between: Just because I redesigned this site, this does not mean that the grunge images that have been used in the old design are no longer available. The original ink splatter images can still be found here, while the corresponding Photoshop ink splatter brushes are referenced here.

Requirements for the new site

Distinct use of colour. Move away from the black&white
Wider text in the sidebars
Better readability
Fast loading times
A personal attachment to the site

Additionally, I also decided to completely redesign the portfolio and the contact section of this site.

I tried to realign my grid for this website, in order to accommodate for most of the above requirements.

Grid development

I started my grid development, by listing all the elements that would go into the different sections of this site. After having completed an extensive list I embarked on the process of making it shorter: Which elements do not really serve any purpose? Do I need this on that page? Yes? No? Let's cross it out...

Using my list of definite page elements, I outline my grid by folding a sheet of A4 paper. This allowed me to quickly test different grid combinations by drawing on my page elements using a permanent marker.

Grid release candidate

In the end I settled for a 12 column grid. It is divisible by both 2,3,4 and 6 giving me wide range of possible page layouts. As I wanted to make the text in the sidebar wider, I decided to move from using two sidebars to only one. As I already killed quite a few page elements, this could easily be done.

If you want to see how the new grid works with the new design, press CTRL+SHIFT+G, or if you are using Firefox on Windows, CTRL+ALT+G to toggle the grid on or off in the background. This works using the the Grid Layout JS script developed by Teevio.
You cannot actually use the site while the grid is visible, so if you want to press a link, toggle the grid off again using the same keyboard shortcut

To be continued

So much about my initial requirements for this redesign and its grid.
In the next weblog post I will start talking about how I made the choice about the illustration style that is supposed to add 'personal attachment' and how these illustrations were created.