Et Voila! Blog Redesign Completed
I’d been thinking for some time about changing the design of this site; 2-, 3-, 4- columns, understated or bold, and which features and plugins to include/exclude. I also started to build my own theme from scratch, then came across the Grid Focus theme by Derek Punsalan. The old 2-column theme wasn’t, I felt, making good use of the available space, and 4-columns melt my brain with info-overload. A quick look at my logs, revealed that just about no-one uses 800*600 screen resolution to view this site, so I settled on three columns. I’ve hacked the theme and added a header image. I am concerned that this image doesn’t say “design”, but I like the colours and contrast, and I wanted to use a photo I had taken myself as opposed to a stock image. Here’s how the site used to look:
After reading David Airey’s post about Adsense, I decided to relegate it to the third column, and move it way down; I intend to do away with it completely, but need to find an advertiser that fits snugly into the theme of this site.
The old design was much brighter. This time I’ve gone for a subtler more “understated” theme simply because it reflects my own design and my subjective design preferences.
The thumbnails in the post snippets took a while, but in the end proved quite simple, thanks to WordPress. The post thumbnails are not generated by a plugin (though I intend to write a plugin to do this), but are the result of a couple of lines of code and the brilliantly useful WordPress Custom Fields.
The WordPress documentation on Custom Fields is confusing at best, but once I stumbled upon this post about How to Use Custom Fields, I was ready to roll. This is how it works
<div class=”entry”>
<p><?php $mythumb=get_post_meta($post->ID, chichaithumb, $single = true);
if($mythumb!=”) echo ‘<img src=”‘ . $mythumb . ‘” class=”entrythumb” />’; ?>
<?php the_content_rss(”, FALSE, ”, 68); ?></p>
</div>
Really simple, isn’t it; just a single line of code (in bold). All we’re doing is pulling out the value for the custom field “chichaithumb” (chichai is Japanese for small :)), and calling it $mythumb; then, if it has a value, we just echo it into the post and apply a little CSS to it so that the post copy wraps around the thumbnail. When I have some time, I’ll re-write this as a plugin. (I also need some help writing a plugin to wash my dishes and clean my laundry).
Other changes I’ve made include Editable Comments thanks to InspirationBits’ post; I’m the god of typo#s (sic.), and I hate that brief moment–usually about 0.3 seconds after clicking “Submit Your Comment”–when I realise that I’ve inadvertently pasted my credit card details and admin password into the comments field, for the whole world to see.
The Snippet Posts are an experiment. The idea is to display short snippets in one of the sidebars - not snippets of main posts, but “mini posts”; I often find things that I’d love to share, but they don’t merit a full-length post; perhaps just a web site I like the look of, a good piece of graphic design, or a design- or art-related event. I may even include some of my personal art/design projects (sculptures, paintings, screen prints, etc.), and maybe a little more info about me. I’m sure you’d all like to know more about Japan (yawn?).
Also considering broadening the scope of this blog to include architecture–does that interest anyone? I’m always open to constructive criticism, so feel very free to tell me what you think about the design, about the content, about anything. I’d like to say a big thank you to all my readers and my favourite blogs (you know who you are).
Another idea is to have a fairly prominent banner displaying/advertising the sites of my top commentators, so long as my top commentator isn’t “buy-cheap-meds”.
Though this re-design is now live, I have plans to change/improve it further–especially the content of the second and third columns. Any ideas?
Comments and feedback make my day, so go ahead…make my day.
17 Comments, Comment or Trackback
David Airey :: Creative Design ::
John,
I think you’ve made a big improvement over the previous design, so great work. I like the images you use in the third column.
Had you thought of adding a ‘recent posts’ section or ‘top articles’?
May 17th, 2007
David Airey :: Creative Design ::
As for the architecture, it’s something that interests me for sure, but what’s important is how much it interests you. If it’s a passion then I say go for it!
May 17th, 2007
johno
David,
Thanks. The Recent Posts and Top articles is a good idea. I think I’ll incorporate it - thanks for the suggestion. I think I’ll have those images in the third column link to my own photography page within the site.
And, yes, Architecture is one of my great passions. I used to be an Architectural Illustrator. Appreciate the encouragement, and keep an eye out for those Architecture posts…
May 17th, 2007
Tara
looks great, I like the snippets post too, great idea
May 17th, 2007
Aaron :: miLienzo.com
Hi johno
I’ve been subscribed to your feed for a while but this is the first time I’ve had a good look around your site - it’s looking great, nice clean and modern. Lots of right-angles. The header image suits it really well.
I look forward to reading more about architecture
And expect a desert island design soon…
May 18th, 2007
johno
Aaron,
Thanks for the compliments. I’m a huge fan of Tadao Ando. In fact, the header image photo is of Benesse House Art museum, (built by Ando) on the island of Naoshima in Japan (not far from where I live). I took this photo on Monday.
I look forward to seeing your Desert Island Design(s)…can’t wait.
May 18th, 2007
johno
Tara,
Thank you. Pleased you like the snippets post idea
May 18th, 2007
richardthefourth
Like it. Very clean and professional.
May 18th, 2007
Clara
I like the new layout. Easy to read, but I liked the old design too. The header image is your photo?
May 18th, 2007
inspirationbit
it’s so refreshing to see that not everyone got spellbound by “Web 2.0 style” craziness. Way to go with the right angles, straight lines and visual interest with the images. It feels like an architect was crafting this site.
btw, what’s that building on the header photo? Looks like a school yard. I like the illusion of depth I feel when looking at it.
P.S. I like the bits of humour in the Ajax Edit comment warning section
May 19th, 2007
johno
What eloquence! Thank you for the compliments, Vivien. A long time ago I worked as an architectural illustrator. Architecture is one of my great passions and influences.
The building is Benesse House Contemporary Art Museum on Naoshima Island in Japan, built by one of my favourite Architects, Tadao Ando. It’s one of the most wonderful places on earth - magical. You can see more about the “Art Island” at the Benesse House site and you can see the original version of my photo on redsil flickr.
May 19th, 2007
inspirationbit
WOW, looks like the Museum is built on a mountain/tall hill. A truly magnificent view and place. Thanks for the links.
May 19th, 2007
Nigel Burke
Great site, how did you get the link to flickr in the 3rd column?
And the categories in the 2nd column?
Nigel
May 29th, 2007
johno
Nigel
Actually, those images are just static images linked to Flickr.
However, if you did want to “dynamically” include Flickr images while keeping them to a pre-defined size, you could use a Flickr plugin with a little CSS tweaking - possibly just use the image as a background, changing the x/y position and hiding the overflow. I did consider doing something like this, but it’s a lot of extra work… if only I had the time.
May 30th, 2007
Julia Temlyn
I like it! It looks fantastic, and fits the site well! (I’m working on some grammar-oriented posts for you! LOL)
Have a super weekend!
Jun 2nd, 2007
johno
Julia
Thank you. I’m looking forward to reading those grammar-oriented posts. I’ve just bought a copy of Joseph Williams’ Style–Towards Clarity and Grace. Already–just leafing through it–I’ve learned some invaluable tips.
Jun 3rd, 2007
frank
I would like to know how to place images in the front page or how to tweak the: , if you could show me this part of your code to understand it, please and thanks….
Oct 19th, 2007
Reply to “Et Voila! Blog Redesign Completed”