Web Page Design – Collins Electric

Way back in August of last year, I posted about the business card design for Collins Electric, the business of a good friend of mine. He hired me to build him a Web site for his business. The business card was just an extra added bonus thrown in by yours truly. See the wonderful service you get here at. . . er. . .Pat Campbell Industries Inc.? I might need to work on that business name.

Well it’s been nearly seven months, and we’ve finally got the content for the site finalized. I’m proud of this work, as it’s the first time I’ve actually been PAID for freelance web design. I considered bronzing the check as a memento, but decided against it. Kidding. It was paypal so bronzing wasn’t really an option. Unless I bronzed my computer. Think Kate would accept that as an excuse to buy a new one? Somehow I think that “Sorry hon, you can’t use the computer, it’s been bronzed for posterity” won’t go over real well.

Head over to CollinsElectricVA.com to see the fruits of my labor. And if you ever need an electrician in Fredericksburg VA (or the surrounding vicinity), give Billy a call. He does good work.

This Blog is so Self Centered

I swear that I’ll stop talking about the redesign eventually. But not with this post. I had a whole list of items that I need to fix, so what do I do with my time? Make three totally unnecessary changes:

  • New logo/masthead. The picture was taken by me (or Kate, I can never remember who takes what) on a trip up to her parents. It is of the Long Island Sound. The part used in the masthead was cropped from this picture.
  • Added a reflection effect to the navigation tabs up top. I feel like it gives them a little bit more depth. Too much?
  • Added links for comments and the permanent link to the Link Posts on the right, mostly because I want all you libs to comment on how awesome Barrack Obama is. Incidentally, I don’t discriminate against liberals or conservatives. I find both sides equally frustrating and entertaining. Begin throwing your “Don’t Pretend Not To Be Conservative” tomatoes now.

Added to the previous list of items I need to work on, I would like to replace the muted blue-grey background that sits behind the content to something more attractive or textured. I have no idea how I’m going to accomplish that yet, but it’s something I need to do.

A Little About the New Site

I wanted to talk just a little bit about the new site and some of the decisions I made with regards to what you’ll find on the new site.

Smileys are Back!

I remember the outcry when the smileys in comments disappeared with the last incarnation of this site. Well, they are back. They are not the same or as varied as the ones that Enetation (who, incidentally, seems to be dead in the water – those of you who use them might want to switch to Blogger’s in-house commenting system – Jackie, Kate, Carrie, etc.) . Here is a list of smileys that appear in WordPress comments, for those of you who are interested. By the way, this was initially the last item in this post, and I realized that it is probably the most important to some of you. I moved it up top. I made this deal with you, my readers (nice of me to tell you ahead of time, I know). I moved the smiley text up providing you read the RSS paragraph below. Then you may cease reading the rest of this post unless you’re interested in some of the technical bits behind the site.

RSS Feeds

Use the feeds. Seriously, it makes life so much easier when you’re blog-surfing. I’ll do a whole post (again) on this later, but I couldn’t live without my RSS Reader. Subscribing to the comments feed is probably overkill, but if you follow a multiple blogs such as this one, subscribing to their main feeds is a must. With the new site I’ve tried to make the subscription links prominent.

Flickr Pics

The seven pics in the header are our most recent flickr photos. Sadly, I haven’t yet found a way to make our private photo thumbnails appear here, so pictures of Simon will never show up. If you’re a flickr contact already, you can always visit my photostream for the latest Simon cuteness. If you’re not, let me know and I’ll add you as a “friend”. Unless you’re creepy. Then you can forget it.


The “Links” area to the right are not textual ads, but rather an area for me to post quick links to other content on the Web. Posts where I just want to quickly link to something when I don’t really have much to say about it will appear here. These link posts do appear in the site’s main RSS feed, so if you use a feed reader, they will appear there as they are posted. There are some bugs I have to work out with how the link posts display in feed readers, but it’s a minor annoyance at this point. It’s on the list.

Tools Used

For this incarnation of the site, I decided to move away from Blogger. Although I’ve generally been pretty happy with them, I wanted a bit more flexibility in some of the things I wanted to do with the site. I made the decision to move to WordPress, and I’ve been pretty happy with the results so far. The interface isn’t as slick as Moveable Type, which I also considered. But setup was a snap, and I’ve been pretty happy with the features so far.

My old hosting company, MyHosting.com pissed me off when they randomly raised the price of my hosting plan, so I decided to change that up, as well. I ended up going with DreamHost. They’ve been pretty good so far, as well. As long as they don’t go randomly raising their prices, I’ll probably stick with them for a while.

All pictures (if they’re taken by me or Kate) are currently taken using our Canon Powershot S3IS. If anybody has a DSLR that they’re itching to get rid of, I’d be glad to take it off your hands. Until then, the S3IS suits most of our needs well.

Outstanding Issues

The following is a list of outstanding issues that I need to resolve. Most of them are minor, and should be completed sometime over the next couple of months, as time permits:

  • Fix the pagination on tag archive pages to be more attractive. This actually goes for all of the archives.
  • Style the pop-up comments. Right now they’re kind of pathetic looking.
  • Work on programming the date archives to behave the way I’d like.
  • Revisit old posts and add relevant tags (not looking forward to this one).

So Long Music-Slave

This is the final post on Music-Slave.com. I’ve moved all the posts since April 2005(including this one) to PatCampbell.net. I’m debating whether or not I want to move the REALLY old items (dating back to December 2002) or not. The older items are before I moved away from the “Rants”. I might relegate those semi politically-minded bits to the insidious Internet Archivers (as Philadelphia Bunnyface pointed out, nothing is ever really deleted).

I still have a laundry list of mostly minor items that I need to polish, but they will get done in time. I want to get people reading and commenting on the new site so I can work out any kinks that I come across there. I also want to be able to archive everything on Music Slave and stop paying the hosting fee.

Some of you have already sneakily found your way to the new site and started posting comments there. Good on you! So this is the end of the line for the Music-Slave. Without further ado, I present to you PatCampbell.net. Enjoy.

Website Redesign – Part 4: Mocking up the Archives and Contact Pages

Part 4 of the Music-Slave.com 2007/2008 Redesign Series

Designing the Archive and Contact pages was challenging because of the limited content those pages will hold. Normally the challenge is to take a bunch of information and cram it into a limited amount of space in a way that it is usable and easily accessible. In this case, my challenge was to take a small amount of information and present it in a manner that was attractive without looking stark, while retaining the aforementioned usability and accessibility.

Click on the image to enlarge.

Let’s start with the archives. When I had initially thought about this page, I wanted to provide a calendar-like interface that the user could use to select posts from individual days. Then I thought about how I use blog archives. How often do I look at a specific day to find a post? Never. Chronologically, do I post
often enough to justify having archives go down to a daily level? Not really. Would a monthly archive be sufficient? Absolutely.

I have seen some effectively implemented monthly archives, and I particularly liked the way that the archives are laid out on Veerle’s site. I decided to use a form of that, although without the “show all content” and with the more recent dates on the right, as if to emulate a time line. While this navigation will work fine for a little while, I will need to find a way to let users browse posts further back than 4 years ago. As it stands, that’s not currently an issue. Talk to me at this time next year. While it was easy to generate this mockup, dynamically generating this content through WordPress may be a challenge.

In addition to accessing archives chronologically, I also want to be able to access posts grouped by tags. Right now, this is a simple list on the right hand side of the page, but eventually may become the “tag cloud” that has become popular. We’ll see.

Click on the image to enlarge.

Finally, there is the contact page. I want to provide a way for users to contact me via my Web site. I’ll provide my email address (taking care to hide it from spammers), as well as a form that users can use that will drop a note in my inbox. I may eventually need to put a CAPTCHA on the page to prevent spammers from using the form. I also felt that it was important to have a photo of me on this page, so people could actually see who they were contacting. I feel like it helps people connect a little better. I’m not a fan of posting my picture, so it took me a while to find one that was acceptable. I picked one that had a nice distraction in it, too. So hopefully people will look more at Simon than they do at me.I’ve got all the mockups for the new site complete and have started work on the HTML/CSS templates. I’ve also secured the domain name and hosting through DreamHost.com. I hope to have the new site ready and running by the new year, but with the holidays and all the traveling that I have planned, I think that may be overly ambitious. Look for the new site sometime in January.

Website Redesign – Part 3: Do I Really Like These Colors?

Part 3 of the Music-Slave.com 2007/2008 Redesign Series

After stepping away from the first design for a few days, I came back to the project and took a look at what I’d put together. I liked it, but it was just too. . . dark. I was tired of the browns and tans. As much as I like the guitar masthead, I think it’s time to move on. It may return one day in another form, but for now it’s scrapped.

I looked around for a bit through my photo archives and found a shot that I liked. I ended up going with a shot I took of the Basilica of the National Shrine of the Immaculate Conception (longest name of a church ever?). I’m not a photographer, so it’s not quite the quality I would like. But I think it is a nice shot. I want to occasionally swap out the photo that is displayed in this section of the site, so this isn’t permanent. I used a few select colors from that photo to create the theme for this mockup.

Some of the other items that stood out to me as “needs fixing” were:

  • What’s in a name? Music-Slave.com has gotten me more than a few eyebrow raises over the years, and the hyphen in the domain name is annoying as well. I think the time has come to move on. Solution: When this design goes live, it will relaunch as the more mundane, if somewhat more vain, PatCampbell.net.
  • A bit more whitespace was needed around the photos and RSS subscription center. That area was cramped. Solution: Add more white space. Painfully obvious. Except in this case the whitespace is blue.

View Mockup With These Fixes

  • Also relating to whitespace, the faux page appearance of the main content area (where posts would appear) wasn’t giving me warm fuzzies, and I thought it would look awkward for users who had resolutions greater than 800×600. Solution: I eliminated that visual effect and went for a simpler (and I think more effective) white area for both the content and the sidebar information. I also added a small gradient to the blue top to ease the transition to the main content portion of the page.
  • I really wanted the information in the post information box to be prominent and easily accessible. Floating it to the right of the post text struck me as being problematic in two ways. First, it was a bit TOO visually prominent. The text jumped out and took away from the post once you started reading. Secondly, I occassionally include an interest image with my posts, and having both the information box and the image off to the right seemed to be a bit too busy to me. Solution: I decided to take the box and span it across the width of the post text. Since the title of the post is really “post information”, I threw it into the box as well. I’m pretty happy with the results. In order to mug for comments on longer articles, I added some “please comment on this” text to the bottom of the post.

View Mockup With These Fixes

  • Finally, I wanted to tighten up the sidebar a bit and make those clearly delineated from the rest of the content on the page. Solution: I added a sort of “bracket” to link the descriptive titles “Links” and “Friends” to the content they apply to. I wasn’t sure about using the vertical text at first, but I think this small element ties the titles to the content and sets off the sidebar nicely. The drawback here is that it may be a bit tricky to implement in HTML/CSS.

View the FINAL Mockup
Next: Part 4 – Archives and Contact Pages

Website Redesign – Part 2: The First Mockup

Part 2 of the Music-Slave.com 2007/2008 Redesign Series

Once I had a wireframe that I was happy with, I sat down with Photoshop to create the first of several mockups. I had left myself a good deal of flexibility within the wireframe to make lots of decisions later, so I spent a good deal of time trying different things out in Photoshop until they worked and looked the way I wanted.

I began by giving myself a canvas to work with. I design most Web pages to be readable, without scrolling, at an 800×600 screen resolution. Some people would say that this is overkill, and that 1024×768 is generally pretty standard. I can certainly see the case for 1024×768. But for this project there were a couple of reasons that I chose 800×600. The first is that when I’m old and can’t see, I’ll want people to consider my feelings when designing for the Web. The second (and probably more valid) is that the content I have to present is so limited anyway, I don’t really need the extra real estate that anything bigger than 800×600 provides. I want to limit the column width of my main content (that holds articles like this one) so it is easy to read, and don’t have enough other content to justify and/or fill up the extra horizontal space.

So I created a canvas with a width of 775 pixels, which should fit nicely in a maximized browser at an 800×600 resolution. I created some guides in photoshop to keep everything aligned properly, and set out the basic areas for the banner, navigation, and content. The other miscellaneous items – links, photos, and RSS Subcription Center would be placed in their respective places later. Because I really wanted to use some form of the guitar masthead that got such good feedback here, I decided to stick with the browns, tans, and oranges color scheme for the time being.

Design 1a
Click on the image to enlarge.

Now that the “base” had been painted on the canvas, I began to fill in the respective content areas. I won’t bore you with all the details of each decision that was made, but the final result is shown below.

Design 1b
Click on the image to enlarge.

A few words on some of the tools I used during the process:

  • iStockPhoto.com – As I’ve mentioned, my artistic skills are negligible, so instead of frustrating myself trying to create my own icons, I bought some. The icons you see in this mockup (both in the navigation and in the post information box) came from iStockPhoto. Specifically, they came from the satin series, by Scott Dunlap. I’ve found iStockPhoto to be an excellent, reasonably priced resource for images when designing for the Web.
  • FeedIcons.com – This web site freely provides the standard feed icon (shown to the right) in a wide variety of sizes and colors. I chose to stick with the standard orange icon.
  • Lorem Ipsum Generator – This tool helped me generate dummy text for components like the blog post and link descriptions. It is more useful than you would think.

Next: Part 3 – Do I Really Like These Colors? (a.k.a, The Most Subjective Part of Web Design)

Website Redesign – Part 1: A Failed Attempt & Some Wireframes

Part 1 of the Music-Slave.com 2007/2008 Redesign Series

A Rejected DesignTo the right is an attempted redesign of this site that I worked on back in the spring of 2007. It was unfocused and attempted to incorporate too many new and different design elements in a way that I found ultimately unsatisfying. Although a lot of work went into this design, I decided not to implement it until I could “fix” it. The necessary inspiration never hit me, so several weeks ago I began the process of designing a completely new template.

Since I was unhappy with my last redesign attempt, I also decided to refine my process. I’m not an artistic person, and any attempts at drawing generally lead to nothing but frustration. But I decided that it was important this time to start with something on paper. I went through several sheets (reams?) of paper, scratching and brainstorming until I finally came up with a wireframe that I liked.

The Final Wireframe
Click on the image to enlarge.

About halfway through the process I switched to graph paper. It helped me more accurately represent the proportions of the space I was trying to fill, and created a grid on which I could lay out the different components of the page. I divided the page into thirds, and found convenient spots for the limited content that I need to present on my site. You can see the notes I jotted down here and there. I even included a stick figure or two just to firmly cement my sketching ineptitude. I was generally happy with the result. You’ll see that there are still elements that were up in the air, fairly major things like how to display posts and post-information (date, time, comments, etc.), but I had some ideas to work with when I began the mockups in photoshop.

You can see from the wireframe that I wanted to add two new pages to the site: an easy way to access the archives, and a page for my contact information. With the addition of these two new pages, I needed a way to provide primary navigation. The inspiration for the giant faux tabs came from the Feed Icons Website. I really liked the visibility these giant tabs (and icons) give to the simple navigation required on a small site. So I wanted to incorporate something similar here.

Next: Part 2 – The First Mockup