Unit Verse

Until recently, the bulk of thought towards managing a site’s content has weighed on the side of more options and more control. With this has grown more headaches, indecipherable usability, and more opportunity for the misguided destruction of otherwise well-considered designs and/or mark-up. The guiding principle of Unify has been to put the power back in the hands of designers and developers by creating a content editing option with dead-simple, customizable implementation, limited-yet-permissive content control, and a polished, intuitive UX.

Unify is not a complicated system; in fact it is not a system at all. This two-part series will illuminate some of the unique aspects of Unify, allowing any website designer/developer the most opportunity capitalize on its potential. Unify is the closest to a plug-and-play content editor available at this time, and these tips should help make your next Unify install as quick and effortless as possible.

How Unify Works

The Unify UI is built on the jQuery library and jQuery UI. Through javascript and CSS, Unify gives a constant and accurate depiction of the changes being made to the HTML. Therefore, when manipulating items through the Unify UI, you are editing only what the browser sees. Publishing changes, on the other hand, deals with the actual HTML/PHP written in your files (more on this later). The Unify text editor is a custom build of tinyMCE, sharing all of its triumphs and tribulations. We have taken great pains in smoothing out some of tinyMCE’s eccentricities, and will continue to do so, but those with tinyMCE experience will recognize some of its hiccups.

When the changes are completed in the interface, and it comes time to publish these changes, we get to the core of what makes Unify unique. On publish, Unify will pick up the HTML/PHP page that you are publishing to (and any includes), find the elements you have edited, replace their content with the updated content, and then save those files back down on your server. This eliminates the need for a database, as your HTML/PHP files are, in a sense, storing your content. During this process, Unify also creates backups of your files, allowing for previously saved states to be “restored.”

Before all of this can take place, though, you must install Unify on the root of your website. There are some server requirements you may need to look in to at this point, but given that you have a common PHP setup, Unify should just drop on to your server and work. You should then be able to define the editable content throughout your site by adding the class of “unify” to elements. You can also use the “unifyRepeatArea” and “unifyRepeat” classes to really make your content dynamic. More on these Unify Repeatables later.

It is important to note here: Unify elements do not nest. Any “unify” or “unifyRepeat” elements within other “unify” or “unifyRepeat” elements will be ignored both by the interface and the publishing functions.

Development Environments

We have given serious consideration to how to set up development environments for Unify. In order for Unify to work, you must have purchased a license and registered your copy of Unify for a specific domain or sub-domain. Seems simple enough until you want to develop on one domain/sub-domain, and then deploy in another, right?

Unify was not designed to be a complicated solution that would require a lengthy testing period or any development area. It either works, or you will need to sort out some PHP config issues, and then it works. If you want to give it a test run, though, before deploying, we suggest one of these three options:

• Purchase a license for a sub-domain/domain specifically for Unify installs, e.g. unify.yoursite.com. This will be a one time fee, and will allow you to use Unify in any folder in this sub-domain. You could copy fifty Unify folders in to fifty site folders for fifty clients, and they would all work in that sub-domain on one license for a one-time purchase.
• Purchase a dev license and a live license for your client as part of your project with them, rolling this in to the cost of your project. This would allow you to develop in a sub-domain.
• Simply develop in a sub-folder of the domain on which you wish to use Unify.

For Unify to work, it must be installed and running on a live, licensed domain or sub-domain. This means you will need a live connection to the Internet to use Unify. It also regrettably eliminates the ability to develop in a local environment. Please see Developing for Unify pt. II for info on developing locally.

Efficiency Through Unify Repeatables & PHP Includes

Unify works with PHP includes. The UI cannot recognize if content has been brought in through a PHP include statement, but when publishing, Unify loops through all the includes called on your PHP page, and replaces the appropriate content in each. So, if you have recurring content throughout your site—e.g. in a site header—you need only make the change once and it will populate throughout the site.

Another important to note: do not put any PHP (or PHP includes) inside of a Unify element. As mentioned before, the Unify UI only knows to save what the browser sees, so this could destroy some of your server-side code when publishing. Your included Unify element must be within the include, not surrounding it.

Unify Repeatables are an all together different tool that allow you to rearrange and duplicate complex sets of elements. For example, say you have an element whose inner HTML is a little bit complicated, like so:

<div>
   <img class="fancy" src="images/fancyimg.jpg" alt="Fancy" />
   <h4>Caption Header</h4>
   <p>Some more caption content goes here</p>
</div>

If this element will need to be duplicated, you could just wrap it in a “unify” element and hope that your client is savvy enough to grab all the appropriate tags when copying. We know this is a scary thought to most developers, and this is why we created Unify Repeatables. Now you can create a “unifyRepeatArea” container, and make the original element a “unifyRepeat” element, like so:

<div class="unifyRepeatArea">
   <div class="unifyRepeat">
      <img class="fancy" src="images/fancyimg.jpg" alt="Fancy"
      »» />
      <h4>Caption Header</h4>
      <p>Some more caption content goes here</p>
   </div>
</div>

Line wraps marked “»»”. -ed.

The “unifyRepeatArea” defines a boundary. Within that boundary, “unifyRepeat” elements can be duplicated and rearranged. There can also be non-editable elements within the “unifyRepeatArea”, but these will be static, and will only be moved as nudged by other arrangeable content. “unifyRepeat” elements outside of “unifyRepeatArea” elements will be ignored by the UI and publishing functions.

By combining Unify Repeatables and PHP includes, you can create fairly dynamic and functional site modules that are easily updated through Unify.

What’s Up in Pt. II?

In part two of this series, we will look at how Unify works with dynamic content, like Twitter feeds, and how you can better implement Unify to be friendly with page behaviors such as tabs and lightboxes. Plus, we will take a look at the future of what Unify will have to offer.

For the past few months the Unit Interactive team has been working hard on a little application that is meant to solve big headaches for web designers and their clients. It’s called Unify, and it’s a website content editor that is easy to install and easy to use.

We are ready to begin private beta testing on Unify and we cordially invite you to sign up to participate.

UPDATE:
The beta testing sign-up is now closed.

What is Unify?

Unify is not a content management system. It’s is a simple content editor that anyone can use. It has a ridiculously simple implementation and requires no database integration. To use Unify, you simply go to your website, login, edit the content right on the page, and click “publish.” Done.

 - no CMS
 - no backend interface
 - no database setup
 - no proprietary syntax or tags

Just change, add, or delete content right on the page in your browser.

Setting Up Unify

For the designer/developer, implementation is a snap. Once you create an account and download Unify, just…

1.    Upload the Unify folder to the server,

2.    Add the appropriate Unify classes to the HTML elements or divs that you’d like to be able to edit, and upload the page(s) to the server.

…or…

3.    There is no step 3. You’re done.

Why Unify?

Not every website needs a cumbersome and complex CMS. Sometimes all someone needs is the ability to modify content; to edit contact information, to replace an image, or to change some copy. For website owners, the easiest and most intuitive way to do that would be to go to their website in a browser and edit the content right there, on the page. Unify makes this possible.

For Designers & Developers

Wouldn’t you like to have a simple content editing solution for those clients who don’t need a powerful CMS? Unify is perfect for brochure sites and other informational websites where content updates are minor and infrequent. With Unify, your clients don’t have to know HTML and they don’t need to learn to use a complex, counterintuitive backend system. Unify lets you give your clients an easy-to-use editing solution so that they can be self-sufficient …and you can determine which elements they can edit and which elements they can’t.

Unify is not a hosted solution. It lives on the website’s server. The license cost will be very low, allowing for easy inclusion in project budgeting.

Using Unify

After going to www.yourdomain.com/unify and logging in, editable areas become conspicuous on the page. Double-clicking on an editable area or clicking on the edit tab opens up an intuitive editing interface for that content element or containing div. The controls are contextual to the elements you are editing. Unify even has a robust definition list wizard; a feature lacking in other content editing apps. Unify’s intuitive image wizard allows uploading, editing, application of classes, IDs, or alternate text properties to images.

For more complex content arrays, like image+copy+stats for a typical company’s staff listing or a product listing, Unify even has a repeatable element function so that website owners can add a new staff member or product. The user can select a repeatable section, insert a duplicate, and change the relevant information or image. This function prevents your client from destroying a complex product or staff listing while editing in visual mode.

Unify works to preserve good markup. You can edit in either visual or HTML mode. The visual mode prevents users from adding presentational effects (like underlines or colors) to content, so the presentation stays within the CSS.

Sign up for the Private Beta

If you are a web designer or developer and would like to help us put Unify through its paces, please go to the Unify website and sign up to participate in our private beta.

UPDATE:
The beta testing sign-up is now closed.