Myers Listings Syndication screen

One of the features in Myers AgentCenter/OriginatorNetwork that I worked on the interface for is the Listing Syndication product. The challenge with this interface was to make it easy for non-technical people to, not just use within the confines of AgentCenter, but for them to take their listings and use it in places that don’t allow direct syndication, such as Craigslist (which specifically prohibits any automated submissions). The solution to this was to take each of the four different layouts for listings within our system and convert them to Craigslist-friendly html, ready to be simply pasted from our application:

Myers Listings Syndication Get HTML dialog screen

Besides the usual “change color on hover,” “sort by heading” sorts of interaction you expect from a records list table, we needed to denote which listings lacked information required by the sites we syndicate to, so we added a grayed-out style for those records with an alert that tells the user what’s missing and offers them a link back to put the information in. I initially designed this table to allow inline editing for that information but that feature was cut in favor of the simple link.

Related posts:

1. Myers Image Library
2. Myers Order Forms – Package Details
3. Resume – Paul Lathrop

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. Since this was originally posted, however, Mt. Mary has moved on to using a third party for their event registration.

Related posts:

1. View Javascript-Generated Code in Internet Explorer
2. Seelund Trading Co Guild Website
3. Character Module Design Process: Start with paper and pen

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:'<xmp>'+window.document.body.
parentNode.outerHTML+'</xmp>'

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.

Related posts:

1. Dev Tricks and CSS Hacks
2. Code Specs
3. Teaching HTML as a Second Language (HSL)

Visit Site: Precision Screw Thread, Inc.

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.

Related posts:

1. Yes, it’s pretty but it’s not a great web presence
2. Resume – Paul Lathrop
3. Keyclothes.com by Workhorse Outfitters

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.

Related posts:

1. Lithograhics.com
2. Code3Co Animated Banners
3. Milwaukee City Hall

Liquid layout, javascript enhancement, dynamically generated menu items

Related posts:

1. View Javascript-Generated Code in Internet Explorer
2. Private: Form Usability and Design

Lithographics, Inc. – Quality Printing, Superior Production

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.

Each section of the site had its own photo. Here are mockups of two of those other two sections:

Banners:

Related posts:

1. RHH Foam Systems
2. Schroeder Bros. Construction, Inc.
3. Precision Screw Thread Corp.