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.
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.
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.
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.
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?
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.
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.
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.
Interactive/User Experience Design
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.
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.
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.
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).
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.
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).
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.
www.steamboat.com: The Official Site for Steamboat Ski Resort and Steamboat Central Reservations.
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.
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.
Here are our actual scores:
|Criteria||Your Score||Industry Average||WebAward Average|
|Ease of Use||10.0||7.5||7.5|
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."
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.
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.
Pronghorn Estates. Warning: Flash-intensive with background music (the client insisted on the latter over our objections).
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.