Update: Surprise surprise, IE hates it. will have to look at it a bit more. Use Chrome or FireFox in the meantime, k?

New UI Button – don’t forget to click!

Which is just a link and a span, code-wise:

<a class="uiButton" href="#"><span class="uibb">New UI Button</span></a>

Here’s the CSS:

a.uiButton {
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    margin:15px 5px 15px 0;
    border:1px solid #ccc;
    color:#45a;
    display:inline-block;
    zoom:1;
    font:12px/18px 'Lucida Sans Unicode','Lucida Grande',Helvetica,Arial,sans-serif;
    text-decoration: none;
    background-image: -moz-linear-gradient(top, #fff, #ccc);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff00,endColorstr=#cccccc00);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff00,endColorstr=#cccccc00)";
    *display:block;
}
a.uiButton .uibb {
    display:block;
    border:0px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:2px 5px;
    background:transparent;
    margin:1px;
    background-image: -moz-linear-gradient(top, #fff, #ccc);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff00,endColorstr=#cccccc00);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff00,endColorstr=#cccccc00)";
}
a.uiButton:hover {
    color:#35c;
    border-color:#aaa;
}
a.uiButton:hover .uibb {
    background:transparent;
    background-image: -moz-linear-gradient(top, #eee, #ccc);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee00,endColorstr=#cccccc00);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#eeeeee00,endColorstr=#cccccc00)";
}
a.uiButton:active .uibb {
    padding:3px 5px 1px 5px;
    background:transparent;
    background-image: -moz-linear-gradient(top, #bbb, #eee);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#eee));
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#dddddd00,endColorstr=#cccccc00);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#dddddd00,endColorstr=#cccccc00)";
}

The gradients should even work in IE… just not the rounded corners. Haven’t had a chance to test every browser yet.

Tweet This Post Digg This Post Reddit Stumble This Post

An Idiot’s Guide to Accessible Website Design

It’s great because it runs down a list of all the resources one could possibly need for accessibility testing. I must admit that in the rush to get www.listy.us online, I may have skimped a bit on the accessibility stuff. Of course I put alt tags or titles on images (or things that look like images), but testing for colorblindness? Well, damn. That one never even occurred to me, actually. Guess I’ll add an accessibility review to the task list for the next update.

Some parts of the app just won’t work without javascript, of course, but for the most part I think at least browsing the site’s content should be perfectly accessible.

Anyway, the links on that post should be in every designer’s toolbox.

Tweet This Post Digg This Post Reddit Stumble This Post

Basically you create a view (here called $renderer) and a layout ($layout), then render your views and layouts for both HTML and text versions. My file tree looks like this:

application/
	emails/
		welcome.html.phtml
		welcome.text.phtml
		layouts/
			layout.html.phtml
			layout.text.phtml

So, ‘welcome’ would be your template name, with html and text versions. The layout is what you want wrapped around either version of every email you send out (header graphics, font settings, contact info, etc).

I keep all of my mail functions in one class, creating a new function for each email that needs to be sent out regularly in an automatic fashion. You could even use this for newsletters, but I prefer more robust environments like MailChimp or CampaignMonitor for that sort of thing.

This simple function handles all the rendering, file paths, etc. It just needs to be called with the proper template name, and an array of items to be passed to the view renderer.

Here’s the meat of it:

/**
 * getMailContent
 * Renders mailer content in text and html and passes it back as an array('html'=>content,'text'=>content)
 *
 * @param string $templatename the name of the email template to use (APP/emails/[name].[format].phtml)
 * @param array $substitutions key=>value array of variables to pass to the view renderers
 * @return array
 */
public function getMailContent($templatename, $substitutions) {

    // create a view renderer and set it to app_path/emails/
    $renderer = new Zend_View();
    $renderer->setScriptPath(realpath(APPLICATION_PATH . '/emails/'));

    // create a layout object and set it to app_path/emails/layouts
    $layout = new Zend_Layout(APPLICATION_PATH . '/emails/layouts/');
    $layout->setView($renderer); // this probably isn't even necessary

    // assign all substitutions (e.g. view variables) to the view renderer
    foreach ($substitutions as $key => $sub) $renderer->$key = $sub;

    $output = array(); // output array        

    // render text version of template & assign to output['text']
    $layout->content = $renderer->render($templatename . '.text.phtml');
    $layout->setLayout('layout.text');
    $output['text'] = $layout->render();

    // render html version of template & assign to output['html']
    $layout->content = $renderer->render($templatename . '.html.phtml');
    $layout->setLayout('layout.html');
    $output['html'] = $layout->render();

    // all done, return output
    return $output;

}

Nice and simple, huh? All you need to do is call it and then assign the output to your Zend_Mail object like so:

        $bodies = $this->getMailContent('new_comment', array(
            'comment' => $comment,
            'comment_list' => $comment_list,
            'comment_user' => $comment_user,
            'list_owner' => $list_owner
        ));
        $mail->setBodyHtml($bodies['html']);
        $mail->setBodyText($bodies['text']);

Your email template accesses the variables passed to it just as it would a normal view script:

$this->[variable]

Commentary / suggestions / etc welcome in comments.

Tweet This Post Digg This Post Reddit Stumble This Post

Common fonts to all versions of Windows & Mac equivalents

Tweet This Post Digg This Post Reddit Stumble This Post

Listy.us is a AJAXified table-based list making application. You create a list, edit it by clicking fields and entering your data, and it’s updated as you tab from item to item. It’s open-ended enough that you can use it for just about any kind of list you want to make. I designed Listy.us as an application that I would personally enjoy using, and I do use it. My user profile shows some of the lists I’ve made on the site so far – the ones I’ve marked as public, at least.

There have been a lot of features cut out in order to get the application on the internet and getting feedback. User groups, templates, and hypertemplates — templates with extra functionality such as pulling down extra data from outside sources — are all still on the list of “things to put back in ASAP.”

There are a lot of different things in this project to write about, so I’m going to try and break it up into a lot of smaller blog posts over the next couple weeks. What do you want to hear about? The marketing? Writing the editor javascript? The decision to remove advertising? Design revisions? Bits and pieces of Zend Framework code used on the backend?

Next post, I think I’ll share how I’m using some Zend Framework components to create a mail templating system for new user emails, comment notifications, and the like.

Tweet This Post Digg This Post Reddit Stumble This Post

However, as a web designer/developer, I can say for a fact that it is absolutely necessary, and it is Microsoft’s own damned fault that it has come to this. Practically every other browser is up to date, or at least trying to be, with recent web standards. Those that follow my work may have noticed that Listy.us makes use of a bit of CSS3 and is set up in HTML5 for future expansion. I would love to use all the latest bells and whistles of HTML5/CSS3. Full HTML5 support allows awesome web apps like Google Wave. CSS3, among other things, lets you do cool stuff like drop shadows and curved corners without messy hacks and semantics nightmares. I want to use these things, and I’d imagine most other developers and designers do as well. The web would be a better place.

The catch? 34% of my visitors use Internet Explorer. That’s 34% of users that see the site with hard square edges, slow javascript, funky css behaviors, etc. Of those 34%,  43% are still using IE6. IE6 doesn’t even support PNG transparency without a hack. As a lone developer trying to get a web app up to commercial viability, I find myself focusing on development and letting the site degrade nicely (or as well as possible) to IE users – it still works (as long as you have javascript enabled – risky in IE), it’s just not as pretty.

So, why is Google Chrome Frame a necessity? Because it fixes the problem. Because it lets all the IE users out there experience sites like Google Wave the way they’re meant to be experienced. It exists because of those 34% of users still using IE, those 34%*43% still using old-and-broken IE6. It’s Google’s way of saying “Well, crap, we’re ready to go. If you can’t get your browser up to speed, we’ll do it for you.”

I fully support it, and if MS doesn’t get their act together, I’ll be encouraging the use of Chrome Frame on my own projects.

Now, what can Microsoft do about it? Obviously Microsoft has no interest in prolonging the life of IE6, but supporting it until 2014 doesn’t do anyone a service. They’re even offering charitable donations for each upgrade from IE6 (personally, I would’ve skipped the background music, guys). The problem with continuing to support old-and-broken technology like IE6 is that folks like Google and Mozilla will begin to create products like Google Chrome Frame because the web is being held back by Internet Explorer.

I’ll bottom line it for Microsoft: It is next to impossible to find a web designer/developer that does not loathe Internet Explorer with every fiber of their being. This is a problem. It needs to be dealt with. The rapid growth of technology means you should not support an 8-year-old browser that has no business being used on modern websites. If you don’t deal with it, someone else will.

Tweet This Post Digg This Post Reddit Stumble This Post

Wikipedia defines an FSM as “a model of behavior composed of a finite number of states, transitions between those states, and actions.”

In other words, it’s a map of how your application works, with consideration for how you get from point A to B to C. The pattern can be used to design simple to very complicated web applications. Listy.us is currently being built around a fairly simple FSM pattern where every state ultimately  returns to an idle state when finished. Entering the state sets everything up: dynamic elements, events, etc. Exiting tears down the event namespace (see jQuery – Namespaced events) and does any data saving.

You can read about FSMs as applied to game development at this site (it’s more readable than the wiki entry). In fact, if the area of artificial intelligence and/or game development interests you, I’d recommend picking up the book by that site’s author.

Simple example:
start -> state:idle (enter, run)
-> (click field) -> transition:editMode (exit idle, enter editMode, run editMode)
-> (click out/keypress) -> transition:idle (exit editMode, enter idle, run idle)

Maybe I’ll clean up the FSM design and post it sometime.

Tweet This Post Digg This Post Reddit Stumble This Post

Tweet This Post Digg This Post Reddit Stumble This Post

I’ve never seen someone go from friendly and cheerful to all business so quickly. From the reaction, you’d think I’d said “I vivisect puppies.” I haven’t told someone “I work in marketing” since – at least not out of context.

The thing is, they’re partly justified. Think of marketing as a consumer and the first things that come to mind are probably an inbox full of spam, copious handfuls of junk mail (physical spam), phone calls while you’re eating dinner, commercials interrupting your night on the couch, and so on. Hell, why stop there? Don’t forget the bots posting nonsensical links in your blogs, or the bots and slimy “marketers” on Twitter (those guys with 50-100X more “following” than “followers”).

Yeah. Nowadays you’d better clarify: “I work in marketing, but I’m not one of the guys you hate.” Luckily these days I can say “I run my own business through websites,” and folks don’t always realize that that job description includes marketing. Being an entrepreneur is much more smalltalk-friendly than working in marketing.

Rule number 1 of modern marketing: Don’t be a dick.

Don’t send people any marketing materials they didn’t ask for: No spam, no junk mail. Blog comment spam, twitter spammers, etc, are Internet extensions of the old-and-broken mechanic of “I will interrupt people, steal their attention and valuable time, and they will buy my product.” People don’t react like that anymore. They hate you for it. I know I do. Don’t do it.

My projects will never spam you. I refuse to be that guy.

Listy.us will feature Google ads for non-paid accounts. Context sensitivity is it’s main selling point; If I have no choice but to show ads to support a project, I’m going to make sure those ads are something you want to see. As soon as a site can stand on its own without ads, the ads will be gone.

Tweet This Post Digg This Post Reddit Stumble This Post

During that chat, a lot of ideas were covered, and Raph briefly touched on how he thought offer-based marketing was a big new trend at GDC. Here’s the chat log, edited for relevance:

SL: Kim Chihuly: so fremium and microtransactions – any other new busines model stuff from GDC?
Raph: Yes! offer-based marketing
Raph: Huge new trend
gracemcdunnough: Raph, explain?
Raph: Offer-based marketing: where users are offered discounts/coupons/special access to partner programs, and referral revenue is paid to the oeprator
Raph: Reports from companies exploring this is that it has resulted in a 30% or so increase in their revenues
WorldMaker: Isn’t offer-based marketing entirely too 1990s Web 1.0?
SL: Dave Zeeman: Sounds like those “Get a free XBox 360!” ads.
SL: Adri Saarinen: Oh man, Offerpal was all over GDC
SL: Dave Zeeman: only in reverse
gracemcdunnough: Bounties, those were popular in the early web days

Full log here (Requires Metaplace beta account)

So I tossed “Research Offer-based Marketing” into my notebook, and forgot about it for a few days. Upon reading it again, I hit up good ol’ Google for some info. Probably the best article I came across was this one at VentureBeat. Good stuff.

How does this apply to my own interests, Listy in particular? Well, I’m always interested in marketing ideas – that’s just how I am. I’m particularly interested in marketing that doesn’t inconvenience the audience. No annoyance, etc. Given that, this seemed like a pretty good idea – I get revenue, user gets two somethings instead of one.

Now throw in virtual currency. What if the premium services on your web app cost a specific amount per month in virtual cash, and you can pick and choose the services you want (rather than free/premium boolean style)? Each service costs a little bit, user’s pages can have tip jars (tie it into twitter, even: @listybot: tip @tkstudios 100), users can buy points, or get ‘em via free offers.

It’s a pretty fun concept. A bit more complex than just having paid accounts, but definitely much cooler, and more importantly, much more fun. And fun’s what it’s all about, isn’t it? I mean, besides functionality and usefulness and a hundred other factors…

Tweet This Post Digg This Post Reddit Stumble This Post