Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

Presenting teddY-risatioNâ„¢ Eta

First of all, I’m terribly sorry for being away from my blog for two weeks. It’s a personal record for being away for so long. The previous hiatus was 10 days – I beat it by 4 days! Heh. Okay, basically during that period I was trapped in the midst of my exams, ensnared by the repeated threats our lecturers threw at us about how hard the papers are going to be. But all thanks to them, I rammed up my pace and managed to not freak out when I read the question (yes, the papers were indeed hard).

Today is day 4 after exams. I cooped in my room for 4 solid days working on this theme. According to my theme count, this theme is the seventh theme I’ve made over a course of two years. So here it is, teddY-risatioNâ„¢ Eta, η.

teddY-risatioNâ„¢ Eta

So here it is, teddY-risatioN™ Eta, η!

The theme works well in Firefox 3, Safari 3, Internet Explorer 7 and Google Chrome. There is basic support for Internet Explorer 6 but due to incompatibility issues, the visual quality has been compromised for IE6 visitors.

Just as usual, I always have writeups for my new themes ;) Not only I write for my personal record but also to share with my readers of how this theme came about. I’ve included some links in the writeup, so if you’re interested in where I got the ideas from, you can find it out after the jump.

So here is a comprehensive list of the changes I’ve made:

1. It’s Sandbox again!

Oh boy, I just couldn’t stop loving Plaintxt’s Sandbox theme. It’s almost CSS free (sans the few necessary rules) and doesn’t require any knowledge of PHP – best for people like me! I must admit I don’t quite understand PHP and can utilise my knowledge of XHTML and CSS. So Sandbox is definitely where I will start off.

2. Typography

This theme is considered one of the most serious revamped I’ve ever made – the typography from the previous theme, teddY-risatioNâ„¢ Zeta, was not inherited at all. I’ve decided to create a new set of typography from scratch – in fact, the large-sized Verdana from the previous themes kept ticking me off.

My thirst for a better typography first started when I stumbled upon Ember’s blog. It just blown me away with his beautiful typography. I poked around a little, and I found Hemingway. Hemingway has been around on the Internet for downloads for quite some time but I didn’t know much about the importance of typography. After reading a book on it, I realised how important is it to have a readable and clean set of fonts – by choosing the correct font family, not overusing different types of fonts across the same page and colour.

For this theme, the major font family is Lucida Sans Unicode while the headers used Tahoma. The logo was changed from Calibri from the previous theme to Myraid Pro. I just love the way it looks like.

3. Layout

If you have visited this blog before, one of the greatest changes that you might not like it is actually the sidebar being switched position. Due to how the header elements are arranged, I have no choice but to place the sidebar on the left side.

The header section was slightly expanded to a height of around 300px or so, since I have to contain the gliding container in it alongside with the header menu. Designing the header was the hardest part because I had to decide the column width – and for the sake of consistency, subsequent sidebar and content container will have to inherited the same width.

The basic layout of the header section was inspired by  The Cosmic Machine’s Event Box page. I love how their logo appeared on the header and partially in the content. I didn’t exactly use the idea of the logo crossing the header and content border because that’ll require my header logo to be too huge.

I’ve used the 960 Grid System for the header and footer layout. I was forced to not use the grid system for the content area due to semantics reason – the sidebar should always load after the main content, but this is unachievable using the grid system. I stuck to the good old float and margin stuff.

4. CSS sprites

I always loathed the number of images that I have to deal with, especially when I am working on graphic intensive ones. After seeing how Jeff gave his blog, Perishable Press, a fantastic makeover, I peeked at his CSS code *weak smile* and realised that his backgrounds were CSS sprites.

This is how CSS Sprite works – images intended for different purposes are laid out in a grid, and then through CSS you will specify the background-position of the sprite you’re using. If you do check the background images of this theme (for Firefox users, this is easy!), it all breaks down into two big files – one is backgrounds.png and the other is small_icons.png. So throughout the entire layout, I am actually using that two image files but with different coordinates for each element.

5. Glider

The part I like about this revamp is that I can finally squeeze more content into the header. I was browsing through the CSS galleries when the glider on The Wojo Group homepage – very sleek and elegant, and saves space as well. I googled a little about the glider and realised that it was modified from Panic Coda‘s glider code. And then finally I dug out this Google Code site hosting the glider.js code. It’s very easy to implement actually, and you can see it in action here. Very handy eh?

The glider has a little problem dealing with iframes (not that I wanted to but because the tagboard uses iframe) but I guess that’s ok for me. I might be replacing it with something else… let’s see.

6. Archives

If you do take a look at the sidebar, the archives is pretty unique – I was reading Dean Jr. Robinson and Shaun Inman the other day and I really love the way they’ve organised their archives. Compact, clean and not visually obstructive. Mine is a little cluttered because of the sidebar width, but we’ll have to live with that for the moment being. Their minimalistic colour scheme immediately caught my eye and that was where I developed the colour scheme for the sidebar and the footer.

7. Revamped resources page

Check out the revamped resources page! I’ve completely abandoned the previous layout for a cleaner and more concise layout, that is easy to navigate. Besides having pages for my Photoshop and CSS tutorials, I’ve added an extra page for icon packs – just in case I’ll be developing any more in the future.

For the same reason, I’ve redesigned the pages for Photoshop and CSS tutorials. Now they look a lot cleaner and neater than before.

8. Footer

The footer has been greatly reduced to just two sections – older posts and tagclouds. Although the old footer was well-loved, I decided that it’s too big for my taste and I squeezed some of the stuff into the header. That’s why I love glider.js!

9. Cross broswer compatibility

Throughout the whole design process I kept cross checking between four browsers – Firefox 3, Internet Explorer 7, Safari 3 and Google Chrome. So far the design looks okay on the four browsers. Due to the Internet Explorer 6’s antiquity and it’s inability to support transparent PNGs, I’ve decided to forgo IE6 compatibility completely provide basic support for IE6 but at the expense of quality. Visitors coming through on IE6 will be served a message, encouraging them to switch to non-1990s browser :razz: heh.

So that’s it! I hope you’ll love the new theme!

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors: