Alister Cameron // Blogologist

Changing the world. One blog(ger) at a time.

New design, new network, new title, new underwear!

I got to bed at 5am this morning. But I put my head on my pillow knowing I had accomplished what I set out to achieve: a new site design which I can be proud to call my own… not a WordPress theme by someone else.

I’ll quickly summarise all the new stuff that’s going on and then break some of it out in more detail:

  1. A new design.
    This has been my intense labour of love for the last few days. I have been annoyed with myself, that as a designer I have had nothing better to show for myself than someone else’s WordPress theme, good as Cutline has been for me. Now finally I have my own “look”, which I’m quite pleased with. As will all things like this, it will constantly evolve. At present there is no advertising content anywhere, there are a few buttons and bits missing, etc. I’ll keep playing around with it.
  2. A new network.
    This is so exciting! I have joined the Tech Channel at B5 Media. Woot woot! I join the illustrious company of Tony Hung and Search Engine Herald, along with other great bloggers in the other B5 channels including Liz Strauss, Brian Clark and of course, Darren Rowse. B5 have been very good to invite me into the network with my own blog, rather than picking up one from their “stable”. This is a great encouragement to me, because it says they’re more interested in helping to promote me as a blogger than the specific content and brand of a given blog that I might write. That’s a subtle but important distinction to me. A big thank you to Jayvee for bringing me in as one of the crew.
  3. A new title.
    What do I call myself? I’ve wrestled with this for a while. Each commonly used term has its limitations and preconceptions: blog coach, blog consultant, blog strategist, blog promoter, blog marketer, blog optimizer, blog designer, blog writer, blog evangelist, etc. All these are in some sense areas I cover in my work and blogging, but none of them encompasses all the others. So in an act of total desperation (or genius?! Ha!), I came up with “Blogologist”. I figure it’s kinda silly and cute, but more importantly it does make the point that I “do blogs”, leaving the details of that open to interpretation and my own definition. That’s what I want… so blogologist I am!
  4. A new set of underwear.
    No, not literally! This is my way of explaining that I’ve built my new design on top of a really great “theming platform” called Sandbox. I’ll talk about that more below, but for the record, I’ve decided to build all future blogs using that as a base. The only major modification I made to Sandbox was to adjust the markup in order to use the Yahoo User Interface Library’s CSS components, which totally rock.

The new design

2007redesign New design, new network, new title, new underwear!

I don’t know what other designers are like, but in the case of this design, I started with a very precise grid specification. I needed three columns: one for content, one for links and other “panels”, and one for advertising and other value-add content. I had exact column widths I needed to work with, to make sure my layout fitted a 1024×768 screen without introducing a bottom scrollbar. I have remained pixel-accurate to the dimensions I defined for myself. It took customising the YUI CSS Grid to do it, which was all about fiddling with a calculator for about an hour, but I got there.

My design goals were to come up with a look that was about me, since the site URL is my name, the content is all mine, and from a marketing standpoint, I am the brand. Hence the fairly large picture of my face, my name in bold, etc. It helps to have a name that people remember and don’t easily confuse with someone else.

The look I’ve settled on is intended to be clean, elegant, simple, flexible and predictable. Part of good design is “no suprises”… no bad design surprises anyway. That’s what good designers (tend to) stick with one (or very few) fonts, a grid, consistent headers/footers, etc… The reader has to feel comfortable and the familiarity of the page elements, their look, their position, etc. I’ve aimed for that. I want my reader to be comfortable.

Why I chose a font that you probably don’t even have!

Further towards the goal of a comfortable (read: usable) experience on my blog, I’ve chosen a large, readable font called Calibri. Now, before you all beat me to death for choosing a font you’ve never heard of, let me explain! Calibri is one of a set of fonts developed by Microsoft for inclusion in Vista and Office 2007. It’s the default user-interface font for Office 2007, for example. It was developed for it’s excellent readability properties in complement with ClearType. I know most of you don’t have the font… but I’m gambling on the fact that you soon will, for one reason or another. I’m banking on the “weight” of Microsoft, as such. Meanwhile, if you don’t have Calibri you’ll get Trebuchet MS, which is passable in my opinion. I had to choose Trebuchet rather than my other preference — Lucida Grande — because it’s the font with the closest font metrics to Calibri. Sadly Calibri renders very small for a given font size, compared to Courier New, at the other extreme. How two fonts can be, technically, the same size and yet render to such a different size on the screen is almost a joke, frankly. But that’s font metrics for you.

I’d really love you to go and get the new Vista fonts so you can see my site the way I designed it. You’ll also be getting some really lovely fonts to boot, so no harm done icon smile New design, new network, new title, new underwear! The easiest legal way to get the fonts is to download the Microsoft Office 2007 Compatibility Pack (27.1Mb), which includes the fonts as well as a much of other useful stuff for people needing file portability with Office 2007 users.

Tell me about your underwear again…

I admit… I’m a perfectionist! I want to do things the best possible way every time. That’s why it was a fairly easy decision for me to go with Sandbox as the base theme for my custom WordPress theme. See, Sandbox is… well… aw heck. I’ll let the creator explain it:

The Sandbox is a theme for themers. It has the ability to be easily skinned, so beginners will feel comfortable styling it since they only need to know CSS. More experienced themers will drool at the rich semantic markup and profusion of classes, dynamically generated by a few functions.

I love Sandbox because it generates exactly the kind of HTML that a CSS junkie like me drools over. You may recall my ClassyBody plugin of a few months ago. This plugin was trying to do in one tag (the BODY tag) what Sandbox does right across the entire HTML markup: add rich semantic markup in the form of class attributed and IDs so that I can style all elements and pages in a very detailed way, depending on the specifics of the content.

Just one example: above the top story on the front page of the site is a TOP STORY icon. It’s nowhere else and doesn’t appear in the markup at all. It’s purely a CSS styled thing, using the following definitions:

body.home .p1{
    background: url(alistercameron/top-story.gif) no-repeat;
    padding-top: 1.5em;
}
body.paged .p1{
    background-image: none;
    padding-top: 1em;
}

Don’t miss the critical point here: (most) other WordPress themes simply don’t have this markup. They don’t add classes to the BODY tag indicating what kind of page you’re on, or whether the user is logged in or not… Sandbox does. Most other themes don’t number each post on the page sequentially so you can tell which is the first one (i.e. p1)… Sandbox does.

(My ClassyBody plugin remains a great option for people who need to enrich their CSS options for an existing theme. Otherwise I recommend starting with Sandbox, which does a lot more than ClassyBody is designed to do.)

A Great Freebie from Yahoo!

The final new “undergarment” of my blog redesign is the use of Yahoo’s CSS Grid, Fonts and Reset components. These do a few things, but it really just boils down to a really smart attempt to standardize what a designer is faced with when he starts doing the CSS for a given project. See, there are subtle variations across browsers that get you in trouble if you don’t know what you’re doing. This one CSS file from Yahoo is like a big mallet on a badly laid carpet: it hammers out the bumps and weirdnesses that are hiding under the surface before you go and stick all your furniture in the room.

The Grid system is the real fun bit, from my point of view. And although you might be inclined to fear the intial “learning curve”, I love it. Given that I build sites and blogs a fair bit, it’s one less thing to worry about: I have all the intial skeleton of a site (i.e. a strong, unbreakable grid/layout) built in moments… a skeleton that I know has been tested and will carry the weight of a full design.

Now, if you’re going to explore the Grid system, here’s a great shortcut: the YUI Grids Builder. It’s a browser-based gizmo where you tell it what you want and it spits out the HTML code you need. How easy is that!

Finally, on this underwear issue, I should add that the integration of the YUI Grid markup with the Sandbox template files was really easy. I renamed a few elements, added a class here and there, and that was it. I am tempted to release a variant of Sandbox with this Yahoo Grid stuff included in it, but I’m not sure that needed, since it’s so simple. If folks care enough about this, I’ll post a full tutorial. Please make your interest known in the comments.

Conclusion

I am very excited to have been able to get this design out in time for the announcement of my addition to the B5 Media blogging family. It’s been a lot of work but heaps of fun, too.

I should add that this is my second site designed with Sandbox and the YUI CSS components. The first is a blog redesign I did as part of a blog consultation with the wonderful crew at Scrapscene.com. That’s a review post waiting to happen… stand by for that icon smile New design, new network, new title, new underwear!

I’d love to hear your thoughts on my new design. I’m not the type to be precious about these things, so let me have it. I am aware that there is a big cleanup yet to be done: too much in-line CSS and JS, not all buttons and content from the old format has come across yet, no Adsense or TLA or other ads have reappeared yet, etc. So bear with me. I’m getting there.

29 Comments

Note: Commenter website links are not no-followed, in case
you were wondering... I believe in rewarding commenters!

  1. Posted 7 years, 4 months ago // Permalink

    Great stuff Al! A minimalistic new post to go with your minimalistic new design (only 1870 words? :P )

    My only criticism is that you need a “Comment” button at the bottom of each post on the homepage.

    Oh, and Congratulations on cracking the Top 10,000 Technorati blogs – leaping from about 12,000ish to 7,768 today.

    Brent

  2. Andy
    Posted 7 years, 4 months ago // Permalink

    Beautiful design – it’s not easy to mix enthusiasm, professionalism, and simplicity, but I think you’ve pulled it off.

    And congrats on the move to b5!

  3. Posted 7 years, 4 months ago // Permalink

    Welcome to b5! I’m the Science and Health Editor and must admit I popped over here via Technorati when I thought a BIOLOGIST had joined us without my knowledge. :P Blogologist is a good thing too. lol

  4. Alister Cameron
    Posted 7 years, 4 months ago // Permalink

    @Brent – thanks for the congrats mate :)

    @Hsien Lei – thanks for having me! No, I’m no good at things biological, unless you consider the fact that I have four children!!

  5. Posted 7 years, 4 months ago // Permalink

    Hi Alister. I love the new site design. And thanks for all the web design links. I went right to the theme link yesterday, when I first noticed you were modifying your look, and read a little about sandbox. Pretty cool. I’m only a blogspot blogger but I started with their Minima template – which has nowhere near the features of sandbox – for similar reasons.

  6. Posted 7 years, 4 months ago // Permalink

    Nice renewal – doubly so, AC. Subscribed!

  7. Posted 7 years, 4 months ago // Permalink

    Nice design. And congratulations on your new job title – Blogologist – very catchy.

  8. Posted 7 years, 4 months ago // Permalink

    Congrats, and nice new design. What exactly is your blog fitting into the b5 team as? Maybe I missed that?

  9. FrankB
    Posted 7 years, 4 months ago // Permalink

    Hi Alister,

    congrats to the b5 thingy and the new design. Both great news!

    I’d love to see you explicitly add white as a background color though. If you want a screenshot of your site with a grey background (my default) let me know… Looks a bit ugly ;-)

    Cheers
    Frank

  10. Posted 7 years, 4 months ago // Permalink

    Great looking site, I like, may have to take your lead and redesign mine. Thanks for the tips…great info…oh and thanks for the previous post…no one is perfect…

    Thanks for the word of the day…blogologist.

  11. Posted 7 years, 4 months ago // Permalink

    Alister,

    The blog looks great! It’s obvious you put a lot into it. Congratulations on joining b5.

  12. Posted 7 years, 4 months ago // Permalink

    The one thing that I really liked a lot was that little widget from addthis.com. I added it to my blog. I couldn’t quite understand why people were complaining about the speed of loading the page. I didn’t particularly notice it. The one thing I did notice is that the new font gets translated into something very nice in Firefox on my Ubuntu / Gnome system. In fact that font looks a lot better than it does on Windows XP. One other thing. I am trying to figure out how to join B5. I am not as prolific a blogger as they would probably want me to be. Still, I try to keep to a weekly schedule if I can, given that I have 2 blogs. Anyway, I quite like your site as well as the references to those great little gizmos and widgets like the Yahoo CSS stuff. Very interesting.

  13. Posted 7 years, 4 months ago // Permalink

    Alister, I like the new design. I’m going to check out Sandbox and the Yahoo Grids CSS stuff. I’d love to see a tutorial on how to slap the two together. I’m using a slightly tweaked Cutline for now, but there are some things I’d change if I could start over.

    Keep up the good work.

  14. Posted 7 years, 4 months ago // Permalink

    Congrats on Joining B5 and new Design. :)
    One point about fonts – You should use fonts which are universal and ara standard for all platforms, not Microsoft properitary.
    And your betting too much on Vista’s success which i think is a mistake in making.

    Vishal

  15. Posted 7 years, 4 months ago // Permalink

    “Why I chose a font that you probably don’t even have!

    Further towards the goal of a comfortable (read: usable) experience on my blog, I’ve chosen a large, readable font called Calibri. Now, before you all beat me to death for choosing a font you’ve never heard of, let me explain!”

    Alister
    This is hopefully a font I’ll never have :-) unless because of my work I’m ‘forced’ into buying it http://www.BadVista.com as the case has been with xp. Nice site though. Kylie

  16. Posted 7 years, 4 months ago // Permalink

    Congrats on the B5 gig

    I must admit I am trying to get used to the design, though I am not a designer.

    You know I have a thing about sitewide blogrolls, last I heard from Jeremy there will be a move away from that concept by B5, and that thing would be more thematic.

    How comes you ended up in Technology rather than Business?

    Most of your content I have read in the past would suit that section better, especially if they will be moving to cross linking thematically.

    I did try to take a look at http://www.alistercameron.com/tag/gadgets/tools/
    Seems to be a broken link

    Does this indicate a slight change in content direction with more “geek” like content, and less “suit” type. (note: not used in any derogatory way, I love both types)

  17. Posted 7 years, 4 months ago // Permalink

    Thank you for the info you the grid thing- I will definitely use that, and would be interested in your tutorial if you were able to post one.

  18. Alister Cameron
    Posted 7 years, 4 months ago // Permalink

    @Vishal and Kylie – I understand your concerns about MS and fonts, etc. But you have to remember I’m a designer from way back and I get all gooey and lovey-dovey about fonts. Typography is not a science, it’s a love affair. I don’t claim to have made a smart decision… I just looooove the font!!

    By the way, Kylie, you don’t have to get Vista to get the font. I tried installing Vista on my notebook and after most of a day had to back out and return to XP… after endless cycling from boot to BSOD (Blue Screen of Death), over and over again. Turns out I had a video driver issue that can’t be resolved.

    Nuts.

  19. Alister Cameron
    Posted 7 years, 4 months ago // Permalink

    @Andy – great observations mate! Here’s my thought on the question of what channel I am in: the business channel is already full up with blogs about blogging, the tech channel is not. Although I certainly would have felt right at home, especially beside Brian Clark and Liz Strauss, for example. As you would be aware I can spar with the best of the marketers and technologists alike… so whether I’m here or there is not a big deal. Heck I could have been in the writing channel too, for argument’s sake.

    The cool thing about this being my own blog is that I can write whatever I want, and that means both freedom to stay broad (anything about blogging) and equally the freedom to dialogue and respond to the concern and interest of my readers, which can evolve over time, etc.

    Lastly I also have a thing about sitewide blogrolls and am not happy to have it there unless I can “AJAXify” it as I did on the previous design of my site. Problem is the AJAX stuff doesn’t allow post-load execution of JS, at least not except in very precise situations. So I am scratching my head… as you would say, I’m gunna be leaking a lot of Google Juice off the page and off the site.

    Any suggestions there would be much appreciated :)

  20. Posted 7 years, 4 months ago // Permalink

    Alister,

    I love the design! I even blogged about it yesterday. The “Connections” area could be cleaned up a bit, but other than that I can find a thing I would change.

    And congrats on b5!

  21. Posted 7 years, 4 months ago // Permalink

    Love the new design. Would definitely be interested in the Sandbox/YUI tutorial.

  22. Posted 7 years, 4 months ago // Permalink

    It struck me as a really really nice design – it certainly stands well out when browsing other b5 blogs!

    As for the font, well I’m in love with these new typefaces from Microsoft and have been sneaking them into my designs for ages now! It’s always a pleasant surprise to see them used elsewhere.

    Nice one!

  23. Posted 7 years, 2 months ago // Permalink

    This new design rocks Alister, you did a great job.

  24. Posted 7 years, 2 months ago // Permalink

    What an excellent post. I’m new to blogging so some of the stuff mentioned is still very fuzzy to me as I’m using the default wordpress stuff.

    I’m very impressed with the design of this site. I hope that I can learn enough one day to be able to design my own blog to the way I want it :) Thanks for the article!

  25. Posted 6 years, 10 months ago // Permalink

    Congrats on the new design and move to b5!

  26. Posted 6 years, 1 month ago // Permalink

    I know what you mean by “What do I call myself? I’ve wrestled with this for a while.” Sometimes it’s so hard to find the right name for something. “Blogologist” is really good and unique!

  27. Posted 5 years, 6 months ago // Permalink

    A great tool for mocking up grid-based design:
    http://agitationist.com/css-grid-design-made-easy
    I think you’ll find it helpful.

  28. Posted 3 years, 10 months ago // Permalink

    Hehe, I think its very important to show your own design, espessialy when your a designer. People might get the wring impression when u use a casual wp blog.

  29. Posted 3 years, 7 months ago // Permalink

    I think its very important to show your own design, espessialy when your a designer.

8 Trackbacks/Pingbacks

  1. techniques, and insights into blogging and WordPress just for you. 10,000 Birds – Nature Bloggers are Bloggers Nonetheless NFL fumbles DMCA takedown battle, could face sanctions (DMCA – Digital Media Copyright Act – Blogs and YouTube Under Attack) Alister Cameron – New Design, New Network, New Title, New Underwear (on designing with the Sandbox WordPress Theme used by me here and available to WordPress.com bloggers for a small fee) Problogger – How Many Categories Does Your Blog Have? (which begs the question of when is too many too many?)

  2. New design, new network, new title, new underwear!

  3. [IMG External link]

  4. view blog

  5. [...] Alister Cameron’s post about his very cool blog redesign, I learned about Yahoo’s grid design tool. I haven’t gotten into it much, but [...]

  6. [...] are partially to blame for this aspiration. A major influence was the post by Alister Cameron,New design, new network, new title, new underwear!, were he talks about some updates he has made with his site including the new design. It is a nice [...]

  7. [...] Sandbox is the WordPress theme that’s not a theme. It has precious little styling except for a choice of positioning and number of columns. Otherwise, it looks like a web page from 1995: Bright blue underlined links, Times New Roman, and unsubtle headings. This is intentional. What it does have is pristine coding and a particular class, or identifier, for every single element on the page in every possible context. What does this mean? Essentially, whatever I want to do with my page, I can. A good platform for learning with and a good platform for building up on. If you’re interested in learning more about Sandbox you might start where I did, alistercameron.com. [...]

  8. [...] Alister’s case, I knew he was a good boy who played by the rules – but I double-checked that his latest redesign was OK according to Google’s webmaster guidelines (just to be sure he didn’t [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*

Current day month ye@r *

    • madmimi.com
    • marketsamurai.com
    • splash.oiopublisher.com
    • www.medialayer.net
    • Advertise Here

  • My Posts in Your In-box!

    Enter your email address here for instant updates in your inbox, whenever I post something new.
    Your email address is in safe hands. Relax!
© Copyright 2007 Alister Cameron. All Rights Reserved Theme // Sitemap // RSS