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

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

This is probably my first real attempt at a grid-based layout. Vertically it falls short of perfect baseline alignment, simply because I didn’t feel it was worth the effort to get it perfect. This is a blog. If it were a corporate product page, then yes, it would be worth the trouble to get everything in a perfect rhythm, but it’s not.

Also, I have not tested this in IE 6 or 7. Out of curiosity, I tested it in 8 a few seconds ago and it looks fine. Obviously, ignoring IE isn’t a luxury I can afford in the future, but in the current “I just want to get this WP theme done so I’m using something more appropriate than a public theme” context, it works.

I’ve also added a link to Listy.us, my primary project. There’s nothing there yet, so don’t bother clicking the link. The logo is a result of a number of failed attempts and a number of discussions with my girlfriend. The logo’s meant to be warm, playful, and casual. Most importantly casual. Other list services out there—my would-be competition, at any rate—are too impersonal, too boring. I want Listy.us to be fun. That’s my goal. If I can make some money along the way, peachy.

Somewhat related, here’s the Zend_Db Table cheatsheet I promised in Twitter:

public Thingies extends Zend_Db_Table_Abstract {

	protected $_name	= 'thingies'; // actual table name

	// for a standard primary key:
	protected $_primary	= 'id';	// our primary key

	// OR, for multiple keys, omit above and use:
	protected $_primary	= array('widget_id','thingy_id');
	protected $_sequence	= false;

	// for tables referencing this one:
	protected $_dependantTables = array('Widgets','Thingies');
	// note use of class names instead of table names

	// for tables this references:
	protected $_referenceMap = array(
		'Doodad'	=> array(
			'columns' => 'doodad_id',  // column name that references doodads table
			'refTableClass' => 'Doodads',  // class that encapsulates doodads table
			'refColumns' => 'id'  // column in doodads table that doodad_id references
		)
	);

	// all your CRUD goes here

}

Tweet This Post Digg This Post Reddit Stumble This Post

Marketing + Web Design

These two have sort of developed along with eachother and influenced eachother. I design with marketing in mind. I market with the web in mind. Not only “Is this visually pleasing?” but also “How will someone react when they see this page?” or  ”Is there something rewarding on this page?” I look at the data and tweak things to make sure everything works like clockwork. At the same time, I realize that data is not everything. There’s obviously a place for conversion rates and ROI, and a place for beautiful design, but solid user experience—from marketing efforts (online and off) to the website—is incredibly important. Ultimately all the prettiness and efficiency and statistics in the world won’t matter if the user, the person you’re trying to court, isn’t enjoying themself (you should, of course, ensure you’re actually making money while the user is enjoying your work). This brings me to the third…

Game Design

The above concludes that it’s ultimately the user experience that matters.

Lexia vs. Inferis

For several years, I spent a considerable amount of time working on Alexandria, an Ultima Online gray shard. Gray shards are server emulators that feature a hundred different flavors of UO, many of them quite sour, but some pretty awesome. Maybe it’s like wine, a flavor for every palate. I like to think the one I ran was awesome. I used to spend a lot of time getting to know the players, and designing features from observation and random inspiration. Research aside, design choices almost always came down to this:

“Do I think people will have fun with this?”

I mean, there’s a lot more to game design than that question, for that depth you might check out someone else’s blog like, say, Raph Koster’s. You know, people who have written books on the subject (Raph wrote “A Theory of Fun”).

Still, I think the same question—will people have FUN?—is crucial to modern web design, and doubly so for web application design. If there isn’t some sort of feedback, some joy from figuring out a new trick, from watching your friends list grow, from sharing something cool and having the world comment on it, then the design needs to be examined. It needs a fun injection.

If something is more fun with more people participating, then folks will go invite their friends. It’s your job to encourage and facilitate this, from the second they first enter your site. Facebook and MySpace and a thousand other social networks are huge not just because people like people (in fact, many people despise other people), but because it’s rewarding. More friends, more banter, more reward. If you hit 2,000,000 friends and announce it, you’ll get thousands upon thousands of them telling you how awesome you are. If you’re not into the big lists, it’s more like micro-managing your friends, or maybe just a facilitator for Real Life™ activities, but ultimately it’s the reward that drives people. It’s the fun.

I sometimes think if someone had unlimited funding and a handful of awesome game designers and visual designers, they could crush Google. Google is insanely useful, but honestly not very fun or visually exciting.

Tweet This Post Digg This Post Reddit Stumble This Post

[edit: Added note to NetBeans bit to reflect irritation at them for republishing without permission.]

For PHP/Javascript: NetBeans 6.5 with PHP Plug-in

This took a while of jumping from site to site, checking out feature comparison charts, trying different software, and so on. I wanted something free, and feature packed. My main requirements were great handling of PHP code, and great Javascript – jQuery in particular. Ultimately it came down to a showdown between Aptana Studio and NetBeans, and while they were pretty close, Aptana’s PHP plug-in failed me miserably when it came to actual usage: When I launched the site (via “Run” function, if I remember correctly), my entire site was squished onto one line. That means that opening //<![CDATA[ comments would comment out entire scripts. Needless to say, that soured Aptana's viability completely, and after looking into a fix for about an hour, I declared NetBeans the winner. I'd say that it's a permanent replacement for Dreamweaver in my book; NetBeans is pretty much a PHP coder's dream come true.

[edit: Why yes, NetBeans, you can use this post on your testimonial page. No need to ask permission or anything. Just to clarify for folks that don't read the comments, I'll be giving Aptana another try if they fix that bug.]

For Database Design: MySQL Workbench 5

This was pretty much a no-brainer. There’s plenty of visual database designers out there, but before discovering this tool (I haven’t a clue as to how it escaped me for so long), I’d always written my CREATE files manually, sketching them out on paper or whiteboard, scribbling and erasing until everything meshed. No more of that. I’m sure there are some other freebie solutions out there, but Workbench does the trick. It has a few features locked out for the paid version, but the free version does everything I need it to. I slapped together a prototype db schema this morning in maybe an hour, and most of that was spent pondering usage.

For Twitter: TweetDeck and Twhirl

Yeah, yeah, you all know about both of these fine Adobe AIR apps, but few people really stress where one or the other really shines.

Simply put, Twhirl is awesome for plastering your desktop with as many Twitter accounts as you want. Before I consolidated my accounts, I had 4 of ‘em and had planned to create more. Had ‘em all lined up right on my second monitor, feeding me delicious tweets.

When I switched back to a single account (however briefly – my plans still call for twitter for some of my projects), I decided to try out TweetDeck, which pretty much is the polar opposite of Twhirl – One account, LOTS of info. I have it set up to watch friends, replies, and several Search panels set up to monitor what people are up to. The search panels are particularly awesome for marketing purposes: Watch what people are saying about you, find people that might be interested in your product, and connect with people in the same field. It feels stalkerish, but that’s what Twitter’s all about, isn’t it? You can easily fill a 22″ monitor with TweetDeck in this fashion. I find myself minimizing it to avoid staring at the wrong monitor all day. Very handy little app.

And the Killer: You Still Need Photoshop

Or at least I do. As much as I want to love GIMP, I just can’t. All of the Photoshop shortcuts and years of conditioning are next to impossible to break. What we really need here is for Adobe to just change to a subscription plan. Something like a $30 a month ($360/yr) subscription to have the current version of PS and subsequent upgrades. The main barrier to just buying it has always been the pricing. It’s too damned painful on the wallet, particularly for anyone with limited or non-existant funding. So, yeah. $30/mo is just two WoW accounts. Are you listening, Adobe? You’d see an enormous drop in piracy, I’ll bet.

Tweet This Post Digg This Post Reddit Stumble This Post