Crystal's Adventures in Webdev Land » javascript

Mt. Mary Event Registration

Crys — Thu, 11 Mar 2010 02:53:03 +0000

Mt. Mary Events Registration Form

Mt. Mary needed an event registration form that could both send them information via email and post over to a credit card vendor at the same time. It also needed to be easy to update but had no database or admin system to work through. So I used a php array to allow the client easy access to update the events without the need for them to learn html or javascript. This form includes the ability to add/delete guests and a running subtotal, as well as in-place validations via jquery which are then revalidated via php in case the user has javascript off.

Form Usability and Design

Crys — Tue, 26 May 2009 19:41:42 +0000

Most of the work I do right now, I can’t post here because it’s proprietary and client-facing only. However, there’s one application, Mortgage Loan App, that’s fairly new and is what we call a “consumer facing” (meaning our clients’ customers) application that I would like to use as an example to discuss usability in forms and other aspects of form design. I’ll be referring back to it quite a bit in the next couple weeks. This copy is our production environment test copy; clients can customize the application with their own logo, colors and contact information.

A few forms topics (will link each when the post is finished, so feel free to bookmark this page to make it easy to find them in the blog):

Label Placement
Row Highlighting
User Flow
1. Tabbed Interfaces meet the Wizard
2. Back/Next Navigation
3. Button Placement
4. buttons vs input=button vs input=submit
5. Information breakdown, what’s on which page and why
Why I use unordered lists in fieldsets for my forms
Progressive Enhancement and Usability:
1. dynamically hiding extra fields when they aren’t needed
2. Making your form usable even when js and css are turned off by the user
Making it Pretty
1. CSS file design for multiple templates/themes
2. Nifty 3d buttons without resorting to graphics
3. Disabled Submit Buttons in IE and Firefox
4. IE and empty divs

View Javascript-Generated Code in Internet Explorer

Crys — Tue, 26 May 2009 16:23:42 +0000

If you’re using the Web Developer Add-on in Firefox, you are probably already familiar with the “View Generated Source” option (Web Developer > View Source > View Generated Source) for use in debugging code that is manipulated by javascript. But what do you do in Internet Explorer, where no such option exists?

Here’s my solution:

1) Go to the page whose generated source you want to view. Let it load in its entirety.

2) Put this in the address bar (broken to two lines to fit in my page’s width. Should be all on one line with no spaces for browser):
javascript:'

'+window.document.body.<br />
parentNode.outerHTML+''

Your page will be replaced with the current state of the DOM, as Explorer sees it. xmp is a deprecated html tag that treats all the characters between the start and end tag as text instead of reading it as html. Since you can run javascript from the address bar, you can just take the whole page, put it between xmp tags, and spit it back out again. This is especially useful if you’re using browser-sniffing js to serve different js code to different browsers, because you otherwise would be unable to see the js in action in IE.

Note that this only works in Explorer, but that’s ok. If you want to see it in Firefox, it’s built right into the Web Developer’s Toolbar, or you can use innerHTML instead of outerHTML to get a similar output. The Developer Toolbar for Explorer is less reliable for viewing generated content; my experience is that it tends to get caught on a cached version of the DOM, so this trick is invaluable when you want to see the same page before and after events on the page have changed the DOM.

Keyclothes

Crys — Wed, 13 May 2009 03:29:19 +0000

This is a design I did a couple years ago but couldn’t post because there’d been a delay in the site itself. Now it looks like they’ve finally got the site up and running, though some of the design implementation is different (notably in the left navigation treatment).

However, 99% of the design elements are retained and I’m really happy with how it turned out. I also did the two main logos; I did not do the banner ads on this site, unlike most of the other sites I’ve posted/will post.

Keyclothes.com by Workhorse Outfitters — Outerwear for Work or Sport

Here’s a screenshot I took of my prototype:

Precision Screw Thread Corp.

Crys — Fri, 12 Jan 2007 18:18:34 +0000

I’ve done a lot of industrial and manufacturing sites. Most of them are very cut and dried, get it done as fast as you can, we want it to look as plain as you can and still get our information across. That’s not a value judgment, just a constraint that you usually have to work under with certain industries.

Precision Screw Thread stands out from their industry for their recognition that “functional” does not have to equal “ugly”. I had a lot of fun putting this one together.

Precision Screw Thread, Inc.

The initial landing page for the site was conceived as an abstracted display panel from one of the threading machines and evolved into what you see on the page now. We wanted to showcase the short movie but avoid the typical “trash splash” intro that trips up a lot of sites. This display panel instead brings together the site’s navigation and news from the company blog to make it easy for users to get where they want to go on the site (I was outvoted on making the movie start playing immediately. Sorry visitors, you’ll have to hit stop instead of start).

The internal pages carry through the theme and the navigation from the intro page. We wanted to add a little motion so I animated the starburst behind the logo in the upper left so that it glows and rotates on mouseover.

RHH Foam Systems

Crys — Tue, 11 Apr 2006 17:54:56 +0000

Here’s a fun one.

RHH Foam Systems – spray foam insulation

The spray nozzle at the top of this site is animated, but on a long delay to avoid annoying users. I created the animation using frame-by-frame cel-style techniques in Photoshop and ImageReady entirely through photo manipulation. The spray foam behind the navigation is entirely a digital creation with a photo used only to enhance the texture.

Associated Surgical & Medical Specialists, LLC

Crys — Fri, 07 Apr 2006 17:40:33 +0000

Associated Surgical & Medical Specialists, LLC

Liquid layout, javascript enhancement, dynamically generated menu items

Lithograhics.com

Crys — Fri, 28 Oct 2005 13:50:45 +0000

This is a site worth visiting. I’m pretty happy with how it turned out. The brief for Lithographics included a small book that they print and use for promotions and my task was to keep the website in line with that book while still giving them a dynamic — in both design and technical terms — site that would stand out from the competition and convey the quality of their print work despite being a non-print medium.

I wrote all the code and markup for this site, with the exception of the reference desk, which I heavily modified from an application written in-house by another programmer at the company, and I created all the banner ads using single-frame cel animation techniques in Photoshop and ImageReady. I also converted all the photos from press-ready to web-ready with an eye to making them look the way they looked after coming off the press, rather than just making them look like digital photos. (I was very successful at that, if that tells you anything about the exceptional quality of the print-work that Lithographics does).

Lithographics, Inc. – Quality Printing, Superior Production

When I did the site in 2005 it had a different look for each of the sections; looks like they liked the lightbulb so much they had the agency that hosts the site change all the sections to match that. Here are mockups of two of those other two sections:

Banners: