AIAIO: Our Blog

This writer is pleased to note that he will be participating in the judging at the annual Multichannel Merchant awards tomorrow.
MCM focuses on smart solutions for multichannel retail, and the awards are a yearly acknowledgment of the industry’s leading innovators. (Ai won an MCM Award for its redesign of Steiner Sports in 2006.) Nearly two dozen judges from across the industry will be assessing the best and brightest.
Stay tuned for more news about the awards.

One of the most enlightening sessions I attended at SXSW this year was Andy Baio‘s Gaming the Crowd: Turning Work into Play. I went for fun and left full of insights and ideas.

Andy’s thesis (similarly referenced by some presenters at GDC 2010) is that creating game environments can positively impact human participation and performance. From the surprising “fun” angle cited by Amazon Mechanical Turk participants to Target’s cashier scoring system, game environments bring an element of entertainment to activities that could easily be seen as mundane. A hint of competition and achievement–communal or individual–triggers a desire to operate at peak performance, strongly improving results. (Beware the leaderboard, though! Create a top-ten-users list and prepare to battle folks that game the system.)

I’ve spent considerable time the past week thinking about the potential this has in the ecommerce arena, where Ai spends the bulk of its time. How can shopping elements be crafted to encourage people to think in terms of achievement? What are the potential implications for social media outreach? How can a site include top-tens without resorting to the absolutes that discourage some participants?

I’ll be looking for examples of gaming in ecommerce in the coming weeks. Feel free to post links in the comments.

In my back-at-home SXSW Interactive rehash, I’m enjoying the slides from Chris Fahey’s talk on sketching and UX innovation. The big takeaway for me isn’t on forging creativity but encouraging pragmatism. Chris preaches a lot of what we practice at Ai: thinking about personas and uses to create clever solutions to design problems. It’s a smart mindset for any web project.

Chris’s slides give a nice insight into just how thorough the design process can be. A well-thought-out initiative considers everything from individual end users to the tone of the site’s calls to action. Most importantly, Chris admonishes UX folks to try. Try things, see what works, and ultimately strike the balance between concept and execution. Indeed.

I’m in Austin at South by Southwest Interactive (does anyone write it out anymore?) taking in loads of great ideas about the interactive landscape.
It’s an invigorating environment, if a bit insane: more than a hundred scheduled events each day and a reported 13,000 attendees. Simply picking an agenda requires planning.

So far I’ve seen smart panels on everything from fonts to philanthropy to metagame scenarios in non-gaming environments. There will be lots more to contemplate by Tuesday, I’m sure.

Watch this space for follow-up posts on several topics after the conference ends.

While HTML5 has a nice amount of new tags for semantic markup as well as media-based tags such as <video>, <audio>, or the JavaScript-based <canvas> tag, there are a handful of other new elements that are still worthy of mention:

• <command> is used to define a button, such as a radio button, or check box. It must be used inside of a <menu> element.
• <article> is used to define an article from an external source – news site, blog, forum, etc.
• <datalist> defines a list of options, such as a drop-down menu. This tag is used in conjunction with the <input> tag.
• <dialog> is used to define a dialog or conversation.
• <embed> defines external content or plugins. This element has been used in previous HTML versions but is now re-introduced as an HTML5 standard.
• <figure> is used to represent flow content, separate from the primary content of a document. Additionally, the <figcaption> element is used within <figure> in place of the older <legend> element.
• <meter> is used to define a scalar measurement within a known range. For example, think of this as a representation of a “2 out of 10″ score.
• <time> represents time on a 24-hour clock, or a date in the proleptic Gregorian calendar.
• <source> is used in conjunction with the new media elements, <audio> and <video>, to define multiple source files.
• <ruby> defines a ruby annotation – Chinese notes or characters. <rt> is a child of <ruby> and is used to define the explanation of the ruby annotation. <rp> is used for browsers that do not support ruby annotations.
• <mark> represents a run of text in a document that has been marked or highlighted due to its relevance in another context. This new element is similar to the existing <strong> and <em> elements, though it is only used in terms of relevance and not importance or emphasis.
• <progress> defines the completion amount of a task. This could be used to display the download progress of an object.
• <keygen> represents a key pair generator control. When the control’s form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server.
• <output> defines the result of a calculation, such as output written from a script.
• <details> is used to show details about a document, or parts of a document. A user can obtain information or controls from this element. <summary> is a child element to show the summary/control of the <details> element. Think of this as an expanding area where the summary is a cickable link to “See more information.”
• <hgroup> is used to group a section of headings (<h1> – <h6>) when there are multiple levels of headings (primary heading, subhead, tagline).

The HTML5 standards draft is not 100% finalized as of the publish date of this post but is close to completion. The current draft of the proposed new standards can be viewed at http://dev.w3.org/html5/spec/Overview.html.

HTML5 will be a great thing, once supported enough across the spectrum of browsers. Until then, only some of the new elements can be utilized in common practice. Internet Explorer will certainly not understand how to render CSS on a majority of the new elements, but there is a means to force IE to read and accept the elements by means of JavaScript so CSS styles can be applied.

Something as simple as document.createElement(‘section’); will tell IE to render the <section> tag. While this method has been tested, and does work for a majority of the new HTML5 elements, there is still the issue of accessibility. Given that JavaScript must be used for IE to render the elements, it cannot be relied upon as a common practice in HTML development. If a user does not have JavaScript enabled on their browser, it will completely break a web page using this method. It is therefore safe to say that we will not see most of the new HTML5 tags used in general development until we at least see the death of Internet Explorer 6 and possibly IE7 and IE8.

A new element introduced in HTML 5 is the <canvas> tag which can be used to draw graphics by means of a scripting language such as JavaScript. In the markup, it acts very similar to the HTML <img> tag, but there is no need for src or alt attributes – only width and height can be used, but both are optional. With no values given, the area will default to 300px wide and 150px high. Below is a simple example of what the markup would look:

<canvas id=”draw” width=”500″ height=”300″>
<p>Your browser does not support the canvas element.</p>
</canvas>

While <canvas> does not require a closing tag in Safari, it is required in Firefox and is best practice to always use one so the element will render properly in all supportive browsers. The <p> is used for alternative content when a user’s browser does not support <canvas> – an <img> can be used here as well. Alternative content could not be utilized if a closing tag is not used. An id attribute is used in the code sample in order to identify the element in the JavaScript.

Like all other HTML elements, <canvas> can be styled with CSS (margin, border, etc.) but those styles will not be applied to the actual content within the <canvas>. In the example below, a dotted border is used to display the actual <canvas> element:

Your browser does not support the canvas element.

When viewed in a supportive browser, two rectangles should be seen above – One green, one opaque blue. This example is quite simple and just a mere demonstration of the ability to draw with JavaScript.

One of the nice features of the <canvas> element is text replacement, generally tackled by sIFR (Flash-based text replacement). Cufón is a text replacement method which utilizes the <canvas> as a means to display copy with the specific font of choice. One major drawback to the Cufón method is the amount of HTML code generated, making a simple heading element bloated enough to make a developer cringe. While it is better than sIFR, with the need for a third-party (Flash) plugin to be installed, it is still not a perfect means for text replacement.

Accessibility with the <canvas> element is a concern for many developers. There are no current native methods to generate markup from the content produced within the <canvas>. Using alternative content can be helpful but it must be manually input by the developer, and it will not be true to what the element’s actual content is displaying.

The methods used to create <canvas> content is rather pain-staking, considering the end result. Drawing with JavaScript creates many lines of code, and the end result does not seem worth it. Some great examples of what people are cooking up with this new element are located at www.canvasdemos.com. There are definitely some cool effects that can be used to make a website more lively, but in terms of practical use I don’t foresee a heavy use of this new element. It seems to be more application-driven for a specific purpose (see: Tiny Doodle), which most websites will have little to no use for. Once <canvas> becomes more widely-used and supported it is likely that scripting libraries, similar to MooTools, will be built. This would enable developers to create <canvas> content with much more ease.