15 Ways I've Tricked Out This Blogspot Beta Blog

This post is about the design choices I've made with my blog and some of the bells and whistles I've added. I welcome any comments you have on aspects you like, or changes you'd recommend.

I've put a fair amount of research into all of this and I hope it will save someone else some effort.

1. A Simple Template: I chose Douglas Bowman's Minima template as my starting point not because it's the first choice Blogspot offered, but because it is the least flashy. Black letters on white background, no illustrations. I want my blog to be easy to read, it doesn't have to impress people with my good taste in colours.
2. A Serif Font for text: Back when I started doing Scribbles, I asked Joel, who'd been editing a newspaper, what fonts I should use. He told me that the common wisdon is that you should use a serif font for text and a sans-serif font for headlines. I've done that ever since. With all the onscreen reading I've done in the last few years, I believe that I find it less tiring on my eyes to have the little curlicues on the letters. However, Alex Poole (a human computer interaction expert) has done a detailed literature review and concluded that sans-serif fonts are as easy to read and may be easier on a computer screen.It could be about what we're used to, and I'm used to culicues. I'm open to changing to Trebuchet or Arial if I get a popular outcry.
3. A big scaleable font: To allow a reader to change the font-size on their screen before my upgrade, I had to change all my default font-sizes from "px" based to "em" based. This is now the default that comes with the Minima template and I hope Blogger has done it with the other templates as well. When I go to a site that purports to give web design advice and it has tiny text that won't get bigger, I usually decide their advice may be uninformed.

"Erase non-data ink, within reason." - Edward R. Tufte

4. No Picture Frames: In the early days of my career as a data analysis consultant, I read Edward R. Tufte's The Visual Display of Quantitative Information. It's considered by many to be the best book written on statistical graphics. He has a chapter devoted to the principle that graphics are better when more ink is devoted to data and less ink is devoted to useless information. In my data presentation days, it meant whenever I made a graph with Lotus or Excel, I'd have to spend a few minutes removing all the boxes, shading and gridlines that distracted the viewers eye from the data I wanted them to see and understand. For websites, a reader doesn't need lines around pictures, columns or text boxes to see where they are. To eliminate borders in blogger beta, I set the "border color" to white, which is the background colour, in "Fonts and Colors" [Tufte has a website. I'll have to check it out.]
5. Percentage Columns: The Minima template was set with a fixed width of 800px for the outer wrapper; and something like 500px for the main content column, and 300px for the sidebar. These are excellent dimensions for people using an 800x600 monitor. Most people who come here now have bigger monitors. In the "edit HTML" window of the template, I changed the width of the outer wrapper to 95% (width: 95%;), the main wrapper to 68%, and the sidebar to 28%. When I put pictures in the sidebar, I often set their width to 95% without specifying the height so that the pictures will automatically fit in. If my doing this makes the columns wider than you like, you can make your browser window narrow.
6. Blue and Purple for links: I use blue for new links and purple for links readers haven't followed because they go well with the black text and they are fairly standard so people will hopefully know what they mean.
7. No new browser windows: When I started blogging, I'd make every link open a new browser window by putting target="blank" in the HTML. I did it because I wanted to keep my readers here if they clicked on a link. I've found out since then that there are people out there who consider my forcing them to open a new browser window to be a fundamental violation of their human right to choose how they use their computers and the web. So I took out all my blank targets and now I don't have to spend the effort putting them in. Hopefully you know how to open a link in a new window or a new tab if that is what you woul like to do.
8. RSS through Feedburner: I could just provide the Blogger links to my posting feed and comment feeds, but it was easy to follow the Feedburner instructions and provide links that make it much easier for a reader to add the feed to their favourite RSS reader, or to subscribe by email. The Feedburner feed also also allowed me to put recent comments in a sidebar widget which the blogspot feed wouldn't. As I'm typing this, the sidebar has comments that were recent about a year ago. I'm hoping that's just because of yesterday's republishing when I switched over.
9. Google Calendar: I got a Google Calendar because I wanted to put information about events into a format that lets a reader add it to their calendar or have a reminder sent. Google Calendar does this, and I imagine other calendars do also. I look forward to the day when a single format wins. For now I'm going with the big G. If Yahoo, MS Outlook, or someone else wins, I'll switch. Once I had the calendar, it seemed like I might as well add it to my sidebar and keep it up to date with lesser-known Ottawa events that I think just about anyone would enjoy.
10. Picture Divider: It is very difficult to use blogger to create a post that has images next to text and have only the text you want next to a specific image. I get around this by inserting a divider between text I want to separate. The divider is an image that is the width of the column, the color of the background and 1px high. Here is the HTML for it:

    <img style="MARGIN: 0px; WIDTH: 100%; HEIGHT: 1px; border: 0" alt="divider" src="http://photos1.blogger.com/blogger/1963/1465/320/whiteline.jpg" />

    [Site that gave me the code so I could display this HTML for you.]

11. Pullquotes: Pullquotes are the blocks of text like the one above about erase non-data ink or the one I'm about to put here that will excerpt

    "Pullquotes... can bring a reader back into your text..."

    from this sentence: "Pullquotes visually break up blocks of text when you have no images and they can bring a reader back into your text when they are skimming." I found instructions in several places for using CSS to make pullquotes easy. Then I spent hours and hours failing to make those instructions work. I don't know if it's Blogger or IE6 or both, but the CSS version never worked. So now I open up my little notepad file where I keep snips of HTML (like the HTML for the picture divider) and paste it into the "Edit HTML" window where I want the pullquote to go.

<div style="FONT-WEIGHT: bold; FONT-SIZE: 120%; FLOAT: left; MARGIN: 10px; WIDTH: 35%; COLOR: green"><p align="left">"Pullquotes... can bring a reader back into your text..."</p></div>

12. Visitor Stats: I use statcounter.com. It's free and it tells me which pages people are reading, the sites they are coming from and the keyword searches they are using to find me. That's all I need, even though it tells me more.
13. Creative Commons Licence: Putting a Creative Commons 2.5 licence on my pages mostly means that people can use my material if they give don't make money with it and give me credit. If they want to use my stuff without giving me credit, or they want to make money and it's not fair use or fair dealing, they have to ask my permission. If I didn't want people to use my material for noncommercial purposes, they would anyway and it wouldn't be worth my time suing them. This way, people know it's okay; they know I'd like to be credited; and they are reminded I want to be asked if they have plans that go outside what I'm licencing them to do. Added bonus: My pages show up when someone does an advanced Google Search on "only pages that are free to use or share"
14. Open Comments: I've never used any of the barriers to commenting and I've never had a problem on this blog with comment spam. There have been a few anonymous comments that had mean remarks that I deleted.
15. Categories: I was using del.icio.us as a roundabout way to put tags on my posts and categorize them. Now that blogger beta has "labels", I've switched over. Although it would be nicer if when you clicked on a "label" you got a page with only the titles and a the first sentence or two of the posting. To get the cool looking tag cloud, I used phydeaux3's code and followed the clear directions with no modifications. (Beautiful work, phydeaux3!)

Do you have any suggestions for what I could do differently?