It’s really a simple thing. A little graphic that makes the site unique. But for some reason sites still do not use them. I hate these sites. I loathe them. I wish them would burn in the fiery pit of the internet. It says they’re boring and unoriginal. Or that maybe their web designers just don’t care.

You know, if you have a small website that doesn’t have a lot of traffic, then I get not spending the 33.8 seconds it takes to create a favicon and add it to your site. It makes sense. It’s obviously not worth your time. And I get it if you have your site hosted on something like Blogger or WordPress.com or LiveJournal and you’re stuck to their default favicon. That makes total sense to me.

What I don’t get is big time sites who don’t seem to care. American Express, I’m calling you out. You’re a huge freaking credit card company trying to become a bank so you can cash in on some of that sweet government money. Why don’t you spend some of it on a graphic designer who knows how to make a favicon. I mean, you’ve got music on your front page. Which is totally awesome especially considering this is the MySpace age and all, but really? No favicon. And I pay you money? Come on. It really angers me every time I need to pull up my account.

And you know what Weblogs, Inc sites, like TUAW and Engadget, is it too much to ask for you to get the RSS favicon going? It really makes your site’s feeds look like crap and completely unappealing. I mean, you are owned by AOL News so it makes sense that you don’t have enough money to hire a quality designer — does anyone even use AOL anymore? — but for real, just put some effort into it. Or continue to be lame. What do I care?

Am I blowing this out of proportion or what?

On the site, the spoiler tag will simply black out the text in question. Should you want to read the spoiler, all you have to do is put your mouse on the text and all will be revealed. Check it out:

You’re reading this text and all is really cool but all of a sudden I decided to drop some really revealing information that you weren’t expecting. Now, thanks to the spoiler tag, you don’t have to see if you don’t want to.

Should you want to implement this on your own site, all you have to do is add the following CSS to your style.css template file:

.spoiler { background: #000; color: #000; }
.spoiler:hover { background: inherit; color: inherit; }

Then, the next time you decide to write something that could contain potentially spoilerific details, just wrap the text in a spoiler span:

<span class="spoiler">Juicy information goes here.</span>

I’m sure there are other things you could use this for, like making your blog posts look like something released under the Freedom of Information Act, but I’ll leave that up to you.

Over the last few weeks I’ve been testing the design in a number of browsers to see how it looks. I stuck to Webkit (see Safari) and Gecko (see Firefox) based browsers. I did not test on Internet Explorer. Today I decided to render a few screenshots to see just how bad it looks. Follow along, if you will, a tour of how different web browsers render the exact same page.

Safari 3.2.1 (2008)

Camino 1.6.5 (2008)

Internet Explorer 8 Beta 2 (2008)

Internet Explorer 7 (2007)

Internet Explorer 6 (2001)

The worst is obviously Internet Explorer 6. It’s a piece of garbage yet still roughly 20% of the internet is using it. People, wake up! It’s now nearly 8 years old and there are two newer versions. IE7 handles the page, and web standards, much better than IE6 and the IE8 Beta is exactly what a browser should be.

If you’re still using Internet Explorer 6, it’s time to upgrade. If you can’t do it, get your IT department to do it for you and if even that isn’t possible, at least start using something else, like Firefox or Safari. You’ll realize how much better the internet is once you stop using a nine year old piece of software.

Internet Explorer screenshots were rendered using NetRenderer.

Look a little familiar? I thought so too. So I typed ‘Bourne’ into the search field and look what I found:

Interesting. Considering The Bourne Supremacy earned nearly 11 times 88 Minutes take at the box office I guess you can see what they were going for. Whether that’s what they were thinking or not, it’s a pretty blatant rip-off.

If you’re a member of Facebook you might have noticed the bar atop every page lately announcing the “new Facebook.” If you haven’t clicked “try it now” then you should, just to see what a horrible mess the whole thing is. If you’re not that adventurous then just keep reading and see what you’re not really missing.

The first ting you see when you pull up the new Facebook is a modified stalker news feed. This is, of course, where all of your friends updates can be found. It’s also the location of my first gripe. If you notice in the picture below, there is a large amount of whitespace surrounding profile pictures in the news feed. The profile pictures are so far away from the text it’s almost as if they’re not associated at all. On a positive note, the right hand sidebar is leaps and bounds better then the current implementation.

What's with all the whitespace?

Another issue I have can be found on a profile’s photos page. A person’s photo galleries have been moved to the bottom of the page, below ‘photos of’ that person (which is a collection of photos added by others that tag the person in question). It’s odd that the designers chose disorder over order here. The galleries should be at the top, or at the very least along the side. Also, notice the large amount of whitespace on the right side of the page. Granted, that is probably where an annoying ad goes but when ads are turned off it’s a gaping hole in the page.

What's with the disorganized photos page?

My final, and largest complaint, lies with people’s individual profile pages. Facebook has broken the profile pages into a number of tabs (Wall, Info, Photos, Boxes). Boxes is a very odd place to store all those crappy applications that should be done away with completely. Photos is mentioned above. Info is, well, exactly what it sounds like. The problem I have is with the main tab, Wall. The current Facebook Wall is the place to exchange messages with other people. Now the Facebook Wall is that and the profile’s mini-feed. That’s right. They’ve been combined into a very confusing, horribly implemented hodge podge of information overload. Grated, there are different filter buttons to get just what you’re looking for, but why should you have to do that? The two things don’t make sense together.

Did you really think it was a good idea to combine the mini feed with the wall?

Generally change is a good thing. Though Facebook seems to be changing for the sake of changing which is a very bad thing. The layout and design all scream FriendFeed, which is about as terrible a UI as I’ve seen on the internet in a long while. I guess Facebook decided to redesign things since MySpace recently did the same, but really, why should they care what MySpace is up too? I hope Facebook is paying attention to user complaints because I know I’m not alone in my thoughts.

Or am I? Let me know what you think about the new Facebook in the comments below.

Over the last few days I have decided, despite my better judgement, to give Twitter a try. After reading Nick’s breakdown of the service I figured it might be worth a spin. After all, communicating with people is a good thing. Though after a few days of use I have really only come to one conclusion: whoever invested in this service should be really disappointed.

According to the CrunchBase, Twitter has $5.4 million dollars of investment capital running the show and 17 employees. The question I have, is with all the money and people how can the service be down almost as often as it’s up? Sure, they show a cute little graphic to say their sorry for the downtime, but what’s the point? It has been a nice means of communicating with some people through the @reply and direct message feature and by syncing with Facebook for general status updates. Though the system seems to pick and choose which updates are actually shown to me, which kind of defeats the purpose. I can see how it’d be pretty easy to become addicted to Twitter, as many people are, but it’s hard to keep using it with all the issues. I’ll continue to use Twitter and give it the benefit of the doubt. Surely they are in the middle of some sort of upgrade, or something. I mean, with all the money they have, these issues are just a sign of growth, right?

Zack and Miri Make a Porno is the upcoming movie from the very talented and funny Kevin Smith. I had heard about the movie a while back and finally, last night (or really this morning) the teaser trailer was released. It looks pretty funny, and seems to be about exactly what the title implies. But what caught my eye is the design of the website. It seems the cork board idea is spreading, or hitting the big time, or… something, I don’t know. Be warned, the trailer is intended for audiences of 18 and over and is completely uncensored. If you’re over 18 head over and check it out and just remember where you saw the design first.

One of the biggest comments was that the colored stripes, while interesting, distracted from the content of the site. TVDinner said it best with this comment:

to me it is a little to much, but that is just me. I guess my question to you is that I am not sure what it accomplishes as far as your site. I assume you want people to read your words, thoughts, posts, etc. I am all for creativity and use it on my sites, but also understand that there has to be a balance in design that will be attractive to viewers and keep them wanting to come back time and time again…

After about a week of going back and forth, and toning down the color of the stripes, I came to a conclusion: the stripes were distracting from the content. Unfortunately my stubbornness prevented me from actually hearing it from the good people in the forums. I came to the realization that I didn’t like pulling up my site. Considering that I am my sites most frequent visitor that says something. So the design that I was all to excited about quickly became a lame duck design and the search was on for a newer and sexier design.

I don’t know exactly how I originally found Mostly Lisa, but it happened sometime around my unrest with Coloured. I really liked her use of objects at the top of the page. Thinking about that lead me to an idea for a design:

I’d create a sort of virtual table where you, the viewer, were looking down directly at the table. Scattered on the table would various objects that the blog content features (video games, DVDs, camera, iPhone, pens, etc.). The content would then be found on sheets of paper on the table.

I thought it was brilliant. I quickly sketched it out, played with how the objects would interact with the content, and then set up a tri-pod and took pictures of various objects to be placed in the design. I started laying things out in Photoshop when I hit a snag, I couldn’t figure out how to integrate the site name into the design. I started cruising the typical inspiration web sites when I came across this. It was sort of what I was thinking about doing, enough to get me going at least. But after a little more searching I found this, this, this, this, and finally this. My idea was officially unoriginal and actually overused. I thought about trying to put a unique touch on the idea but decided that I didn’t want to create something that would feel, to me, just like a cheep knock-off.

I went back to the drawing board, again. This time, instead, I started looking at my previous designs. After a brief look at Mindless, I decided to return to my favorite design for this site, Corked. I had the idea for Corked literally for years before I made it a reality back in late 2006. The problem with corked, however, is in mid 2007 I accidently deleted all of the Photoshop files to make the design a possibility. Unfortunately for me they weren’t uploaded to the server and while announced, Apple’s Time Machine had yet to be released. I was officially boned. After all the work that went into this design, everything related to it was gone.

With nothing to start with other than the flattened .png’s and .jpg’s I decided to re-invent Corked, to give it a more modern and cleaner look. Instead of the entire site being a cork board, I’d create a virtual cork board complete with a wooden frame and I’d hang it on a textured virtual wall. I’d make sure that all of the site elements fit with the overall theme; if something is on the cork board it’d be “attached” in some fashion. Using only the original corked background and the BittBox paper vectors I created what you see here today, Corked 2.0.

While as a designer I’m never completely satisfied, I do enjoy the journey from one design to the next. I never know exactly where or how I’m going to get to the end point, and as you can see there are often many detours along the way, but in the end it’s all worth it and hopefully results in a quality and unique design.

However, even though I’m my biggest visitor, it doesn’t mean I’m the only one. What do you think of Corked 2.0?

The greatest secret to my website designs is that I generally have no idea that I’m about to start a design process when it actually starts. That doesn’t make sense, right? What I mean is that in my daily web browsing I’ll come across a site with a design I really like and I think to myself “how can I make that look better.” It helps that I often visit design galleries like CSS Tux, but you know, inspiration can drop from anywhere. Anyway, this is the point where I realize I’ve started a new design. (Granted, this is for sites that I currently manage. If I’m starting a new site then there is a lot more direction given by the client and the design will, more or less, be dictated by the site’s purpose.)

The next thing I do is sketch a general idea out on paper. This sketch is usually more of a overview and doesn’t have very many details on it. It’s basically where things will go in the final design, though sometimes I add a few specific design elements that I really want to use. For example, I knew I wanted to use a form of sun rays in the Skylight redesign so I added them to a few sketches until I found a place for them. I’ll always block out areas for set things, like the menu or footer area. (I used to sketch using whatever was sitting around but have recently switched to Doane Paper, which is a wonderful invention.)

After a few different revisions, I move onto the next step, which is creating a digital version of what I just sketched out. I basically recreate the sketch using Photoshop, though the difference is the digital version is highly detailed. This step could take days, or in the case of The Skylight, weeks, depending on the amount of detail involved. Color patterns are hashed out, images are placed in the most visually pleasing locations, and drop shadows are added to just about everything. I basically create one very large graphic that looks exactly like the final page will in a web browser. Take a look at the layout file for The Skylight’s redesign.

From here, each graphic is copied from the large layout file and saved individually. For The Skylight page, that’s nearly 40 separate graphics. This is the most tedious and boring part of the entire process and is usually repeated a few times during the testing phase — but we’ll get to that later.

Once all the graphics are ready, it’s time to code a “dummy” page — a complete HTML page containing all of the elements and graphics. This page uses a lot of Lorem Ipsum filler text and some random filler images, depending on my mood. For The Skylight dummy page I used this picture of Cal Ripkin Jr. Once all of the div tags are closed, the CSS has everything where it’s supposed to be and the code is valid, it’s time to move on to the next step — WordPress.

Just about every site I manage these days is built on the WordPress engine. While it may be “blog” software, it’s a great content management system and makes future design changes extremely easy. A typical WordPress theme involves breaking the dummy page into about ten different pieces. All of the content is then replaced with WordPress tags which pull information from a database that stores every part of the website — it’s all very fancy but it makes my job much easier.

After the theme files are created, I install the theme into a dummy WordPress installation on my testing server, a top secret website hidden in cyberspace. Here I test all the links, make sure the theme lays out right, recreate graphics so they load properly, and test against different web browsers — which is the fun part. If something looks right in Safari, it might not in Firefox, and it surely will not in Internet Explorer. The trick is finding a way to make it work in all of them. The Skylight redesign brought up an interesting problem in that while the site looked great in Safari, Firefox and — believe it or not — Internet Explorer 7, it looked like garbage in IE6. By garbage I really mean garbage, just take a look at the screen shot. (For those of you who haven’t upgraded from IE6 to IE7, it still doesn’t look great but, well, you shouldn’t be using Internet Explorer anyway.)

After all the quarks are worked out and the site looks as good as it can on all the popular browsers, it’s time to go live. This means installing the new theme on the actual server and activating it. Believe it or not, a few more quarks manage to pop up. For The Skylight page, I couldn’t get the “Older Stuff” button to work for nearly two days despite the fact it worked on the dummy server. Things are just odd like that sometimes in this crazy place we call the interweb. Once these bugs are zapped, the site is complete and I can return to normal sleeping patterns.

Of course, the whole process will start again once something sparks my creativity or I simply get bored with a design. Visiting the About page here you’ll see that I typically update Mindless Chatter about once a year. While it may not sound like it, the whole process is a lot of fun and always well worth the frustration it causes and long nights it requires. When I complete a site it’s almost like finishing a work of art, even if it’s only called art by other geeks and nerds.