Designers Are Burnt, Not Made

ScreenshotsCssCaptions

Tricky Curves – 4X Magnification

Obsessive attention to detail – that’s the thing that makes me not too bad at design. Also, the thing that makes design… maybe not so good for me. Several kinds of work will keep me up late into the night. But there are few that I will return to the moment I wake, brimming with new things to try. Web design, particularly in the final stages, is a constant stream of interesting problems.

CSS (Cascading Style Sheets), the design language of the modern Web, is a simple yet powerful tool. A style sheet is just a list of instructions about how things should look, really more like description than programming. I’d encourage anyone to try it out, no matter how non-technical you consider yourself. Sadly though, even today there are discrepancies in the way different Web browsers interpret these instructions. It’s not as bad as it was; there was a time they weren’t even trying. Microsoft’s Internet Explorer and Netscape’s Navigator (ancestor of Firefox) both had features actually designed not to work in the other. Today they at least seem to be aiming at the ambitious standards set out for HTML5 and CSS3. Browsers once competed with each other, now they compete with apps – nothing like a mutual threat to enhance cooperation.

Minor as they are, these discrepancies can still make the design that works beautifully on one platform look like something flung from a catapult on another. There really is no alternative except to test and test and re-test – on Windows, Mac OS, iOS, Android, Linux and so on, in all their different browser versions, at screen sizes from HD to phone. The permutations are slightly mind-blowing.

You find a bug, you think up or look up or remember a solution, you see if it works. If it works in Firefox on a PC you see if it still works in Chrome on a tablet, so on and so forth. When you’re sure you’ve solved that, you immediately go looking for another problem. For the best part of last week I did little but eat, sleep, and hunt bugs. And I was cutting corners on the sleep.

Don’t mention corners… See the one in the picture? Most of a day, that cost me. A lot more is going on than meets the eye. For a start, round corners can be a challenge. They look good, and they’re a part of the CSS3 standard, but people using Internet Explorer 8 and (God forbid) lower don’t see them. Well, you face a choice there: recreate the effect using images of round corners, or let the design gracefully fail in IE8. And really the latter is the sensible approach these days. Which is a little rough on users of XP – still my own favourite version of Windows – but frankly if you’re on XP and not using Firefox or Chrome then you (or your IT department) need a strong light shining up your nose.

Round corners at the foot of a page though are harder still. Look closely and you’ll see that the corkboard background pattern overlaps below the corner. (The random nature of the pattern helps to disguise this.) What’s happening is that this is an extra piece of the background overlying the rest of the design – with a bottom end for the page, complete with rounded corners, overlying that again. This whole unit then sticks to the foot of the page’s contents. Carefully-chosen margins meanwhile make sure that it always has precisely the same width as the rest, no matter what size the screen. Oh and those margins have a length described as a negative percentage, which is a little mindbending in itself.

Next problem is that 3D shadow, to make the page look like it’s inset into the background. CSS3 now has a very attractive way to do soft 3D borders, called “box-shadow”. Unfortunately, as the name suggests it only works for things with four sides. My footer wants a shadow on just two of its sides, and for that my only reasonable option is an ordinary border.

The tricky bit then is where they meet. While a border looks much the same in every browser, the shadow has properties of ‘blur’ and ‘spread’; these make it more realistic, but also more open to interpretation. Therefore it comes out looking wider in some browsers than others. What do you do then when the inconsistent shadow meets the consistent border?

The solution I found is a mad hack: I made the border 2.5 pixels wide. This of course is nonsense. The pixel is the base physical unit of the display screen, you can’t have half of one. What happens in practice is that different browsers interpret this nonsense instruction differently – crudely speaking, some round up and some round down – but they do so in a way that broadly matches how they interpret the box-shadow. The upshot, as the images above show, is that the borders join pretty smoothly in the four most popular browsers. It takes magnification in fact to show that there’s a join at all.

I’d like to say this was unusual, but really this is the essence of the Web design job – a strange blend of technical precision and lateral thinking. Part tweezers and microscope, part bent paperclip and sharpened spoon. It’s a voyage deep into an unusual problem-space, one that takes over both my waking and my sleeping mind.

They Found Our Cloud, Dammit

IrelandCloud
Picture whipped without any hint of permission whatsoever from Irish Weather Online – hope they don’t mind. Click image to visit their Facebook page, full of climatic gossip.

Well damn. They had to go and find it, didn’t they?

The cloud, the huge one that usually sits neatly over Ireland. They finally tracked it down yesterday – see picture – and must have dragged it back last night. Probably the farmers did it. Those thirsty, thirsty farmers.

So today was the first non-rock-splitting day for over a week. I got up early and thought it was just a morning mist, so often the harbinger of a solar barrage to come. But it never lifted.

Perhaps I should be glad. It was really hard to concentrate in the sun, and yesterday I was researching an article on Big Data and Human Resources. If that means nothing to you I won’t spoil your happy innocence for now, I’ll just say that it was a bit on the technical side, requiring more concentration than I could easily muster. In the end I gave up and switched to a job that actually required a trance-like meditative state. Until the sun went down I stayed in the garden with my shirt off doing a thorough job with an electric sander on that piece of furniture I’m restoring.

The sun meanwhile was doing a similar job on my skin. It feels leathery and itchy today, which somehow seems contradictory. Another reason why I should really be glad it’s overcast. But with the help of the cool and twelve hours of almost unbroken writing I did get my article finished.

Now night has long fallen. It’s quiet – except for a neighbour’s donkey letting out the occasional long, lonely bray. That must be about the most heartbreaking non-human sound in all the world. I’m sitting up late, upgrading a friend’s Mac. As you do. It seems to have worked – which is a relief as I went straight from Tiger to Snow Leopard without any intervening Leopard, something that’s not officially possible.

And I have all the windows open, in the hope of making more flappy friends. I think I’m getting exclusively the tiny, buzzy, feeds-on-blood kind of friend though. But it doesn’t matter, I’m doing it just for the atmosphere really. The insect-laden atmosphere. When I was a child I lived for several years in a caravan, and that made me intimately acquainted with the beasts of the rural dark. We basically couldn’t keep them out. So having them around again is just kind of nostalgic. It’s not proper night air unless it bites.

Getting To Know Your Android

Screenshot of Android 4 on Galaxy Nexus
Android 4, which I don't have yet

Ah, the slow terrible frustration of it…

I’m trying to be good here and give my new phone’s battery the best possibly start in life. I was advised that the way to do that is to completely flatten it and then recharge it for seven or eight hours, while switched off. Several times. That means I can’t use it while it’s charging, and as most of what I do want to do means going online, I can only squeeze maybe eight or ten hours of messing around with it out of a day. No of course that’s not enough!

Connecting it to the PC would charge it too, so I can’t synchronise it properly and, what’s much worse, can’t download the latest firmware. Ah! Nerd hell. And of course, I can hardly use it as my working phone either. So for the first few days it’s an invalid.

Just as well perhaps. At least I’ll have had some practice using it before anyone sees me trying in public. Having a phone as noticeable as this and not knowing what the hell I’m doing with it has too much comic potential. And I’ve never had an Android phone before (well, I did have an experimental Android install on my N900, but it wasn’t really usable), so I’ve little experience with it.

It has to be admitted, Android is a whole other operating system.There’s a lot I like about it already, but there are constant reminders that it’s not Windows or Mac OS, or even Maemo. I think what I miss most is control keys. Control+z especially… After that, definitely arrow keys or an equivalent. Moving back a single letter, for example, is not easily done by poking text on screen. I feel like the interface was conceived to work with single as well as multi-touch input, and in consequence is more restricted than it really needs to be now. But the Swype keyboard at least tries to make up for that, and works impressively well.

Plus I haven’t really used a capacitive screen before. With the N900 I could hit tiny links and so on with a fingernail, without having to zoom in, and it’s frustrating now when that doesn’t work. Basically I have to unlearn what I spent the last year learning.

First world problems.