Bold Feature Rundown

It’s been a month since I launched the redesign of Random Process, in the form of Bold. I’ve been massaging some rough spots since then, and there’s a big list of to-do’s still left in my OneNote notebook. Now, here are some more detailed thoughts when I went about creating this new design.

I don’t profess to be a graphics artist. My Photoshop skills are pretty meager. Yet at the same time, I’ve wanted to add some more character to my designs, which have traditionally been pretty dull. This time, I turned to a couple of interesting colors to liven things up. I really can’t say there was any technique in picking the shade of blue and orange. Nevertheless, I rather enjoy how they mix.

As you may have noticed, there are no sidebars, per se. Consequently, much of the miscellaneous content that took up that space in the past has essentially disappeared. This was intentional, with the reason being that there will eventually be a permanent homepage, which will contain the things that don’t quite fit in with the blog nature of this site.

The lack of sidebar(s) also puts the focus directly on the content. Because the homepage will be the portal to other forms of content, I can focus solely on the writing here. In that same vein, the blog index now shows full posts, instead of one feature and then excerpts only. This translates into less clicking and more reading.

The single column layout also gives me much more flexibility in presenting different types of posts in different ways. As photography is becoming a bigger part of my interests (and subsequently, a bigger part of the posts here), I felt confined by the approximately 500 pixel wide content areas I had to work with. I want to showcase larger images, and this new layout allows me to do that easily.

Of note, the archives section of the site has been completely redesigned. I used a fancy AJAX archives plugin in the past, but I wasn’t happy with the navigation, which was simply a giant list of dates and posts. Instead, I’ve created a table-like structure, where the user can select both year and month to drill down into the archives.

The same general format is used for the search and category pages as well, although I haven’t quite figured out what I’m going to put on the side for the category version. Meanwhile, the search results page will throw up another search box if a lot of results are returned. I figure the user might want to refine their search if it happens that what they initially searched for returns too many results to go through easily.

Finally, to keep with the WordPress times (e.g. version 2.7.1), I’ve included support for threaded comments. The new comment function, wp_list_comments, is nice in that it eliminates a lot of code for the designer and surfaces so many classes with which one can modify the look of comments. Unfortunately, creating a custom callback to use a completely different HTML layout means all those useful classes, which identify things like odd/even posts, author responses, and more are lost. In addition, the function itself isn’t well documented on the Codex, so I had to reference other sources, and rip out my share of hair, fiddling to get things the way I wanted. I’m planning on writing a few tidbits for others in the same position. Even Otto’s excellent post didn’t quite do it.

I’m pretty happy with the design overall, and with this semester as horrifically busy as it is, there’s probably little time to make major changes even if I wanted to.

Introducing Bold.

I gave a small sneak peak at the overall redesign I had planned for random process early in the year, and a couple weeks ago I mentioned I had started on the implementation in earnest. Now, you get to see the fruits of my labour, Bold. For those of you reading this in a feed reader, now would be a good time to drop by.

I’ll write a much more complete post on my design philosophy and the key features, but for now, I’m hoping to get some feedback, mostly to ensure things aren’t broken all over the place. I’m perusing the site, looking for bugs, but if everyone helps out, it’ll be a much quicker task. Key things to focus on would be the threaded replies of WordPress 2.7, which are now supported, along with the archives.

I’m no where near done implementing all the features I want to, but the core is there and I think it’s a big step up on what I had before. I’ll roll out incremental updates to the design over the next little while.

I hope you enjoy the new design!

Design Sacrifices

I think there’s a fine line that needs to be drawn between fancy and functionality. I’m a little guilty of crossing that line in my new design, the late stages of which you can find over here. When I was drawing up the plans for the new design, I threw in practically every fancy feature I had seen from around the web: instant search, sliding menus, stuff fading in and out, and cool little image popups (lightbox). A lot of it was just plain cool – and served very little purpose other than to grab your attention in hopefully a good, but perhaps a bad way as well.

It’s also co-op interview season at the University of Waterloo again, and at my interview for a web development position at the Bank of Montreal, I found myself being very hypocritical. As a response to the question ‘what are some characteristics of a poor web design’ I answered everything I was putting into my own web design, namely too much content hitting the user all at once and putting in flashy little apps just for the sake of having them. The idea is to use these little extensions to help in creating a more enjoyable and efficient browing session. If it’s there but serves no purpose other than to show off your skillz, it probably shouldn’t be.

So with that little revelation, I went through my little javascript folder and realized 250kb is waaayyy overkill. Of the features I’ve implemented (live search, sliding navigation and comment panes, live commenting and lightbox) the most useful is the live search. After that is probably live commenting. Lightbox I’ve decided to get rid of and perhaps I’ll replace the sliding panes with a simple show or hide with a few lines of js. Hopefully that’ll not only make my external scripts much smaller, but also remove some of the feature clutter that’s gathering.

Expect to see a fairly final version pop up here in the next day or two.


Update May 26, 2006: Whipped up a new version without LiveSearch or Live Commenting.

Due to popular demand ( 😛 ) I’ve wrapped up the theme I’ve been working on over the past week into a nice little zip file and putting it up for downloading. Hemmed is based off of the Hemingway theme but is a fixed width and adds a small sidebar. It’s now white, gray and blue. I loved Hemingway’s bottom bar which I decided I just had to have. I’ve stripped away the administrator options stuff however. I honestly didn’t feel like tackling that whole part of theming just yet and I needed something quickly for my site redesign. In any case, I may add it back in later on, but for now what I’ve got is working well for me.

Hemmed Theme

The theme is optimized for 800×600 resolution screens and requires a plugin to make it look as good as it can. The LiveSearch sort of broke my XHTML validity, as the autocomplete attribute is, well, not actually a real attribute. That’s the only error I get.

Since the main page uses excerpts, with the default excerpt function, html tags will not be parsed. As a result, any styling you may have for the post content will not show up in your excerpt. This is somewhat problematic, especially if you’ve got lists, links, and whatever else near the top of your post. It just doesn’t look good! Consequently, I’d recommend using the plugin the_excerpt reloaded to get around this little problem. The index.php file will use the_excerpt_reloaded function if it exists (will only exist after you activate the plugin) or revert to the default the_excerpt otherwise.

Another plugin which is useful is the recent comments plugin. There is an if clause in the sidebar.php (really the bottombar) which will enable the block to display recent comments if this plugin is installed. Be aware that you can only fit three modules into the bottom bar for now. I plan on working around that limitation later on. So you can get a view of the demo right here.

The stuff you will definitely need is right here:

I’ve created a new version for the people who have problems with the AJAX features working properly. Hopefully this will fix those issues.

Additionally, if you want those two plugins mentioned above (I’d strongly recommend it), you can get them here:

The Excerpt Reloaded
Recent Comments

If you’ve got any questions or issues with the theme, feel free to leave a comment.

[tags]wordpress theme, hemingway[/tags]


Update April 2, 2006: Added support for widgets as well as fixed a few visual issues.

Wow, I’m on quite a roll, this being my second theme in two days. It’s called Altitude if you hadn’t picked that up from the title. 😉 It’s a ‘chilly’ feeling theme with lots of light blues and whites. It’s again quite relaxed as that’s what I sort of aim for in most of the themes I’ve created so far.

Altitude theme

It’s once again optimized for 800×600 screens and is two columns. There’s support for ELA, a theme switcher and recent comments as per usual. The demo can be found here. Use one of the following links to download to your heart’s content. Added support for WordPress widgets as well. (Apr 2, 2006)

Enjoy responsibly. 😉

[tags]wordpress themes[/tags]