jason santa maria

jason santa maria

If there’s one common thing the majority of designers wish for, it must be originality. Yet with hundreds of design galleries featuring the latest trends, thousands of sites to fuel our creative thinking, it’s getting harder to be original. On the other hand, perhaps we’re looking in a wrong direction: it’s the idea and the execution of it that counts, not the design itself, and not the fact that it’s been done before.

The first impression everyone gets from Jason Santa Maria’s latest site incarnation is how original and groundbreaking it is. But after some careful thinking and designer’s explanations we realize that no, we are not witnessing a revolution in web design but rather an experiment in what blogs can look like if we start treating them as a typical web site (especially the one from the old times) where every page looks different, or as one of the magazines we like to read where every article is laid out slightly different from the other, with design supporting the content.

After all, why should every blog post fit the same template? Just because this is how the majority of blogging platforms are built to work, it doesn’t mean that we shouldn’t think outside of that typical blogging box and turn to media for inspiration. That’s why Jason Santa Maria’s radical approach to laying out every blog post differently is so praiseworthy.

Technicalities

When every page of the site comes with a different layout and style, it’s important to keep certain elements unchanged to let the visitors know that they didn’t end up on someone’s else site after clicking on a post title. Jason achieves that by keeping the same header, comments and footer structure, changing only their colour scheme and leaving the middle content area of the site to all the experiments in style and layout.

Of course, adhering to a strict grid (8 columns 100px wide, 10px gutters, 20px margins) helps to keep the site pages and all the elements within in a perfect harmony.

He also separated CSS styles into different files: site’s foundation and all default styles are set in master.css, while every page is calling its own CSS file with the same name as the title of the page/post (e.g. on-the-subject-of-design.css) that precedes and thus overwrites the default styles in master.css.

Obviously it takes lots of careful planning to organize CSS styles efficiently. I highly recommend everyone to study CSS code on Jason Santa Maria’s site: you’ll be surprised to rediscover the power of cascades and CSS code so exquisite in its simplicity that will make you to rethink your approach to CSS logic.

For instance, let’s take a look at the tactics employed to indent the content on A New Day article (where, by the way, you see the default format of the site): rather than re-position DIVs that contain the indented screenshots, it’s the paragraphs in the content that are set with horisontal margins, while DIVs appear where they should – at the beginning of the main content DIV:

<-- HTML -->
<p class="lead">I like my old site design; it feels distinct even now....</p>

<div class="illo two left"><img alt="Designer Teaser" src="/i/entry/a-new-day/tease-1.jpg"/></div>
/*CSS*/
#content p, #comments p {
   margin: 0 120px 20px 230px;
}
.two {
  width:210px;
}
.left {
 float:left;
 padding-right:20px;
}

And as a quick homework for you all: check out and compare the code used in styling categories and tags on Jason Santa Maria’s site vs. categories on Subtraction.com.

Attention to details

A painstakingly meticulous attention to details is what adds the inscription “great” to a rather general title of “designer”. There are plenty of examples of such greatness on Jason’s site: from a simple but an eye-catching change of comments ‘speech’ icon to a ‘skull’ icon to celebrate Halloween, to occasional treats with delicious drop caps set in the background, to a superb sIFR treatment of titles and navigation in Trade Gothic, or a poem set in a stunning Franklin Caslon Italic, to gorgeous background images, to an exquisitely crafted rich footer.

Typography

Even though the default font on the site is set to Lucida Sans Unicode/Lucida Grande, we see it used mainly for the auxiliary data and in the footer. The main content is usually displayed in Georgia. Then there’s also Trebuchet MS used for post’s meta data like category and tag names, navigation between posts, headings in articles. And of course, how can we forget the almighty Trade Gothic, Jason’s favourite typeface, that’s generously used throughout the site, including the logo type.

That brings us to four different fonts used on one site, plus Monaco is used for CODE and PRE tags. But wait, there are also additional typefaces that are used on different occasions: Omnes Italic, Soho, Franklin Caslon Italic, Auto Black Italic, Freight Sans Book… Yet despite such a typographic concoction Jason’s site doesn’t appear amateurish, on the opposite, only a highly skilled professional can pull it off by seamlessly blending all these typefaces so well that they become an integral part of the overall design without going overboard.

Critique

I would’ve criticized Jason’s decision to tag articles by colour and list them above more intuitive lists by categories and topics, but thankfully he changed the structure of his archives page. I especially like the full page screenshots of each article that appear when I browse archives by category, month or tags.

So all is left now to criticize is the image replacement techniques that are used once in awhile for article titles instead of sIFR, though I do understand that sometimes it’s hard to get sIFR play along nicely. Still I think that readers should always be able to select, copy and resize any text on the site that is part of the content.

Oh, and I wonder why is he mistreating his logo so badly and displaying it chopped out on the left side?

Conclusion

Whether or not Jason Santa Maria started a blog design revolution is too early to tell. Personally, I doubt we’ll see that many blogs following Jason’s footsteps, due to various reasons: not everybody welcomes the idea of having their blogs look like magazines, very few of us can dedicate time and resources to carefully plan out the structure of a blog that would accommodate those style variations, and of course not everyone is as creative as Jason. But he definitely started a new direction in web design that’s very inspiring and refreshing.

Numerous articles were written on topics of how to encourage readers to visit our blogs rather than simply scanning the posts in RSS feeds. One sure-fire way to achieve this is to write a content that would compel subscribers to leave a comment and participate in discussions. Another option is to design such a stunning site that would incentivize the fans to read the original version of the article on the beautiful site rather than its bland version in the RSS reader. However the latter method would not last for too long. Jason took it to the next step and by laying out all published articles differently he can be sure that every reader would click away on that RSS link just to see the post in all its glory on the site, and then perhaps fill out the comment form to sing another praise to its creator.

To conclude I’d like to quote Leon Paternoster on two different approaches to web design:

Nielsenify (verb, trans.): to make a website functional and ugly. Antonyms: tannify, santa-mariafy.

Which approach do you prefer?

  1. Jonathan Solichin

    I think this is an amazing project for him to take on. It’s really cool and a new take like you said. But I don’t think it is going to revolutionize blogging because not a lot of blogger is going to be willing to put this much detail into each post. But that makes his work that much more amazing!

  2. Daus

    He’s my favourite and sometimes my “guru”. His dedication to details is very amazing.

  3. Joey Pfeifer

    The new direction Jason has taken with his blog has really been inspiring. It’s well thought out, well designed, and nearly every post is uniquely designed (and not to mention interesting, content wise). Art direction on the web will hopefully become more prominent thanks to him—and I’m glad.

    My one complaint is his use of Trebuchet MS. I can’t really explain why I detest the font so much, but I think if it were replaced with something better suited, his site would be pretty much flawless.

  4. Jason Santa Maria

    Thanks very much for the write up :)

    “Oh, and I wonder why is he mistreating his logo so badly and displaying it chopped out on the left side?”

    This is actually a reference to my old design. I like the idea of the logo bleeding off the page a little, if only to suggest that your seeing a piece of a larger whole.

    “My one complaint is his use of Trebuchet MS. I can’t really explain why I detest the font so much, but I think if it were replaced with something better suited, his site would be pretty much flawless.”

    I know exactly what you mean, I begrudgingly chose to use it after coming up unsuccessful with trying to use sIFR. I eventually just conceded and moved on. There is only so much time I really want to spend being upset about the state of typefaces online, and Trebuchet was the best choice at the time. Ah well. Maybe someday :)

  5. zeldman

    Thank you for shining a light on this little-known talent. Too long has he toiled in obscurity.

  6. Leon Paternoster

    Ahem - of course, I wouldn’t want to imply that JSM can’t make a functional website. Some of the page designs are breath-taking, the sort of thing you screenshot and try to copy straight away. And fail. If I had a hundredth of JSM’s talent for imagery and typography, I’d be a happy man.

    Little things I like - the double borders above the meta data and the way the borders all join up in the footer (a la the Objectified site). You can see a signature JSM style appear in both these sites.

    That’s a great disection of the CSS, Vivien. As for the hw - is the answer that they both use definition lists?

    The content on JSM’s blog is great as well - ranging from Nazi typography (articles about, rather than a comment on his use of certain fonts) to Philly cheese steaks.

  7. inspirationbit

    Thanks for answering to my question, Jason. I see where’s the chopped logo coming from now. Though on your previous design it didn’t jump out as much, because of the book’s side was set with bleed as well.

    hmm… not sure if Zeldman’s comment carries a bit of sarcasm, or just a sincere compliment? :)
    I have no doubts that the overwhelming majority of designers know Jason Santa Maria, but I doubt that many of them took time to study the foundation his site is built upon, hence this review…

    Leon, not really: JSM’s blog does use definition lists for categories, while categories (in the footer) on Subtraction are laid out with tables and unordered lists.

  8. Xavez

    Nice article. A very nice analysis of a truly tremendous website. I’ve said it before and I’ll say it again: Jason is unique in both his vision and the meticulous execution of that vision. I think that that combination will probably provide him with a spot in the history books of Art Direction on the net—given there will one day exist such a book!

    Oh and by the way, I think Jeffrey (Zeldman) was being rather sincere in his comment, since he is Jason’s employer ;) ? (Happy Cog).

  9. johno

    A stunning web site; but a pity you didn’t choose some other page for your screen grab.
    This is one of my all-time favourites — sublime.
    @ Mr Zeldman: you’ll need to start paying him minimum wage now.

  10. inspirationbit

    Thanks, Xavez. I do know that Zeldman is Jason’s employer, I guess I’ll take your word for his comment being rather sincere ;)

    John, actually, you can see the Haunted page on the October Articles screenshot above, and I linked to that page three times from this article. :) I agree, the Haunted page is hauntingly beautiful.

  11. Xavez

    Ah, so you did know, then it was probably me that didn’t detect any possible sarcasm. My apologies for that ;) . I just couldn’t imagine Jeffrey going all sarcastic on your ass when you’ve done such a nice job reviewing his designer’s personal website :D .

  12. inspirationbit

    haha, no worries Xavez, and thanks for yet another compliment from you :)

  13. Benek

    Brilliant write-up of one of my favorite sites.

    As you say, it’s nothing groundbreaking, but the attention to detail and thoughtful planning for design variations is very inspiring.