Minimal

I need to document all the stuff that went into this design but for now, I'm happy just to have it launched.

Why did I redesign so quickly after the last one? Because I wanted to! Inspiration struck and I ran with it. In the end, I'm much happier with this iteration over the last one and I'll be happy to keep this around for awhile.

Like the last version, I used HTML5 sparingly. Simple doctype, cleaner syntax for some elements like script and link tags. There's lots of graceful degradation going on here (or progressive enhancement, if you're a glass-half-full kind of person). I checked it out quickly in Firefox 3.5, Safari 4, Opera 10, and Internet Explorer 6 and 7. Everything else, I'll just assume looks okay.

No, I still don't use a CSS reset. I didn't use a separate stylesheet for IE. My single CSS file comes in at a reasonable 8k.

This has been a year of change for me in many aspects and this design is a reflection of my continuing metamorphosis. This redesign will hopefully kick off a renewed enthusiasm in myself for design and development and blogging about it every step of the way as I had once done before.

Enjoy.

Published September 28, 2009
Categorized as Design
Short URL: https://snook.ca/s/955

Conversation

108 Comments · RSS feed
Dan Schulz said on September 27, 2009

It looks nice, Snook. If you don't mind me asking, what inspired you to go with a minimalist design?

Jonathan Snook said on September 27, 2009

One site in particular that kicked off the whole desire to redesign was Sean Sperte. I've also been inspired a bit by Jina Bolton. It was also a chance for me to try something that looked simple but has some layers of complexity to it and I feel this design comes close to that.

Chris Wallace said on September 27, 2009

Feeling a bit inspired by one of your sidebar buddies to go minimalist?

Johan said on September 27, 2009

It is more newspaper-like. It has a Shaun Inman touch from one of his previous iterations. It is calmer ...

Michael Dick said on September 27, 2009

Nice work...wasn't expecting *this* minimal of a site!

Yan said on September 27, 2009

Love this design. Much better than previous versions I feel.

Indranil said on September 27, 2009

I am liking this very much! The caps treatment to the header looks lovely, and the fixed logo seems nice! :)

Darice de Cuba said on September 27, 2009

I'm a fan of minimalist and absolutely love this design. The small details like the worn lines, the icons beside each post title and the header/logo. Nice job!

Jakup said on September 28, 2009

Great job. Love this new layout.

Mikey McCorry said on September 28, 2009

Nice work as usual. I feel everything gets a chance to breathe a bit in this design, and I like the hide-away archives links in the side-bar.

Brendan Falkowski said on September 28, 2009

Feels a bit WWII militaristic, though I just finished watching Valkyrie and saw your tweet-announcement. Think it's a combo of the condensed capitals, typewriter-style uneven pressure on the gridlines, and non-bleached texture. Could seal the deal and make the copy monospaced – or not. Looking good nonetheless.

sorin said on September 28, 2009

clean, nice and easy on the eyes.. congrats'!

Ivan said on September 28, 2009

Oh, no, Snook! I actually LOVED the last design, is there a PSD or JPG just to remember the good old times? :-)

Tjobbe said on September 28, 2009

ooh this is pretty.

Nikola said on September 28, 2009

... love it!

Bodog said on September 28, 2009

I'm always a fan of content over clutter. Very nice.

Markus said on September 28, 2009

Nice, I like it! Interestingly, when I first saw the site I instinctively tried to scroll upwards, following a subconscious urge to uncover the upper part of the logo in the background ;-)

Two suggestions:

  1. Right now the links in your navigation have a very small clickable area; I think a little padding-top would do them good. Maybe the font you're using has funny metrics?
  2. Also, their text doesn't need to be all-caps in the HTML code since you're giving it text-transform: uppercase.
Jamie said on September 28, 2009

Really liking the new design, everything now has a lot more space round it and I like the fixed logo.

Allen Pike said on September 28, 2009

I like it a lot! I see that article dates have returned, good call.

Barry Wardrop said on September 28, 2009

First less of you!..then less of your website, a case in showing that more isn't always better.

By the way it was a plesent short read about your weightloss in your previous post, something i seem to be piling on at the minute due to the leaving a fulltime physically active job for full time sitting behind this screen all day!

The site looks great, clean simple nice use of League Gothic by a good company. and as always the content is king!

@markus I actually like the fact that the link has states as opposed the the space around it! and the use of text-transform to me is really a backup not a problem! ;)

Matt Robin said on September 28, 2009

I really like it, lightweight, subtle (but with some nice touches)...it's good, clean design.

I sort of miss the widespread use of green though, something that has become associated with the snook.ca site image. That's just a small thing though right? ;)

Scott Radcliff said on September 28, 2009

Nice look. I am big fan of the minimalist look. Looks great on my Android powered phone.

Vladimir Carrer said on September 28, 2009

I simply love it.

Maybe the Category is little hidden and you can use the footer to display more info.

Jonathan Snook said on September 28, 2009

@Markus: The navigation does need to be tweaked and padding-top should do the trick. The reason for text-transform:uppercase is actually a technical one. Both Opera and Internet Explorer don't use the uppercase letters from the subsetted font. As a result, I had to literally type the letters as all uppercase.

@Vladimir: I wanted the categories to be hidden. It's all part of the minimalism. Hopefully the heading is enough for people to see how to dig in. If not, I may tweak it. As for the footer, yes, my intention is to beef it up with a lot more info but wanted to push the site up live.

@All: if you want to reminisce over the old design, there's thankfully Flickr to the rescue: Version 9, Version 8, Version 7, Version 6 and finally Version 5.

Nate Klaiber said on September 28, 2009

I am definitely a fan.

David Peralty said on September 28, 2009

I think the only thing I'd like to see changed is admin comment highlighting. It was not only your articles, but your responses to comments that made your blog interesting to me. Without the admin comment highlighting, I had to search.

Other than that, bravo as usual.

Kilian Valkhof said on September 28, 2009

Very clean, very nice looking Jon! Are you planning on adding a style for your own (author) comments? I think that adds much to the comments section :)

Mike Crittenden said on September 28, 2009

Would be great if you could post a tutorial on your usage of @font-face in the headings. Haven't seen your src: local() syntax before.

Chris Pacheco said on September 28, 2009

Very nice & simple, Good job :D

Nathan Ziarek said on September 28, 2009

Agreed that the new design is very nice. If ever I get my act together and re-create my page, I think this will be a design that will influence my aesthetic.

On to being a semantic jerk, I consider "progressive enhancement" and "graceful degradation" two different things, as they explain how you tackle the problem. Do you start with the basics and then enhance or do you create the end product and then figure out where things need to fail "gracefully". I think PE is the way to go right now, since IE is in the mix. As HTML5, <CANVAS> and <VIDEO> get some major traction, though, I think we'll be able to reduce our reliance on legacy cruft and design just for modern systems. Or I hope.

In any case, great design!

nz

Jake Smith said on September 28, 2009

Great design Jonathan. Do you have all your other designs archived?

Eric Martin said on September 28, 2009

Looks really nice!

I just redesigned my site last month and am already planning a new one. I am planning on going with a more minimalistic design as well.

Jonathan Snook said on September 28, 2009

I just added author comment styles so that my comments stand out from the rest. I tried just a green comment icon but it was too subtle and easy to miss. The flag gives it some extra prominence but hopefully not so much that it's distracting.

Thanks everybody for all the kind words on the redesign!

Yan said on September 28, 2009

Very nice! Although I liked your last design, I prefer this one a lot more.

Francis said on September 28, 2009

Why are we bombing West Osgoode? Stop directing ICBM's there. ;-)

I haven't seen a "missile address" in a long time.

Thomas Britton said on September 28, 2009

Very nice re-design!

I prefer it to the previous version also

Chris Johnson said on September 28, 2009

Excellent use of texture in the background. Very calming.

prisca said on September 28, 2009

wow - what a change and how gorgeous ;)
Really love the change, though I did like your previous design as well - this one is an instant winner for me, love the light and airy feel of it :)

David Walsh said on September 28, 2009

I'm not a designer so my opinion is next to meaningless but I really like what you've done. My only criticism is that the site doesn't encourage multiple pageviews -- you aren't trying to keep people at the site. Of course you have no advertisers either so pageviews could be meaningless to you.

Trent Walton said on September 28, 2009

I like it a lot & agree with chris J... nice subtle texture & the right amount of content without being overwhelming.

Edward Rayne said on September 28, 2009

I really like the new design, much cleaner and more elegant than before. A+

Rogie King said on September 28, 2009

Nice work Jonathan! I like it MUCH better than your previous design. The minimalism makes for a much more usable and readable blog. I love that your @replies link to the user's comment. How'd you do that?

Kenji Tani said on September 28, 2009

nice:)

i like this new design.
but i like former design too.

Travis Isaacs said on September 28, 2009

I definitely prefer this to the previous snook.ca. However, the footer feels unfinished in my opinion. The green link color feel like a left over from the previous site, and doesn't have enough contrast.

I also wonder the value of having your last 4 delicious links. They'll be random, and probably of no value to a casual snook.ca reader.

Of course, everyone is an editor :)

Craig Forsyth said on September 28, 2009

I like it a lot! It's more "grown up" than the previous version, and really lets the content stand on its own. Well done.

Danny said on September 28, 2009

WOW! Much nicer design than the previous one. I have to be honest, I was a fan of the content you provided but not much with web design. I felt it was cluttered. I will frequent this website now!

Jonathan Snook said on September 28, 2009

@Rogie: The number on each comment is a hyperlink, so I just copy the link. Someday I'll see about automating that process with a little JavaScript. :)

@Travis Isaacs: The delicious links are hand-selected specifically for the blog so they are hopefully relevant to the people who come here. However, the footer is somewhat unfinished. I have more content that I'd like to include there but haven't integrated it yet.

J Cornelius said on September 28, 2009

Nice work Jonathan! You know me, I like minimalism. :)

Marco Jardim said on September 28, 2009

It's definitely less intimidating than your previous design. I like it quite a lot :)

Wiras Adi said on September 28, 2009

A bit less readable than the previous version I would say Snook. Maybe you should try a sans-serif typeface family with this design.

Overall, it's simply great, I like it.

Garth Braithwaite said on September 28, 2009

Fantastic.

Pies said on September 28, 2009

Very nice. I'd get rid of the static page background, it feels weird while scrolling.

Matthew Kempster said on September 28, 2009

I like it!

Kinda reminds me of Daring Fireball and even more of Shaun Inman's current design.

I love the textures and little details such as post header grid lines and body background.

Was surprised to see you redesign so quickly though - nothing at all wrong with that however!

Tom Watson said on September 28, 2009

Nice work sir. I, obviously, am a fan of the clear, clean minimal look.

Chris said on September 28, 2009

Looks good to me. It focuses on the content, which is should, and none of the design elements detract from that content. My only "complaint" is the background image that scrolls with the background. I would just keep that fixed at the top because I find it annoying when it interferes with content, but that's just me and my first impressions. Great work!

Aaron Irizarry said on September 28, 2009

looking great man... I totally relate to the running with inspiration when it hits.

The last iteration was cool but so far I am favoring this one more. I really like the little flags, and the subtle textures.

~ Aaron I

Jason Beaird said on September 28, 2009

Looks great, Jonathan! You've eliminated everything but the essential and what's left is tastefully styled.

Contrary to some of the previous comments, I really like that the body background is fixed. It reinforces your brand and looks good as the content scrolls past the left edge of the s.

Jonathan Snook said on September 28, 2009

@Jason Beaird: I'm really glad you noticed the positioning of the S on the background image. It was on purpose. :)

Josh Walsh said on September 28, 2009

I think this is fantastic. Simple and minimal, but still very clean lined.

Chris Pederick said on September 28, 2009

Really liking this design - nicely done sir.

Simon Hamp said on September 28, 2009

Well done sir!

Sean McArthur said on September 28, 2009

I actually prefered the previous. Felt more branded. I don't recognize the Snook brand in this design.

Jonathan Snook said on September 28, 2009

@Sean McArthur: Go figure. When I launched the last design, I didn't even have my logo on the site. (I eventually stuck it in the circle). This is definitely a larger departure from my style than previous iterations so I can see why you might think that.

Nathan said on September 28, 2009

Did you have any licensing issues with the fonts?

Erik Vorhes said on September 28, 2009

I loved the faux-3D of the previous version, but this minimal design is beautiful. I remain envious of your ability to crank out redesigns, etc., at such a clip!

That said, it'd be neat if the little ribbons, stars, etc., did something. I half-expected the one next to the post title to function as a permalink (since it looks like a bookmark); the same goes for the one by the "Conversation" heading. Maybe some :hover and :focus trickery, such as the ribbon being colorized (or in the case of previous entries on the main page, the ribbon fading in to replace the star) would add a little bit of interactive pizazz?

That's just a suggestion, though--I've noticed that you use the ribbons, etc., in the design in ways that don't lend themselves quite so easily to the bookmark metaphor. And even as-is, the design is no less lovely!

Jonathan Snook said on September 28, 2009

@Nathan: The headings use LeagueGothic which is an open-source font and allows embedding. (Although, the license was a little confusing to find. Hopefully I understood it correctly.) I was also pleased as punch that the file was only 20k as some fonts can really be quite sizable. As for the other one, I went to extreme measures to create a subsetted font file which contains only about 30 characters. There's not a full alphabet and there's only 4 lower case characters being used. This kept the file nice and small (only 8k) and is hopefully enough to avoid any issues (but will be understanding if I have to change it).

RussellUresti said on September 28, 2009

Awesome redesign. I like the minimal look, and I really like that you went with League Gothic as your font choice. You are correct that it allows web embedding. Though, I could only find an .otf file with the download, and not an .eot. Did you create one, or was I just missing something?

Jonathan Snook said on September 28, 2009

@RussellUresti: Yes, I had to make the EOT. I have a blog post I'll be putting together on the matter but to sum it up: I used FontForge to convert the font to TTF and then use TTF2EOT. There are some important changes to be made in FontForge when exporting, though, to ensure that the conversion to EOT goes smoothly.

Sally Carson said on September 28, 2009

Deg Snook, you're putting me to shame. For my biz site, I was strapped for time and had a Woo Theme running on Wordpress. Last week, I finally got around to at least customizing the look of it, but the underlying html I'm still riding on is woefully ...presentational.

Your redesign looks great!

Henry said on September 28, 2009

Hey Mr. Snook,
The video I wanted to watch which is the Screencast about Lighting in Fireworks gives me a 404 page?

Jacob Western said on September 28, 2009

How did you create the background image (the one that looks like construction paper) I like it a lot and have been trying to do something like that in photoshop but keep failing.

Kudos on the new design

Jonathan Snook said on September 28, 2009

@Henry: Problem should be fixed. Enjoy the screencast.

@Jacob Western: I use Fireworks and the background is super easy. Create a shape and give it a colour. I chose a grey with a little less blue in it to give it more of a brownish/yellow colour. Then I added the Noise filter set to 1%. That's it. :)

Brad Touesnard said on September 28, 2009

Have you had a look at YUI Reset CSS? http://developer.yahoo.com/yui/reset/#code

It's more compact than others and I've found it works just as well. I usually just put it at the top of my single stylesheet.

Love the new design. Great work!

the bacon man said on September 28, 2009

Hey Jonathon, love the new site. The new simp...hey whoa, wait a minute....the preview of my comments as I'm typing this out is unexpecting, creepy, and awesome.

Good job, always look forward to your designs and once again, it's original and doesn't remind me of 90% of the "web developer" sites.

nice to see you're using some sort of custom cms of your own too

p.s. h2 font on the article headings are huge in Chrome

the bacon man said on September 28, 2009

re: Brad Touesnard asking Jonathon Snook if he's heard of Yahoo's reset?

Seriously?

That's like asking Hugh Hefner if he's ever seen a girl naked.

Martin said on September 28, 2009

Very nice redesign Jonathan - I like your approach towards minimalism. I have to say though, I really liked the previous design too. Are you going to sell it or just keep it in the drawer? I think it would be of interest to quite a few people.

John said on September 29, 2009

Like the new design, especially the sort of finger-printy bit. Minimalism will always keep coming back as no design ever remains untouched - you always end up adding a bit here and a bit there, until one day your realize that you've ruined it and need to start again - of course that's also half the fun of making websites.

Thanks for the tip about the noise filter too.

Michael Kozakewich said on September 29, 2009

Nice!

I came in here with images disabled, so I'm seeing the really minimal look. I'll have to take another when I put images back on.

It works great! The last one had issues on small screens, but I haven't had any problems with this one.

Chris Wallace said on September 29, 2009

Jonathan, I know you don't run WordPress but there is a WP plugin that handles @replies for you: @Reply \w comment preview

Jina Bolton said on September 29, 2009

Just now seeing this. Wow, nice update! And I'm flattered you mentioned me as an inspiration for the redesign. I love that you went minimal. It's really nice. :)

Helen said on September 29, 2009

Very good! Good to see that some people have own ideas!

Cyprian Gwóźdź said on September 30, 2009

Haha, this is completely new direction snook!!!
G8 - I like it more. In this case - less means better!!!

Jesse C. said on September 30, 2009

Love it.

And reading through the comments, it's fascinating how polarizing a design can be - there are more than a few people that felt the previous, busier design was nicer — and that's more than valid. But personally—as someone who pours over design sites way too much—I often feel so inundated with busy, bright, designed sites that seeing something so spare and clear feels like a long, cool drink of water: refreshing and sustaining.

I remember once reading an interview with John Cougar (Mellancamp, at the time) when a question about the simplicity of his song structure prompted him to say that if he ever found a way to tell his story using only one chord, he would do it.

On a final note, you beat me to the punch. Ever since seeing it on the League of Moveable Type site, I've been longing to do a redesign with League Gothic.

Looking forward to reading your posts here, Snook. Cheers.

Tim Wright said on September 30, 2009

Love the new design, it's 100% better than the last one (I was never a fan)

Clinton said on September 30, 2009

Nice redesign. Very much prefer this than the last.

Prashant said on September 30, 2009

It looks great, nice work!

Saurooon said on October 01, 2009

Hi there,
Thanks for article. Everytime like to read you.
Have a nice day

boo said on October 01, 2009

my least favorite thus far.

Laboratik said on October 02, 2009

Oh nice... The footer is missing something though... can't pinpoint it but it seems to me that the contrast between the colors could be a bit more subtle... but that might also be the side effect of a low end monitor to view your website...

I LOVE the background. The texture is so subtle that you can't miss it :-) want to share how you created it?
Noise filter in photoshop and playing around with colors I would assume?

Keep up the good work and have fun tweaking!

tom-c said on October 02, 2009

Hi,

The minimal design is lovely — great improvement — @font-face usage too, very snazzy...

How did you manage to subset to only some charaters in Gotham? Seems like a good half way, I've seen some demo versions of expensive fonts distributed this way so perhaps it's ok? Or a least worth trying on a non commercial site.

Jonathan Snook said on October 02, 2009

@Tom-c: I used FontForge to delete any unused glyphs and then exported as TTF, which I then used to create an EOT. I wanted to use font-face, keep file size down (Gotham is 160k in a single weight), and try to prevent it from being used on other sites. Hopefully they'll be okay with this non-commercial usage of it and the steps I went through to protect it.

tom-c said on October 02, 2009

Thanks for the reply Jonathan,

Guess i'd better get brushed up on FontForge then, is there anywhere in particular you learnt about the specific options you mentioned for successful .eot files?

I've tried using the online converters with League Gothic and had little luck so I guess FontForge will have my answer.

Also did you install CLI only on OSX? If so any particular ./configure options?

Sorry about all the questions,

Tom

All for Design said on October 02, 2009

Hey John !
Congratulation for this new design !
I love minimalism and I'm sure this new one will show the way to other web designers.
Just keep your inspiration running man !

choen said on October 03, 2009

I love simple design, especially the use of a line that I liked.
but why not use 'element' HTML 5?

Jonathan Snook said on October 03, 2009

@tom-c: I'll try and document my success with FontForge soon, as it isn't very obvious. No, I didn't install CLI.

@choen: I avoided any new HTML5 tags because I still wanted things to render fine in Internet Explorer without having to use JavaScript shims.

Sigurður Árni said on October 05, 2009

Great work. Clean and minimal.
I also really like the hover/active effect on the titles.

I will have to "borrow" that and the comment preview from you sometime

Steve Shedden said on October 06, 2009

I love this design. You can't beat a clean layout

Jonathan Snook said on October 06, 2009

I just switched up the font from Gotham to Museo Sans for the top header. I don't love the K but it was as close as I could come. That is until I break down completely and design my own font. :)

Squaregirl said on October 06, 2009

Very nice! I've always envied those that can keep it minimal — I've had a design crush on Shaun Inman's site for ages. ;)

Bengacreative said on October 06, 2009

Wow, this new design is incredible. I love the cleanness, the simplicity and the ways that everything flows together. I'm definitely a big fan. Really like the idea of highlighting your comment in the pool of all the other comments, by giving your comment numbers text color.

I'm just seeing for the first time, the type and see on the screen as you go idea on your site, and i must say i'm liking the idea a lot and the thought behind it.

Thanks for the inspiration to work harder.
Benga creative

Jen Germann said on October 07, 2009

It's beautiful!

Tomaz Zaman said on October 08, 2009

Can't argue with others, love it!

Brade said on October 09, 2009

I approve! Nice colors... The only problem I see is that "Snook.ca" is so close to the contact link, and that it is not clickable to the home page. Took me a few seconds to realize that your slogan on the left was actually the link to Home. The sidebar is also quite naked at the moment. I don't think I'd mind having the archives be open by default. But to each their own. Overall a deluxe job!

Jonathan Snook said on October 09, 2009

@Brade: Too bad you didn't visit the site 5 minutes later. :) The sidebar is now a little beefier with the illustration—and really completes my original vision for the site.

I debated about whether to link of the Snook.ca but decided against it because of how close it was to the line below. I wanted to avoid people accidentally clicking on the wrong link. That may be a premature optimization but it seemed like the right thing to do. I may switch it up at some point just to see what happens. Maybe some click-tracking is in order. :)

Brade said on October 09, 2009

Yep, that instantly gave the sidebar more oomph. Good times!

Chandra said on October 11, 2009

Great work. I always admired your work. This design surely inspired me. After a recent redesign with my blog, I am planning to redesign it again. This time I am going with minimal design.

Polprav said on October 16, 2009

Hello from Russia!
Can I quote a post in your blog with the link to you?

Martyn - Bristol Wesite Design said on October 16, 2009

Great Design, minimal grunge... reminds me of elliot jay stocks which is no bad thing.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.