New site design!

Welcome to the new and improved I’ve had this idea for a site redesign for a while, but finally got it implemented thanks to the hard work of Naomi Most. The old site was a single 420 pxl column (no sidebars) with a huge rotating banner that pushed the blog content off the page. The new site has a much shorter header, wider columns and a sidebar with widgets.

Overview: I tried to make the new site feel like you were looking on my art table in my office. Paperclips, handwritten messages on the backs of receipts, and art scrawled in the corners of ripped pages from old paperbacks. The top banner automatically rotates with each page refresh (go ahead, try it out… I’ll wait). The image icon on the top right rotates every half hour. There are currently 12 headers and 30 icons, but I hope to keep adding more each month. Maybe even adding submissions from friends and readers into the pool.

About the header: The one thing that I loved about my old site was the rotating images on the banner. This was a cool surprise that Bill Streeter built in for me when he was making the original site (thanks Bill). I knew I wanted to keep a random-image type feel, but not as tall. If you look at the wide banner, you’ll see hand drawn “logos” on old pieces of paper. I wanted these to look and feel like something I would have drawn when I was a teenager, so they are largely inspired by old video game posters. Like this Dig Dug themed one (drawn on an envelope from a creditor):dig dugged

About the paperclipped icon: This is a rotating image too, but instead of switching with each refresh, this icon only changes every 30 minutes. The main reasoning for this was to keep people from seeing the whole pool by just click refresh all the time, but I also thought it would save on loading time from page to page. This way they will hopefully see a different image with each visit. Most of these papercliped images are self portraits or photos of myself, but some are tangentially related (such as paintings I did or photos of yo-yos etc). If anyone wants to create any “DocPop” portraits, I’d be glad to add them to the pool.

About the sidebar: I love Google Reader… not just for reading my RSS feeds but also for the note sharing and social aspects of sharing and commenting on my friends shared articles. Adding link to my Google Reader Shared page was actually one of the main factors that finally got me to redesign my site! Links to Twitter, Flickr, my band, and everything else area  given, but that side bar’s primary function is to promote those shared links. BTW, the font used in the header links and side bars links is my Hellavetica font.

About this column: My old blog was only 420 pixels wide. So glad to finally have an extra 136 pixels to play with. Should make reading comics easier from blog posts.

About the shop: It’s fully functional now! I just added a lot of goodies like leather pen wraps and wallets.

About the contact page: I love this gag. If you click the image, it takes you to a captcha protected email link.

About Popular: This is the last bit of the puzzle. I figure a bunch of people may find this site and say “Who is this guy… What has he done… Why should I care?”. So the Popular page should serve as a way to answer that question. My goal is to have a series of thumbnails and brief descriptions that will serve as links to some of my neater accomplishments (ie comics, memes in real life, music). I’d love to have a plugin that made data entry easy, plus could randomize the links with every new page load (keeping with the random image theme at the top of each page). Here is a mock up of what I would LIKE to have happen:
help me find this plugin

Thanks again to Naomi for her work on the new site, Bill for his work on the old one, and as always to my midwestern BFF Schalicto for hosting the site.

Tonight I’ll be having a “site launch” party at Benders at 7pm. Come join me and friends as we dine on sushi at my favorite bar.





11 responses to “New site design!

  1. No Cash Comics Avatar

    I'd be interested in how to code the Fav Personal Prod section too, I'd like something like that for my page.

  2. DocPop Avatar

    Naomi could say for sure, but I believe she used the Header Image Rotator plugin. You can find that here

  3. Naomi Most Avatar

    Yay! This was a really interesting and fun project. Everybody better leave comments of praise and adoration. Anything exploding, please send swear words my way.

  4. Naomi Most Avatar

    Yeah I've started thinking about this a bit. There are a couple of good ways to do it…

  5. DocPop Avatar

    oops, sorry. Misunderstood the question.

  6. Naomi Most Avatar

    Actually, image rotation is handled internally in the DocPop theme by two little scripts I wrote (one for the random banner, a different one for the half-hour-rotating banner). No plugins required.

  7. chuckmoulton Avatar

    Great looking site! The image rotation is a nice touch.

    I hacked around in WordPress a few years ago to roll a simple theme from scratch for my own website… it's not for the faint of heart.

  8. Stan Heller Avatar

    Congrats on the new site.

  9. DocPop Avatar

    Thanks for the comments everyone! It's always nice to hear feedback at the end of a project like this. Hope ya'll continue to check out the site frequently.

  10. DocPop Avatar

    Thanks for the comments everyone! It's always nice to hear feedback at the end of a project like this. Hope ya'll continue to check out the site frequently.

  11. […] neat idea: display the latest picture from his Instagram account as a dynamic piece of his layout. I coded his theme about a year ago and we included a rotating image in the corner that’s swapped depending on the time of day […]

Leave a Reply

Your email address will not be published. Required fields are marked *