After months of slacking off, I finally got round to doing something I should have done way back in March: I’ve redesigned the site’s look!
When I switched over to Drupal I used the Minnelli template, a default template that comes with the program. Don’t get me wrong, it’s a very nice and functional template, but being a graphic designer and using a standard template on my own site is a bit… well, shameful.
It took me a few hours yesterday to come up with a design that’s been more or less stewing in my brain for ages. It took the better part of the last 24… well, 32 hours for me and Samir — well, mostly Samir — to convert it from a graphic in Inkscape to a working HTML and CSS template.
This is the first time I’ve worked with the guts of Drupal, and it’s been an illuminating experience. In my previous CMS, Pivot, a lot of the functions were handled in the backend’s configuration, which meant that the template was more of a ‘wallpaper’ and it would take me about a day after it was ready to get all the right settings done in Pivot admin to make it look like what I wanted. Drupal is far less, um, guided and that is really it’s strength. You can pretty-much do anything with this CMS if you know enough PHP programming (I do not). You can probably run an entire small country using Drupal.
Unlike most people, as a old school techie I warm to complex and highly tinker-friendly things like this. In order to get the words ‘read more’ and ‘2 comments’ to work right and reposition them in the right place, we’ve had to put in a dozen or so lines of PHP code, most of which sounded like Greek at first, but have now started to make some kind of sense.
The final result is a design that is 99.99% exactly like the Inkscape mockup I made yesterday — usually in the conversion things don’t always look quite the same — and it’s certainly the tightest, most finished layout I’ve done so far.
I like it — I like it a lot, actually — and it’s a lot more functional than the older one. Post categories, for instance, have been moved up to under the title of each post, and no longer jostle for space with the ‘read more’ and ‘comments links like they used to (Amit, you should find it easier to read. When a post was under several categories that area would get really messed up).
Please note that since I’m not an idiot I don’t use Internet Explorer, and this design may not show up correctly in IE. It has been tested in Firefox and is rendered correctly in Mozilla browsers. I know that in IE6 the Journal graphic on top doesn’t show up well; it may be better in a newer version, but I figure that jumping through hoops (and trust me when I say it’s like pulling teeth) to get something to work there is only encouraging Microsoft to continue to make crappy non-compliant browsers.
So there.
There are now two sidebars while still retaining the same width on the main content, so now you don’t have to scroll halfway down the page to see the recent comments (but you all subscribe to the Comments RSS feed anyway, don’t you? Hmm?). I feel it’s a better use of the space, and it allows me to have more important things like that picture of me giving you a big, loving smooch on every page.
*mwah*
Believe it or not, this is only the third custom template I’ve ever done for one of my own sites. I’ve actually used more templates by others than my own! Some of you may recognise these:
This design was on the old iLevel page, my first non-blogger blog. It came in around 6 months into my using that site which ran Greymatter. I did this design on vacation in India on a 166Mhz Pentium 1 laptop with a wonky power cord, uploaded over a 56K connection. It was my first experience with CSS and was great! I still love this layout and may end up reworking it as a standalone free template for other people to download and use someday. You can even read all the old content from that time in the ilevel.prohosting section of the journal (there are some nice photos there. If you’ll recall, iLevel was almost exclusively a photoblog).
This was the template I used on my last free host, and indeed it was the template that the site was running until March 2007. I was using Pivot as the CMS for a year or so — and used a slightly personalised version of the popular Kubrick template — before designing this one (hmm, spotting a trend here). While I like it I’m not really in love with it anymore; it doesn’t quite reflect the site. Again, it might return someday as its own thing.
If you’re wondering why I didn’t just use some of those old looks (I don’t think they’ve gotten old or outdated) it’s because the site as it is now would not be best suited by those templates. The look of a webpage is a very important thing, and it should complement the content and the personality of the author in order for the site to grow. allVishal.com is not iLevel, nor is it the site that it was a year ago. Sure, the journal (that used to be the blog) has all the old content for archival purposes, and it will continue to have photos and sketches and strange musings, but a website is more than just a blog for me, and I want to explore all of those possibilities. This new layout will be a better canvas on which to do that.
I’m actually one of those old crones who remembers a time before blogs, when we just had websites, and believe it or not those were wonderful things in their own right. I love the blog medium, but to solely focus on it and forget everything else the internet and the HTML page is capable of is like abandoning books because magazines and newspapers have been invented (I stole this analogy from my brother, amongst several other things).
Anyway, I hope you like this new layout (tell me if there are any bugs!) and now that I’ve decided on a visual look I can get to work on the rest of the site’s content!
V