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:


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)

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)
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. 
web_based: (Default)
Ladies and Gentlemen, I give you the project I have been working on for the last few months:

National Cinemedia - Fathom (caution: contains flash and makes noise; content is worksafe but loud)

SEE! CSS-based layout and interaction! (Turn off CSS to witness Bonus Accessible Semantic Markup!)

HEAR! Standards-compliant multimedia, XHTML, and CSS!1 (Turn off Javascript to witness Bonus Alternate Content for the flash nodes!)

TASTE! An experience that is platform and browser independent!

SMELL! A pixel-perfect implementation of a graphically-intense design which includes drop shadows and gradients (and even drop shadows on gradients)!

FEEL! Jon being insufferably pleased with himself!

And the consumer-facing pages are only about a third of the project. The rest of the project consist of a back end administrative interface, which allows the people at Fathom to create/edit events and series of events; to approve event comments; and even to make inline edits to the content on the consumer pages! (Plus about a dozen other functions.)

*sniff* My baby is all growed up.

Of course, it's not all mine. I was the interface developer on the team, which also consisted of our .NET application developer, a designer, one of our Flash developers, an Information Architect, and the Account Manager. So it was definitely a team effort; in fact, I barely touched the administrative interface.

So...Go Team Fathom! For Great Justice!

1Offer not valid for pages that contain unverified content from the database. 
web_based: (Default)
Another project of mine went live today:

Playground: The Cache at Union Creek. This was a pilot .NET project for us, and I was the lead interface developer on the project (actually, I was the only iDev on the project, so I'm claiming lead by default). The design and Flash work were done by Matt, and I stitched it all together using standards-compliant XHTML, CSS, and JavaScript. There is not a table on the entire site, not even on the Get In On The Secret page. It's not a particularly big project, but because it was a pilot project it took some extra time and effort. Matt definitely bore the brunt of the content and programming with the requirements for the Flash modules, and there's still more to come for later versions of the project.

Next up: National CineMedia. I already have a fantastic design in my hands and I'm doing it all in CSS-based layout. I'm going to try using sIFR to keep things pretty and accessible, so that'll be a fun challenge. This is also a .NET project, with much heavier backend programming (we're on Version 7 of the backend wireframes already). Projected launch is mid-March. 
web_based: (Default)
After many weeks of hard work, we're releasing a project:


This is the first kid's site I've ever done. We have a couple of quick changes yet to do to bring everything into COPPA compliance, but it's good enough to launch.

If anyone out there has kids that would be interested in taking a look at the site, I'd love to hear what they have to say.

Point of professional pride: It's a flash-intensive site, but it's compliant with the XHTML 1.0 Transitional standard. (Mostly. Any page with a form will have issues, since our Java back end does not produce compliant HTML.) 
web_based: (Default)
 Today marks the launch of the project I've been devoting most of my time to:


This tool enables you to compare health insurance plans, get a quote, and apply for coverage. The tool takes all of the necessary information for determination of elegibility, and even allows you to log in later and return to an unfinished application, or see the status of your application. (It's safe to play with up until the "Yes, Apply Now" button on the Confirm Plan Information page, if you want to see the first few screens. There's about eighteen more pages after that.)

On this project I was responsible for implementing the User Interface. I did not have a hand in the design or the information architecture. I tried desperately to make it as usable and accessible as possible within the constraints of a pre-existing design.

During the QA process I must have squashed on the order of 150 bugs...almost half of the bugs reported for the entire project. (There's a long story behind that, which basically can be summed up as me coming on board the project as a johnny-come-lately. If I'd been involved from the start, there wouldn't have been nearly so many bugs.)
web_based: (Default)
Project release:

The new website for the Denver Art Museum.

We wanted to do semantic markup, and have everything accessible. The folks at the Denver Art Museum wanted that too. Unfortunately, because of time constraints and the complexity of the design and information architecture we had to make some compromises. We also were not able to put up some content; the Explore Art section is still under construction and will be launched August 15.

The good news is we will be revisiting the site in the next few months and redoing it with completely semantic markup and complete separation of presentation, content, and functionality. I intend to ask the powers-that-be if I could take the lead on that particular charge.

In the meantime, enjoy.
web_based: (Default)
Passwords are...well, let's just say they're a pain in the ass. They are a fine example of the Usability vs. Security dicotomy, where the more usable things are the less secure they are, and the more secure they are, the harder they are to use. In the case of passwords, passwords that are easy to remember are typically forbidden, as are standard methods for remembering random passwords (such as writing them down). It's almost a Catch-22 situation.

In the past while, several people on my watchlists have been ranting about passwords, so I figured it would be a good idea to explain how it is possible to have passwords that are secure, re-usable, and easy to remember.

It's actually fairly easy to make a strong password that is easy to remember. The trick is to use two facts about human cognition:
  • Systems are easy to remember
  • Phrases are easy to remember
So what you have to do is have a simple system that can take any phrase and make a strong password out of it. Now, yes, you are technically remembering much more this way than just a set of characters. But you'll remember it longer and more accurately, and as a side benefit you can design the system so that the passwords it generates are re-useable (so when your bank website starts pestering you to change your password, you can change the existing password rather than making a new one).

Here's an example of a good system:
  1. Pick a phrase that has between five and ten words in it. (We'll call this the "passphrase.") It should be something that you can easily remember: a favorite saying, a quote from a song, a line from a movie, etc.
  2. Strip out all punctuation from the passphrase, and put all letters in lowercase.
  3. Take the first letter of each word and place them together.
  4. In the middle of the resulting set of characters, place the number 1.
  5. At the end of the resulting set of characters, place the number 9.
  6. Replace one or two of the characters with punctuation that is visually similar, e.g. $ for the letter "s" or + for the letter "t" or 0 for the letter "o."
  7. To re-use the password, increment the digit in the middle by 1, and decrement the digit at the end by 1.
For an example:
  1. Open the pod bay doors please, Hal.
  2. open the pod bay doors please hal
  3. otpbdph
  4. otp1bdph
  5. otp1bdph9
  6. 0+p1bdph9
  7. 0+p2bdph8, 0+p3bdph7, etc.
These may not look like "easy to remember" passwords. But you're not going to be memorizing the generated passwords, you're going to be memorizing the system and passphrase that generated them. In the example, you'd be remembering, "My password is the first letters from each of the words in 'open the pod bay doors please hal' with a 1 in the middle and a 9 at the end, except anywhere there is an o I'll substitute 0 and anywhere there's a t I'll substitute +." Again, yes, that's a lot more to recall than just a string of ten random characters, but because it is a system it is easier to remember, and you'll remember it more accurately.

You can customize the system, of course. Step 6 may be non-intuitive for some people, so you could replace it with a step that alters capitalization ("every other letter") or punctuation ("place an underscore after the second character"). Just keep the number of steps in the system to seven or fewer so that it is easy to remember. Avoid making steps that will create passwords containing disallowed characters, which are typically quotation marks (single, double, or back), slashes (of any direction), spaces, and metacharacters (like function keys or control combinations).

Once you have set up a system like this, you should record it somewhere and keep it safe, just for future reference. You still should not write down your passphrase anywhere, but chances are you won't need to.
Page generated Jul. 20th, 2017 02:38 pm
Powered by Dreamwidth Studios