AlternateIdea: Encytemedia redesigns ActiveType

June 27th, 2005

Encytemedia redesigns ActiveType

3 comments on 500 words

I recently had the opportunity to work with “Steve Eichert of EMX Software”:http://steve.emxsoftware.com/, doing a redesign of their .NET Content Management System coined ActiveType.

!/images/16.png (ActiveType File View)!

!/images/17.png (Tabbed Interface)!

ActiveType offered a lot of power, but the interface was cumbersome and suffered from the “chocolate teapot syndrome”:http://www.theregister.co.uk/2005/05/04/letters_0405/. In it’s current state, the application could only be marketed to Internet Explorer users. It was in desperate need of a makeover, not only for usability purposes, but to also broaden the market in which the application could be pitched to.

This was also my first time working together with a client by means of “Basecamp”:http://basecamphq.com. Basecamp smoothed communication, file transfers, and helped me “GTD”:http://www.davidco.com/ almost transparently.

!/images/14.png (ActiveType List View)!

!/images/18.png!

A few highlights of the redesign:

Global inline help.
Dashboard view with primary task/sections.
Color coded context areas.
Works in all modern browsers.
Tabbed interface.
Details on demand advanced options.
Clean, consistent, minimal UI.
“Standards”:http://www.w3.org/TR/xhtml1/ , “Standards”:http://www.w3.org/TR/CSS21/, “Standards”:http://www.ecma-international.org/publications/standards/Ecma-262.htm.

!/images/15.png (ActiveType Dashboard)!

Overall, the end result was a great success. “Steve”:http://steve.emxsoftware.com thought so as well:

I am very happy with the quality of work delivered. I think you did a great job bringing things together and did a wonderful job of cleaning up the CMS with a fresh clean UI, which was my ultimate goal. I’m very pleased and think you’ve done an excellent job! - Steve Eichert, EMX Software

!/images/13.png (ActiveType Redesign)!

Update: I had a few request for detail shots, so I sprinkled in a couple.

Discussion

Frank Manno said on June 30th

Hey Justin,

Awesome work, man! Any chance of providing some larger screenshots? I’d love to see it in further detail.

PS: I’ve been absent from Typo for a while… Would like like some company? :)
Steve said on July 6th

More screenshots can be seen at:

http://steve.emxsoftware.com/Content+Management+CMS/ActiveType+CMS+Screenshots
Jon said on July 18th

Reminds me of the Typepad interface.

Sorry, comments are closed for this article.

Justin develops iPhone and Mac software over at Labrat Revenge by night and by day he is the Design Director for entp, the company behind Lighthouse, Warehouse, and Mephisto. You can check out his dated portfolio for a peek of what he's done.

Beautifully simple issue tracking and project management. With a beautiful Mac-like interface, email and subversion integration, Lighthouse is the perfect project management tool. We took the suck out of issue tracking.

Jan12

YouTube has just announced HouseHub and Senate Hub.
permalink
Oct10

Best Practices For Cocoa and CocoaTouch—Invaluable tips from Cocoa developers.
permalink
Sep25

Track House And Senate Votes On Twitter. I’ve put together a small script that parses vote data collected by Govtrack.us and posts to twitter.
permalink
Jul28
permalink
Protip: Color grep searches in terminal
```
alias grep='GREP_COLOR="1;37;41" LANG=C grep --color=auto'
```
Stash this away in your Z Shell (~/.zshenv) or Bash environment (~/.bashrc) and set your preferred ANSI code.
Jun08

ActiveRecord Ported To Objective-C brought to us by Ninja Kitten
permalink
May06

With the release of Opera’s DragonFly, IE 8’s Developer tools, Safari’s/Webkit’s Web Inspector and Drosera; and the Grand Daddy of them all, Firebug – we’ve now come full circle.
permalink

Feb08

permalink

DoubleClick and Define using Apple Dictionary


var selection;
if(window.getSelection)
  selection = window.getSelection();
else if(document.selection)
  selection = document.selection.createRange();

document.observe("dblclick", function() {
  if(navigator.userAgent.include("Macintosh")) {
      location.href = "dict://" + selection;
    }
});

A quick (and probably dirty) Prototype-based hack allowing Mac users to get the definition of any word by double clicking it.

Feb08

permalink

A strftime for Prototype


Object.extend(Date.prototype, {
  strftime: function(format) {
    var day = this.getUTCDay(), month = this.getUTCMonth();
    var hours = this.getUTCHours(), minutes = this.getUTCMinutes();
    function pad(num) { return num.toPaddedString(2); };

    return format.gsub(/\%([aAbBcdDHiImMpSwyY])/, function(part) {
      switch(part[1]) {
        case 'a': return $w("Sun Mon Tue Wed Thu Fri Sat")[day]; break;
        case 'A': return $w("Sunday Monday Tuesday Wednesday Thursday Friday Saturday")[day]; break;
        case 'b': return $w("Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec")[month]; break;
        case 'B': return $w("January February March April May June July August September October November December")[month]; break;
        case 'c': return this.toString(); break;
        case 'd': return this.getUTCDate(); break;
        case 'D': return pad(this.getUTCDate()); break;
        case 'H': return pad(hours); break;
        case 'i': return (hours === 12 || hours === 0) ? 12 : (hours + 12) % 12; break;
        case 'I': return pad((hours === 12 || hours === 0) ? 12 : (hours + 12) % 12); break;
        case 'm': return pad(month + 1); break;
        case 'M': return pad(minutes); break;
        case 'p': return hours > 11 ? 'PM' : 'AM'; break;
        case 'S': return pad(this.getUTCSeconds()); break;
        case 'w': return day; break;
        case 'y': return pad(this.getUTCFullYear() % 100); break;
        case 'Y': return this.getUTCFullYear().toString(); break;
      }
    }.bind(this));
  }
});

UPDATE: Bugs fixed. Thanks Andrew and Stephen

Also, some of my old and new code has been posted on GitHub. You might find something useful.

Feb04

A beautiful, organic animation by Flight404 created using Processing.

Processing in Action
Jan08

Aaron Patterson shows us how to define ruby methods which can be called from JavaScript using RKelly.
permalink
Jan07

Dustin might not surprise you at your house with a book in hand, but he’ll damn sure send you his innermost fu in the form of a shiny yellow and black book. It’s an excellent read if you’re looking to put more funk in your functions and class in your classes. Check out “Pro JavaScript Design Patterns” by Dustin and Ross Harmes.

—I’m Justin Palmer and I approve this message.
permalink
Dec23

IE 8 PAsses the Acid 2 Test for those not keeping tabs on things.
permalink
Oct24

Mislav has written up an excellent overview on upgrading Radiant (which used 1.5) to Prototype 1.6. The article does a great job of showing how 1.6 is superior to 1.5.
permalink
Oct19

According to the New York Times, the Daily Show Archives, with over 7,000 videos are online—free and searchable.
permalink
Oct11

Telemarketer gets owned