dens|ee*

Minima|eesm

Sunday

This post is about Design

This post has 12 comments

Lo and behold!!! The all new theme of denslee.com is finally here!!!

I’m call­ing it the Minima|eesm theme for its sim­ple, clean and min­i­mal design.

Minimaleesm

Pre­vi­ous design

This is the sec­ond time I redesign my blog. The pre­vi­ous design was done early of the year on 1st Jan­u­ary 2009.

Previous design

I really like the pre­vi­ous design for its colour­ful header. But I needed a more flex­i­ble lay­out to accom­mo­date big­ger pictures.

So I decided to redesign. Although I’ve planned this redesign since August but I’ve got no time to do it until recently.

Inspi­ra­tion

This time, inspi­ra­tion came from a web­site I kind of stum­ble upon. It’s the Min­istry of Type.

Design inspiration

I love its sim­ple and min­i­mal design so I decided to go for min­i­mal­ist design.

What’s new

Let me explain to you what changes I’ve done com­pare to the pre­vi­ous design and how I did it.

One of the biggest change is of course, as you can see, clean and min­i­mal. Besides, I’m using HTML5 and a lit­tle bit of CSS3 for this.

At the top of the page is my lat­est Twit­ter sta­tus grabbed from Twit­ter using the Twit­ter Tools plugin.

I’ve added the related posts as well (appears in sin­gle post pages only). This is a dif­fi­cult one. First of all, I have to use the Yet Another Related Posts Plu­gin (YARPP) to gen­er­ate the related posts. I’ve tried sev­eral plu­g­ins but YARPP gives the most accu­rate results com­pare to other plu­g­ins. But too bad it doesn’t gen­er­ate thumb­nails. So I have to mod­ify the codes to use another PHP script timthumb to grab the first pic­ture in the posts and gen­er­ate a thumb­nail out of it. I spent a few days doing that.

Next, the scroll fol­low thingy. It’s the post infor­ma­tion and the com­ment form that keep fol­low­ing you wher­ever you scroll. It’s rather easy to achieve this effect. I used the jquery-scroll-follow JavaScript and with just a few lines of JavaScript and it’s done.

Archive

Ok, the next one is some­thing I am most proud of and spent the most time doing it. The time­line archive page. It’s acces­si­ble from the footer via the “View all posts” link. I saw it first at astheria.com and imme­di­ately I knew I’ve got to do this. The dif­fi­cult part is not only I have to group all posts by month, but I have to cal­cu­late the dis­tance between the posts accord­ing to their dif­fer­ence in days.

Beside all the big changes, there are other smaller changes as well like using icons from bwpx.icns project by Paul Arm­strong, using the sIFR for replac­ing the head­ers with Hel­vetica Neue Thin, com­ment author’s avatar grabbed from gravatar.com and also the next and pre­vi­ous post navigation.

Con­clu­sion

Of course this is not 100% done yet. I’m still mak­ing some minor changes here and there. But over­all, I’m very very happy with the result. If you have any sug­ges­tions or bug report, please leave a comment.

Update: changed font embed­ding and scroll fol­low.

Sunday

This post is about Design

This post has 12 comments

1

CommentNo. 1

Ryan15 November 20097:07 AM

Min­i­mal­ism is in! The time­line is neat. =)

CommentNo. 2

wong15 November 20092:25 PM

Mini o~! Like the time­line too, but the fol­low scroll a bit annoy­ing 😛 Slower?

CommentNo. 3

Ted15 November 20092:50 PM

I love it! Clean & gives the sense of pure­ness. Can’t wait to see it :)

CommentNo. 4

Dan15 November 20092:50 PM

Damn nice Den­nis!!! and how did u put the twiter updates? ada plug in uh?

CommentNo. 5

Richie Chin15 November 20095:40 PM

con­grat­u­la­tion!!! can­not wait for more inter­est­ing big pic­ture content.!!!

CommentNo. 6

Kevin16 November 200912:25 AM

Cool and nice… cant wait to see big­ger pic­ture on ur upcom­ing post

Author’s CommentNo. 7

Den­nis16 November 200910:23 AM

Thanks guys!!!

@Dan
Yes it’s called Twit­ter Tools I men­tioned in the post :)

CommentNo. 8

Se@n16 November 200910:32 AM

Less is more.

CommentNo. 9

kopiais16 November 200911:32 AM

heh…m late? hehe this is great *wings*

CommentNo. 10

Peter Yee16 November 20091:04 PM

this is awe­some! ulti­mate focus on con­tent read­ing. really easy and pleas­ing to read now. Oh, and the hel­vetica neue thin… love it!

but one thing thou, as i read­ing the post from up to down, the date dis­tracted my a lil bit. Even like wong said, it will still take away attention.

It will suite more to your theme, mil­i­maleesm, if you remove that function.

Again, Con­grat­u­la­tions!!!
Cheers!

CommentNo. 11

Dan16 November 20091:42 PM

osp .. didnt notice that .. thought it was only short entry 😛

CommentNo. 12

max17 November 20096:23 PM

woa very min­i­mal indeed. hen mei~

Post CommentComments are being moderated

or

Connect with Facebook