Unit Verse

It has been quite a while since I wrote the first part of this series, but Unify has been going through a lot of changes in the last 6 months, and I wanted to make sure to address all of the new features and improvements that have been in development.

Please Note: Every new addition to Unify is rather well debated so that we can allow the app to be as simple and easy-to-use as possible. What follows here are best practices and suggestions to help you [designers & developers] understand how Unify works so that you can create the best experience for yourself or your clients.

So, without further delay: Here is everything else you may want to know when developing a site with Unify in mind.

(The features selected in this article are based on user input, so if you want to know how Unify works with your specific configurations, please peruse the forums or contact us. Thanks!)

Aesthetics

Much of our efforts in recent months have been focused on making Unify work with—or on top of—many possible server configurations (such as IIS and Apache), browsers, and content needs (such as tables and picture galleries). As much as this adds to the power of our app, it doesn’t do much for ergonomics. So as of version 1.2.0, we greatly improved the style rendering in the editor (before & after):

…and improved the HTML editor by adding a full-screen view, syntax highlighting, and allowing tabs:

IMHO: these screen-shots cannot do justice to the improvements. See for yourself in our live demo.

Working Locally

Unify requires a handshake with our server in order to log in, and perform many other tasks. This means that in order to operate Unify, you need a live internet connection. This does not, however, preclude the use of a local environment to develop for Unify. Just set up your local environment, purchase a Unify license for the eventual domain that you will be using Unify on, and install the files in the proper folder. Then alias your localhost to the URL of the destination domain. Done.

Files Permissions & Auto-Update

As of version 1.2.0, Unify can accept and save your FTP Info in the dashboard. This will fix any permissions errors you may be receiving when publishing. FTP info is also required for a nice new feature of Unify: Auto-Update.

With auto-update, you and your clients don’t need to worry about working too hard keeping up with the latest Unify fixes and features. Just go to the dashboard, check to see if you are running the latest version in the update box in the top right corner, and if there is a newer version, click “Update Now!”. To run the Unify Auto-Update, you will need the PHP cURL library on your server as well.

Video & Embedded Content

As of version 1.2.4, the Unify video embed wizard only works with OBJECT and EMBED tags, but we will be adding support for HTML5 video very soon.

To make any video (or EMBED or OBJECT) editable, just add the “unify” class to it. This will allow you or your client to edit the video specs in the video embed wizard. Options include changing the size of the element, or replacing the embed code.

File Uploads & Browsing

Users can easily upload, browse, and link to images or any type of file (besides PHP, HTML, CSS, or JS). Unify will even auto-discover folders to upload to, or you can set specific folders for images and files in the Unify dashboard. Once a file is uploaded, click the search icon next to any link or image source field to browse the available files and create a link.

Working with Lightboxes & Picture Galleries

All lightbox scripts work differently, so we cannot claim support for every one that is out there, but we have taken strides to make Unify flexible enough to cover most of what you would need. Every link prompt will include a “class” and a “rel” attribute, which should give you what you need to create a link that is compatible with most lightboxes.

To adapt a common picture gallery to be editable with Unify, try the following steps when installing Unify:

1. Add the “unifyRepeatArea” class to the gallery container.
2. Add the “unifyRepeat” class to each image (not the link).

Now, you or your client will be able to drag a copy of any thumbnail, and then edit it. In the Unify image wizard, you can create a new lightbox image by following these steps:

1. Through the upload interface in the top-right of the image wizard, upload the large image first by selecting the appropriate folder, and then browsing to the correct image on your hard drive.
2. Go through the same steps to upload the thumbnail. You should now see the thumbnail image in the top-left area of the image wizard.
3. In the fields below the thumbnail image, add the appropriate class, link and rel that your lightbox requires.
4. Hit “done”, and if everything looks correct, hit “Publish”.

Working with Tables

As of version 1.2.3, Unify should work well with most table configurations. Here’s how:

• If you want your table to retain a static number of entries (or rows), just add the “unify” class to the TABLE tag.
• If you or your client will need to create new entries, you can add the “unifyRepeatArea” class to the TABLE tag, and then add the “unifyRepeat” class to your TRs  (or TDs depending on what content you want to be able to replicate… although I would recommend only repeating the TRs).
• In both cases: To prevent any editing anomalies, please make sure to set up your table properly in your CSS. For example, a TABLE should be “display: table;”, a TBODY should be “display: table-row-group;”, a TR is “display: table-row;” and a TD should be “display: table-cell;”. Also, try adding “table-layout: fixed;” to your TABLE for more efficient rendering. IE does not recognize these, but it manages just fine on its own.

Cufon & sIFR

Unify automatically disables Cufon and sIFR in the front-end when loading a page in Unify. This means that your text will look different, but after publishing and logging out, your content will look correct on the live site. This eliminates any incompatibilities between these scripts and Unify.

Tabs & Sliding/Animating/Hidden Content

If it is on the page when the page loads, Unify can edit it. With each mouse click, Unify evaluates which editable elements are visible and hides/displays the edit icons accordingly. It will also adjust the position of the icon, but this is not fool proof.

To make sure that your icons are displayed and in the correct place in Unify after a Javascript change to the page, you only need to add one line to the end of your Javascript function:

    if (top.window.createIcons) top.window.createIcons();

This will fire the Unify “createIcons” function and move the edit icons to the right place.

Working with Dynamic Content

Unify works with what is on the page when it is loaded. If you are bringing in dynamic content, Unify will not be able to edit it properly, so make sure that any content like a twitter feed, del.icio.us feed, or anything else that is brought in through Javascript is not included in a “unify” editable area.

Moving Forward…

We have many great things planned for Unify in the near future, so keep checking in here on our blog, or follow us on twitter: http://twitter.com/unitinteractive . Also, if you have any questions or suggestions, please tell us about it here, or in our forums.

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.
• As of 07/15/10: You can now transfer any license one time. See here for more details.
• 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.

Unify is out! Go here to see more about how it works, and start editing your site for just $24.49! – Nathan

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.