A Blog Not Limited

to web design, standards & semantics

The Forest for the Trees

Jul 03, 2008

Published in

Since my last post, my main goal was to implement comments. Simple enough, no?

Technically speaking, the process for allowing comments in ExpressionEngine is simple. That is, unless you are a person who is picky or anal-retentive or has a tendency towards over-thinking. In other words: Me.

For me, it has been an exercise in frustration. While I did manage to get comments working, they aren't working as I would ideally like them to work.

Clean Markup

EE's Comment Submission Form appears to be the one and only option for generating the necessary markup for comment forms. However, this tag generates markup that unnerves me:

  • Mixed use of single and double quotes around form attribute values
  • Unnecessary and un-semantic addition of a div to contain the form's hidden fields

I can admit that, in the grand scheme of things, these are minor. But I am an XHTML specialist. Semantic, clean markup is what I care about. These "minor" issues don't feel minor to me. It feels like lazy coding on the part of some developer. Lazy coding that I don't know how to reverse engineer.

And then there's …

Accessibility vs. Spam

I recently read Joe Dolson's Spam vs. Accessibility, which made me all too aware that there just isn't a great solution that meets the needs of both.

EE's default option is CAPTCHA. As a user, I have found CAPTCHAs more than annoying, if not completely unreadable at times. I also don't like how they restrict screenreader users (among other accessibility issues).

Ian recently posted Akismet for ExpressionEngine, and he implemented it on his blog. Yet it felt "clunky" to me: When I submitted a comment, I was then redirected to a completely different page informing me the comment was pending approval.

Ultimately neither of these options — or anything out there, really — feel "right" to me.

Let me not forget …

Comment Live Preview

I don't really care for the default EE comment preview functionality. I really want a live preview option for my comments.

I found a quick and dirty LivePreview script on the EE Wiki.

So what's the problem? First and foremost, I want an unobtrusive solution. But I also want:

  • Comment author's name to display as a link if they enter a URL value
  • Comment text to display links if the user enters a link value

I pretty much suck at JS, and all my efforts to get it working as I wanted only resulted in a major headache.

Doh!

So, after trying to make decisions about these concerns and attempting to re-engineer the default solutions, I realized I was just wasting time.

And then the light bulb went off: What is my top priority?

This is the simplest question, and I know it is always the place to start for any project. I tell my clients this, I tell my boss this, I tell my colleagues this. Yet I got so caught up in the details, I never considered it myself.

For this blog at this point in time, my main priority is simply learning ExpressionEngine. The rest of it is valuable to consider and will be revisited, but it has only served to keep me from staying true to that main priority.

So, here's how things stand today:

  • Using the default EE comment submission form, shoddy markup and all
  • Using CAPTCHA for anti-spam measures, regardless of accessibility and usability issues
  • Live preview displays plain text name and comment information, and won't work if JS is disabled

Before I forget …

A Little Bit of Style

If you are reading this post on the blog, you will notice I've finally put some basic styling in place (happily borrowed from my design portfolio).

This is just to improve readability, help me fine-tune my markup, and give me a sense of how I want my content visually presented on the most basic level. Still, this styling — like everything on A Blog Not Limited — is a work–in–progress.

The final visual design of this blog is a long way off. As all good designers should know, content must precede design. And I'm still futzing with content every day.

I know my priority now. Design will have to wait.

HTML5 Cookbook

Interested in HTML5?
Get the Cookbook!

I was a contributing author for HTML5 Cookbook, available for sale on Amazon! Get yours now! (I hear chapters 1, 4 and 5 are particularly good.)

P.S. Don't forget my book Microformats Made Simple is still for sale!

Tags:

Share the Love

Ian's Gravatar

Ian opines:

07/03/2008

Great post Emily. I fully agree. Like you I’m also anal about some of the code EE spits out of it’s built in forms and have gone to great lengths and took tons of time fixing what has minimal, if any, “average” end user impact. I need to keep the eyes on the goals and keep the nit-picking for after the important things are complete.

Regarding Akismet, the message you saw was probably rendered with a notification template I haven’t gotten a chance to re-style yet.

I also saw that a Recaptcha plug-in is available for EE (shared in my del.icio.us bookmarks). If I were forced to use CAPTCHA, I would want to use one that also helps OCR old books.

PS: Your last paragraph in the intro has “comment” duplicated.

PPS: I’m posting this from my BlackBerry 8830… Yay for semantic XHTML!

Emily's Gravatar

Emily responds:

07/03/2008

@Ian Thanks for pointing out the typo ... yet it just gives me another detail to think about: delete a typo or use a “line through” style to indicate the change? Argh!

Double argh! Now I see I need to style and modify the content for author (my) comments… Damn this is never ending.

I’ll add that plug-in you mention to my list of things to revisit.

But, yeah, rock on semantic XHTML!!

Gryffyn's Gravatar

Gryffyn opines:

07/04/2008

Recaptcha is pretty cool and it’s a good cause.  It’s probably good enough captcha for general use.  One note, though..  it only requires that you get the “known” word correct then uses what you (and thousands of other people) type for the “unknown” one to try to determine what the unknown one actually is.  Neat system, but maybe not as strong as some.  Still worth checking out for a good cause.

BTW: The blog is coming along nicely, Emily!

Commenting is not available in this channel entry.

The Coolest Person I Know

Emily Lewis

Yeah, that would be me: .

I'm a freelance web designer of the standardista variety, which means I get excited about things like valid POSH, microformats and accessibility. I ply my trade from my one-person design studio in Albuquerque, New Mexico 87106 USA.

A Blog Not Limited is my personal blog where I pontificate about web design, web standards, semantics and whatever else strikes my fancy. Head on over to Emily Lewis Design if you'd like to see my work or, even better, hire me.

More

I Tweet, Therefore I Am

Follow @emilylewis on Twitter!