Our Story

Hi, friends. I got the insatiable urge tonight to completely migrate the site over to WordPress. Unlike some switchers, I’ve completely broken the rules. RSS is broken, old links are broken, and I’m even using the default freakin’ template.

I mean, hey, it’s a blog, right? What’s the fun of having it if I can’t break it every now and again? Anyway, I’ll probably be fixing these things on an ongoing basis. Let me know what you’d like to see fixed and I’ll try to take care of it. I’d love to give some first impressions of WP, but, frankly, this isn’t the first time I’ve played with it. The user interface is very well done, and doesn’t have that eerie sense of abandonment that the MovableType interface had.

You’ll also notice that the Links have been integrated into the main blog. I realized that a separate Links blog just wasn’t working out. The few that knew to read it recognized that the site was updated on a regular basis, but I think it was a real turn-off to a lot of folks. Links are also now open to commenting, which I think will help with the community feel of the site.

The migration, by the way, was a piece of cake. WP imported both sets of blog entries just fine. I did a bit of SQL magic to work around the MT hackery I cooked up on the backend. Man, if I’ve learned anything about software with Movable Type, it was this: if a piece of software won’t do what you want, don’t kludge together a clever workaround that will end up sucking the life out of you later. The template hacking I did in Movable Type did make posting Links easy, but, in the long run, made the site conceptually difficult to keep straight in my head. Every time I went to change something on the backend, I had to jump through conceptual loopholes in order to remember how I’d set it up in the first place. In other words, it wasn’t obvious, and it wasn’t simple. I’ve already got enough cognitive dissonance to worry about without having my blog software introducing more.

If anyone was on the site today between 2:30 and 8:00 PM EST, you were likely greeted with a few hundred random comments whose authors linked to some pretty repulsive sites. Movable Type made the cleanup an excrutiating process:

# Find the latest comments listed in the blog editing menu
# Click them to find out where they were left
# Click on the parent blog entry
# Tag any other offending comments for deletion
# Close comments for that entry
# Save, rebuild, wash, rinse, repeat

There were over 200 comments for which I needed to repeat this scenario. Thankfully, some SQL came in handy. Closing comments for the whole site was as easy as UPDATE mt_entry SET entry_allow_comments = "2";. But, still–that was half an hour of my life wasted deleting comments (and now another half hour wasted writing about it).

Ironic that this should occur so close to Jeffrey Zeldman’s recent affirmation of basic human goodness. That, and my consideration of setting up comments for the links.

WordPress already has features that help comment administration–including moderator approval–which I’d like to implement after switching (an event that is no longer an if). In the meantime, comments will only be open on the five-or-so most recent entries.

Darin recently suggested that I include some comments on the links section of this site, so people can discuss the often thought-provoking links that I find. Rather than go off-topic on another thread, I thought it would be best to reply here, and open the discussion to anyone who wanted to chime in.

I’ve kicked around putting comments under the links, but it would mean contending with a couple of issues.

# I haven’t seen a design that makes good, clear sense out of sidebar comments yet. That doesn’t mean I couldn’t pioneer one, but I haven’t put a lot of thought into it.
# I’d also want it to be simple to maintain. Comment spammers will blast anything they can get their ‘bots on, so I want to be sure that policing an additional comments section doesn’t become more trouble than it’s worth.

The good thing is that these links are driven by a Movable Type blog, which means that the engine is there–I would just need to figure out how to keep the design and maintenance simple.

I’d be interested in hearing thoughts on how this might be possible, especially from anyone else who has encountered this problem and how they solved it.

Okay, it’s finally out there, and I’m welcoming feedback. First, let me take care of the obvious.

# The redesign is not site-wide. It will be in its final incarnation, but for now I’m focusing efforts on the cover page. It’s just easier to make changes on one page rather than hundreds.
# It looks like crap in Opera. Sorry. Perhaps together we’ll figure out why Opera is appending page icons to every freaking link on the page.
# The HTML doesn’t validate. One thing at a time.

The new design really builds on what I’ve been learning about web design over the past year or so. There were really two main goals for this project: maintainability and simplicity. Our Story was rapidly outgrowing itself. The random photos on the sidebar were getting old. The Of Interest links felt like a hack. Chunks of static content were getting stale. Bits and pieces of the site were being overlooked and either got crufty or would break altogether. I wanted the redesign to be able to cope with more changes down the line rather than create more work. This involved (will continue to involve) quite a bit of choping and hacking on the back end.

One of the first things to go was Dean Allen’s wonderful Refer. Nothing against Dean, I just think I’ve calmed down a bit in terms of tracking who is visiting the site. Not too long ago, I was obsessing over every single inbound link to our site, trying to figure out who was talking about it, when, and how they got here. This gets old after a while–I’m chalking it up to personal growth. Beyond that, though, Refer has been the target of referrer-log spam campaigns. Keeping up with the spammers was too much of a headache, and I was loathe to give them free Pagerank, so Refer’s gone. It may come back as some other form, but probably not for the general public to peruse.

From an information architecture perspective, the site has taken on a particular paradigm that I’ve been thinking about. This paradigm focuses on the question of whether or not a site section has breadth or depth. If the section has breadth, it generally has a few spread-out pages at close to top-level URLs. The About section is a good example of this. There’s a description page, a templates page, and my résumé, and not much else. Site sections with depth, on the other hand, generally have an archive strategy that involves ordering entries by date or category or both. The Links section and the Blog both fit this criteria. For every site section that has depth, I’ve created a whole new blog in Movable Type. It sounds like a lot of overhead, but, if set up properly, can make routine updates a breeze. If there’s interest, I’ll maybe post more information on our site structure, but I’ll leave it at that for now.

As far as the layout of the pages is concerned, I’m focusing on the same simplicity that the previous design had, while expressing some (hopefully) more developed tastes in typography, whitespace, and balance. The sidebar is gone–I was tired of seeing relevant content marginalized into 200-some-odd pixels. If something’s worth displaying, it’s going in the center column. There’s a box for important annoucements on the home page (more of those, soon). Also worth noting is that I’m now ditching our random image rotation in favor of a more consistent photo presentation. The photo banner at the top of the page will be updated every couple of weeks or so with a new image that’s relevant to what’s happening now in our lives. You can even click the image for a description, and I’m playing with the idea of a timeline view.

Oh, and I think a cover page is a much cooler place for site summary information rather than a hokey Flash advertisement.

What do you think?

It’s got a grip on you now. You dream in drop-shadows and unordered lists.

Today you went to the bridal shop with herself so she could order a bridesmaid’s dress. You spent your time alternating between sketching thumbails and picking out color schemes from the array of fabric around you.

It’s there, in the advertising you see as you drive north on 8^th Avenue on the way home from church. You pick apart what works and what doesn’t and why. You spend your free time reading about typography–typography.

The nights are divided between hacking templates and considering the architectural implications of the word “banner” vs. the word “photo.”

It’s got a grip on you, and it won’t be long now.

You’ve come up with a brilliant scheme in order to make some fast cash, but your inimitable brilliance is stunted by the fact that you can’t come up with a marketing gimmick. How, oh, how will you reach your audience? Just how will you raise awareness of your illustrious product on unwitting innocents all over the world?

Will you take out clever ads in hand-picked magazines and newspapers that target your audience? Nah–that’s probably more money than you can afford. They say you have to spend money to make money, but why spend it when you can get your advertising for free, right?

Will you, then, shrewdly take out some text-ads on Google that will match your product to individualized searches? Nah–that’s probably too risky for you. I mean, who knows if anyone will really click on it? And, besides, there’s still that pesky problem of the cost.

Perhaps you’ll go construct a thoughtfully laid-out website, using Web Standards to increase your visibilty in search engines? Gosh–that’s far too insightful, for you, isn’t it? I mean, if you were that sharp, you wouldn’t be getting involved in quick and dirty schemes to make a fast buck.

Ah…I know. You’ll go haunt the personal weblogs and online journals of thousands of people all over the web–the sites into which people pour their lives on a daily basis to keep touch with friends and family. You’ll pepper their commenting systems with subtle, seemingly relevant references to their content, and strategically link your name back to your product website.

It’s free. It raises the visibility of your website without your having to clean up your disasterous markup. And–best of all–you really didn’t have to think about it at all, did you? It’s such a easy and simple scam, that even you could come up with it!

Well, I just thought I’d warn you that I pay close attention to our comments. You should know that any and all comments that refer–even in the slightest way–to some sleazy marketing product or website are instantly and unceremoniously…

DELETED!

Now, do us all a favor and go do something more reputable with your time, won’t you?

…I dunno–I kinda like ‘em.

(Courtesy of Dan Cederholm)

Well, this was inevitable: Our Story is now Section 508 compliant. That means that people with disabilities are better able to explore this site due to slight tweaks here and there in our code. If this sounds esoteric to you, you might want to check out these links.

Mark Pilgrim: The myths of web accessibility. The next time someone stands up in a design meeting and claims that you don’t have any blind customers, ask them if they care about search engine placement. Then remind them that Google is a blind user who reads the entire Internet every month, and then reports what it sees to millions of its closest friends.

Nic Steenhout: Accessibility: Build it, and They Will Come. I asked Pete to put in a ramp. He then asked me, ‘why should I put a ramp in? You’re the only customer I have in a wheelchair.’ I asked him why he thought that was.

Jim Byrne: This HTML Kills. Anti-discrimination legislation in Britain and in America is increasing awareness of accessibility. The Americans with Disabilities Act makes it illegal for companies offering services on the web to discriminate against people with disabilities. There are already examples of citizens taking action against companies with inaccessible websites.

Section 508, by the way, is a set of accessibility guidelines that are required by government agencies and businesses by law. It’s been in place since 2001. WAI, on the other hand, is a set of guidelines determined by the World Wide Web Consortium–the standards body for the Internet. These guidlines have been a W3C recommendation since 1999.

Accessibility is both easy and hard to do for your site. It’s hard in the sense that retrofitting any website with any new technology is just difficult. This is a huge argument against XHTML and CSS right now–it’s simply too costly to overhaul the site, and who has the money? But, it’s also easy in the sense that, if your site is reasonably well laid-out, it doesn’t take a lot to reach section 508 or WAI priority 1 compliance. The trick is to decide how well-structured you’re going to make your website. If you’re stuck using web design techniques from the mid-nineties, then working towards a well-structured site will not only offer you better accessibility, but less bandwidth used (com’on, you are paying for your bandwidth, aren’t you?) and easier maintainability. Google also rewards well structured pages. No, seriously, it does.

Once your markup validates, taking care of accessibility issues is a lot simpler–there are far fewer errors that come out of the validator, and the ones that do are reasonably intelligible. I recommend checking out Mark Pilgrim’s online book, Dive Into Acessibility. Going through the instructions there alone got me to Section 508 compliance. A few more tweaks here and there qualified the site for WAI priority 1 accessibility.

Unfortunately, though, that’s as far as I got. The only thing keeping this site from priority 2 accessibility is this problem: “Do not use the same link phrase more than once when the links point to different URLs.” What that means is that there are links on this site that use the same exact text, but point to different places–namely the “n Comments” links. There will be the occassion, from time to time, when two blogs will have the same number of comments and will break this rule for priority 2 accessibility. The Bobby validator would seem to imply that changing the title attribute of the offending <a> tag would solve the problem, but it didn’t. Interestingly enough, another validator, “Cynthia Says” let me off with a warning about repeated link phrases. Hm. Jukka Korpela notes this as being an odd behavior in the Bobby validator–even the W3C home page has repeated link phrases that point to different locations.

For more resources on Accessibility, you may want to check out these links:

* Dive Into Mark: Accessibility
* Jeffrey Zeldman: Accessibility and Section 508
* A List Apart: Accessibility
* World Wide Web Consortium: Web Content Accessibility Guidelines
* Section508.gov

Update: Rather than trying to deal with what otherwise seems like a bug in the Bobby validator, I’ve settled on posting a WAI badge–rather than an AAA badge–on the footer of Our Story. As best I can tell, this site is in compliance with the World Wide Web Consortium Accessibility Initiative, Priority 3.

Well, glad that that’s settled. It’s been so frustrating having the site down over the past week because there’s so much stuff I’ve wanted to blog about.

Vacationing in rainy North Carolina and an over-night Linux install of Apache, PHP, MySQL, Perl, phpMyAdmin, MovableType and all their dependencies (which was actually quite easy with Ximian’s Red Carpet software) enabled me to do some serious blog tweaking last week. It was nice because there were a lot of things that I’d seen around and wanted to do, but just didn’t have the time. So, without further delay:

Our Story now sports a spiff navigational aid: the breadcrumb trail. In order to get the metaphor, click on the permanent link for this entry and look at the navigation bar. Then, think Hansel & Gretel. The code required to put this together was just some clever manipulation of MT Date tags and some good old text links. The cool thing is that this is a site-wide feature, so every page on this site can be navigated “backwards” through a “hierarchy” using the trail. The trail just uses a regular-old <p> tag rather than an unordered-list, but I’m open to encouragement on that. Inspiration from Adam Kalsey and Mark Pilgrim, but the real reason I put this together is because we now feature an expanded archives selection.

You can now choose to navigate our archives by date, category, citation, and quotation. The new pages made the site archives a bit cumbersome to navigate, which necessitated a new navigational metaphor. The quotation/citation archive is actually a feature that Mark invented [PG] in his quest to support semantic markup. The citations page lists people (or organizations) that we’ve cited here by the number of citations in descending order. The quotations page lists websites that we’ve quoted by using the cite attribute in the <q> and <blockquote> tags. Pilgrim uses a custom solution that he wrote in Python. It’s taken a while for the blogging community to catch up, but Kevin Shay wrote an MT Plugin that generates these pages called MT Collect. Highly recommended. For information as to how to use this plugin, you could peruse our improved Templates page.

The Templates page displays links to almost all of the templates used to power Our Story. The page features descriptions of what each template does on the site and–here’s a real Ken qua geek moment–the date of the last change to that template. What I did was link some text files to my MT template code, so any time I change a template, its text file is updated automatically. The date on the templates page is generated dynamically with a little PHP that checks the last modified date of the template text file, so I never have to think about it.

I also made some more changes to the Mig Photo pages for user-friendlier layout and to help them conform to the breadcrumb trail structure.

I pulled more hard-coded references to kennsarah.net and “Ken & Sarah” out of the templates and replaced them with the corresponding MT variable tags (this was just necessary to get the site running on my laptop anyway).

Finally, I added a blurb about the Schmoze on the About page.

Whew!

Site’s fixed. Comment away.