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 tem­plate set has been updated — get the scoop here »

bloggerI’ve been wait­ing to write about this for months now. Really. Blog­ger has finally relauched with a snazzy new look cour­tesy of Dou­glas Bow­man and Adap­tive Path. The new Blog­ger fea­tures not only a nicer, rounder design, but also a much-improved process for cre­at­ing and man­ag­ing blogs — and a bevy of fresh tem­plates designed by some famil­iar names.

Brand Name Designers

Doug recruited some ter­rific design­ers to design and style brand new, standards-based tem­plates for the relaunch (in addi­tion to the fine tem­plates he con­tributed), and I was hon­ored to be one of this select group: Dan Ceder­holm, Todd Dominey, Dave Shea and Jef­frey Zeld­man all cre­ated some fan­tas­tic designs for the new tem­plates (view a list of all the tem­plate designs).

Beau­ti­fully Generic

The trick with this project was to design some­thing visu­ally fetch­ing, but not too per­sonal (the pri­mary func­tion is a reusable tem­plate, which might dis­play many dif­fer­ent types of con­tent), yet indi­vid­ual enough to inspire some­one to actu­ally use it.

Your tem­plates really stand out to me as hav­ing a per­son­al­ity while still pre­sent­ing a ‘generic’ feel…” Dan Ben­jamin

My pri­mary goal was to design a base tem­plate that would work in many sit­u­a­tions, for many dif­fer­ent peo­ple. The best way to accom­plish this from the out­set was to limit the color palette to sim­i­lar hues, which also made it eas­ier to cre­ate alter­nate color schemes that have a fairly dif­fer­ent look with­out hav­ing to change any of the base elements:

For the design, I wanted to play a lit­tle with gra­di­ents, as well as try some lay­er­ing of back­ground ele­ments in CSS to cre­ate sub­tle effects (as it turned out, they are extremely sub­tle). I ended up apply­ing gra­di­ents to every pri­mary ele­ment, though chances are you won’t notice them all right away.

The sub­tle gra­di­ents gen­tly direct the eye down the page, and cre­ate the slight decrease in con­trast of the back­ground arrows in the side­bar as they move fur­ther down the page (get­ting closer to the darker color of the gradient).

Stan­dards for the People

The num­ber of peo­ple who will make use of these tem­plates is astound­ing (it’s already started), and the web is going to be a much bet­ter place for the effort (just think of the hun­dreds of thou­sands of sites that will soon be using well-designed standards-based markup!). I’m very happy with how Thi­s­away turned out, espe­cially the alter­nate col­ors. I think it fits in nicely with the look and feel of the new Blog­ger (though that was entirely acci­den­tal, since none of us saw the design before Sun­day), and com­pli­ments the other new designs while remain­ing unique.

Con­grat­u­la­tions, kudos and thanks to Ev and the rest of the Blog­ger crew, as well as Doug and the folks at Adap­tive Path for allow­ing such a ter­rific team of design­ers to con­tribute to this project.

Blog­ger tem­plate ques­tions? Please search and/or post to the offi­cial Blog­ger Help Google Group—you are much more likely to get a response there than by email­ing 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 pre­tend­ing 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!

    Ter­rific 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 some­thing like this come to fruition — it was a small project com­pared to most (2 days from start to fin­ish), but the poten­tial pos­i­tive impact on the web is huge.

    BTW Jon, I just love your Thun­der­bird icon, you astound me again and again :)

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

    but the poten­tial pos­i­tive impact on the web is huge.

    it is!

    ;)

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

    I like almost all the new blog­ger tem­plates 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 com­pletely about the ban­ner ads, and I’ve already asked Doug if it’s pos­si­ble for us to tweak our designs so they work bet­ter with the ads (we didn’t know the ads would be in place until the redesign launched on Sunday).

    Thi­s­away” was designed to have zero mar­gin at the top of the browser win­dow, so it’s pos­si­bly affected more than the other tem­plates. Hope­fully the Blog­ger team will allow some tweaks, or per­haps include an addi­tional <div> when the ban­ner is present so we can apply a style that “fixes” the display.

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

    Your Thi­s­away Blue style is beaut­fiul… and I use it on my Blogger-powered Weblog. (Link with­eld for pri­vacy reasons.)

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

    Thi­s­away Rose is the one I’ve cho­sen. I think it’s lovely… As I’m teach­ing myself CSS, it’s also help­ful to see how you’ve con­structed it, as a ref­er­ence as I begin to try my own designs. Thanks!

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

    Thanks Bon­nie, it’s nice to know that folks are using the new tem­plates so quickly, and I appre­ci­ate your praise of Thi­s­away Rose (the most fre­quent com­ment I’ve received so far is how much peo­ple love the dif­fer­ent color schemes, since they each set their own dis­tinc­tive mood).

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

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

    Very nice tem­plates… I par­tic­u­lary like the rounders packs.

    Great job.

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

    hi dan.

    i´m new to blog­ger and i´m using your thi­s­away tem­plate, which i like a lot. unfor­tune­taly, when i reached my 30th post the pro­file col­umn just went doooown to the bot­tom of my page. and i don´t know how to solve this prob­lem, since i know almost noth­ing of html. i don´t know if i´m the only one with this prob­lem, but, any­way, would you –or any­one read­ing this– give me a tip on what to do?

    thanks in advance, and greet­ings 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 Thi­s­away for one of my sites. i think it is the best I have seen so far. It would be great if more col­ors scemes existed for it. I am toy­ing around with chang­ing the color scheme. any plans for more col­ors? any tips on chang­ing to a cus­tom color scheme on the Thi­s­away template?

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

    i love the lay­out. so clean and refresh­ing. i’m using it.

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

    I love the Thi­s­away 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 some­where which is caus­ing the side­bar not to wrap prop­erly. Help! This only started hap­pen­ing yes­ter­day and I would really rather fix it than change to another tem­plate. Thanks in advance…

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

    I think your prob­lem is some­thing in one of your posts might be stretch­ing too far like a large image or pasted text, try chang­ing the post that you made when the side­bar went to the bot­tom. Thats what hap­pened to me and I changed it and it worked. I think the lay­outs are pretty good though but I’m using one that come from another web­site called http://blogger-templates.blogspot.com.

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

    Hi Dan,

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

    1.) I’ve been try­ing to, but couldn’t fig­ure out how to put a “Next »” link at the bot­tom of the homepage.

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

    For exam­ple, on the upper right side, we’d see some­thing 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 appre­ci­ate is alter­nate col­ors. Styl­ish, cool, appeal­ing :) You must have been inspired while cre­at­ing it!

    Helen, designer

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

    I’d like to con­grat­u­late you on your Thi­s­away blue tem­plate. I just love it!

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

    Can you point us out in the right direc­tion ? Is there a site were dif­fer­ent blog­ger tem­plates are discussed ?

    I wish Blog­ger would add a page with FAQs and resources for peo­ple who want to tweak the base templates!

    Thanks again for your won­der­ful blog template!

    kila

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

    some of those look good any­where. 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 tem­plates do not work with Firefox.

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

    Hi LN, could you cite an exam­ple for me? The tem­plates were tested prior to release with the most cur­rent ver­sion of FF avail­able at that time, and no updates have been made to the tem­plates since, so it is pos­si­ble that a dif­fer­ent ver­sion of FF has intro­duced some dis­play issues. If you could let me know which ver­sion you are using, and pro­vide a URL which dis­plays the prob­lem (as well as a detailed descrip­tion), 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 Thi­s­away Rose, and is hav­ing a prob­lem with the col­ors not fol­low­ing the orig­i­nal design down the entire page. I’m using Fire­fox, so I thought it was just her, but I viewed it in IE, and it works fine. I’m using the most recent ver­sion of Fire­fox (1.0), and it is really dis­tract­ing. Any ideas?

    Thanks,
    Scott.

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

    hi Dan… I am a new user of the blog­ger. As I saw your tem­plate (Thisway Rose), I instantly like it so I picked it as my tem­plate. There are arrows graphic on the right top of the side­bar and along that, I put dis­trib­u­tor and archives list there. But a month later, it moved itself to the right bot­tom of the side­bar, I tried to change some­thing on the tem­plate set­ting but it doesn’t go back to its orginal posi­tion. Could you please give me any sug­ges­tion to this prob­lem? Thanks.

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

    Hey Dan,

    Thanks for your work on the Thi­s­away design for Blog­ger. I think the lay­out of the dif­fer­ent ele­ments is great. I’ve started tweak­ing it with my own set of colours and back­grounds for a new project/blog that I started recently.

    It took me a while to fig­ure out how you’d set out the back­ground images. To be hon­est I was quite annoyed that you’d used a sin­gle back­ground image across the main con­tent area and the links bar on the far right, that kinda thing gets on my nerves. I’d much pre­fer that they were sep­a­rate con­tent areas that (if need be) could eas­ily be shifted around, e.g. if you want to switch the links bar on the left from the right.

    Any­way, great job, thi­s­away is a very pleas­ant generic design thats invit­ing, as you put it.

    Regards,
    – Markavian

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

    hi dan, I’m using thi­s­awayn rose and mine doesn’t wrap prop­erly 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 writ­ing what we want to write just so the design can stay in place? Nonethe­less, I think thi­s­away rose is really very nce so please send me the cor­rected code some­time? Thanks.

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

    Amaz­ing 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 tem­plate eversince is started blog­gin this year.

    I’ve expe­ri­enced wrap­ping prob­lems, espe­cially the one where the right side bar goes to the bot­tom of the page. These are the rea­sons I have found that lead to this kind of problem:

    a.) the use of the ital­ics 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 web­site that has a width wider than the body col­umn. (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 ital­ics tags, put the “width” tag on my image tags and limit the use of looooong urls that tend to mess up the lay­out of Dan’s template.

    Cheers!

    edwin

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

    Many thanks to Edwin for fol­low­ing up with his solu­tion to the wrap­ping prob­lem — I’ve been toy­ing with the var­i­ous problem/solution com­bi­na­tions for a while now, and have been remiss in post­ing my updates.

    I’m prepar­ing a few test cases right now, sim­ple, basic exam­ples of the main prob­lems folks have been run­ning into with Thi­s­away, and will be post­ing the infor­ma­tion soon (I’ll also address any spe­cific con­cerns or ques­tions posted here or emailed to me by users, so if you’ve had a ques­tion unan­swered, it won’t remain that way for much longer).

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

    Hey dan, loved your designs espe­cially how you men­tioned about using gra­di­ents; what an aswe­some idea! i checked out the link in the stan­dards for the peo­ple and it was the first thing i noticed while vis­it­ing that link, i’d love to know how you did that as i would like to imple­ment this in the tem­plate i am cur­rently work­ing on (cur­renly learn­ing css) any help would be greatly appreciated.

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

    hey Dan, I chose to use the Min­ima tem­plate as a base to make a flex­i­ble lay­out for blog­ger. I host all my own stuff and spent some time try­ing to work out all of the glitches, your site really helped and had some great resources and an awe­some community!

    One thing I have noticed is that when I scale the win­dow size smaller (drag the win­dow to a smaller width) my right hand “con­tent” area drops down at a cer­tain point. Is there any way to fix this? I used float­ing and had to float my con­tent right while the nav­i­ga­tion bar floats left to get the edges to align but I left extra space in my per­cent­ages hop­ing to solve the over­flow 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 Thi­s­away Blue design worked great with the name of my site–Indigo Warp! I also found it easy to cus­tomise; added a back­ground of my own, and changed a few things around.

    I’ll add a link to your site soon.

    –Sibyl