Hi, I'm david (b) hayes.

lindseywb (ASA)

Perhaps I’m the only one who has noticed. Perhaps others have noticed but decided to remain silent. Perhaps others who noticed weren’t silent, but spoke while I wasn’t paying attention. (To be fair, a few noticed and spoke up.)

Whatever the case may be, I have an announcement: “Zoom” is replacing “Increase Text Size” in most browsers. And though I confess to initial ambivalence, I’m increasingly certain this is a good thing.

If you’re not sure what I’m talking about, click on View and look for “Increase Text Size.” Can’t find it: congratulations you’re using IE7, Opera 9.5, or Firefox 3. (Safari still seems tied to text size.) If you can find it (or a similar), you’re looking at old technology.

Now, this will all be largely irrelevant to those who don’t spend hours tinkering with CSS, but this does has some important implications for us that do. Many web designers — I count myself among them — have gotten into the habit of sizing as many things as they can with ems.

Sizing with ems allows people who need bigger text to get it, without breaking your design. If your browser still has “Increase text size,” you can play with it on this page. You’ll notice that everything scales. (Well, almost everything. The divider won’t, more on that choice can be found here.) With the design I’m using, this is a relatively unimpressive feat, but it does demonstrate the point.

There are problem with designing with ems, primarily that images — barring some fancy footwork — won’t change like other elements. This is why zoom is much more useful than “Increase text size:” it scales images as wells. Further, this means that designers using ems are becoming, essentially, outdated. Using pxs or even pts will now (well really, when “Zoom” browsers completely replace “Increase Text Size” browsers) have the exact same efficacy as styling with ems.

And now, if your cared, you definitely know. And if you didn’t, you still know. Congratulations on learning something.

It’s a problem that all internet users face from time to time. I, seemingly incapable of reading anything but a computer screen, face this problem all the time.

The problem is essentially this: page views are what determines advertising rates on the internet. The more page views a website has, the more they can charge advertisers. Thus they have a perverse incentive to stretch even the smallest article over many pages.

I loathe this practice, and as a consequence I’ve thought about it quite a lot, and so I’m here to offer the internet some salient advice on the topic.

• Paginate responsibly. I offer for you consideration, a list of the top 25 band logos of all time. As the rather famous Jason Kottke prefaced his link to the site, only offering one image per page is absurd. Surely it’ll give you a massive number of page views for those who are willing to click all the way through, but you also risk a massive number of people quiting after three clicks.
• Make a single page view available. This strike me as a reader as absolutely required, but I’m appalled by the hordes of respectable sites that refrain from doing so.
• If I must, I’ll use “Print View.” This is a double loss for most publisher, who (thankfully) refrain from putting an ads on their printable page. Unfortunately, these views are also ugly and unoptimized for screen reading (that is, if they were optimized for reading at all).
• I’ll leave if it’s too hard. If you offer a single page view, you’re only half way there. You also need to make it easy to find. Putting it at the top of the page is probably best, putting it at the bottom of the page makes sense. Whatever you do, don’t hide it or I’m apt to give up on reading your content entirely.

Practical Examples

If someone understands how to paginate on the web, it’s the New York Times. Not only do they offer a single-page view, and not only is there a good amount of line-spacing, but they’ve made the button easy to find. Right at the top of every single paginated article (and right to the right of this text) they have a convenient “Single Page” link for me to click before I even start reading.

Another, but different, style is offered by The Weekly Standard. The conservative weekly’s website could perhaps use a face lift, but their pagination policy’s sensible. Though the don’t offer a simple single page view, they never extend an article past page two. The effect of this is that though a reader must “turn” the page, even for long articles you don’t have to “turn the page” 24 times.

Also of note is an online “magazine” I love, Slate. Because I’ve confessed to being a fan, I can and will now browbeat them a bit. You should know that the average Slate article is one or two pages long. Now consider this: after the first page, right by the pagination links they offer a “single page view” that snaps to after the end of page one. This policy is more sensible than the one in use at The New Yorker (where the “single page” link in the same position takes you to the top of the single page view), but it’s flawed. After all, for a two page article — again, Slate’s average length — this has essentially the same effect as click onto page two. If articles were routinely three or more pages long, this would make sense. But as an avid reader I feel confident in saying that this is rarely the case.

Surely it’s hard to get it right, this choice between pageviews and reader satisfaction. Most websites do an admirable job. But that doesn’t mean I won’t still be a little bitter that they aren’t putting my desires first.

jquiz

I — and many other people who sometimes opine on blog design issues — think its rather useful to have images on posts. They’re a quick introduction to your topic, a way to jazz up your text, and a great way stand out at least a little bit.

And if you’re like me, you’re not exactly a prolific photographer with thousands of images that you can use for all kinds of topic you might write about. Also, you probably don’t want to go about buying photos to use. In such a case you have two choices, one legal and one not. (I’m actually ignoring the existence of free stock photos, because I’ve never found them terribly useful.)

The illegal — or at least problematic — way is to take them from other website. One thing I used to do, was hotlink directly to Yahoo!’s images. And I’ve also used Google Image Search, without regard for who owned the image or what have you. If it looks roughly like I wanted I’d upload it to my own server and use it.

And so now, assuming we’re not pirates, we have a problem in need of a solution. And there is a very easy solution: Creative Commons images. As you very well may know, Creative Commons is a license in which the creator give away some — but crucially not all — rights to what they’ve produced.

The easiest and best ways to find Creative Commons licensed images is with a Flickr Advanced Search. Down on the bottom of that page, you’ll find an option for Creative Commons licensed images. For myself, I always choose “Find content to use commercially” simply because I want the least stringent and problematic license. What you find there doesn’t exactly leave you home free. Almost all — perhaps all, I don’t know — CC images require a citation. Some also require other things, but this is the most important requirement from a design perspective.

Designing Images with Citations

DWQ

We’ve established the need for citations on images you might use on your blog. And there are indeed a number of ways to cite. Many conscientious people lacking some know-how simply add a “The image on this post is from Mr. Flickr” at the end their posts. But for myself, I wanted something at least a bit more elegant than that.

For inspiration, I’d always liked the way that The Economist’s website displays the citations on its images (see random example), and decided to mirror it. There were mild changes I made beyond that — for my own aesthetic preferences, but that was the layout — and CSS code — to which I referred while devising this solution — which you may notice in the out-of-place-photos of Optimus Prime and Canadian geese, each lazily stolen from Frozen Toothpaste entries (here and here).

I have two basic ways, both of which work essentially like this in WordPress’s “code” editor for a given post:
<p class="rightcite">
<span><a href="http://www.dummyurl.com/">Dummy Photographer</a></span>
<img src="http://www.myadress.com/images/dummy.jpg" />
 </p>

As you may be able to tell from this rather simple (X)HTML, this simple creates a paragraph while will carry the styling from the CSS class “rightcite” — more on what that means later. The next line is the photographers name, with a link to the URL that they want used for citation. For our purposes, it doesn’t really matter what’s on that line so long as it’s wrapped with the “span” tag, again used for styling. The third line is simply the image, preferably hosted on your servers, though there’s no reason it must be.

A note: The use of the paragraph (“p”) division rather than the more traditional “div” simply because WordPress seems to choke on anything but the paragraph division. If you’re using a different content management system, feel free to see if it can handle the use of a “div” rather than a “p.”

Now, we must style this stuff so that it looks good one our site:
p.rightcite {
display: block;
float: right;
margin: .1em 0 .1em .5em;
background: #f1f1f1;
padding: .2em;
border: 1px solid black;
}
p.rightcite span {
display: block;
text-align: right;
font-size: .8em;
color: #555;
margin: -.5em 0 -.4em 0;
 }

As you may be able to tell, the first set of styles is for every part of the “rightcite” paragraph. The crucial things to note are the “display” and “float” properties. The rest just makes it look the way I want, but those two make the paragraph float to the right.

The second set of styles is for our citation, again the most important part here is the “display” attribute, which prevents the citation from floating all over the map. The rest is again mostly for aesthetic concerns.

Now, you may be interested to see a similar thing for a centered image, which is just a bit more complicated.

p.centercite {
display: block;
text-align: center;
margin: .8em auto;
width: 468px;
 }

The crucial thing here is the width declaration, which is needed to keep our “span” text from floating away. Obviously, by declaring a width for this paragraph you’ll have to keep your images to that width for proper functioning. You can change that width in an implementation on your own blog, but I wouldn’t recommend changing it once you’ve decided what width you’ll use.

There are some other notable ways to do a similar thing as all this with different methods. The most interesting and prominent in my mind is Derek Punsalan’s, which uses custom fields. I’ll leave the explanation of that technique to him.

fdecomite

If there’s one problem in this ever-growing blogosphere, it’s that sites are so easy to create that no one worries too much when they die. So they continue to sit out here with the living, quickly becoming useless piles of bones that get in the way of the rest of us.

This is a problem in itself, but it’s one with which we can cope. We can cope so long as these bones aren’t intentionally made to look more alive than they are. So long as bones show themselves to clearly be bones, we living members are pretty able to avoid those we don’t really want to look at.

But a problem arises when you hide that your website is a skeleton. When you decide that you’ll get rid of post times or — and this is far, far worse — dates. Then when I come upon your site a quick glance around doesn’t tell me if I’m dealing with a skeleton or a living, breathing, changing blog

And if there’s one thing I less like than a dead blog, it’s a blog that doesn’t quickly fess to its deadness. Some otherwise great blogs and themes have this problem. I really like a lot about Brian Gardener’s Revolution theme, but I hate that no version puts publication times or dates on all the articles shown on the front page. Perhaps this was intentional or a simple oversight, but I don’t like it.

This is the internet age when lifespan of content is measured is hours, or — if we’re to be very generous — days. In such an atmosphere not telling me when your content was published is like admitting that you’re not a part of these exciting and rapidly changing times.

In some situations you could get away without times. Yahoo!, for example, doesn’t offer them on it’s homepage. And the Washington Post and LA Times are both lax about the times their stories were written. But they’ve got a great deal of built-in trust as well-known sources of information, and arguably important ones. A visitor can easily guess that, at most, the content is a day old.

But visitors to MyRandomSite don’t know who you are or what you do. They don’t know that they can trust that you’re not a pile of bones. So you need to tell them. Not much is needed; seeing “March 5, 2008” on a post is enough in most situations. That way I can tell that if nothing else, your site’s not a pile of bones. Maybe you’ve not updated in a few days or hours, but I know when you were last seen breathing. In a place where content’s cheap and credibility costs a great deal, that little bit matters a lot.

So please, bloggers, webmasters, web designer, and spectators, put a time stamp on your content. On your front page. Tell me that you’re not expired and I’m more likely to stick around and give what you’re doing some consideration. Thank you.

Armed with a firm desire to create a WordPress theme different from the others that I’ve made and little plan as to what that should look like, I made new theme that was first called “Small Verdana,” then “Old School,” and now the compromise “Retro Verdana.” It is, I suspect, ugly. But it’s also loaded with novelties I once loved and relished.

From the first webpages I ever made — with FrontPage, I must confess — Verdana was one of those fonts that I knew to use and even liked. I’ve also admired the false depth which is easily created by changing border colors. And I’ve always had a undeservedly strong affinity for the color #336699. And “Retro Verdana” has all of those things. And ugly as it may be, I like the result of combining those things. A lot.

To see this little beast for yourself, click here for a demo. Or, since you may well be too lazy, look right below this line.

Essentially, the issue is this: I have strong suspicion that “Retro Verdana” is ugly. Really ugly. Especially to modern tastes, but also to the timeless ideals to which I’d rather aspire. But I also can’t seem to avoid smiling every single time I see it. I can’t help saying: maybe you’re not the prettiest gal, but I’d still love to dance with you.

I can’t avoid the desire to post this theme and share it publicly even though I could be forever condemned as a victim of hideously bad taste. And I can’t avoid relishing in both the unsightly and the nice and novel features which, to even my surprise, I think it has.

So I guess the whole point is that I have two words to say to those who think it’s ugly: I understand. And I have two words for those who admit fondness for it: I understand.

You can download Retro Verdana here, and find its page here.

As I suggested earlier, I’ve been casting around for a plan that would assure that I didn’t again neglect Ikiru Design in the way I recently have been. This is both an issue for my free themes — which I first planned to have at 1.0 on January 1, then January 15, then ???, now ????? — and for general read-worthy content on this site.

On the first problem, I don’t yet have a good solution.

On the second, I have this: one post a week. This is meagre compared to the five a week I average at Frozen Toothpaste, and the five a day I average at Link Banana, but those are different sites with different topics and objectives. Once a week is a realistic goal which I feel confident I can achieve. This is roughly what I was doing before I took an almost accidental hiatus, and if I really commit to it I’m sure it’s something I can expect to manage.

This could also work to force me to do more work on my free themes, as in an inspiration-less week I could still have some easy-to-accomplish CSSing to fill the gap. That’s the new plan, and now that it’s public I hope I’m more likely to stick to it. And that’s not a lot, but it’s something.

I just changed the theme here back to the first theme I ever made: BWO. This is for a couple reasons, probably the most important is that I’ve been using Carter’s Line (which I was using here) at my link blog, Link Banana. It’s also because I’ve been negligent regarding this site and its themes. And I really would like to work on it more regularly.

As the title of these few paragraphs suggests, I’m not ready to say that I’m back to doing this regularly. But I’m thinking about how best to make sure I don’t neglect this so seriously in the future, while assuring that it doesn’t monopolize more time than I can give it.

I’ll be sure to let you know when I figure out a plan.

The epic showdown. Two titans of free internet content-management will meet in this arena. Only one can emerge victorious.

Two things should be made clear at the outset: (1) I was looking to make a link blog, not a typical tumblelog with multiple kinds of posts, all formatted differently; and (2) I eventually chose (self-hosted) WordPress. Yes, I just killed the drama. But this is about a comparison, and not (as I implied in the last paragraph) about winners or losers.

There were, three battles in this war. The first is the one that only matters to the proprietor: the back-end. This focuses primarily on how easy it is to create and edit entries for such a blog. Second, and what was the deciding factor for me, was archiving. That is: how easy it is to find what you want among the old stuff. The final issue is rather nebulous, but we’ll call it flexibility. That being whether each CMS can do the splits.

The Back

This is, without question, the place where WordPress loses a lot of points. And where Tumblr shines, especially if you’re looking for more than a link blog.

Tumblr’s backend is stylish, as the image at right demonstrates. I could go all the way to elegant and perhaps beautiful. Essentially you select the kind of post you’re going to be making, and then you’re taken to a specific page that’s tailored for making that kind of post. If you haven’t played around with Tumblr, it might be worth signing up just to see this.

WordPress, on the other hand, is a hulking CMS which can do lots of things. But it’s not terribly elegant at any of them. The way I create a post for my link blog demonstrates well. On the top the title, post text, and tags are entered. Then the link is added down at the bottom in the “custom fields” area. In which I’ve had to create a custom field called “link,” in which I put URL I want this entry to point to.

The use of custom fields — by definition separate from WordPress’s normal working — also makes it slightly hard to style entries properly, and harder still to make the feed act correctly (a problem I still haven’t fixed on my blog). I don’t need to go into detail, but suffice it say that it’s a headache.

Advantage Tumbler

The Archives

This is where WordPress, comparatively, shines. And the reason that I decided to throw my lot in with the ugly backend of WordPress, rather than the snazzy ease of Tumblr.

Tumblrs archive (see random example) look nearly as fresh and innovative as Tumblr’s backend. When I first saw one I said: “Wow. This is cool!”

And even though all those statements are true, Tumblr’s Archives are troublesome. For one, I’m not a fan of horizontal scrolling, which any reasonably old blog would have. And the only way to search such archives is with a browser’s built-in search fuction — which works, but is hardly elegant. And the ability to navigate with tags, of which I’m becoming an ever bigger fan, is completely out as well.

By contrast, WordPress is built for archives. The archives page I’ve thrown together for my nascent link blog gives you some ideas. There are tags there, as well as categories and monthly archives. Sure there’s a lot less flash than Tumblr’s page, but this has something else that Tumblr doesn’t. The ability to search. Built-in. And search plus all the ways you can view a WordPress archive means a lot to me.

Advantage WordPress

Flexibility

As I mentioned at the start, this a rather nebulous category. It encompasses most everything that I haven’t mentioned but feel the need to.

Both Tumblr and WordPress have a large array of themes. For the purposes of tumbling or linkblogging, Tumblr’s better in this. As for the novice, some seemingly-complex things have to be done to any WordPress theme to make it work at all.

Both tumblr and WordPress can exist at their own domains (though the tumblr default is X.tumblr.com, it can be easily changed). Having said that, all Tumblr backend work happens at tumblr.com.

Also, if one is reasonably skilled, it should noted that WordPress can do much more than Tumblr. But many, not even myself, are reasonably skilled.

So for the novice Tumblr is probably a wise choice (note that I’m not wise), you can’t do many of the things that WordPress allows you — seperate pages, for example — but the ease-of-use is hard to beat.

This is hard to call, so I’ll go ahead and do it the easy way:

Novice: Advantage Tumblr

Level 3 Nerd: Advantage WordPress

Conclusions

This contest is hard to call. Each CMS got 1.5 points out of three. As I suggested, I would decide this based on nerdiness. If you’re comfortable with CSS, HTML, PHP, and WordPress, I think that’s the obvious choice. If the acronyms in the last sentence confused and disoriented you, Tumblr’s probably a wiser bet.

Forced to choose an overall winner, I think I’d choose Tumblr.

The only reason I’m not currently using it is that dislike it’s archiving system. And that I like the possibility for future improvement when I finally get smart and motivated enough.

I hope I clinched the choice for you, affirmed what you were alreay thinking. Neither system’s terrible. Neither systems perfect. It’s just important to choose the best one for your needs and abilities.

I recently redesigned my non-design blog, Frozen Toothpaste, and did it with a variation of the BWO_one theme. At first I was very hesitant to go with a BWO_one variant because it meant that I’d lose the sidebar which the theme I had been using, Chris Pearson’s Copyblogger had had. It was some of the arguments that I’ll present here that convinced me that that would be OK.

Now, I should be clear that this is not an argument that no blog (or other website) should have a sidebar. I think they’re incredibly useful in a lot of cases. When I surf the blogosphere, I tend to favor the sidebar as a way to get around.

But the sidebar’s usefulness gives way to one of it’s biggest flaws: the clutter problem. Bloggers — who tend to be novice designers — tend to dump anything and everything into the sidebar. Most people probably have seen this problem before, but if you doubt me go spend a little time looking though blogspot.com or wordpress.com, you’ll notice what I’m talking about.

The problem starts benignly when a new blogger will say: “I want a little note to be easily visible,” and they’ll dump it into the sidebar. They’ll say “I want a RSS subscription button (or perhaps one for every feedreader known to man)” and that’ll go in the sidebar. They’ll create multiple blogrolls, and then a few images and maybe some links to their own content. And they’ll ad a last.fm widget, and a flickr widget, and a translations widget, and the “awards” they got from other bloggers. And it’ll all go into the sidebar. By the time they’re done no one wants to see, let alone click on the cluttered mess that resides where a simple sidebar used to.

I’ll readily admit that this story is a slight exaggeration. Many sidebars are manageable while they contain all the desired content. But that doesn’t change the fact that sidebars have latent tendency to become ugly and unmanaged clutter magnets.

Another strong argument for banishing the sidebar is that, especially but no exclusively when weighted down with moving widgets, they’re a hideous distraction from your writing. This may not be a concern for some bloggers, but I’d bet that the vast majority of people who blog do it as a way to practice, polish, and improve their writing. You want readers to look at and comment on what you’re writing, not be whisked off to yet another blog.

It not that a sidebar is an unavoidably bad, or that it shouldn’t be used. The issue is primarily that one must consider if they really need a sidebar. If you don’t it’s far better to use a design without a sidebar than to persist in having one that offers no function you desire.

There are risks in eliminating it certainly. But for every visitor that’ll be turned off by your lack of a sidebar, at least one more will be interested enough to try to see why you’ve eliminated it. It’s not that ever site should either have or not have have one, but every person designing for blogs should think about their merits and problems before making more of them.

The Economist is without question my favorite newsmagazine. Where Time and Newsweek have spent a great deal of that last decade covering more about trends and celebrities, The Economist stays nearly as constant and high-minded as its title would suggest. And though both of those traits can sometimes be bad things, in this case I quite like them. No other publication gives you regular updates about what’s happening in so many places around the world. And I feel confident in saying that no one on the entire planet (with the possible exception of its editors) knows everything in an issue of The Economist before they read it.

Having said all of that, the magazine’s website is a little drab. Though I like the simple functionality of the “current issue” page, it’s not exactly a groundbreaking layout. The frontpage is also admirable-but-boring, giving you a quick snapshot of some of the sites freshest and most interesting content while doing a great deal to prevent the overload that comes from many magazines and newspapers.

But I recently ventured into the publication’s rather modest blog section, and I feel confident in saying that I understand why the commenters are so few and far between. The section feels rather like an afterthought.

But the biggest problem The Economist’s blogs seem to have — and this isn’t a problem particular too them — is that they look so darn boring. Their economics blog, Free exchange, does a very admirable job highlighting the problem. Upon loading the page, my first though was: “I’m supposed to read this!?” And remember: I’m an ardent fanboy of this publication.

Now before I lay into The Economist too hard, I will readily admit that I experience this often with blogs, even my own (which any fool could tell you I value much more than those of others). Large blocks of smallish text, especially in a readable-but-slightly-dull face like Verdana or Arial, is a sure way to make me think a little before reading. And as anyone experienced in the use of Digg of StumbleUpon can tell you, that second’s hesitation may well send away over half of those who arrive on the page.

Now I dislike those that to tell you that you should front-load a post with photos and pull-quotes and other eye-catching tricky to convince fools to stick around. But after looking at the blogs of The Economist I know understand the advice in a way I didn’t before. I would never advocate pictures for every blog and entry, but they can certainly make things seem a little less drab.

To avoid giving the canned “use pictures” advice, I’ve thought of a few ideas that I think could help improve the blogs of The Economist and probably could improve yours as well.

• Subtitles for blogs. The first sin Free Exchange commits is that it doesn’t tell me what I’ll find there. If I’m a quick thinker, I may make the inference that the title probably refers to something like commerce, trade, stock markets, or economics. Were I a fool (and we shan’t ever forget that I am) I would probably say “Hmm…” and either leave the site or look down the blog.
• Subtitles for content. If there is a single flaw that almost every blog on the planet (mine included) has, it’s that you don’t have more to go on before diving in than than the few words that make up a post’s title. But even the most pithy title can strongly benefit from an intriguing subtitle, as both Slate and Salon illustrate (in randomly selected articles).
• Too much sidebar. This is harder one to judge, and a much harder one to agree on. Some think that sidebars should be stuffed or exploding, I certainly don’t. One of the strongest arguments against a sizable sidebar is made by Free Exchange: a interesting sidebar easily distracts attention from your boring-looking content. This (too wide) sidebar is distracting with its ads and pictures and colorful tag cloud. All of these things make me more likely to click around (and perhaps away) and less likely to realize how good and useful the blog’s contents are.
• Hard to get around. The Economist seems to be struggling mightily to hide their blog content from outsiders. Not only is it hard to click to the site’s other blogs when you’re in one, but it’s hard to find content within that blog. Other than the distracting tag cloud, there’s the thin-and-nearly-hidden link to their month-by-month archive and a list of recent posts. All of these are rather standards in the blogsphere, but they’re hardly good. The site’s Archives page, when you finally find it, look suspiciously like the default WordPress archive that I’ve worked to correct twice before.

Those four issues certainly aren’t an exhaustive list of the (disputable) flaws in The Economist’s blogs. The clearly-broken look of their American politics blog Democracy in America is perhaps a greater sin than any of the above bullets. But I’m glad to have noticed these sins, and hope they can be instructive in my (and perhaps your) future work.