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 calling it the Minima|eesm theme for its simple, clean and minimal design.

Minimaleesm

Previous design

This is the second time I redesign my blog. The previous design was done early of the year on 1st January 2009.

Previous design

I really like the previous design for its colourful header. But I needed a more flexible layout to accommodate bigger 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.

Inspiration

This time, inspiration came from a website I kind of stumble upon. It’s the Ministry of Type.

Design inspiration

I love its simple and minimal design so I decided to go for minimalist design.

What’s new

Let me explain to you what changes I’ve done compare to the previous design and how I did it.

One of the biggest change is of course, as you can see, clean and minimal. Besides, I’m using HTML5 and a little bit of CSS3 for this.

At the top of the page is my latest Twitter status grabbed from Twitter using the Twitter Tools plugin.

I’ve added the related posts as well (appears in single post pages only). This is a difficult one. First of all, I have to use the Yet Another Related Posts Plugin (YARPP) to generate the related posts. I’ve tried several plugins but YARPP gives the most accurate results compare to other plugins. But too bad it doesn’t generate thumbnails. So I have to modify the codes to use another PHP script timthumb to grab the first picture in the posts and generate a thumbnail out of it. I spent a few days doing that.

Next, the scroll follow thingy. It’s the post information and the comment form that keep following you wherever 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 something I am most proud of and spent the most time doing it. The timeline archive page. It’s accessible from the footer via the “View all posts” link. I saw it first at astheria.com and immediately I knew I’ve got to do this. The difficult part is not only I have to group all posts by month, but I have to calculate the distance between the posts according to their difference in days.

Beside all the big changes, there are other smaller changes as well like using icons from bwpx.icns project by Paul Armstrong, using the sIFR for replacing the headers with Helvetica Neue Thin, comment author’s avatar grabbed from gravatar.com and also the next and previous post navigation.

Conclusion

Of course this is not 100% done yet. I’m still making some minor changes here and there. But overall, I’m very very happy with the result. If you have any suggestions or bug report, please leave a comment.

Update: changed font embedding and scroll follow.

Sunday

This post is about Design

This post has 12 comments

1

CommentNo. 1

Ryan15 November 20097:07 AM

Minimalism is in! The timeline is neat. =)

CommentNo. 2

wong15 November 20092:25 PM

Mini o~! Like the timeline too, but the follow scroll a bit annoying 😛 Slower?

CommentNo. 3

Ted15 November 20092:50 PM

I love it! Clean & gives the sense of pureness. Can’t wait to see it 🙂

CommentNo. 4

Dan15 November 20092:50 PM

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

CommentNo. 5

Richie Chin15 November 20095:40 PM

congratulation!!! cannot wait for more interesting big picture content.!!!

CommentNo. 6

Kevin16 November 200912:25 AM

Cool and nice… cant wait to see bigger picture on ur upcoming post

Author’s CommentNo. 7

Dennis16 November 200910:23 AM

Thanks guys!!!

@Dan
Yes it’s called Twitter Tools I mentioned 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 awesome! ultimate focus on content reading. really easy and pleasing to read now. Oh, and the helvetica neue thin… love it!

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

It will suite more to your theme, milimaleesm, if you remove that function.

Again, Congratulations!!!
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 minimal indeed. hen mei~

Post CommentComments are being moderated

or

Connect with Facebook