A Site Redesign for Spring 2008

After taking a break these past few weeks, I decided to reboot the blog and point it in a new direction.

Part of the motivation was a desire for something warmer, more spacious and more readable to accommodate longer bits of writing and tutorials. As for the shorter bits, I’m also posting links to Twitter. I still want this site to be a ‘final destination’ for readers rather than an index of outsourced content as Zeldman has noted.

Design

Design-wise, I wanted something catchy but not trendy. I mostly improvised and found myself riffing on the textures and colors from my band’s EP cover which also favors the rich brown-orange-blue palette. Otherwise I just improvised and found that ideas came quicker when I didn’t force myself to plan — the benefits of being my own client.

Mostly, as you see from the homepage, I wanted to avoid the constraints of the typical blog format and use WordPress make the content more modular. This should make life easier next time I want to redesign.

Browser Compatibility

In my paid projects I will continue to temporarily support Internet Explorer 6, but this site no longer supports it. Users will still be able to navigate the content, but display and DOM issues will not be fixed for browsers more than two years out of date.

Boy, does that feel good to say.

Content

I’ll continue to write about the smaller details of building websites, especially when it comes to WordPress, but I also want to cover more big-picture issues that come with planning and strategizing larger websites and dealing with client feedback.

Functionality

The new site uses fewer template files than any theme I’ve developed, yet is significantly more powerful. Much of this is due to WordPress’s conditional tags. Instead of creating custom page templates for everything, I inserted a number of conditionals within page.php and both sidebars to dynamically determine which content to display. I also used applied classes and IDs to the <body> tag to control layouts. All in all, the theme is much ‘smarter’ while remaining compact.

On that note, I also used the loop in some non-standard ways throughout the theme. I created a unique template called loop.php and inserted some conditionals to make it behave differently in different contexts.

As far as solving problems, the feature I’m most happy with is the ability to use a dropdown menu for subscribing via RSS. I mentioned awhile back that I thought the current method of offering feeds was unintuitive. Users unfamiliar with RSS typically click the orange icon, are greeted with XML code and have no idea how to proceed. Offering them the one-click ability to add the feed to their favorite reader seems, to me, an improvement. If you have suggestions for more feedreader support, please let me know.

Finally I added some javascript zoom tricks to the Work page and also to the Archives and Category menus. In my experience, I only use those menus to navigate blogs a very small fraction of the time, so I thought I’d experiment with minimizing them.

But enough self-indulgent explanation — I hope you enjoy the new direction!

  • http://www.oakinnovations.co.uk/blog/ Simon

    Looking good Darren. I think the typography is especially good and works well with the colour scheme. The one possible oversight is that there’s no easy way to get the URL of your RSS feed. Clicking on the Subscribe by RSS link just gives links to subscribe in various web apps, which leaves desktop app users a bit in the dark.

  • Darren

    Thanks Simon. I’m working under the impression that most current feedreaders (web or desktop) will auto-detect a feed if you simply enter the site url. Is that still not true for some? Also both Firefox and Safari feature an RSS icon in the locator bar.

  • http://mikemartinracing.com mike martin

    looks awesome, is a public release coming?

  • http://1bigidea.com/blog/wordpress/ Tom Ransom

    The new site is looking good.

    Let me offer my new WordPress plugin that urges site visitors using MSIE 6 to upgrade. Uses the javascript at savethedevelopers.org. I’d appreciate any feedback on the plugin if it suits your site.

  • http://www.ashhaque.com/ Ash Haque

    Looks amazing, great job Darren!

  • http://daus.trala.la daus

    Nice redesign. But the colorscheme still looks like Rob Goodlatte to me.

  • http://www.happinesz.cn sofish

    It is more clear than the old one…I love it!

  • El-Bowes

    Alhamdulilah! Just what the doctor ordered. White text on a black background was sending me cross-eyed. Many thanks indeed for thinking of the poor end-user. This is lovely.

  • http://monkatwork.com Adam Kayce

    Great site redesign, Darren — while I can’t say I’m a big fan of these particular colors, the layout sure works, and the behind-the-scenes functionality is impressive and inspirational (spoken as only a designer could.)

    Thanks to Firebug, I’m learning tons. Especially the ‘custom body tag’ implementation… very cool stuff. Anything to keep the number of page templates down makes awesome sense to me.

    Lovin’ it… and thanks again for being so transparent about your methods!

  • Darren

    Thanks guys, I too am glad for the change of pace. The old site was beginning to feel like a crawlspace — cramped and dark.

    Regarding the colors, as I mentioned they were influenced by my band’s old CD cover, but I took spent some hours in Kuler mixing them, warming them up and making them a bit richer. In the past I’ve always gone with a more sober palette, and this was an opportunity to do something a little more poppy. Any designer will tell you, color palette is a crucial sticking point when it comes to pleasing clients, which in this case, is me ;)

    Anything to keep the number of page templates down makes awesome sense to me.

    So far so good — the theme is considerably more manageable than the last one.

  • http://thenestedfloat.com Matt

    Outstanding work – and congratulations! I’ve been looking forward to seeing the finished product since you first mentioned it was in process some weeks ago.

    I for one like the color scheme a lot, especially with the header image on the homepage. Site wide, it’s subdued, but with a nice amount of energy. The js flourishes are nice, too – just flashy enough to be fun.

    Oh, and for the record, sifr *would* have been a bear to get working properly for your headline text. I would have totally made the same decision you did and stuck with standard image replacement.

  • Belinda Carson

    Good job Darren! I am also happy to have a color scheme that is easier on the eyes. Very fabulous! Thanks again for being a WP hero!

  • http://noelhurtley.com Noel Hurtley

    Love the new site Darren. Even the comment form is top notch, something a lot of designers ‘tend to overlook.

  • http://www.gathadirect.com.au gathadirect

    Have just seen this in the CSSmania feed — love the new look and colors.
    Just one one comment — the post headings overlap the red header in IE7, and are a bit difficult to pick up (at least for this person with bad glasses – grin).
    Love your work, Darren, and the site is certainly a final destination, rather than rehashed posting salad.

  • http://jaypeeonline.net Jaypee

    It’s about time! Hehe..great job on the new design Darren. I’m lovin’ it! Definitely looks better and also more organized than the previous one, plus it’s easier on the eyes. More power to you and your blog! :D

  • Darren

    @matt, noel & belinda: thanks! It was definitely intentional to have most of the site neutral for legibility, with smaller vibrant elements here and there. For the last couple months I’ve been designing my new kitchen the exact same way (mostly subdued greys with a few blocks of orange and green). I’ll post pics when it’s all done, though I’m not sure any sane person would want to see before/after pics of a kitchen (except my mom).

    @gatha: you’re right, there was a float-clearing issue in IE7, but it should be all square now. By the way, are you the same fellow who convinced me to turn the WP tutorial into a theme (Mimbo)? If so, I think owe you a beer or three.

    @jaypee: yeah it’s funny, when I designed the old site, I thought it’d just be for displaying screenshots in the portfolio. Then the blog kind of took off before I could address the issue of grey text on a dark screen and next thing you know I was writing long tutorials to the detriment of people’s eyes. It was a big part of the decision to redesign.

  • http://www.subasij.com a

    please visite this site : http://www.subasij.com

  • Aditya

    I must say your new design is quite refreshing. I was getting a bit tired of the old layout. This one looks mighty good. Great job Darren!

  • http://www.gitrknowswow.com Jesse Petersen

    Very nice re-design. I love the neutral color scheme. Nothing freshens up an audience like a new mod/theme.

  • http://vandelaydesign.com/blog/ Steven Snell

    Very nice! I like the color scheme.

  • http://www.chrismakarsky.com chris makarsky

    what a purdy site

  • Jennifer HT

    Great redesign, D. I think the information design, in particular, is a big improvement. But the old site was really nice, too….

  • http://www.bootstrappingblog.com Mike Smith – Bootstrapping Blog

    Doesn’t get much better then this. 100000X better then the old version in my opinion. Great job

  • http://wordpressgarage.com Miriam Schwab

    Hi Darren – I’m a big fan of your designs, and I always love your work. So please take my feedback as constructive criticism.

    Most of your designs make me go “wow” when I see them. This one doesn’t. It’s seems to run-of-the-mill for the standards you’ve set, and there’s bit too much happening. Your other design was dramatic and eye-catching. This is maybe too functional. I don’t know.

    It’s obviously way better than anything I could ever do, but it’s missing that wow factor.

    I hope you don’t mind me saying this.

  • http://www.darrenhoyt.com Darren

    @Miriam: I don’t mind the criticism. This time around I was really designing for something more spacious and readable, not so much on the dramatic side. I also did not want to design a wrapper so busy and over-eager that it would compete with the samples on the Work page. I think I wanted to give my design trigger-finger a rest and concentrate on organization.

    My tastes change all the time – it might surprise you that some of my favorite designs of the last six months are Design View, Astheria and Concentric – just the right amount of stuff going on there.

    But if I get sick of the design in another six months, I suspect I’ll just come up with something else ;)

  • http://wordpressgarage.com Miriam Schwab

    Yeah, I also like having control over my sites.

    I just discovered Astheria and I LOOOVE it, and these other sites you linked to are fantastic! Thanks for sharing – I’ve added them to my collection of nice blog designs.

    I have a feeling that your new design will actually grow on me, and then I’ll be sorry when you change it in 6/12/24 months!

  • http://www.headsetoptions.org/ Sunny

    Nice reboot!

    I notice one thing though that I thought I’ll ask, it has nothing to do with the design, but why is that you never capitalize the p in WordPress?

  • Pingback: Designing and Formatting Blog Posts for Readability | Vandelay Website Design

  • http://www.inspirationbit.com inspirationbit

    Hi Darren. This is my first comment here. I like your new design, especially its functionality. Although I do see your point in using a dropdown menu for RSS, it doesn’t work for me, because I don’t use either of the three RSS aggregators that you listed there. I use Thunderbird to read my RSS feeds, hence I can’t subscribe to your blog. Perhaps you could offer two alternatives for subscribing to your blog: dropdown and standard way?

  • Darren

    @inspirationbit: thanks for stopping by. All you need to subscribe via apps like Thunderbird is the RSS address, which you can get by clicking the RSS icon in the locator bar of your browser. Modern browsers make this standard, and in fact most feedreaders and email clients should be able to auto-detect the feed just by looking at the URI (‘http://www.darrenhoyt.com’).

  • http://www.inspirationbit.com inspirationbit

    huh, forgot about that RSS icon in my FF, thanks for reminding about it, Darren. I’m now subscribed. Btw, Thunderbird couldn’t detect your feed based on the site’s URI.

  • Pingback: Diseñando y formateando posts ~ Gran Impetu

  • http://www.eelcomartens.nl Eelco Martens

    Hello,

    I really like your new website! it’s great! Is there going to be a so called public release? The only comment I can give you is that I think that the blue menu is a little bit out of collor but I like it

  • http://josh.buddes.net Josh Budde

    Nice new Design – Liking how everything is formatted and all!

    I’d really like to know how to make a WYSIWYG Comment Editor like on your site.

  • Darren

    Thanks Josh. Most of what you need can be found here:

    http://www.darrenhoyt.com/js/commenteditor.js

  • Josh Budde

    Okay. Thanks!

    Where do I need to put the JavaScript in order to make it work? I have the CSS there and a div id of wysiwyg right about the text area for comments.

    What do I need to do?

  • Josh Budde

    I got it!

  • Pingback: 14 Design Retrospectives | Most Inspired Blog

  • http://www.freerainbow.cn freesky

    Look forward to your work

  • moshe rabeynu

    I had a nightmare last night and I am still shaking. I know there must be some deep and hidden meaning behind it and I am hoping that someone out there might be able to help me interpret this dream as Joseph helped the Pharaoh. I dreamt that I was the meat in the sandwich between Tzippi Livni and Sarah Palin, you know what I mean, that I was “Lucky Pierre”. But, in this dream, upon my awakening in the morning, I had a terrible taste in my mouth and found myself between Golda Meir and Madeline Albright. Oy, gottenyu!!

  • http://www.tmdesigner.it Tmdesigner

    ..a BIG thing… no Dubts!

  • http://www.clicknepal.com clicknepal

    Very good article on site redesign. thanks