As a software engineer, it’s easy to think of graphic design and text composition as afterthoughts. They’re not functional. I make the software work, somebody else figures out what it should look like, and what it should say. But good writing and graphic design can actually have a big impact on the engineering task.
Previously I described my solution for getting around a problem with text truncation using the new CSS3 text-overflow:ellipsis property. The property works great, making text truncation much cleaner and more elegant than it used to be – in all browsers except Firefox, which doesn’t support it yet. And there’s even a nice technique to get the effect working in Firefox as well. But that technique comes with some constraints: the block of text to be truncated can only handle very simple markup. Essentially, the entire text must be uniformly styled, because it can’t have nested HTML elements. So if you want part of it to be black and part to be red, you’re out of luck.
But I’ve been anticipating some pain when the moment comes to make sure, once again, that the overflow text renders correctly in Firefox. Even now that I know the solution, there was still going to be a trial-and-error process to get it just right. But today I was looking over Frédéric’s HTML and it suddenly struck me that it’s going to be trivially easy this time. We’ll still need the special trick for Firefox that I had to dig up on the web, but we won’t need to fight with it this time – it’s going to just work, simple as that. Why? Because we’re starting from a better, cleaner design.
Now, when you get down to brass tacks, there’s nothing earth-shattering going on. The relevant difference is simply the content and layout of the text in question. In the old design, the highlighted text was embedded into a longer phrase, so it needed to be differentiated from the surrounding text by its styling; this is what caused all the trouble. The new design is less wordy, and the same text now stands by itself, so there’s no need to apply complex styling. But what gave me pause about this small change is the way the simple, clean writing and graphic design, expressed in simple, clean markup design, led to a really easy coding job for me. (So easy in fact that he can do it without me. I couldn’t have it any easier!) The thing is, Frédéric wasn’t going out of his way to design around the truncation and styling problem. I’m sure it wasn’t even in his mind. But what he produced will be problem-free. This drives home for me the importance of the graphic design as an input to the engineering. I can easily see how a designer could make something pretty but in doing so, give engineers a big headache. But if it’s done right, the pretty display can be a gift to the engineers instead, having repercussions throughout the project.
I can’t show you the new design yet, of course. But check back later. When the rebranding goes live, those Medallions over in my sidebar and down in the footer will magically change to the new design. The ones in my original blog post were just screenshots so those will preserve a bit of history. It should make for an interesting comparison.