Anatomy of a Redesign
(Author’s Note: I’ll be refocusing my various online interests over the next few weeks, so that this one you’re looking at will become more web design and web culture related, and the other sorely abused and ignored site will become more personal and hopefully just as angsty and angry and antagonistic as in the olden days.)
I went away for a few years to try to help a company convince other companies that the smart way to communicate with its customers was to translate everything they were sending out as paper could be sent out electronically to those customers’ e-mail in-boxes. The result was mostly a failure because companies are naturally more inclined toward customer acquisition than customer retention. In other words, in the great majority (and this is probably a big unsurprise to everyone but me) corporations would much rather keep bothering potential customers with useless and worthless enticements in the form of coupons and “special offers” via e-mail and direct mail than to actually listen to their customers and provide things like statements and product announcements and other on-going customer service publications that might be helpful and noteworthy rather than annoying and Spam-like.
So, there, in a nutshell, is my life for six years. I kept pushing for companies to listen and retain their current customer base rather than annoy and frustrate people like you who may otherwise have been interested in using their services because a friend of yours uses them already and loves the convenience of electronic communications that occur instantly and automatically instead of churning out masses of pointless, ugly, and ultimately fruitless attempts to make you aware that you can SAVE $1.00 RIGHT NOW when you spend $50 in a participating store near you.
In the meantime, and I don’t know if you noticed it, but Web Design died. It didn’t just roll over and die, it was killed by some very large guns wielded by very large hunters.
The blame lies not in the designers who’ve been trudging on in my absence, using the new capabilities and tools to create interesting, exciting, useful and, on rare occasion, beautiful web site designs, they’ve been trying (or so I hear — I’ve been away) but these three monsters of the web cause every other company to question the need for visual design.
Those three monsters, Google, MySpace and YouTube, are exercises in what makes a web site successful, but I think some companies are taking the wrong lessons from them. In short, the reason they’re successful is content, and lots of it. A successful public web site must have constant feeding. The audience demands it, and when you have that you’re simply going to have more success than a competitor who doesn’t. However, when you look at those sisters side-by-side there’s another common and obvious similarity that makes it easy to jump to another conclusion, and that is that ugly is in.
Ugly may be too strong a word, actually. MySpace is ugly. Butt ugly. Bufugly. Google is simple. YouTube is somewhere in-between. And you may want to point at them — Google in particular — and argue that it is designed, and designed perfectly. Otherwise it wouldn’t be the success that it is, and I wouldn’t necessarily argue the point, other than to say that if I were a competitor, I wouldn’t do it the same way because if you’re trying to differentiate yourself from someone else, you don’t do it by looking exactly like them.
There are definite differences between the sites on the attainment of their goal, but they all have the exact same goal in mind and it is the same goal as any other public web site, and that’s to get and keep the attention of as many people as possible.
Perhaps death is too strong a word, maybe it’s merely in a coma. Maybe the pastelization and rounded-corner floaty bits signals a tidal change that there’s no recovering from, maybe that look that’s becoming so damned prevalent everyone one looks is merely how the web is going to loo because people like it and it lends a sameness to everything that accompanies a kind of comfort factor that everyone, seemingly, has been wanting all along but never managed to find.
Which doesn’t mean it’s right, it just means it’s popular.
But you already know all of this and it’s all just a long and boring introduction to what I really wanted to talk about, which is the redesign of the site before you and another site I maintain in a rather meandering but on-going manner.
A redesign to a professional web site (meaning: one that wishes to make money) is nothing to take lightly, but the redesign of a site like this one that pretends to no commercial desires and doesn’t necessarily care whether anyone is out there or not (although thanks for coming! hello! have some nachos!) can be done on a whim for no reason whatsoever. But I did have a reason for this redesign — several really — including, but not limited to, and in no particular order:
- A love of center-screen
- A distrust of rounded corners
- A desire to use nice, clean lines and 90º angles
- A lack of respect for pastel shades
- An exploration of “breaking out of the box” for real
- A rediscovery of what one can do using only HTML and CSS and no scripts or Flash
The Box Model
Things like background colors in table cells and correcting the arbitrary margins on a page came late to the party, and even the initial CSS could do little more than replace font tags for typographic mark-up. In short, it was a huge sandbox with very few pails and shovels.
Between Y2K and now, the period where I had my head buried in e-mail and was trying to overcome Spam filters, black lists and Outlook worms, the web has changed so dramatically that now there is virtually nothing that cannot be translated directly from a Photoshop canvas into a web page.
(I should caveat that last paragraph with an “almost,” as in “I can take whatever design I can create in Photoshop and almost transfer directly into a web page, except for two annoying problems occuring in Internet Explorer 6,” but more on that later.)
The implications of that statement staggered me for months. It was as if I was an artist and had been using a 6″x9″ canvas and a set of 64 colors, and then someone opened the door to my new studio and I was being asked to paint the side of a high-rise using anything I wanted to. If I can do anything I want, what was too much?
Besides that, when I looked around I sensed that somewhere along the line I had become a dinosaur and that the colorful, interesting, esoteric designs I enjoyed doing had been replaced by Margaret Keane paintings. Everywhere I looked, suddenly, the Web was coated in colors more usually found in bathroom wall paint. Not only that, but the edges of everything had softened into marshmallow poofs.
There was another school of design that demanded that everything look dirty, as if the point was to take a nice, clean design and throw it in the gutter until everything turned brown and mottled. So on the one hand we had the Brady Girl’s Bedroom school of web design, and on the other we had the Vermont Roadside Antique Shop of web design.
So, that brings us back to me, and my distaste for copying someone else’s style or work. Admittedly, as a designer, I am always borrowing ideas I like from others and hopefully integrating them in an original way. I also look at the possibilities provided by web design and attempt to come up with unique but workable solutions to the on-going challenge of coming up with something different.
I also like to include one or two “special effects” in my personal sites that have no practical use or reason for being there other than the “cool factor” that is so difficult to achieve and is almost 100% left to taste. One person’s cool is another person’s lame.
First off, I like distinct areas of separation. As you can see here, I used spacing and borders to set off the sections, giving the main content more weight by making it bright and big and stage center. The headlines are also rather weighty, so that finding each article on the main page is simple, but the headlines are not so large that they outweigh the content itself.
I was playing with Movable Type’s templates to use pieces of the automated dynamic presentation to make further distinction between sections. Here, I do that with a somewhat awkward (which is why I think it works in this setting) headline repeated behind each headline. Rather than using a horizontal rule (admittedly more elegant but also less interesting for my purposes) I place a thick line behind each headline, further accenting its importance. But each line includes the text of the headline itself, so it’s a bit of a trick and I’m hoping you’ll find other uses for the trick that I haven’t considered.
If you have a look at the redesigned LaConCon you’ll note that I’m representing categories with images integrated into each entry as well as text in the navigation down the side. I’m enamored of creating these changing bits of interface, though what practical good they are remains to be seen.
A Strong Palette
Lately, I have been charmed by a kind of cheddary orange-yellow that doesn’t lend itself particularly well to an overall interface (ala c|net) but I love it as an accent color. I always tend to want to stick with a grayscale palette for everything you have to spend any time with and use color to accentuate pieces of the screen just to lend the otherwise dull grayness and splash of color and light. I have always loved red as well, and I included a royal blue because it complements grays and warm hues.
I also, as mentioned, wanted to avoid pastels altogether. I think they’re weak and puny and okay for bathroom walls and ladies’ underwear but not necessarily good for the web. Unless your site is about bathroom walls and ladies’ underwear. Which mine is not. I hope that’s obvious.
Why the huge type treatment at the top of each page. With a shrug and a grimace, I’ll admit that it’s just to provide something that breaks out of the box model. I wanted a piece of the site to bring the background image and the floating boxes of content together, and I didn’t want to have drop shadows on the boxes. So, that isn’t something that necessarily has a greater purpose other than it’s interesting and pretty. This site isn’t about photography and images, per se, it’s about words. So I let words become the images.
It’s important, probably, to point out that the design of this site has a bearing only on this site’s design. I am not advocating a one-stop solution for every other site out there. This isn’t a commerce site, it isn’t a web application, it isn’t a video digest or search engine. Every site has its own needs, and it’s up to that site’s designer to decide what they are and how to dress them up.
Except for rounded corners. We don’t need any more rounded corners.
The Rules and How to Bend Them
This is not an area to tread lightly, dear friends. You have to know what the rules are in order to bend them, and you have to know how far to bend them without breaking them, because breaking these rules has consequences more damaging than you know. Bending, though — bending is good.
Remember that “special effect” I mentioned earlier? Well, I’m afraid if you’re looking at the page using Internet Explorer, you can’t see it because IE does (at least) two things wrong that this particular effect relies upon. Internet Explorer renders PNG-24 files with alpha transparency incorrectly, and Internet Explorer disagrees with every other major web browser about how to hand anything positioned as “fixed” in CSS.
If you have Firefox or Safari or Opera, you’ll see a shadow at the very tippy top of every page as if lancearthur.com is disappearing into a pocket under the browser chrome. This relies upon those two factors working correctly. Because IE doesn’t allow either one to work correctly, I have had to comment out the particular pieces of CSS that make it work.
I first experimented with this idea over at Glassdog to a lesser degree and, I think, to far less success. Because the thing about the effect is that without some slight of hand tricks, anything passing under the shadow can no longer be used as a link, because the actual transparent piece to your eyes isn’t at all transparent to the browser and suddenly it is sitting over the layer with the link and it cancels out anything other than visible data. If you roll the top navigation up to the tip of the browser, you’ll see what I mean.
There is a way around this slight problem (the ever-amazing relative positioning) that will allow text links to float above everything else on a page so that they can always be clicked no matter what gets in the way. But then any images that are linked will also float above everything else (unless you provide different classes for different types of links, of course, but that would have meant me going back to manually fix all images with links and, yawn, boring!) and it kind of spoils this particular effect.
Frankly, I think it’s interesting and sort of fun but not very useful or practical. I mean, let’s face it, what’s the point? Does it make any difference to the page? Does it help anything? Are you more likely to enjoy the contents knowing they’re disappearing into a shadowy void rather than just sliding up under the browser window’s edge? The possibilities are interesting, sure, but also potentially annoying. How much stuff do you want floating above your page’s contents? Stuff that just sits there and doesn’t move. Gold gilded frames hugging your web pages just because they can?
But this is my own personal site and I’ll do what I God Damn want to! Feh!
If you’re interested, IE7 on Vista actually interprets fixed positioning and PNG-24 alpha channels the way they were meant to be used, so soon enough everyone will get to see that 11-pixel drop shadow in action. And for those out there who would like to argue that there’s a work-around for IE using filters and then everyone can enjoy the show right now, again I say “Feh!” Too much trouble. If they can’t do it right the first time, to hell with them.
If you want to know more about the trick, just ask. It’s completely simple and equally pointless.
As for the tree, well, I like trees. It has nothing to do with an overall theme or anything, I just thought it looked nice and I like it back there. I allowed the meta data on the right to have a slight transparency so the tree could show through. I also like that the rest of the interface adjusts to browser resizing but the tree stays grounded. Staying grounded is important.
Perhaps next time I’ll cover what I did over at LaConCon and how to make offset borders using magic and pixie dust. Or you can just check the code and do it yourself. Because that’s how the Web works, my friends.
Check the code.
Do it yourself.
October 16, 2006