Sushimonstr

About The Sushimonstr Design

I can’t believe that this blog has finally launched! It’s been a whirlwind couple of months juggling work and in my off time working on both Laughing Rhino (the company I freelance under & where my portfolio lives) and this site. It has been hectic! The naive me always thought that designing and coding a blog would be something easy to do. Boy was I wrong! There was so much thought that went into this site and tons of implementation details that had to be taken care of, but in the end I ended up learning a bucket load of things which will definitely help me down the road. Here’s a look under the hood:

HTML 5

Oh yeah, I said it! HTML 5! This blog has been meticulously coded using the working draft spec of HTML 5. Why have I decided to use HTML 5 instead of other usual alternatives such as HTML 4 or XHTML 1.1? The short answer is that when I decided to create this site, I told my self that this would be the perfect playground for me to experiment with new techniques and that’s the main motivation to use HTML 5.

XHTML 2 is pretty much dangling in the sky and there is no browser support for it at all. Couple that with the fact that HTML 5 is starting to look like the pony to back, and many web professionals are starting to experiment by using it for their front ends either by using the doctype it self or using the HTML 5 elements as class names in preparation for it’s launch. Lastly, I also wanted to read the working draft spec and create something based on my understanding of it. It’s the best way to learn!

ExpressionEngine Powered

I don’t mean to sound like some arse kissing hippy here, but if you are a web designer that delivers sites that rely on Content Management Systems to work, you owe to yourself and your clients to check out ExpressionEngine. It will change the way you work and make you a more productive developer.

Typography

The next exciting part of this design is my bold exploration with typography. Last year, I started taking a more serious stance on typography and started learning more about this seductive, complicated and historically intriguing area of design. I started designing my sites using em’s instead of pixels, started worrying about things like line-heights and proper margins. Today, with techniques such as Cufon and web font embedding, it would be a crime not to explore and try out these wonderful advancements in typography on the Web.

The cursive styled font on the site is made possible using Cufon and the font that I have used is HomeRunScript, designed by the incredibly talented Doyald Young.

The beautiful classical font thats used for the article headings and the permalinks are integrated into the design courtesy of web font embedding. The font used is Fontin Sans, available for free from the wonderful exljbris font foundry. Jose Buivenga, the owner of this foundry has many more fonts available for both purchase and download, so please head on over and check his collection out.

The body text is set in Corbel, which I decided to use because I wanted to try and break away from the regular Lucida or Helvetica and explore other alternatives. The idea to use this font came from Mark Boulton’s talk at Future of Web Design 2009 when Mark presented his talk on Typography’s not on the Web, it is the Web. Check out all the new typefaces that start with C that ship with Windows Vista. They all look great on screen and some of them even have ligature support bundled with them. Kudos to Microsoft for designing such a nice bunch of typefaces.

Grids

Grids! Grids! Grids! Like my interest in typography, earlier last year I started concerning my self with layout theory and interested in learning better ways of laying out content. After reading Mark Boulton’s articles, purchasing & reading a few design books, I quickly set out to learn how to use the 960.gs framework. Once I got the hang of things and learnt how to create my own grids, I was hooked.

Designing with a grid is extremely liberating and it makes you a better designer because it forces you to sketch first, think about your content and how you want to lay it out, how adaptable you want your layout to be before you start pushing pixels in Photoshop. I still learning everyday, but I am getting pretty damn good at it. The 960.gs framework also allows for quick prototyping which makes it awesome for quick feedback. If you’re not using grids, I urge you to reconsider and you will also see that you become a better designer as a result of it.

Sprites

One part of designing for the web that I have always wanted to experiment with is the usage of sprites in design. I have used sprites here for the first time and learnt a whole lot about them and how useful they can be. As a front end developer, the value that sprites provide in terms of reducing the amounts of files that have to be downloaded alone is such a reward for sticking it out and learning this technique. Dave Shea also wrote a great article on why we should be using sprites in our design work.

Apache Web Server Optimization

Since Yahoo! released their YSlow tools for Firebug, I have been dying for the chance to play around with some of their recommended best practices. This site proved to be the best playground for that. If you have YSlow installed, check out my YSlow score. Its crazy to think that with a few rules in a htaccess file can yield such great performance boosts and an overall better user experience as well. I will be writing an article soon on these rules and how I went about implementing them.

Parting Words

If you have any comments on the design or technical aspect of things, please chime in and leave a comment. I am always looking for constructive criticism and ways to improve my skillset and workflow. There are still a few minor details that I am working on, but the site is live now and I hope you come back for more in the future!

Comments

Avadhut said on July 24, 2009

I have to admit, half of why I commented was to see just what they looked like. The other half was to tell you that the typography on this site is truly sweet!

Add Your Comment