About this site's lack of design: Yes, it's supposed to look this way — I'm helping create a new sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

|

Blogger. Templates. Designed.

Note: My template set has been updated — get the scoop here »

bloggerI’ve been waiting to write about this for months now. Really. Blogger has finally relauched with a snazzy new look courtesy of Douglas Bowman and Adaptive Path. The new Blogger features not only a nicer, rounder design, but also a much-improved process for creating and managing blogs — and a bevy of fresh templates designed by some familiar names.

Brand Name Designers

Doug recruited some terrific designers to design and style brand new, standards-based templates for the relaunch (in addition to the fine templates he contributed), and I was honored to be one of this select group: Dan Cederholm, Todd Dominey, Dave Shea and Jeffrey Zeldman all created some fantastic designs for the new templates (view a list of all the template designs).

Beautifully Generic

The trick with this project was to design something visually fetching, but not too personal (the primary function is a reusable template, which might display many different types of content), yet individual enough to inspire someone to actually use it.

“Your templates really stand out to me as having a personality while still presenting a ‘generic’ feel…” Dan Benjamin

My primary goal was to design a base template that would work in many situations, for many different people. The best way to accomplish this from the outset was to limit the color palette to similar hues, which also made it easier to create alternate color schemes that have a fairly different look without having to change any of the base elements:

For the design, I wanted to play a little with gradients, as well as try some layering of background elements in CSS to create subtle effects (as it turned out, they are extremely subtle). I ended up applying gradients to every primary element, though chances are you won’t notice them all right away.

The subtle gradients gently direct the eye down the page, and create the slight decrease in contrast of the background arrows in the sidebar as they move further down the page (getting closer to the darker color of the gradient).

Standards for the People

The number of people who will make use of these templates is astounding (it’s already started), and the web is going to be a much better place for the effort (just think of the hundreds of thousands of sites that will soon be using well-designed standards-based markup!). I’m very happy with how Thisaway turned out, especially the alternate colors. I think it fits in nicely with the look and feel of the new Blogger (though that was entirely accidental, since none of us saw the design before Sunday), and compliments the other new designs while remaining unique.

Congratulations, kudos and thanks to Ev and the rest of the Blogger crew, as well as Doug and the folks at Adaptive Path for allowing such a terrific team of designers to contribute to this project.

Blogger template questions? Please search and/or post to the official Blogger Help Google Group—you are much more likely to get a response there than by emailing me.

This item was posted by Dan Rubin on Wednesday, May 12th, 2004.

Categories:

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

33 comments on “Blogger. Templates. Designed.”

  1. Posted by Jon Hicks on Wednesday, May 12th, 2004.

    Dan? Is that really you? This isn’t Didier pretending is it?

    Nice work by the way! Must be good to finally see it out in the open…

  2. Posted by emilio on Wednesday, May 12th, 2004.

    Happy to read you again, Dan!

    Terrific work on the templates!

    ;)

  3. Posted by Dan Rubin on Wednesday, May 12th, 2004.

    Thanks guys, yes, it is me :)

    It’s very nice to see something like this come to fruition — it was a small project compared to most (2 days from start to finish), but the potential positive impact on the web is huge.

    BTW Jon, I just love your Thunderbird icon, you astound me again and again :)

  4. Posted by Emilio on Wednesday, May 12th, 2004.

    but the potential positive impact on the web is huge.

    it is!

    ;)

  5. Posted by Andrew on Wednesday, May 12th, 2004.

    I like almost all the new blogger templates but I think they look ugly with the google adds above them… maybe its just me but I think I’m right.

  6. Posted by Dan Rubin on Wednesday, May 12th, 2004.

    Andrew: I agree completely about the banner ads, and I’ve already asked Doug if it’s possible for us to tweak our designs so they work better with the ads (we didn’t know the ads would be in place until the redesign launched on Sunday).

    “Thisaway” was designed to have zero margin at the top of the browser window, so it’s possibly affected more than the other templates. Hopefully the Blogger team will allow some tweaks, or perhaps include an additional <div> when the banner is present so we can apply a style that “fixes” the display.

  7. Posted by Cory on Thursday, May 13th, 2004.

    Your Thisaway Blue style is beautfiul… and I use it on my Blogger-powered Weblog. (Link witheld for privacy reasons.)

  8. Posted by Bonnie on Thursday, May 13th, 2004.

    Thisaway Rose is the one I’ve chosen. I think it’s lovely… As I’m teaching myself CSS, it’s also helpful to see how you’ve constructed it, as a reference as I begin to try my own designs. Thanks!

  9. Posted by Dan Rubin on Friday, May 14th, 2004.

    Thanks Bonnie, it’s nice to know that folks are using the new templates so quickly, and I appreciate your praise of Thisaway Rose (the most frequent comment I’ve received so far is how much people love the different color schemes, since they each set their own distinctive mood).

    The CSS is a study in quick, clean styles (or at least, it should be since there wasn’t much time available to put it together), so you should be able to learn something from it :)

  10. Posted by Alex Giron on Monday, May 17th, 2004.

    Very nice templates… I particulary like the rounders packs.

    Great job.

  11. Posted by cesar on Sunday, May 23rd, 2004.

    hi dan.

    i´m new to blogger and i´m using your thisaway template, which i like a lot. unfortunetaly, when i reached my 30th post the profile column just went doooown to the bottom of my page. and i don´t know how to solve this problem, since i know almost nothing of html. i don´t know if i´m the only one with this problem, but, anyway, would you –or anyone reading this– give me a tip on what to do?

    thanks in advance, and greetings from perú!

    césar

  12. Posted by cesar on Sunday, May 23rd, 2004.

    mmm. by the way, my blog url is http://estosdias.blogspot.com/

    thanx

    césar

  13. Posted by carl guillen on Wednesday, June 16th, 2004.

    i use Thisaway for one of my sites. i think it is the best I have seen so far. It would be great if more colors scemes existed for it. I am toying around with changing the color scheme. any plans for more colors? any tips on changing to a custom color scheme on the Thisaway template?

  14. Posted by dodo on Monday, June 21st, 2004.

    i love the layout. so clean and refreshing. i’m using it.

  15. Posted by pp on Tuesday, June 22nd, 2004.

    I love the Thisaway Rose design! It is what I am using now and if you go to my blog site you will see that there is a bug somewhere which is causing the sidebar not to wrap properly. Help! This only started happening yesterday and I would really rather fix it than change to another template. Thanks in advance…

  16. Posted by Brian on Monday, July 5th, 2004.

    I think your problem is something in one of your posts might be stretching too far like a large image or pasted text, try changing the post that you made when the sidebar went to the bottom. Thats what happened to me and I changed it and it worked. I think the layouts are pretty good though but I’m using one that come from another website called http://blogger-templates.blogspot.com.

  17. Posted by ka edong on Tuesday, July 20th, 2004.

    Hi Dan,

    I’m using your template in my blog at http://technobiography.blogspot.com .

    1.) I’ve been trying to, but couldn’t figure out how to put a “Next >>” link at the bottom of the homepage.

    2.) Also a “More >>” link below the last blog title.

    For example, on the upper right side, we’d see something like…

    Title 1

    Title 2

    Title 3

    What I hope to do is have a …

    Title 1

    Title 2

    Title 3

    More >>

    And also …

    Title 12

    Title 13

    Title 14

    >

    Do you think you could help me with this?

    Thanks!

    edwin

  18. Posted by Helen on Saturday, July 24th, 2004.

    Hi, Dan!

    I’va just checked up the templates.

    Great work!

    What I do appreciate is alternate colors. Stylish, cool, appealing :) You must have been inspired while creating it!

    Helen, designer

  19. Posted by lawnorder on Tuesday, July 27th, 2004.

    I’d like to congratulate you on your Thisaway blue template. I just love it!

    Like edwin above, I’d like to ad a “more” on my template but my CSS is very rusty.

    Can you point us out in the right direction ? Is there a site were different blogger templates are discussed ?

    I wish Blogger would add a page with FAQs and resources for people who want to tweak the base templates!

    Thanks again for your wonderful blog template!

    kila

  20. Posted by Jenny on Tuesday, August 10th, 2004.

    some of those look good anywhere. i have a friend who’s using your deisgn on her site (http://pure-essence.net). b2. looks very nice.

  21. Posted by Jonnie on Thursday, November 4th, 2004.

    Good Read

  22. Posted by LN on Wednesday, November 17th, 2004.

    It appears that your templates do not work with Firefox.

  23. Posted by Dan Rubin on Tuesday, November 23rd, 2004.

    Hi LN, could you cite an example for me? The templates were tested prior to release with the most current version of FF available at that time, and no updates have been made to the templates since, so it is possible that a different version of FF has introduced some display issues. If you could let me know which version you are using, and provide a URL which displays the problem (as well as a detailed description), then I can take a look.

  24. Posted by Scott on Tuesday, December 7th, 2004.

    Hi, Dan. A friend of mine (see URL) is using Thisaway Rose, and is having a problem with the colors not following the original design down the entire page. I’m using Firefox, so I thought it was just her, but I viewed it in IE, and it works fine. I’m using the most recent version of Firefox (1.0), and it is really distracting. Any ideas?

    Thanks,
    Scott.

  25. Posted by Natalie on Tuesday, December 14th, 2004.

    hi Dan… I am a new user of the blogger. As I saw your template (Thisway Rose), I instantly like it so I picked it as my template. There are arrows graphic on the right top of the sidebar and along that, I put distributor and archives list there. But a month later, it moved itself to the right bottom of the sidebar, I tried to change something on the template setting but it doesn’t go back to its orginal position. Could you please give me any suggestion to this problem? Thanks.

  26. Posted by Markavian on Tuesday, December 21st, 2004.

    Hey Dan,

    Thanks for your work on the Thisaway design for Blogger. I think the layout of the different elements is great. I’ve started tweaking it with my own set of colours and backgrounds for a new project/blog that I started recently.

    It took me a while to figure out how you’d set out the background images. To be honest I was quite annoyed that you’d used a single background image across the main content area and the links bar on the far right, that kinda thing gets on my nerves. I’d much prefer that they were separate content areas that (if need be) could easily be shifted around, e.g. if you want to switch the links bar on the left from the right.

    Anyway, great job, thisaway is a very pleasant generic design thats inviting, as you put it.

    Regards,
    - Markavian

  27. Posted by soph on Tuesday, December 28th, 2004.

    hi dan, I’m using thisawayn rose and mine doesn’t wrap properly either. I don’t want to have to change my post because what’s the point of a blog design when it rpevents us fro writing what we want to write just so the design can stay in place? Nonetheless, I think thisaway rose is really very nce so please send me the corrected code sometime? Thanks.

  28. Posted by scott on Sunday, January 2nd, 2005.

    Amazing work! I love the new templates!

  29. Posted by edwin on Monday, January 31st, 2005.

    dear natalie and soph,

    i’ve been using Dan Rubin’s template eversince is started bloggin this year.

    I’ve experienced wrapping problems, especially the one where the right side bar goes to the bottom of the page. These are the reasons I have found that lead to this kind of problem:

    a.) the use of the italics tag [i][/i]
    b.) an image (or text) on the right side bar that has a width wider than the right side bar
    c.) an image (or text) on the body of the website that has a width wider than the body column. (see http://technobiography.blogspot.com/2005/01/sms-via-web-will-it-ever-die.html for an example)

    so what i’ve done is to avoid italics tags, put the “width” tag on my image tags and limit the use of looooong urls that tend to mess up the layout of Dan’s template.

    Cheers!

    edwin

  30. Posted by Dan Rubin on Friday, March 4th, 2005.

    Many thanks to Edwin for following up with his solution to the wrapping problem — I’ve been toying with the various problem/solution combinations for a while now, and have been remiss in posting my updates.

    I’m preparing a few test cases right now, simple, basic examples of the main problems folks have been running into with Thisaway, and will be posting the information soon (I’ll also address any specific concerns or questions posted here or emailed to me by users, so if you’ve had a question unanswered, it won’t remain that way for much longer).

  31. Posted by Will on Wednesday, March 16th, 2005.

    Hey dan, loved your designs especially how you mentioned about using gradients; what an aswesome idea! i checked out the link in the standards for the people and it was the first thing i noticed while visiting that link, i’d love to know how you did that as i would like to implement this in the template i am currently working on (currenly learning css) any help would be greatly appreciated.

  32. Posted by Court Rye on Friday, April 1st, 2005.

    hey Dan, I chose to use the Minima template as a base to make a flexible layout for blogger. I host all my own stuff and spent some time trying to work out all of the glitches, your site really helped and had some great resources and an awesome community!

    One thing I have noticed is that when I scale the window size smaller (drag the window to a smaller width) my right hand “content” area drops down at a certain point. Is there any way to fix this? I used floating and had to float my content right while the navigation bar floats left to get the edges to align but I left extra space in my percentages hoping to solve the overflow problem…

    I guess it’s close enough :) come check it out at http://court.ryefamily.net/blog/

    thanks again!

  33. Posted by sibyl on Sunday, April 3rd, 2005.

    Hey!
    Your Thisaway Blue design worked great with the name of my site–Indigo Warp! I also found it easy to customise; added a background of my own, and changed a few things around.

    I’ll add a link to your site soon.

    -Sibyl