web_based: (Default)
We've got HTML 5 on the brain these days! Check out Sean Christman's awesome demos of interacting with videos via the HTML 5 VIDEO and CANVAS tags:

http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space/
web_based: (Default)
The HTML 5 specification has a lot of new features. I just did a presentation on the data storage and offline application features:

First slide (click to download entire presentation in ZIP format)

I used Eric Meyer's S5 presentation system, to which I spliced in jQuery UI transitions and a mobile stylesheet.
web_based: (Default)
Many moons ago I got my first home computer: an Apple ][c. Included with my shiny new Apple were a set of disks with demos, guides, and utilities, many of which were written in AppleSoft BASIC. The interactive capabilities of BASIC were pretty rudimentary, and on these disks there were BASIC programs that seemed to be doing more.

So I took a look at the source code for these programs and lo and behold, Apple had built themselves library of custom BASIC commands that were tied to the & character (so instead of using INPUT they would use &INPUT and so on). This custom library was a simple binary file, and if you loaded that file into memory you could use the nifty new commands in your own programs. This added a lot of polish to what were otherwise simple BASIC programs. Other programmers learned about this, and soon many libraries were available with custom BASIC commands.

Fast forward to today. Apple has just released their iPad. The iPad comes with a Safari bookmark for the User Guide, which opens as a web application in Safari. And like the old disks included with the ][c, this guide seems to do some pretty amazing things for something done entirely in HTML, CSS, and JavaScript.

Turns out that once again Apple built themselves a custom JavaScript library for this app, and someone has already found it:

http://almost.done21.com/2010/04/adlib-apples-secret-ipad-web-framework/

I hope Apple will release this library for public use. It would be awesome. Even if they don't, like the old BASIC library this new library shows what's possible.
web_based: (Default)
Today we launched Ideate, our first iPad application. It's a digital sketchbook with templates, custom pens, and sharing capabilities. It's almost enough to make me want an iPad.

Check out the Ideate blog too.
web_based: (Default)
Happy 5th Birthday, EffectiveUI!
web_based: (Default)
On top of our success at SXSW, Peyton and Rebecca were interviewed by Vidya Drego for Q&Agency.

My favorite quote is where Peyton says, “We get developers involved out of the gate and they put as much thought into the solution as designers do. We don’t believe that designers own the great ideas and developers just execute them.” That is one of the most important aspects of EffectiveUI for me, and I’m happy that it’s a principle that starts at the top.
web_based: (Default)
The other day I had a conflict with a colleague. (I always tell people, when you gather together smart people who are really good at what they do and passionate about their work, there’s going to be conflicts. This is actually a good thing; I know I wouldn’t be nearly as good at what I do if it weren’t for being pushed out of my comfort zones.) The topic of the conflict wasn’t all that uncommon: she was advocating for great user interaction--which is what we are known for--and I was pushing back because I was worried about the aggressive development timeline which didn't leave any room for recreating complex interactions and designs. And I was frustrated because I didn’t have a way of quantifying my concerns in a meaningful way for her.

Ordinarily, my team is committed to taking the awesome interaction and graphic designs that our colleagues create and reproducing them exactly in browsers. About the only time we’ll usually push back is if there’s something the technologies simply can’t do, such as an issue with an older browser or something. Generally speaking, we can build just about any interaction or graphic design given to us, assuming we have enough time. And that was my worry here: not enough time.

Down the Rabbit Hole

In this case my main concern was hidden complexities. Even having done this sort of work for the better part of fifteen years, I’m still regularly caught off-guard by having something that sounds simple turn out to be a 40-hour job--40 hours that you didn’t plan for and have to come at the expense of something else.

HTML RIAs are particularly vulnerable to hidden complexities because the technologies involved (HTML, CSS, and JavaScript) are designed for fairly specific capabilities, and modern interaction and graphic design push those technologies to their limits. The more the technologies are pushed, the more brittle the solutions become and the more rabbit holes appear.

What’s worse, spotting these rabbit holes in advance is particularly hard to do, especially when approaching the problem from a design point of view. That’s what makes it so hard to quantify these issues in a meaningful way, especially when providing project estimates. It’s sort of a vicious cycle.

Uncovering the Complexities

One of the ways to mitigate the risk of hidden complexities is to be aware of the situations where they are most common. And really, there are only a few:

Customizing the Appearance of Form Fields Let’s face it, the default quality of the user interaction in standard HTML forms isn’t exactly stellar, and the problem has only grown worse as users have become used to more sophisticated interactions. And there’s not a graphic designer in the world who likes the default appearance of HTML form fields. They want rounded edges, and background gradients, and graphics inside of dropdowns and select boxes.

So you would expect use to have awesome control over the appearance of form fields using CSS, right? Wrong. CSS control over form fields is wonky at best. From browser to browser, from platform to platform, the same CSS rule will have varying effects on form fields. This is because of incomplete CSS specifications on the topic, which left CSS control of form fields up to the individual browser manufacturers, which in turn led to inconsistencies.

This is probably the largest minefield of rabbit holes, if I may mix my metaphors. Even something as simple as "we need to put graphics inside of our dropdowns" turns into a trip through browser hell.

Animation With a notable exception I cover below, HTML is not the right medium for animation. Anything more than simple stuff--fading or scaling elements, or simple motion--can not only be difficult to implement, debug, and maintain, but also prohibitively resource-intensive.

Interaction with the Local System Because of browser security limits, interacting with the local system is problematic at best. Simple drag-and-drop between a browser-based application and the desktop is an enormous undertaking.

If your project is moving through any of these minefields, focus on these areas as having potential hidden complexities.

Mitigating the Risks

So let’s say you know you’re wandering through a warren of potential rabbit holes. How can you avoid stepping in one and breaking your project’s proverbial ankle?

Use a Library JavaScript and CSS libraries are legion, and there are some really good ones out there. jQuery is my personal favorite, especially for dealing with custom form fields and random rabbit holes that don’t fall into the three main categories above. But I know people who swear by Prototype, or Dojo, or any of a number of other libraries. Just remember, libraries are abstractions, and as such they are subject to the Law of Leaky Abstractions. They can come with their own rabbit holes, so beware. A library can be as much of a hindrance as it can be a help.

Apply Tiered Browser Support A core concept in progressive enhancement, tiered browser support specifies different levels of support for specified groups or tiers of browsers. This differs from standard browser support methods, which generally specify a group of browsers and require exactly the same interaction and graphic design for all of them. Tiered browser support isolates older or less-functional browsers

Use Appropriate Technologies Sometimes HTML isn’t the best tool for the job. In those cases, consider using a tool better-suited to the needs at hand. Don’t be tied down to one set of technologies out of dogma, embrace your full toolbox.

Use New Technologies HTML, CSS, and JavaScript are constantly evolving, and are growing in response to our needs. CSS-3 specifies more rigorous (though still not 100% complete) control over form fields. HTML 5 has the canvas tag, which provides a useful API for 2-D animation. HTML 5 also specifies a native drag-and-drop interface that can even interact with the OS desktop and other applications. Of course, CSS-3 and HTML 5 support is spotty even in modern browsers, so be careful here as well. But chances are you only need one or two of the new capabilities. If you combine this with tiered browser support and a solid library, it can be enormously powerful.

For example, consider asynchronous interactions. Not too long ago we had to rely on hidden frames or other sleight-of-hand to create the illusion of asynchronous interactions. Today, we have AJAX interactions. One simple solution eliminated a huge headache and pretty much single handedly ushered in a new era in web-based user interfaces.

Work With Your Colleagues Depending on the sort of shop you work in, this is either a no-brainer or a laughable suggestion. I’ve worked in both kinds of places and I can tell you I certainly prefer the former over the latter. Either way it bears mentioning and is probably the most important tool for mitigating the risks of hidden complexities.  In fact this is such an important tool that I won't work with people who aren't open to collaboration. I've tried it many times, and every single time it reduces project quality, results in angry clients, and irritates my blood pressure. Life is too short.

Climbing Back Out

Aside from the near-omniscience that comes from vast amounts of experience with a technology, I know of no way to really avoid having to deal with hidden complexities. Even with a thorough knowledge of the riskiest areas and a good set of mitigating tools in your toolbox, you are still going to fall down the occasional rabbit hole. What do you do then?

In my experience, it comes down to time management. You know, as a developer, when you’ve fallen down a hole and are spending too much time on something. (And here you have to be honest with yourself; sometimes it’s downright fun to tackle these problems, but your time is valuable and you need to spend it wisely.) When that happens on a project where you simply don't have the hours to spare, put a time limit on yourself. If significant progress isn’t forthcoming, it’s time to put the kibosh on it. Apply a new tool, work it out with the client or your colleagues, whatever, but do what it takes to pull yourself out of that hole.

Hidden complexities are a fact of our industry, but they don’t have to be fatal. With a good set of tools and an understanding of the risks and you can produce awesome user interfaces on an aggressive timeline.
web_based: (Default)
 We've written a book!

Book cover image for our book

This is a technology-agnostic (well, mostly) book about user-centered design processes and how to apply them to software development.

You can pick up a copy from iTunes for $4.99 as well as get it from O'Reilly and Amazon (at the conveniently-made tiny url http://www.tinyurl.com/effectiveui ).

I personally had very little to do with the book, as it was already mostly done by the time I was hired in June. But still, it's a cool thing, and if you're interested in the field this is a good book.
web_based: (Default)
My company is looking for contractors and contract-to-hire people in the following professions:

HTML/CSS/JavaScript developers (that would be my team)

Interactive/User Experience Design

Project Management

You can learn more about us at our award-winning website: http://www.effectiveui.com/

I have job reqs I can pass along if anyone needs specifics. They should be posted to the Careers section of the website soon.

Please feel free to forward anyone interested to this posting. Interested folks can either apply via our Careers section on our website--there's an Apply button that brings up a nice form you fill out and upload your resume--or you can contact me here. 
web_based: (Default)
 jQuery UI has a nifty plugin for an accordion widget. It's pretty much plug-and-play, but it's missing an important and much-requested feature: the ability to specify one or more headers in your accordion as being un-accordionable. This is particularly useful when using the accordion for navigation, which is what I'm doing.

You'd think this would be easy to do by either leaving the content div associated with the header empty or by forcibly overriding the events attached to the header itself. But the former causes the widget to hide/show a small blank area, and I couldn't seem to do the latter.

So I just modified the widget to look for a specific CSS class on each header and, if it is there, ignore trigger events. Easy as you please, took 3 lines of code.

I <3 jQuery. I <3 it so much I almost <4 it.
web_based: (Default)
It was just announced that EffectiveUI, my new employer, has made Inc. Magazine's "500 List," a list of the 500 fastest-growing companies in the US. We're at #55 overall:

http://www.inc.com/inc5000/2009/company-profile.html?id=200900550

In other categories, we're #2 in Denver/Aurora, #4 in IT Services, and #5 in the Top 10 Women-Run Companies.

This is awesome news in today's economy, and makes me very happy about my choice to work here. Well, I was already very happy, so now I'm even happier.
web_based: (Default)
I've been pretty quiet about the work I've been doing at Crispy lately. This isn't so much because it was all hush-hush like the Microsoft stuff so much as because it wasn't terribly exciting.

This morning saw the launch of the new universal navigation for vw.com. That's the shell that surrounds all of the content, and consists of the top dropdown navigation, the footer, and the left navigation (when it is present).

I didn't work on those things, obviously, since they are Flash and I don't have that skillset. What I did is the Model Lineup widget. This is pretty much 100% mine. Usually lots of people have their hands in things here at Crispy, but this one is all mine. So if you want to see how I write HTML, CSS, or Javascript, this is your chance. I'm very pleased with how it turned out.

Some of you may notice strong similarities in the interactions and functionality of the Flash-based top part of the universal navigation and those of the Model Lineup. Obviously it wouldn't be hard to do the Universal Navigation in HTML instead of Flash, thus making things even more accessible. However, the Universal Navigation widgets are used on other sites, including several thousand dealer sites throughout the world. Flash is actually a better tool for this, since it is essentially added to a page via an include. If we had done it in HTML, anyone who wanted to use the universal nav would have to do much more than copy-and-paste a few lines of Javascript.

Next week will come the release of the new Features and Specifications pages, which we are QAing right now. I did a lot of work on those too. 
web_based: (Default)
I'm a PC, and I built this website.

This is what I've been doing for the last four weeks (longer than that, actually...we've been sprinting for four weeks, I was doing the dev for about a month before that). Please note this is an entire DHTML webapp done with semantic markup, standards-compliant Javascript, and progressive enhancement. Also modern browser support (though some bits are still a little off in IE6).

At the moment we're having some glitches with server farm integration, but we'll get them ironed out shortly.

The markup is mostly mine, about three quarters of the CSS is mine, and about half of the scripting is mine. I laid the foundation, and I produced the DHTML prototype/proof-of-concept (which helped convince Microsoft to go forward with the project). 
web_based: (Default)
Well.

As of today, my company, Texturemedia, doesn't exist any more. We have been bought.

Say hi to my new bosses.

I wish I could say I was excited about this, that it was good or welcome news. Honestly, I just don't have enough information yet.

I am so tired of worrying about my job.
web_based: (Default)
 I suppose it's no surprise that the four letters of Twitter are "twit."
web_based: (Default)
The site that has been keeping me buried alive since mid-July has finally launched!

www.steamboat.com: The Official Site for Steamboat Ski Resort and Steamboat Central Reservations.

As always, if you don't like Flash you can avoid it by disabling Javascript. For the most part you won't even miss it. (God I love making sites like that.)

This would be a site that we quoted at 60 pages and turned into 230+ pages. Can you say "Scope Creep," boys and girls?

Even so, the project was managed beautifully by our team. You can't really see some of the application goodness involved in the site (though if you go to Plan Your Trip > Lodging and then do a search using the Search For Lodging widget you can see some aspects of it) because it's so well-integrated into the content. There are parts of the new CMS and admins that are pure interface development porn.

Best bits are the Mountain Cams (only one of which is online at the moment) and the Photo of the Day. The Mountain Cams are Flash-based, but streaming interactive video is pretty much the perfect use for Flash. 
web_based: (Default)

One of the sites that I worked on has won an award. The Web Marketing Association has given their 2007 award for Outstanding Achievement in Website Development to The Cache at Union Creek website.

Of course, it was a team effort. One of our talented designers did the Flash elements. This was also our trial balloon .NET project. We had literally just hired our first .NET technical lead when we started on this project. She and I worked really hard to fit the technology into Texturemedia's existing processes. It looks like we did a pretty good job. This was also a project where I took the trail that one of our Tech Leads had blazed for SEO-friendly Flash implementation and ran with it. If you disable Javascript, you'll see the site that the web crawlers see.

Here are our actual scores:

Criteria Your Score Industry Average WebAward Average
Design 9.5 7.4 7.5
Innovation 9.0 6.8 6.9
Content 10.0 7.7 7.8
Technology 9.0 7.0 7.1
Interactivity 9.5 7.1 7.2
Copywriting 9.5 7.4 7.6
Ease of Use 10.0 7.5 7.5
Overall Score 66.5 50.9 51.6

And some of the comments from the judges:

"Very nice site and very appropriate to the audience. Well done!"
"This site is absolutely beautiful. I'm not big on Flash sites - since this technology is rarely used toward enhancing the full user experience. However, the developers here have created a very meaningful site with a true sense of style and ambiance. I really felt like, based on my experience on the site, my experience on the properties would be excellent. Well done Team, well done."

And this is most excellent, because Intrawest is a bigger and bigger client of ours. We're working on redoing the websites for Steamboat Springs Ski Resort (in QA right now) and Copper Mountain Ski Resort (contract just signed yesterday!), both of which are Intrawest properties. Once we have those under our belt, we'll be able to go after other ski resorts; our goal is to be the agency of record for all the major ski resorts in Colorado.

Plus, it's always nice when your industry peers say, "Hey, you know what? That's some good work you did there."

web_based: (Default)
 This is the big one that I've been working on for a few months now.

Rocky Mountain Health Plans, a non-profit health insurance organization, has an extensive site with lots of content. The site was originally done back in 2000, and was coded entirely using layout tables...so the HTML was all tables within tables within tables. It's been a nightmare site for us to maintain.

Recently, they wanted to re-optimize the site for larger screen widths. This would have been a nightmare with the site being coded the way it was, so we convinced them to let us redo the entire site in a CSS based layout. So basically I redid the entire site, by hand.

Witness the new RMHP.org website. Completely semantic markup. CSS-based layout. SEO optimization. The old javascript-based dropdown menu is now a CSS-based dropdown menu. All of the site content is editable in our content management system (so already some pages don't validate because of cutting-and-pasting content from Word *twitch*). The headlines are all rendered using sIFR, so they, too, are CMS editable, which is a neat trick--before, whenever they wanted to change a headline we had to produce a new graphic for them. Now it's all editable.
web_based: (Default)
Aaaaahhhhh, it feels so good to get some of these projects off my plate.

The Baker Organic is now live: http://www.bakerorganic.com

Special things to note about this site is the heavy use of PNGs with alpha transparency. The interface development team is considering officially supporting alpha transparency in PNGs--which would be a nifty thing to have in our toolbox, except getting IE6 to do it requires extra implementation. So I used this project as a trial balloon for it, really pushing the limits.

As usual, the Baker Organic site employs fully CSS-based layout, semantic markup, and SEO optimization. 
web_based: (Default)
Another project of mine has gone live:

Pronghorn Estates. Warning: Flash-intensive with background music (the client insisted on the latter over our objections).

So, you may be asking, "Dude, that's, like, a 100% Flash site. What did you do for it?" True, it's mostly Flash, but if you disable your Javascript (or don't have Flash) you'll see another, completely accessible site. That's what I worked on. Both the Flash and the HTML versions of the site draw their content from the same database, so you should get comperable content either way. We did this for SEO (Search Engine Optimization) purposes, but it provides a nice accessibility base as well.

The site also features deep-linking: you can bookmark the individual flash pages. This also provides the capability of using website analytics packages, too. We use Google Analytics by default, but can use anything the client wants.

ETA: Fixed incorrect linkage in URL. This is what I get for blogging before any caffeine intake. 

Profile

web_based: (Default)
web_based

April 2010

S M T W T F S
     1 23
4567 8910
11121314151617
1819 2021222324
252627282930 

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Aug. 18th, 2017 12:21 pm
Powered by Dreamwidth Studios