CSS Wizardry archive for February, 2010


Suzanna Haworth Photography redesign

Having only put the first version of Suze’s site live a few months ago, we both decided it needed a whole new approach. Originally a static site, built with my own PHP framework, it relied on manual updates from me, which meant that for the sake of efficiency updates had to happen once there was enough content to upload; ergo not very often. After porting CSS Wizardry over to Wordpress and being very impressed, I decided that was the best approach for Suze too. This meant she could update her own site as often as she wanted.

A screenshot of Suzanna's new site

Also, follow Suze on Twitter.

As the site was built very quickly, we are adapting it as it grows and fixing any bugs as they happen. Let me know if you find anything astray. Anyway, enough talking, go look for yourselves!


Usability in everyday items

Yesterday when being dragged around shops by out shopping with my girlfriend Suzanna, we were walking down a shampoo/haircare isle when I asked ‘Is it shampoo or conditioner where the lid is on the bottom of the bottle, as opposed to the top?’ Suze answered my question with ‘Conditioner has the lid on the bottom, shampoo on the top, but I don’t know why’. I knew why…

The shampoo lid

A photograph of matching bottles of shampoo and conditioner, illustrating lid differences

Imagine the scenario, you’re a girl with long hair and you’re washing it in the shower. Your hair is in your eyes, and covered in shampoo. Opening your eyes would lead to some serious stinging! You reach down and below you, by your feet, you have two identical bottles—except they’re not identical… One has its lid on the top and the the other has its lid on the bottom. As long as you’ve learnt which one’s which, as my girlfriend clearly has, you know without having to open your eyes which bottle you have hold of. This is a really ingenious piece of usability, yet so so simple.

(more…)


Type tips—quick tips on all things web typography

Yesterday I released Type Tips, a collection of short and simple tips to take your web typography to the next level. The project has been some time in the making, with me first mentioning it back in early January. For one reason or another I only got started on the project last night, but I ploughed through and released a first version within a few hours.

A screenshot of type tips

(more…)


Typographic phrases (or: how to turn sayings geeky)

A while ago I had the idea to express some old sayings in a silly, geeky way, using code and logic to express logically, the meaning behind some well known phrases. I got Illustrator fired up last night and decided to finally got a few made. They’re kind of obvious really, even a non-developer brain can make sense of them, and deciphering the saying is pretty simple, but I think they’re cool nonetheless.

Many hands make light work

Many hands make light work

(more…)


If surgeons worked like some web designers do…

then Harold Shipman would look like a reasonably nice chap… The attitudes of many web developers and designers are frankly quite scary. The web design game’s quality and value is constantly undermined from people outside the industry, but the disregard from within the industry is—although admittedly less frequent—a lot more unforgivable.

Here is a little tongue-in-cheek post taking some of the things an offending designer/developer might say, but from the lips of a surgeon. After all, I do love a good analogy.

Web designer Surgeon Lesson
Web designer Surgeon Lesson
I validate all my code. I make sure my instruments are clean. Some things are just a given. Proper code isn’t anything to show off about, it’s just a standard part of a decent service. You’d be worried if a surgeon made a point that his tools were sterile, it’s just something you’d expect.
I’ve not done this before, but I’ll give it a go. I’m usually a rectal surgeon, but I’ll give neurosurgery a shot. If you can’t do something, don’t! You wouldn’t want a surgeon trying unfamiliar practices on you, especially if you’re paying. Why would you charge a client to experiment new things on their site?
The code’s not the best it could be as I was pressed for time. I was in a rush, so I bodged the operation. Lack of time is no excuse for poor code. I commented on this one before.
This won’t work in IE6, it’s too old to support. Madam, you’re quite old, I don’t think I’m going to do this operation. You may not like IE6, but it’s unavoidable. You need to learn how to work with, and then do so.
I’ve just got a copy of Dreamweaver and I want to start web design. I found some old scalpels—got any ailments I can tend to? Being a developer is more than owning the right tools—it’s about years of hard work and education (formal or otherwise).

If you can think of any more, please feel free to add them in the comments. And this is just a light-hearted, jokey post. I’m not comparing the importance and responsibility of surgery with that of web design… honest.


Search CSS Wizardry

Archives

Categories

Twitter—2089 followers

You should follow me.

Subscribe—RSS