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.
Conversation
It looks nice, Snook. If you don't mind me asking, what inspired you to go with a minimalist design?
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.
Feeling a bit inspired by one of your sidebar buddies to go minimalist?
It is more newspaper-like. It has a Shaun Inman touch from one of his previous iterations. It is calmer ...
Nice work...wasn't expecting *this* minimal of a site!
Love this design. Much better than previous versions I feel.
I am liking this very much! The caps treatment to the header looks lovely, and the fixed logo seems nice! :)
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!
Great job. Love this new layout.
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.
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.
clean, nice and easy on the eyes.. congrats'!
Oh, no, Snook! I actually LOVED the last design, is there a PSD or JPG just to remember the good old times? :-)
ooh this is pretty.
... love it!
I'm always a fan of content over clutter. Very nice.
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:
text-transform: uppercase.Really liking the new design, everything now has a lot more space round it and I like the fixed logo.
I like it a lot! I see that article dates have returned, good call.
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! ;)
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? ;)
Nice look. I am big fan of the minimalist look. Looks great on my Android powered phone.
I simply love it.
Maybe the Category is little hidden and you can use the footer to display more info.
@Markus: The navigation does need to be tweaked and padding-top should do the trick. The reason for
text-transform:uppercaseis 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.
I am definitely a fan.
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.
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 :)
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.
Very nice & simple, Good job :D
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
Great design Jonathan. Do you have all your other designs archived?
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.
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!
Very nice! Although I liked your last design, I prefer this one a lot more.
Why are we bombing West Osgoode? Stop directing ICBM's there. ;-)
I haven't seen a "missile address" in a long time.
Very nice re-design!
I prefer it to the previous version also
Excellent use of texture in the background. Very calming.
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 :)
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.
I like it a lot & agree with chris J... nice subtle texture & the right amount of content without being overwhelming.
I really like the new design, much cleaner and more elegant than before. A+
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?
nice:)
i like this new design.
but i like former design too.
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 :)
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.
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!
@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.
Nice work Jonathan! You know me, I like minimalism. :)
It's definitely less intimidating than your previous design. I like it quite a lot :)
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.
Fantastic.
Very nice. I'd get rid of the static page background, it feels weird while scrolling.
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!
Nice work sir. I, obviously, am a fan of the clear, clean minimal look.
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!
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
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.
@Jason Beaird: I'm really glad you noticed the positioning of the S on the background image. It was on purpose. :)
I think this is fantastic. Simple and minimal, but still very clean lined.
Really liking this design - nicely done sir.
Well done sir!
I actually prefered the previous. Felt more branded. I don't recognize the Snook brand in this design.
@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.
Did you have any licensing issues with the fonts?
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
:hoverand:focustrickery, 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!
@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).
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?
@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.
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!
Hey Mr. Snook,
The video I wanted to watch which is the Screencast about Lighting in Fireworks gives me a 404 page?
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
@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. :)
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!
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
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.
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.
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.
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.
Jonathan, I know you don't run WordPress but there is a WP plugin that handles @replies for you: @Reply \w comment preview
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. :)
Very good! Good to see that some people have own ideas!
Haha, this is completely new direction snook!!!
G8 - I like it more. In this case - less means better!!!
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.
Love the new design, it's 100% better than the last one (I was never a fan)
Nice redesign. Very much prefer this than the last.
It looks great, nice work!
Hi there,
Thanks for article. Everytime like to read you.
Have a nice day
my least favorite thus far.
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!
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.
@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.
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
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 !
I love simple design, especially the use of a line that I liked.
but why not use 'element' HTML 5?
@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.
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
I love this design. You can't beat a clean layout
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. :)
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. ;)
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
It's beautiful!
Can't argue with others, love it!
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!
@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. :)
Yep, that instantly gave the sidebar more oomph. Good times!
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.
Hello from Russia!
Can I quote a post in your blog with the link to you?
Great Design, minimal grunge... reminds me of elliot jay stocks which is no bad thing.