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.
Related articles
- The new highlights of CSS3 (css.dzone.com)
- CSS 3 in Easy Steps (i-programmer.info)