April 12, 2005

Flourish for Zaadz

Zaad is Dutch for “seed”. Zaadz is a company that seeks to be the creative catalyst to others. They provide the technology and the means to publish and maintain a website so that you can do what you do best, create. Zaadz recently came to Cameron Moll with the need for website template designs (pretty much what you’ve come to expect, clean XHTML and CSS with a little bit of flavor). So, Cameron enlisted the talents of Bryan Bell, Brian Biddle, Jared Christensen, Ryan Sims, and myself to design and code.

Designing templates for this sort of service can be daunting because it’s easy to fall into a trap of over-thinking your work. The design needs to be flexible enough to accommodate a broad range of topics and authors while still retaining some personality. There are no logos or branding structures to work from, but you still need to find a way to give it its own life and make it interesting. The requirements were pretty loose: all text needs to be editable, templates must be available in three, two, and one column varieties as well as an email and five color schemes. We consolidated all of our structural CSS (including the different column constructs) into one file and separated our color-specific CSS into another. We also tried to use the same general markup as each other to make it easier for Zaadz to get these into their publishing system without losing sleep.

Zaadz smartly suggested we not worry about trying to appeal to everyone and just create designs reflective of things that inspire us. I had a blast designing this, drawing inspiration from some Art Nouveau posters as well as Victorian Era advertisements and engravings. For your perusal (all content is mock):

Please head over to the other designers’ sites to see their lovely templates designs: Cameron Moll, Bryan Bell, Brian Biddle, Jared Christensen, and Ryan Sims.

Commentary (15):

1. Bill says… apr 12, 2005 | 11:59 am

Nice work. When it comes to production phase, do you plan to use modern CSS layout for the HTML emails? I still lean towards using table-based oldschool layouts for client compatibility when it comes to HTML email, but really hate taking such a step backwards in design…I guess what I’m asking is whether there are some definitive resources I have missed that outline if/when CSS will work solidly across various email clients.

2. Cameron Moll says… apr 12, 2005 | 12:38 pm

I’ll answer that one, Jason. The push for using CSS for the emails was mine, as I’ve done it for a couple years now and have been plenty comfortable with it.

As for resources, try Mark Wyner’s ALA article for starters.

3. Cameron Moll says… apr 12, 2005 | 1:25 pm

Now that I reread my first comment, that sounds a bit pretentious. I was merely saying I kinda forced these guys to go the CSS route with the emails, and they graciously obliged (and with talent too, might I add).

4. Ian says… apr 12, 2005 | 1:26 pm

Could I possibly get a couple cc’s of your semen?

Ohhh.…no reason.

5. Jason Santa Maria says… apr 12, 2005 | 2:34 pm

*shudder*
Well, as much as I would like to oblige you, I will have to decline.

6. Eric Vitiello says… apr 12, 2005 | 3:29 pm

Well now I’m going to have to dig out “The Way of the Peaceful Warrior” and read it again.

7. Dave says… apr 13, 2005 | 12:20 am

Bill, we have a few other tips relating to formatting HTML and plain text emails on our blog, including Mark Wyner’s great CSS article.

Mark’s also in the process of writing us a follow up article for us that will include updates and downloadable samples you can try yourself.

8. Rob Costlow says… apr 13, 2005 | 2:19 pm

Nice work Jason! Well done. Love the templates.

9. Aaron says… apr 13, 2005 | 2:31 pm

Whoa…

That live comment preview is super cool!!!

Anyway, just wanted to say thanks for your work on the project. I really appreciated the personal touch you added to these templates.

10. Linda says… apr 13, 2005 | 4:31 pm

Wow, never seen anything like these! Love that black Art Nouveau swirl in the foreground.

Cool!

11. Matt Johnson says… apr 14, 2005 | 1:09 am

D00d, Aaron that commentary preview is so early 2004’s!

Get with the program buddy ;D

Great work as usualy Jason.

12. Paul Carpenter says… apr 14, 2005 | 4:24 am

Indeed those are great templates. How do you manage to get into these projects Jason?

13. Another Dave says… apr 17, 2005 | 5:04 pm

Incredibly cool. The little “swirls” (for lack of a better word) through out the template really add some zest! Very cool stuff, keep on rockin.

14. Brenton says… apr 18, 2005 | 2:28 pm

I know this may be a bit off-topic, but on the whole CSS layout email front, I have found Gmail to be the toughest nut to crack. Has anyone had any luck with Gmail in terms of it correctly rendering style sheets?

BTW - Very nice work on the templates Jason!

15. erin says… apr 25, 2005 | 4:48 pm

Lovely, JSM. I’m delighted by the neo-neo-classical directions in several of the templates, yours included.