A Selection of CSS Goodness | December 23, 2003

Comments (7)

Chungking | December 19, 2003

chungking.jpg

p. I've just been to see Chungking, my favourite band of 2003. Their debut album We Travel Fast is definitely my top album of the year, and with a gorgeous lead singer and a bass player who looks like a young Ron Jeremy, you can't go wrong. So if you're yet to experience Chungking, I strongly recommend going out and buying their album. You won't regret it.

Comments (11)

CSS Crib sheet #2 - Clearing Floats | December 18, 2003

When floating elements it's fairly common to add an element to your document who's sole purpose is to clear the preceding float.

In a site I'm currently building, our developer added a <br class="clear" /> element to do this job. It worked fine in Safari but in IE/Win it would only clear the preceding float, not all the floats.

I thought the problem was down to the fact that the <br /> was inline, so a changed it to block. However it still didn't work in IE. It would have been nicer semantically to have been able to use a <br />, however in the end I resorted to using a block level element. We actually used a <p> containing a &nbsp; but normally I'd do this:

.clear {
  clear: both;
  height: 0;
}

<div class="clear"><!-- --></div>

Which has the added benefit of leaving no vertical space. something which can be quite important in certain layouts.

Comments (13)

CSS Crib sheet #1 - Gaps Between Vertical Nav Elements in IE5 | December 18, 2003

OK, I know the crib sheet idea isn't original but I've decided to start posting my own little CSS aid memoirs.

I do quite a bit of CSS development but always find myself coming across the same few silly little problems. Reading lists like CSS-Discuss, the same questions pop up time and again, so hopefully these posts may help out others as well.

My first crib sheet problem is a simple one. When creating a typical "Left Hand Menu" using Styled lists, whitespace appears between the nav elements in IE5. To fix this problem, simply set the containing li element to be inline.
If your anchors don't already have a width or height you'll need to apply one or the other to make sure IE creates a block box.
Here is an example of the CSS for a typical "Left Hand Menu" using a styled list:

#nav {
	margin: 0px;
	padding: 0px;
	text-align: left;
	list-style: none;
}

#nav li {
	display: inline;
	margin: 0px;
	padding: 0px;
	width: 142px;
	list-style: none;
}

#nav a:link {
	display: block;
	height: 14px;
	margin: 0px;
	padding: 0 0 0 10px;
	border-top: 1px solid #fff;
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	background: #97A5BF;
	text-transform: uppercase;
}

#nav a:hover {
	text-decoration: none;
	background: #4E5F7E;
}

Comments (8)

Designer Christmas Cards | December 17, 2003

This time of year, designers all over the globe crack open their vector graphics programs and create their own Christmas Cards. Now this is something I’ve never done myself, but I had a few hours to kill tonight so thought “what the heck”.

A Christmas card design I came up with tonight

As this is my first effort, I’d be interested to see what people think. I’d also be interested to see your own Christmas Card designs.

Comments (10)

My Cambodian Buddha | December 17, 2003

I really like Buddha's. I bought this Buddha carving in a market in Siam Reap, Cambodia on my recent holiday to the region.

buddha.jpg

Comments (3)

Sunrise | December 17, 2003

p. Sunrise through my bathroom window a couple of days ago.

Sunrise through a window covered in condenssation

Comments (6)

Even More CSS Sites | December 11, 2003

Comments (15)

Send a Blogger a Christmas Card | December 11, 2003

Do you have a favourite Blog? One that you read on almost a daily basis? If so, why not send them a Christmas Card by way of Thanks.

Comments (8)

Some Interesting Web Design Links | December 11, 2003

Here are a few interesting links that have been sitting in my "todo" bookmarks folder for a few days.

Comments (0)

Blogging from the design SkillSwap | December 8, 2003

Tonight's SkillSwap event is entitled "Everything you wanted to know about graphic design but were afraid to ask" and will be presented by Lloyd Raworth.

I'll be blogging live from this event so please bare with the sloppy spelling and grammar.

William Morris is the farther of Graphic Design. It stems from the printed word. Books were flat and text heavy. To make them look nicer, people would try and jazz up books with gaudy type effects. However Morris felt that type was beautiful in it's own right. He created a number of type faces and would use space to create simple yet beautiful books. At the time Art Nouveau, photography and Japanese art was starting to influence the way people looked at the world. Also the Industrial revolution had a huge effect, encouraging people from around the world to examine the state of the world.

A group called the Bauhaus created alphabets that only had lowercase letters. At the time, Gothic text was the norm, but many new typefaces were created. During the Nazi years, many of these people emigrated to the US. They were involved in everything from architecture to product design like the coke bottle.

In the 50's advertising was very crude. However in the 60's people started using psychology and science to hone adverts. This grew in the 70 and 80 and people started using demographics. However these days demographics have started breaking down as the market fragments. Now it's more difficult to segment people.

These days instead of targeting a specific consumer group, they try to create an aspiration that works across groups. Advertising has got very sophisticated and work across many media.

Many designers hanker after the position of lawyers or doctors. The difficulty is to get them to write a brief is sufficiently tight enough to get the job done, but loose enough to offer the designer some creative solutions.

Designs need to have their own identity and their own brand. When designing something you need to work out the individual identity of the product or service. Unless the client is a professional and are used to working with professionals they often don't know how to handle design processes and have difficulty expressing the identity of their projects.

To aid comprehension, layout needs to help peoples eyes flow over the information without interruption. Often it's only tiny details causing problems, but often it's small details that matter. With layout you'll have a story. Images and text.

Whitespace isn't just a gap. It's space that's being used in a meaningful way, not just the absence of space because of an absence of content. Part of the designers job is to decide what's important and what's less important and structuring the information. Every-time the reader has to stop and work out what's going on, it causes them problems. By laying out the material in a different way you can make the material much easier to understand. The stuff that's important needs to be made to look important, and the stuff that's less important needs to be made less important. Good design helps present information with the minimum of effort. For instance, people use pull quotes etc. as a means to help information jump out so people have an idea what the topic is without having to read all the text.

Market research can be used creatively. It can be used to help you make creative decisions about your audience. However it's often used to put boundaries on a project and this can often bind the creativity of the designer.

Visual benchmarking involves grabbing images, textures, shapes etc. from a variety of sources and asking the clients to choose which ones best sum up their product/service. It can help the designer get a better understanding of the client. Once these are set you can use it as a mood board to give the designer inspiration.

Lloyd is setting a quick exercise. He's going to pretend to be the client and get the attendees to ask him questions about his business then go off and create a press ad or banner ad.

Lloyd talks a little about methods to stimulate creativity. Many people use brainstorming but often more structured methods are needed. Edward De-Bono came up with the idea of using quotas. For instance, setting a limit of 4 ideas help you focus on the job at hand. When you're being creative you shouldn't be analytical and critical at the same time. Giving people roles to take on in the creative process can help people break out of their day to day roles. De-Bone used a method called 6 hats where each person would take on a different role in the creative process to help stimulate creativity.

There has been lot's of philosophical discussion and theory about colour. Colour needs to be used sensibly. What colour is used where and why. For instance if you want to attract attention, used a bright colour. If you want to separate things you can used different colours, whereas if you want to associate disparate things with each other, use the same colour. Whatever your doing, colour should be used deliberately for a reason, and not left up to chance.

And on that note, it's time to wrap up and head for a drink at the Grand Central.

Comments (3)

The Importance of Good Copy | December 4, 2003

I work in the same building as a very talented direct mail copywriter. I'm constantly amazed at the amount of work that goes into creating a successful direct mail campaign. One of the interesting things about direct mail is that it's quite easy to measure success rates. For instance in most campaigns they will send out 2 or more versions and then see which produces the best results. This has lead direct mail copywriters to get very good a writing copy that sells.

When I talk about copy selling, I don't necessarily mean that it actually shifts products. In many instances it's as simple as getting the recipient to respond to the direct mail. Basically all the copy on the direct mail is there for a purpose. It's been designed to get people to follow a particular action.

Now it strikes me that writing for the web is very similar to writing for direct mail. With direct mail you've got to get the persons attention immediately. Once you've got their initial attention you need to spark their interest. The copy and design needs to say, read me and you'll get something out of it.

Once you've got the reader involved with your copy you need to build up their desire. Good copywriters do this by painting a picture, explaining values and letting the readers know what the benefits will be in an language they understand. Most DM copy will have a very strong value proposition and will be benefit, rather than feature led.

Once the desire is there the last job is to get people to act. Any good salesman will tell you the call to action is the most important part of a sales pitch. You can have the best product, let people know how useful it's going to be to them, but unless you actually get people to act it'll all be in vein.

In the DM world this process is called AIDA (Attention, Interest, Desire and Action) and it's a technique that most good DM copywriters will use on a daily basis.

Essentially it's about writing persuasive copy. Copy that provokes the desired response. On the web that could be anything from getting people to read the next page or follow a link, to signing up for a service or buying a product. The bottom line is that good copy sells and a good web copywriter is literally worth their weight in gold.

Unfortunately the state of copy on the web is pretty shocking. A large amount of web copy is recycled from brochures, mission statements and other marketing material. It's usually dumped on the web team because the commissioning company involved either doesn't see the value or doesn't have the resources to write specific web copy. This type of copy has inherent usability problems. It's generally too long, feature or organisation focussed and written in a language only an MD or marketing department would love.

Instead you need to write copy that is user focussed. Look at the words your visitors use and use them yourself. A great way of doing this is to look at your search logs and feedback forms. By speaking the same language you make your readers feel comfortable and it gives them the impression that you understand them and are on a similar level. Using the same language is also key to getting good search engine rankings. In fact good copy is the most fundamental part of a good SEO campaign.

Unfortunately what goes on a website is often more about company politics than joined up thinking. To keep the marketing department happy they'll want to put one thing on the site, to keep the MD happy they'll want to put on another thing. You end up creating a site that the company love. That is until they realise nobody is using the darn thing. To get around this you need to have clear goals from the start. Then when the MD wants to put a message on the home page (complete with board room picture and signature) you can say what a nice idea you think it is, but that you're concerned that it doesn't support the goals that she and the board set down in one of the many long meetings you had a few months back. You'd be happy to do it, but it would mean changing the goals in the project document and getting the change signed off.

We all know that web users have the attention span of a goldfish. We scan read, we have multiple pages open a once. If the copy doesn't grab our attention and spark an interest we'll move on. Keep mission statements to end of year reports and business plans. Nobody wants to read them on the front page (or any page for that matter) of your website.

Web copy needs to be more like DM copy. It needs to be short and sweet. It needs to be written in a language the reader identifies with and not in an obscure dialect of marketeese. The copy needs to be value led rather than feature led. Don't tell me why your offering is the best. Tell me what that means to me and how i'll benefit. Then close the sale with a call to action. Don't just lay your cards on the table, cross your fingers and hope the person knows what to do next. Give them a hand. Point them in the right direction.

Fundamentally web copy needs to put the reader at the centre of focus and in this respect there is a lot we can learn from Direct Mail.

If you're interested in learning more about writing web copy and building persuasive websites here a few possibly useful links.

Comments (6)

Mail.app Crashes in OS X 10.3 Panther | December 4, 2003

I installed Panther a week or so ago and apart from a few teething problems everything was fine. However a couple of days ago I rebooted my iMac for the first time since my install and ever since then Mail.app has been playing up.

First off, after my reboot, junk mail filtering had stopped. This meant about 20+ spam emails started turning up in my in box every morning, something I wasn't really used to. Then I started to notice the app itself kept crashing when I tried to flag messages as junk.

After a bit of testing I trashed ~/Library/Mail/LSMMap and so far (fingers crossed) Mail seems to have stopped crashing. Now all I've got to do is spend the next couple of weeks retraining the junk filter.

Comments (21)

More Nice CSS Sites | December 2, 2003

Here are a few more nice CSS sites for your browsing pleasure.

Comments (8)

Selectutorial | December 1, 2003

The guys from Max Design have come up with another great tutorial, entitled Selectutorial: CSS selectors. Well worth checking out.

Comments (0)