Design View | Articles and opinion on design professionalism, technique and culture by Andy Rutledge

Unify: A Fantasy Fulfilled

September 9, 2009

Ever since I first started making web pages, I wanted a CMS that would allow me to make content updates by simply going to my website and changing the content right on the page. My fantasy was that this system did not require me to know any programming language or tagging system beyond HTML and CSS and it didn’t require me to play with a database. In my fantasy, the system took minutes to implement and my clients could use it as easily as I could.

I’m not alone in this fantasy, as every web designer that I’ve ever discussed this topic with has expressed the same sentiment. Even though the average web designer today is much more familiar with robust CMSs and knows a bit of scripting and PHP, the fantasy of the dead-simple content editor is still pretty popular. And with good reason; not every site needs a convoluted CMS. Sometimes all you need is the ability to add, delete, or change a paragraph or bulleted list or image now and then.

For all of this, I think the perfect tool is Unify. To be clear, this article is a biased endorsement of a product my company makes …but in large measure it’s a celebration of the recent fulfillment of one of my long-time fantasies. Pardon me while I gush.

So what’s Unify?

Unify is a simple, in-browser content editor that anyone can use. It’s the brainchild of Nathan Ford and he, along with the rest of the Unit Interactive team, designed and built Unify in order to fill a void all of us have long lamented. It’s a niche that we knew lots of other designers have lamented, too.

Ridiculously simple installation & implementation
The process of downloading and installing Unify can take less than 1 minute. After unzipping the downloaded file, you just put the “unify” folder on your website root directory. Done. Seriously, that’s it.

To make Unify work with your web pages, you just add class=”unify” to whatever you want to make editable; either specific block-level elements or to containing divs. Everything inside of the element with the unify class will be editable. In other words, you get to decide what your clients can and cannot edit. Here’s a video to illustrate just how easy it is.

When you go to and login, the editable area icons appear. You just navigate the site as normal, find the page you want to edit, and click an icon to open the editing interface. Using the editing interface is simple and pretty self-explanatory and the image wizard is really neat, as this video shows…

…but there are a few surprises.

The goodies

In addition to the normal fare one is likely to find in the average CMS’s editing interface, Unify brings a bit more game. For instance, as you saw in the video above, you can create something called Unify Repeatables, which allow you or your client to rearrange, delete, or drag copies of complex arrays of content that you’ve defined using the unifyRepeatArea and unifyRepeat classes. More on this can be found in Nathan’s article here.

By creating unifyRepeat sections, you can make life very easy for yourself or your client when it comes to replicating complex content arrays. For instance, after creating a copy of a repeatable, you can simply edit the content to create a new, unique entry without the bother and complexity of dealing directly with HTML (just as illustrated in the video above). Oh, but you can directly edit the HTML if you choose.

By the way, you can create a little magic with php includes, too. Although you must not put an <include> inside of a unify element, you can certainly put a Unify editable area inside of an <include>. This helps you to craft a sort of magic seen only in dynamic, CMS-driven sites. With this configuration, whenever you update the content in that <include> the change populates throughout the site wherever that content exists.

Definition lists are another tricky character that every other CMS leaves alone. But Unify has a definition list wizard that can allow any web neophyte to create and edit definition lists. This is especially helpful, because savvy web designers use definition lists for all sorts of contextually-appropriate content arrangements. With this tool, no matter how complexly you’ve styled the <dl> elements, your clients can edit them easily.

Definition lists
Okay, infomercial’s about over

I’ve waited years for a tool like this and I’m pretty geeked out over it. I’ve never used a CMS for my website, Design View, but I’m using Unify now and really dig how it works. I’m currently designing and building a website for my mom’s church and Unify will be the editor behind that site, too. In my mind, it’s the perfect tool for simple websites with simple content editing needs.

Sure, I want designers all over the world to purchase Unify (only $16 – cheap!), but mostly I’m excited that one of my designer fantasies has come true. I’ll bet I’m not alone in being excited about this.