The Birth of a Website
May 18, 2007 |
It’s an age old question, what came first, the website or the design, and to be honest I don’t really know the answer. But I can tell you that I’ve recently redesigned The Skylight site and thought it’d be kind of neat to put the process down on paper screen. So if you’ve ever wanted to get a little insight into my thought process, or how a website comes into being, then be sure to pull your lap bar down because you’re in for quite a ride! Sounds exciting doesn’t it?
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.