ExpressionEngine is a powerful and flexible commercial content management system. This review will try and highlight the pros and cons of the CMS as well as some general information to help you decide if EE a good fit for you. For more detailed information on the structure and inner workings of EE start here.

ExpressionEngine

ExpressionEngine is the flagship product of EllisLab, the same company that brings us the popular lightweight PHP framework CodeIgniter, on which the second iteration of EE is built. Before we dig any deeper, note that EE is not a free product at any license level. As of this writing, licenses range from $99.95 – $299.95 (more details here) plus the cost of addons so if you are looking for free options take a look at platforms such as Drupal, Joomla, Plone, Pyro, Fork, Modx, etc. Most installations will likely put you at the $299.95 price point for commercial client work. In general EE will run on PHP 5.1.6+, MySQL 4.1+, and you will need 16MB+ of available memory (more is likely needed). You can download their server wizard to check for compatibility if you aren’t sure.

EE has the ability to scale nicely with the right setup (more blog entries to come). Organizing and serving thousands of pages on a high-traffic site is not a problem and the out-of-the-box profiling tools can help identify performance bottlenecks. The core of the EE power revolves around the robust templating engine. In my opinion it is second to none and only in very rare situations has it not been able to handle even the most complex scenarios (that is where the query module or add-ons come in). Out of the box there are no SEO-specific inputs but that is only because EE does not assume anything about your site, you can easily add fields or a plugin to accomplish your SEO goals, no matter how complex.

EE comes standard with a robust file manager, a handful of fieldtypes, a wiki module, commenting ability, a member module, search functionality, template caching, and more. There is also a basic forum module available for purchase ($49.95 or $99.95) although it is not nearly as powerful as some of the more popular, standalone forum software available elsewhere. It does, however, make for easy integration should you need a forum without some of the bells and whistles.

For some examples of sites built on EE take a look at Show-EE.

EE vs Other Platforms

EE is often compared to other software such as Drupal, one of the largest open-source platforms available. To start, there are a number of great open-source, LAMP-based content management systems. You can’t really go wrong with most popular CMS options but things to look at include admin usability, ease of templating, extensibility, community, SEO-friendliness, support, etc. You’re specific needs and development skills are the biggest factors in whether one will work best for you. I don’t really put WordPress in this category as, despite it’s flexibility and huge plugin availability, it is still much more focused as a blogging engine rather than a full-blown CMS platform.

EE seems to strike a nice balance between functionality and design-ability. The templates are very easy to use and do not require any PHP, in fact by default they don’t even support PHP unless you choose to enable it, which is unlikely given the availability of add-ons. Out of the box you have a clean slate to build out your templates so you are in full control of every bit of rendered markup. With some platforms the norm seems to be to grab a theme and modify it for your needs. However, with EE, that is not typical and there just aren’t many templates out there to begin with (a few can be found at ThemeForest). Drupal and Joomla are, in my opinion, more complex and demanding platforms than EE. They don’t seem to cater towards designers/front-end developers like EE does and generally require at least some basic PHP skills to get wrangled and that is true of a number of other CMS platforms as well. That being said, you can find developers that swear by those or other options and for good reasons which is why it is so important to closely evaluate your needs and resources before committing your time or money.

The community and developer population are important factors when choosing a CMS. Most content management systems, especially popular options like Drupal and Joomla, have very active communities and many developer options if you are looking to outsource. There is likely a better chance you can find local talent for other platforms before ExpressionEngine (take a look at the EE Pro Network) as it is a commercial product. That being said, there are still quite a few high-quality EE shops out there and they seem to really build strong expertise around the product. All of the major platforms have active communities and ultimately you can probably find answers to your questions. While EE support may not be instantaneous (they don’t offer live chat or phone support), typically forums requests get picked up by staff or community members within half a day or so and sometimes much quicker.

One issue with EE is that there is no free version or trial version you can easily download and play around with. There is a 30-day guarantee but in a world of free competition that makes for a tough sell. That being said, you can email the EE sales team and they can likely work with you on a trial license if that is a deal breaker for you. I encourage you to research a handful of content management systems and install and play with a few before choosing a platform. If nothing else the experience will give you perspective on CMS software in general and help you nail down your priorities.

EE Pros

• Excellent template functionality for comprehensive markup/design control.
• Great system security and stable in the V2 life-cycle at the current 2.3.1 build.
• Some really great, high-quality addons available. Check out Devot-EE.
• Built on CodeIgniter, my PHP framework of choice. Strong platform for building custom add-ons.
• Full-time support staff and active community available through the EE forums.
• Strong professional network for outside consulting.

EE Cons

• No free licensing options and buying up many needed commercial addons can quickly add up.
• A few unfortunate missing pieces from the core like a top-notch WYSIWYG, previewing (painful omission), advanced workflow, and image galleries. Third party options are available to address most gaps.
• The interface with all the pink and rounded corners can get old. Check out the Nerdery control panel theme to combat that.
• Upgrades can be time consuming, not a 1-click operation like you might be used to in WordPress. Still much improved from the first version.
• No phone/enterprise support options for immediate assistance from EllisLab.

Conclusion

ExpressionEngine is a stable, growing platform that strikes a good balance between customizeability and user-friendliness. I have managed ~16 EE projects this year so in my opinion the pros outweigh the cons. It offers a clean approach to developing sites where you are in complete control, nothing is forced or assumed. Every platform has it’s pros and cons so if you don’t mind investing $400-$500+ in software and addons then definitely take a look at ExpressionEngine.

Stay tuned for some more EE-related posts as well as a ton of other updates and new content.

More Resources

• http://expressionengine.com/user_guide/getting_started/index.html – Getting started.
• http://www.eeinsider.com/- Popular EE resource and blog.
• http://www.train-ee.com/- A great resource for free and paid EE info and tutorials.
• http://www.netmagazine.com/tutorials/build-portfolio-expressionengine – EE portfolio website build-out tutorial.

A Few Examples of High-Quality Add-Ons – many more at Devot-EE

• WYGWAM – Popular EE WYSIWYG
• Matrix -Multi-entry list fieldtype
• Playa – Relationship fieldtype
• Champagne - Create and manage Campaign Monitor campaigns from within EE
• CE Image – Leverage the full power or GD for image manipulation with EE tags
• Channel Images – Powerful image gallery add-on
• CartThrob – E-commerce platform
• Freeform – Generic form capture and notification module

This update to the TinyDropdown dropdown menu script offers improved stability, speed, and features. Added features include animation toggles, a speed toggle, a rollout timeout, and improved style handling. The script is still very lightweight at only 1.7KB packed and should perform noticeably better than the previous version. Styling is completely flexible through the CSS… you can even make this a vertical menu with a few tweaks.

The script is executed by passing an object to the init function. A sample call would look like the following:

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

Parameters include (tag – description (type) – default):

id - ID of the navigation (string - required) - ''
active - CSS class for active state (string) - ''
fade - toggle fade tween (bool) - true
slide - toggle slide tween (bool) - true
speed- toggle slide tween (1-9) - 5
timeout - time in milliseconds to pause before hide on rollout (int) - 200

Click here for the demo.

Click here to download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. I welcome any bug reports. Head to the Scriptiny QA for community support.

This update to the TinyBox modal box script brings a ton of new features and still clocks in under 5KB. The script now supports iframes and images natively. You can POST with Ajax. Clicking ESC will close the window. Callback functions can be passed for load and close events. You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.

The script is now executed by passing an object due to the large number of options. There is nothing to initialize, just call the function on whatever mouse or browser event you like. A sample call would look like the following:

TINY.box.show({url:'advanced.html',width:300,height:150})

Parameters include (tag – description (type) – default):

html - HTML content for window (string) - false
iframe - URL for embedded iframe (string) - false
url - path for AJAX call (string) - false
post - post variable string, used in conjunction with url (string) - false
image - image path (string) - false
width - preset width (int) - false
height - preset height (int) - false
animate - toggle animation (bool) - true
close - toggle close button (bool) - true
openjs - generic function executed on open (string) - null
closejs - generic function executed on close (string) - null
autohide - number of seconds to wait until auto-hiding (int) - false
boxid - ID of box div for style overriding purposes (string) - ''
maskid - ID of mask div for style overriding purposes (string) - ''
fixed - toggle fixed position vs static (bool) - true
opacity - set the opacity of the mask from 0-100 (int) - 70
mask - toggle mask display (bool) - true
top - absolute pixels from top (int) - null
left - absolute pixels from left (int) - null
topsplit - 1/x where x is the denominator in the split from the top (int) - 2

Nearly all of the parameters above are optional. Of course you must include either the html, iframe, url, or image parameters as they drive the content. Height and width are option and will be calculated based on offsetWidth and offsetHeight in the case of HTML or Ajax content else by actual width and height with images. Iframe calls must include a height and width. By default the box will animate in the center of the screen in a fixed position.

Click here for the demo.

Click here to download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. This is a never-ending work in progress and I welcome any bug reports.

To begin, let’s create a wrapper object for our functions. It will return two functions: an initialization function and a tween function that will handle the animation. For the init function, we will pass the ID of the element we want to animate as the first parameter. The second parameter will be a toggle (1 or -1) to determine the direction of the fade. The third will be the target (0-100) which will default to 0 or 100 based on the direction.

var fadeEffect=function(){
	return{
		init:function(id, flag, target){
		},
		tween:function(){
		}
	}
}();

Now let’s fill in the first function…. here is a breakdown of the lines followed by the code:

1. Create an object variable to reference the element we are fading
2. Clear any active fading on the element
3. Set the target opacity to the passed variable else check the direction to determine the default
4. Set the internal flag to 1 or -1 based on the boolean (0/1) passed as the parameter
5. Get the opacity off the DOM if available else assume it is 0 (for purposes of this demo)
6. Set the tween function to be executed every 20 milliseconds until cancelled

this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.si = setInterval(function(){fadeEffect.tween()}, 20);

Next we complete the tween function to update the opacity/alpha on the previously set interval.

1. Check if the current opacity is equal to the target opacity
2. If previous is true clear the interval/exit
3. Else
4. Calculate the new opacity with easing (modify the “.05″ value to control speed)
5. Divide the calculated value by 100 for standard CSS opacity (0-1)
6. Set the IE based opacity filter (0-100)

if(this.alpha == this.target){
	clearInterval(this.elem.si);
}else{
	var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
	this.elem.style.opacity = value / 100;
	this.elem.style.filter = 'alpha(opacity=' + value + ')';
	this.alpha = value
}

And all together now…

var fadeEffect=function(){
	return{
		init:function(id, flag, target){
			this.elem = document.getElementById(id);
			clearInterval(this.elem.si);
			this.target = target ? target : flag ? 100 : 0;
			this.flag = flag || -1;
			this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
			this.si = setInterval(function(){fadeEffect.tween()}, 20);
		},
		tween:function(){
			if(this.alpha == this.target){
				clearInterval(this.elem.si);
			}else{
				var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
				this.elem.style.opacity = value / 100;
				this.elem.style.filter = 'alpha(opacity=' + value + ')';
				this.alpha = value
			}
		}
	}
}();

You can call the function like so:

fadeEffect.init('fade', 1, 50) // fade in the "fade" element to 50% transparency
fadeEffect.init('fade', 1) // fade out the "fade" element

Click here for the demo.

Click here to download.

This full-featured and standalone JavaScript slider is easily configurable and visually customizable using CSS. It also clocks in at a tiny 3KB. Features included from the first version include automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal). Updates include more fluid motion, an elastic tween option, continuous sliding without rewind, and a couple other fixes/tweaks. It accepts any content and gracefully degrades when JavaScript isn’t available. Stay tuned for an updated TinyBox soon.

To initialize the script use the following:

var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:4, // false for no automation else the number of seconds between slides
resume:false, // continue auto sliding after interruption
vertical:false,
navid:'pagination', // ID of pagination UL
activeclass:'current', // active class for pagination
position:0, // initial position index
rewind:false, // toggle "rewinding", else the slides will be continuous
elastic:true, // toggle the bouncing effect of the slides
left:'slideleft', // ID of left nav, to cancel cursor selection
right:'slideright' // ID of left nav, to cancel cursor selection
});

The first parameter taken by TINY.slider.slide is the variable name used for the object instance. You can also manually set the width/height parameter for the applicable direction you are sliding. If it is not set the width or height will be automatically calculated using the first list element. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details. Images are copyrighted by Warner Bros.

Click here for the demo.

Click here to download.

1. URL (required)
2. ID of the output element (pass a zero/false for no response output)
3. String of function to be evaluated and called on completion (optional)
4. Post content – example: id=22&action=1 (optional)

I will be posting more small snippets soon as well as some updates to previous scripts, new code, and tutorials. Last year was roller coaster with getting my business off the ground and it shows in my lack of time for this site. That being said, I plan to take more time to give back  this year and grow my own skills so expect to see much more of me on here. I cleaned up the forums and implemented DISQUS to help everyone get the most out of this site.

On a side note, I have formed a new company this year with a partner and we are opening an office in historic downtown Franklin, TN. We will be looking for some good people to work with us so if you or anyone you know is in the Nashville area, please have them drop me a line.

TINY={};

function T$(id){return document.getElementById(id)}

TINY.ajax=function(){
    return{
        call:function(u,d,f,p){
            var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
            x.onreadystatechange=function(){
                if(x.readyState==4&&x.status==200){
                    if(d){
                        var t=T$(d);
                        t.innerHTML=x.responseText
                    }
                    if(f){
                        var c=new Function(f); c()
                    }
                }
            };
            if(p){
                x.open('POST',u,true);
                x.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                x.send(p)
            }else{
                x.open('GET',u,true);
                x.send(null)
            }
        }
    };
}();

A call would look something like the following:

TINY.ajax.call('get.php?id=32', 'content', 'display("red")'); // GET
TINY.ajax.call('post.php', 'content', 'display("green")', 'id=32'); // POST

Click here for the demo.

Click here to download PHP example.

Keep in mind that this will not work on your local computer unless you are running a web server like Apache. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here.