PrasetyaMS.net

Introducing, SMPL05, the 5th installment of SMPL series, templates made by me for Wordpress, a blog engine. SMPL05 aims to be as space efficient as possible, by minimizing the use of texts on main and index pages. Full text is available after clicking each individual post, represented by an image related to the post. Navigation is kept at minimal, and everything tries to appear as clean and simple as possible.

The Idea

One day I was stumbling on the net and came across this cool website of Derek Punsalan and immediately surprised at how the front page looks. It has no banner, simple top navigation buttons, simple sidebar and footer (too crowded for my taste), and a genius way of showing the latest posts to visitors: using image hyperlinks. No excerpts, no summaries, no long full-text bodies, just big blocks of images, overlaid by the title and comments count. Incredible! Each image represented the content of the post. It looks simple, you know immediately what a post meant by looking at the image. If you click an image, the full-text post comes out. He released it as a Wordpress theme called “Unstandard”. How fitting.

After seeing this I had an idea to make similar template, but with some alterations. The idea is to make the front page looks like the Unstandard theme. I wanted to take it even further by adding almost the same look to the index page, which is displayed if you browse the categories or the archives. So now, all pages except the single.php and page.php page, will have image-based posts display. As for the single.php and page.php themselves, they will display the large version of the image on top, and the full-body text beneath, along with comments list and comment form. Comments are not availabe on page.php.

The Resources: The Design

I immediately downloaded Unstandard and tinkered with it. The routine in displaying the front page is so simple yet brilliant. I’ve never known the use of Wordpress’ custom field, until now. It’s some kind of metadata for a post. Cool.

The Resources: The Color

The Color used in SMPL05 are black#101010, grey#dedede, orange#f26522 and red#9e0b0f. I picked the colors from Photoshop’s default swatches. I used no color theories or whatever, just plain instinct. Besides, black+red+white looks cool.

The Resources: The Pattern

The pattern used in SMPL05 is called “Humidor” which I picked from DinPattern, you can find a bunch of other cool patterns there.

The Coding

My usual routine of designing wordpress template are as follow:

• Draw the draft in Photoshop, make it a flat image used as a background for the design
• Code the HTML and CSS, adding/removing things along the way while simultaneously testing the design in at least two browsers, FF and IE. The rule is, if it works good on both it’ll look good on the rest of modern browsers
• Slice the finished design as Wordpress template, this is quite difficult to do since I must compose the PHP/WP code required to display things correctly according to the design
• Voila!

But that time, I skipped the first two steps and went straight to the third step. That said, I was coding from scratch.

To ease my pain, I used 960 Grid System as the foundation. That way, it’s far easier to layout the design. I also used, as always, Eric Meyer’s reset CSS. Those two are the most important layout tools (rules?) ever.

The HTML coding was pretty easy then, thanks to the above tools, the hard part was styling it. It would be easier if only there’s no such browser named IE, it always break something. I had, like, 5 occasions where something broke in IE and I had to make adjustments as necessary. I could use hacks, of course, an I did, although I intended the CSS to be as clean as possible. It is inevitable, IE breaks harmony.

After some hours of text-editor software abuse, finally the template is complete. Many thanks to SciTE, editing couldn’t be easier. Imagine if you could make your editor always-on-top and test the result on the browser window behind and back to editing instantly? Just by hovering your mouse over the editor to type, save, hover over the browser, hit F5, see the result, and so on, without alt-tabbing or clicking menu bar? Right. That’s also what I meant. For this to work you need to set your mouse to auto-activate-windowon-hover. Alright, enough propaganda, back to business. Several hours later was spent on customizing various typography stuffs and putting posts in. So far it works good.

I plan to modify the template as it goes on, adding this and that. But for now, enjoy!