As you might have noticed if you’ve visited the site anytime in the past three days, I’ve been messing around with the design a bit. I can’t promise I’m done tinkering yet, but I think I’m almost where I want to be. I had two, basic goals: to provide better navigation among my four personal blogs — Via Negativa, The Morning Porch, Moving Poems, and the occasionally updated Woodrat Photoblog — and to make this blog in particular easier to read and navigate.
The new top navigation bar is my attempt to solve the first problem, though I do worry it may seem a bit grandiose, like I’m trying to set myself up as a one-person blog network. But why not? Think of me as a poetry-obsessed Arianna Huffington or Om Malik, minus all the pesky traffic and employees. And actually I did get the CSS code for the univeral nav bar from another one-man show, WordPress lead developer Mark Jacquith (always steal from the best).
Preliminary results from the stat plugins on each blog do show a slight uptick in cross-site visits, which is what I was looking for. Each of the first three sites has its own fan base, which is great, but it doesn’t hurt to remind people about the other ones. And I do feel that the main navigation menu for any site should be confined to intramural links; mixing on-site and outside links in the same menu strikes me as questionable usability. So it was good to get the Morning Porch and Moving Poems links off of the main menu here, and make room for other stuff.
Of course, some people never notice anything at the top of the screen, but that’s O.K. I still list and describe “My other projects on the web” at the bottom of the sidebar.
Speaking of the sidebar, that’s obviously one of the things I’ve changed in my effort to make Via Negativa more readable. I’ve been very impressed by the theme I’ve been using for The Morning Porch, Ian Stewart’s Kirby theme — especially by how readable the main column is with really big type. Stewart referenced something called The 100% Easy-to-Read Standard, which begins,
Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.
I spend a lot of time crafting the stuff I publish here, so I think it’s worth thinking about how and whether people read it. Over at qarrtsiluni, we try to combat the average reader’s tendency to skim material on the web by providing audio for every text post, so people can listen along while they read. That’s too much of a hassle to do here; the weekly podcast is already enough work. But I started thinking of the literary sites I find easiest to read, and generally they are distinguished by large type and lots of white space, just as the above-linked article recommends. Take a look at this typical page from Poetry International Web, for example: Wadih Saadeh’s “Shadows.” Or check out Linebreak, or the big honking type on Necessary Fiction. Pretty enjoyable to read, aren’t they? That’s kind of what I’m trying to duplicate here.
Except for the white space part. I am not willing to give up on the stuff in the sidebar just yet. If readability were my sole concern, I’d do away with sidebars altogether, as I’ve done at my two static online collections of poems, Spoil and Shadow Cabinet (and yes, I’ve increased the font size at both those sites as well). But I have to balance readability with other goals, such as improving access to the voluminous Via Negativa archives, and also linking to other people’s blogs, which is a vital part of the whole blogging enterprise.
Do I really still need two sidebars, though? It might seem as if I could do away with the sidebar version of Smorgasblog and just keep it on its own page, but if I did that, it wouldn’t get nearly as many readers, and the people I link to wouldn’t get much of a boost in Google or in Technorati, as I understand it. The only real option I think would be to do away with it as a semi-separate blog and integrate link posts with main-column material, possibly distinguished by some special styling, à la Tumblr. (I could still filter them out of the main RSS feed, so as not to annoy subscribers by sending too many posts their way.)
I am still thinking about this — any feedback would be appreciated. Obviously with just one sidebar, I could have lots more white space. On the other hand, I don’t think my current strategy works all that badly: putting sidebar material in a lightly colored box and a different font does seem to set off the main content pretty well, though I may not be the best judge of that. I am also thinking a width of 520 pixels seems a little cramped for 16-pixel type. (One alteration later — see comments — the main column is 540 pixels wide, and looking a bit less cramped, maybe.)
By the way, if you’re the kind of person who likes to nose around in stylesheets, be prepared for a bit of a shock when you look at mine. It’s a mare’s nest. When WordPress adopted the slogan, “Code is Poetry,” I don’t think this is what they had on mind. On the other hand, since I know so little about the fundamentals of CSS (and even less about PHP, the main language WordPress is written in), playing around with the design and functionality of one of my blog sites reminds me very much of trying to write a poem: I am rarely sure what will happen when I try something new, and nine tenths of what I try never makes it out of draft. In short, it’s an adventure.
Well, Dave, if you ever stop tinkering with your design we’ll know it’s time to come and get you off the mountain. I like the legibility of the new main column though I think the type is a little too big, maybe. The double sidebar has always bothered me (too busy, too many little letters) and I tend not to look around in it too much, but hey, I’m more of a minimalist and I almost never tinker with my design. My hat’s off to you for always trying to improve on an already-good thing.
Thanks, Beth. Unfortunately I think my decision to switch to underlining for links in the sidebar added to the impression of business, as well — but I find different colored type even more distracting.
“I almost never tinker with my design.” That’s for sure! In fact, the cassandra pages even stayed the same when you migrated from Blogger to Typepad — an extraordinary level of consistency.
It’s much easier to read for me–lately I’ve been reading you only in my RSS reader, where I have a nice big font for my poor old eyes, and just coming over here when you have interesting pictures. This means I often miss comments, both the reading and the leaving of them, as well as Smorgasblog, and that’s a loss for me.
“Easy-to-read” gets more important as the eyeballs age.
Well, I’m glad this was easier on the eyes, then! One thing about our corner of the blogosphere is that it is dominated by aging boomers, I think, which makes it all the more imperative that we design our sites for readability.
Excellent to read this! Most media isn’t geared to anyone over age 30. It is irritating, and demeaning. I have many blog friends over age 50, as I am.
P.S. I find the double sidebar too much, too. I have a 17″ laptop in order to put as much on the screen in one go as possible!
P.P.S. You must keep in mind colour blind and colour deficient readers, as well as the disabled, with voice readers for useability issues.
Thanks for the feedback. I still haven’t decided what to do about the Smorgasblog.
Looking good, Dave. Evolution rather than revolution.
Three thoughts:
1 – “I am also thinking a width of 520 pixels seems a little cramped for 16-pixel type.” Agreed. Your page is constrained to 940px at the moment and I’m sure that could stretch to 960px with no complications. Opinions differ, but try a search on “web page width 960” and you’ll see it’s quite common.
2 – your comments about being a one-man blog network mystified me. What is he talking about, I wondered? After a minute or two, I finally noticed the grey nav bar with the four sites, at the top. To my eyes, it merges completely with the grey tabs in my browser (Firefox/Windows). Not an issue in IE or Chrome, but you might want to consider making it a different colour so it stands out better. Same colour as the sidebar background?
3 – I’m not particularly keen on the two-column sidebar, it looks rather busy. I might like it better if it wasn’t boxed and with a background colour, or if the main content was slightly wider. At the moment I feel it’s rather inappropriately dominant… it feels like it’s pushing the main content to one side.
Hope this is useful.
Very useful; thanks. I might try 960 and see how that affects that main-column-sidebar relationship. Or decide if indeed I want to do away with the sideblog and go with integrates asides, as you do on Hydragenic. The trouble with changing the color of the top bar is that it needs to look O.K. with four different sites, and gray is pretty easy to get along with.
Fair point about the top bar. Maybe a small 5px or 10px white space above it to make it stand out a bit better? Or would that look messy?
Don’t pay too much attention to the way Hydragenic looks… it’s long overdue a revamp. My dissatisfaction with its four year-old design is doubtless one of several reasons my posting frequency has dwindled. Most of my online efforts have been directed elsewhere for the past year. (After seven years of solitary scribbling, I’ve found that I much prefer collaboration.)
Yes, isn’t it interesting how the look of a site can influence one’s enthusiasm about posting to it? At least I always find that to be the case.
Another way I might make the top bar more noticeable might be to place a small icon in it, as both Blogspot and WordPress.com do with theirs. May even just a small RSS link on the right.
O.K., I’ve just widened the container to 960 and the entries column to 540. My screen resolution is 1024×768, and I’m not sure I’m keen about the loss of whitespace on the left at this width. On the other hand, the sidebar does seem less dominant now. Hmm. Of course, I could always end up ditching the color, too, but I want to live with it for a few days, first.
On my 1680×1050 monitor it looks lovely, but I temporarily reconfigured to 1024×768 and I see your point. Hmm indeed :-)
I love it when you tinkle, I mean tinker. Seriously, I always learn lots and get motivated to improve my own stuff.
Hi Deb – Glad you found this inspiring (and thanks for linking). My primary motivation in writing it was of course to gather feedback and let people know why I hadn’t been posting, but I do think the readability issue deserves wider attention, even here in the low-rent end of blogosphere.
I very much like the top inter-blog navigation bar. Personally, I find it subtle, not at all “grandiose”. The silver tabs blend nicely with my Firefox browser tabs. It provides an elegant transition between blogs. Nicely done.
Ah, someone else who’s kept the default Firefox look! (I must admit I fail to understand the urge to trick out one’s browser — the focus should be on the content, shouldn’t it?) Good to know that the top bar works for you. Thanks.
I like the top nav bar across all your sites. It makes it easier to navigate between them, I think.
It looks good from here. Very readable. I especially like the sidebar put into another color to separate it a little.
I frequently tinker with my layout in much the same way that some people like to tinker with their cars–just to play and learn. Sometimes it’s as fun a part of blogging for me as the writing. Perhaps you’ve inspired me to think a bit about readability some more.
Thanks for the feedback, James. Yeah, I think we’re very much on the same wavelength where blog-tinkering is concerned! And I’m enough of a WordPress fan-boy to make a point of visiting blogs like yours and Deb’s regularly (as opposed to reading them in Google Reader) just to see what you’re up to.
I’m ashamed to admit that as I have been building webpages since the chello web browser days. I had always favored tiny fonts and dense layouts.
I’m not old yet, but man to I love handsome, reasonable sized font with plenty of white-space. I hope the trend continues.
Hi David – Yes, that Vigilance theme you’re currently using is a gem. And this is a trend that will almost assuredly take hold, because Ian Stewart’s Kirby was heavily borrowed from for the next default WordPress theme, 2010, which will replace Kubrick in the next major release (WordPress 3.0). Check it out. If the past is any guide, this default theme will be adopted outright by tens of thousands of new sites and used as the basis for hundreds of new themes, both free and premium. Not only that, but the WordPress devs at Automattic were so impressed by Stewart’s design work and philosophy that they hired him as their new “theme wrangler.”
I love that new WP default theme. In terms of width and layout it’s basically what I was after when I rebuilt my site a year and half ago, but it’s always felt a bit off. Looking at that and your changes here, I think it may be the font size. I expanded the content area to accomodate larger photos but never expanded the font size. Perhaps I’ll try that. It’ll probably also make it easier for some folks to read.
Well, of course sans-serif fonts are easier to read, so I’m sure you wouldn’t need to go quite as large as I did. There’s an optimal balance between font size and line length which I think Ian Stewart touches on in the blog post introducing Kirby.
O.K., actually it was a quote from Josef Muller-Brockmann in the article from iA on The 100% Easy-to-Read Standard: “The width of the column must be proportioned to the size of the type. Overlong columns are wearying to the eye and also have an adverse psychological effect. Overshort columns can also be disturbing because they interrupt the flow of reading and put the reader off by obliging the eye to change lines too rapidly.”
Great stuff – all much appreciated improvements (I didn’t see it until after the above discussion and final tweaks).
Very helpful to me too, as I slowly struggle to set up a new blog/site. It won’t be exactly what I’d like, because I have zero ability to tweak the code, but I’m endeavouring to respect all the principles you mention here as far as possible.
Good to know you found this helpful, Jean, and look — if you do need to tweak something, shoot me an email. I’d be glad to help.
I like the changes, Dave, and thanks for the props on Linebreak. I’ve been thinking a lot about type and type sizes lately, too. Have you checked out Typekit? It’s a font licensing and delivery service for web sites. It’s changed the way I approach web design. I just relaunched my personal site with a font from Typekit called Museo.
Hi Johnathon – Thanks for stopping by. I have checked out Typekit, but only briefly — not long enough to actually figure out how it works. I’m too much of an open-source zealot to readily embrace the idea of buying a proprietary font (though I’m still not ready to give up my Microsoft and Adobe products — ah hypocrisy!). Maybe I’ll give it another look, though.
Ah, so you’re one of those open source people. ;) Well, if it makes you feel any better, you’re already using a proprietary font (Georgia), just one that happens to be licensed for use within most operating systems. Make the jump! Personally, I think Via Negativa would look great with Skolar.
Good point about Georgia. Not sure I can afford Typekit, but I will keep it in mind — especially for qarrtsiluni. A less boring sans-serif font than Arial, and a stable look across browsers, might be worth paying for.
This is your best font yet, I think. Really easy to read. And I’ve always liked two sidebars. If I were a more prolific blogger, I’d go for two myself.
Yes, I think we’ve always had pretty similar tastes in web design. Thanks for the feedback.
I think it looks great, but maybe no background color on the sidebar – check this out
I switched my sidebar to the left a while back on the theory that people still look at the upper right first and that’s where the important content should go, but I mostly blog for friends and myself, so I don’t worry too much about design.
For open source MS and Adobe replacements, I use Open Office and The Gimp.
Well, I don’t know. I’ve heard some pretty convincing arguments for main content on the left in a left-to-right culture, but one way or the other, themes with sidebars on the right certainly to seem to outnumber those with sidebars on the left by 10 to one now, so maybe it’s reasonable to expect that readers are accustomed to looking left for main content. Of course, I do want them to read and click on Smorgasblog stuff, too — I’m getting a pretty good amount of traffic (for a literary and nature blogger) and I’d like to spread the love around.
I’m sure I could make the switch to Open Office without much trouble, since all I ever use is Word and none of the fancy funtions. Gimp can’t be any harder than PS, but since I have the latter, no reason to switch yet. The main Adobe product I be hard pressed to live without is the audio one, Audition — way better than the open source alternative, Audacity.
By the way, your link didn’t come through. Try again?
Dave, I still don’t think the top navigation tabs are obvious enough. Can you move it any closer to the photo banner? I think the problem may be more the white area below the navigation tabs – on my browser, the tabs look more like they’re part of my Firefox navigation than part of your blog.
I hear you, but I don’t think it looks good any closer. It especially looks terrible butted up against it, but any distance less than or equal to the width of the bar looks bad to me (granted, I’m not a designer and you are). I’ve added an icon to the right end of the bar, but that’s about as far as I’m willing to go to make it look more noticeable, because I really don’t want it to stand out all that much. As I’ve said, I repeat those links at the bottom of the sidebar anyway.
OK, here’s yet another suggestion. How about matching their color to the general background color of your banner (a sort of teal greenish-blue on my monitor?)
Well, I’m not sure that would match the colors of the other three blogs, but I could try it.
I am really leaning toward eliminating smorgasblog as a sideblog and integrating those posts with the main entries, by the way, so I can go to a single sidebar and get more whitespace around the main column. And then I might also move the series list to a page linked from the menu to reduce some clutter on what would then be the rump sidebar.
Out of really dreadful laziness I hope you won’t move smorgasblog away from via negativa. I use VN and google reader as my two home bases, and if you spun smorgasblog off to a different site I might start skipping it, which I think would be shame. I often glance two or three times at a smorgasblog entry before thinking, “what the hell *is* that?” and finally clicking on it. I.e. I really like the way that it nags me — persistently but gently, from off on the far right there, where I can ignore it if I please.
Hi Dale – I’m glad to hear how useful it is to you, and sorry I haven’t done a better job with it (like, how did I miss that great post by Miguel at Laughing Knees on the funeral for a cat last month?!).
Don’t worry, it wouldn’t move to another site. If I do away with it as a sideblog, the smorgasblog entries would be easily distinguishable from the main content by some sort of special styling: a different fort, a light background color, etc. And you’d still be able to click on the smorgasblog category page and read them all together.