How to Skin an ExpressionEngine Website in One Easy Step
1. Go find a CMS that forces you to skin it.
Wasn’t that easy?
I read something earlier that got me thinking about the way people customize websites that they build in a content management system. So I laid this twegg:
I realized that my tweet comes off as sort of elitist, so I decided to expand upon the thought in this article. Keep reading and you’ll see why I took that angle.
Let’s be clear on this one major point: You don’t “skin” a website in ExpressionEngine. You start with a blank slate. Sure, you can purchase pre-built templates for ExpressionEngine, but there are not hundreds of design shops churning out templates for ExpressionEngine for sale, as there are with many other popular content management systems. The few developers that reputably sell well-built templates for ExpressionEngine (such as Marcus Neto’s eetemplates.com linked above) are integral to the ExpressionEngine community. They contribute to and learn from the EE community that exists on the forums, Twitter, Facebook and other social sites. They know the system well and the product they sell is as top notch as any client site they or I have ever built.
I’ll tell you a story that I have told several times, which has been useful in demonstrating several different points about competing CMS systems. I used to rent an office space from a web shop that had made a business decision to standardize on Joomla, much in the same way that I had chosen to standardize on ExpressionEngine. They had quite a few clients, as did I at the time, and we regularly compared notes about our chosen system.
But more vital than the conversations we had together were the conversations I heard from my office between the members of their team. I’d be working away and hear them spend hours, no, days fighting against a template they had purchased that barely resembled the design that their contracted designer had given them. They’d be tearing apart a “skin” that they had bought, revamping the CSS and imagery to try and ramrod the designer’s look and feel into it. They’d install and remove and move modules called “topupperleftmenu” and “redleftnavsearch” and “subsubfooter” around trying to get them all to line up with the shoehorned new design elements.
I finally got an explanation out of the technical director one day. They had plenty of expertise to write HTML, CSS and Javascript. But Joomla’s method of assembling the parts of a site were so difficult to work with that the company had decided it was easier to bastardize a pre-built template that had all the right functionality (drop down menus, newsletter subscribe forms, etc.) and looked completely different, than it was to build the site functionality and templates from scratch in the CMS.
The designer, after several of these types of projects with them, had but one comment, and I remember it clearly. “I am scared of CMS systems because the sites never look like what I designed.” She and I collaborate on ExpressionEngine-based websites regularly these days.
Now, I’ve never worked with Joomla, so I am not saying it can’t be done easily. But this is my experience working for months next to a shop who had chosen this platform as a business decision.
Back to the topic at hand. Exactly how does one skin an ExpressionEngine site? One doesn’t. Once you remove ExpressionEngine’s default demo “site” templates and weblog settings, you have a 100% blank slate. Call your designer and instruct them to design to their heart’s content. Make it gorgeous and abstract and functional. Meet the client’s needs. Enhance the usability. Whatever the final design, ExpressionEngine can accommodate it. ExpressionEngine assumes nothing about your site. Until you define the types of information and pages that you want to include in your website, no pre-existing elements even exist in ExpressionEngine for you to skin. When I say blank slate- I really mean it.
I have built somewhere around two dozen ExpressionEngine sites as of the time of this writing. A few have been massive undertakings with hundreds of entries, categories and custom fields. Dozens of templates and embedded templates. A few have been your average corporate site with typical business needs. And a few have been the most simple this-really-should-just-be-a-few-HTML-pages type sites that are CMS enabled for ease of future maintenance. Its pretty easy to find examples of huge, and I mean gargantuan, sites run with ExpressionEngine that perform flawlessly and conform precisely to the pixel perfect vision of the designers involved.
The process is very similar to designing a static site.
- Create the design with real or placeholder imagery and data in Fireworks or Photoshop
- Slice it up and build the HTML/CSS/JS files
- Create a blank template in ExpressionEngine
- Paste in the HTML
- Setup your CSS files (either through EE or standalone)
- Upload the images to the file system
- Make sure everything displays correctly in a browser
- Cut out the common header, footer, and other elements into their own embedded templates
- View your web page in a browser, just as the designer intended
Really, that’s about it. It can become a lot more complicated, but in reality, that is the very basics of what we do on every site to get it started. There is not a single function or design element that I haven’t been able to implement using the core ExpressionEngine functions or some of the excellent community-built add-ons that are readily available.
Plain and simple, ExpressionEngine does not limit your creativity by forcing you to use pre-built templates or functional elements on your page. There is no skinning. What there is, is taking any website design you can imagine, and knowing that ExpressionEngine will allow you to use it exactly as it was intended. With no skin off your back.
(No Joomla devs were harmed during this article writing.)
Subscribe to updates
31 Comments
posted on June 05, 2009 at 7:32am by Marcus Neto:
One of my good friends was the founder of JoomlaShack, which is arguably one of the top Joomla Template shops on the interwebs. The pain and agony that he has relayed to me of building templates for Joomla is enormous. Early in my web career I thought I might head in that direction so I started using Joomla quite a bit(and we still have to maintain some of those sites today). I know the pain of trying to change colors or functionality in Joomla and even Wordpress to a certain extent. ExpressionEngine was a dream when I found it. I have pretty much abandoned all other CMSs as I find the functionality and usability just ridiculous with EE.
Well said!
M.
posted on June 05, 2009 at 9:49am by Ryan Masuga:
Great article, Chad! Well written, funny, and to the point. I laughed, I cried, it was better than Joomla!
posted on June 10, 2009 at 3:11pm by Brian Klepper:
Thanks for the post! I can only say good things regarding EE and all of it’s wonders. I enjoy the power and simplicity so much that it’s the only CMS that I will offer to my clients, not because it’s easier on my end but the learning curve on their end is very manageable.
I am really looking forward to EE 2.0!
posted on June 23, 2009 at 9:35am by jack Andrews:
I was recently asked to quote for a small CMS site, now I have to admit to having done many a static site but zero experience of CMS. So I downloaded Joomla, Drupal and Wordpress and after three days of sedatives and going nowhere, I thought I should perhaps take up another profession! I then came by chance upon a UK web magazine with an article on Expression Engine, I rushed home with said publication tucked under my arm, downloaded EE, activated MAMP on my Mac and two hours later had a working page. Admittedly it had some pretty rough edges, but it worked none the less.
I think I will not change profession just yet!
posted on July 21, 2009 at 1:59pm by Emily Heath:
You have summed up one the main reason I use Expression Engine perfectly, thank-you!
posted on November 01, 2009 at 5:37am by Mike:
Hands down Expression Engine is the best CMS out there when it comes to being able to being able to design whatever you want and not dealing with the pain of skinning a site. The $250 price is what stops many people from using EE and instead using Joomla, Drupal, etc. and that shouldn’t ever be an issue anyways as that cost should be passed along to the client. On the client’s end, the control panel is pretty simple to use and there is no steep learning curve so the extra cost is well worth it for both parties. I’ve only discovered EE about 3 months ago but love the flexibility it offers and wouldn’t use anything else from this point on.
posted on January 02, 2010 at 2:22pm by Jack:
Nice real-world comparison. A lot of the same arguments against Joomla apply to Drupal as well. I’m not a critical person when it comes to meeting other designers/devs working with other CMSes and I stand back and ask questions just like Chad does — but you’ll hear that Drupal, Joomla and etc users do a lot of excuse-making for non-straight forward processes.
posted on January 18, 2010 at 7:18pm by San Diego SEO:
hmmm, I never thought about using ExpressionEngine, but this post makes me strongly consider it. Good write.
posted on April 12, 2010 at 10:20am by Brian K Shoemake:
I have several static sites as well as some Joomla and Wordpress sites I have created for clients. I am about to start on my first ever EE site. Everything about it looks superior to the other systems. I especially like how I can take an existing static site and easily convert it to a CMS. Can’t do that with Joomla or Wordpress. At least not easily anyway. Nice article!
posted on April 29, 2010 at 2:40pm by John:
I Appreciate this comment is coming some time after the original article was written but still, i feel the urge to add my 2 pennies.
I used Joomla for years and years and templating / theming it is not that hard. Really it isn’t. Also these days with template overrides in Joomla that allow you to customise the html output that Joomla creates, anything is possible.
The people in the “shop” sound like they simply didn’t invest the small amount of time needed to be able to make your own Joomla templates with ease. Joomla simply isn’t as difficult or inflexible as you’re making out. Also, in my opinion it takes longer to build a website with a bought template than one you’ve made yourself because if something doesn’t work, you’re debugging someone else’s work!
Just to clarify i am an EE convert and so feel i have a very good grasp of the 2 systems. As much as i would choose EE over Joomla these days i still think Joomla is an awesome CMS.
I’m sorry but the guys in the “shop” just sound like they weren’t very good at their craft.
posted on April 29, 2010 at 8:45pm by Chad Crowell:
John - thanks for the comment. I whole heartedly agree that the guys were not up to snuff. But they spent so much time over and over, it occurred to me that maybe Joomla either wasn’t easy to get your head around, or was really hard to merge with design.
The story was more to illustrate my point than to slam Joomla, that EE is exceptionally easy to merge with any design provided.
Glad to hear that its not as hard as these guys made it appear- for the benefit of all the Joomla devs out there
posted on May 03, 2010 at 7:18pm by John Knotts:
couldn’t agree more. exactly why EE is my CMS of choice.
posted on June 23, 2010 at 12:49pm by SEO Specialist:
After reading through this post and the subsequent comments (I too have struggled with customizing Joomla templates—i am sure it is “me”), I headed over to http://expressionengine.com/. There’s a great list of features (in “overview”) and I was really pleasantly surprised by the friendly pricing options. This I need to check out.
posted on June 24, 2010 at 2:23am by Motorcycle Insurance:
Wow! Thanks for the information. I’ve been looking at their Showcase and I’m very impressed. It seems so easy. This will be a very good investment.
I’m doing more research before I get one. I’ll keep you guys posted.
posted on July 19, 2010 at 5:15am by Lee:
EE is a quality CMS - blows WP and the like out of the water. Flexible, flexible, flexible.
posted on September 14, 2010 at 1:36am by Bjørn Børresen:
Also worth mentioning when it comes to theming is that since this article was written WooThemes has started releasing their themes for EE:
http://www.woothemes.com/why-ee/
posted on September 14, 2010 at 1:49am by Marco Barbosa:
Hi Chad!
I’d just like to point out that in Joomla you now have “template frameworks” that can speed up and allow even further customization in your template.
That could somehow be considered “no skinning” for some since you don’t touch the HTML at all.
On the other hand, I must say you are right about the EE price tag. That is what scares me on EE even though I really like CodeIgniter.
I could pass it to the client but someone next to me will charge $250 less for a Wordpress, Joomla, Drupal site that has, apparentely, no disadvantages against EE.
EE flexibility really calls my attention though
Cheers!
posted on September 14, 2010 at 2:24am by Jack Andrews:
Hi,
Perhaps of all the comments I have read levelled against EE it has been that of cost, however, it is also one I largely fail to see the relevance of.
Generally, a CMS system such as Joomla, Drupal and EE would be used for larger and more complex sites where I have difficulty imagining $250 would make much difference.
If an organisation is investing into the development of its online future, and is worried about $250 rather than finding the best possible solution then the problem is not with the cost of EE.
posted on September 14, 2010 at 6:10am by Mike:
Definitely one of the main reasons I’m glad I discovered EE. Anyone ever try and skin a DotNetNuke site? Holy nightmare!
posted on September 17, 2010 at 5:49pm by Mrs. Flinger:
Well said! I have had this exact same experience and I’ve tried the shoe-horn approach and always end up going to EE to develope a site from scratch because it’s quicker. I explain to my clients that I can spend the money they would pay for EE plus some to work with another CMS and get over such hurdles. OR I can work within EE and get the site done correctly the first time.
posted on September 17, 2010 at 7:17pm by Ryan Battles:
Wonderful summary and comparison. On several occasions I have left developers of other cms systems in shock when I tell them that design, markup, and EE development are three separate steps that are independent of each other. It is so nice to be able to encapsulate each step, and get a sign off from the client!
posted on September 18, 2010 at 12:24pm by Gordon:
I discovered EE nearly a year ago, and to be honest I have never looked back. It has all the flexibility I had been searching for, and a great community and support network. I have seen a few articles not unlike this one which showcase another fantastic product from the EllisLab geniuses, yet everytime the comments end up coming back about licence price. I take a different approach when fellow developers ask me why I would spent that licence fee when I could use WP or Drupal for free - simple answer is I will save the equivelant of the licence fee in the time saved getting the site up and running, without all the butchering and custom functions etc that would be needed to get a.n.other CMS to do the same!
We now look to use EE for any new client sites that comes along, unless they have a specific need for another system to be used. And for static sites we are now looking at using MojoMotor, as it offers an upgrade path to EE - futureproofing rocks!
We are only now finally getting a chance to rebuild our own site (currently sitting on WP) to, guess what - ExpressionEngine!!
To those who haven’t yet discovered the joy that EE is to work with, give it a go - you’ll love it!
posted on November 02, 2010 at 2:03am by perry2010:
Thank you for sharing with us,I too always learn something new from your post! Great article. I wish I could write so well.
posted on November 10, 2010 at 2:48pm by Tyler:
Your tweet sums it up pretty nicely. I am still amazed at how many people use Drupal and Joomla, especially for small to medium sized sites. All your development time is spent fighting the templates, stuffing a design into a theme it wasn’t created for. And if you start with a “blank” theme you spend hours more work styling every little unnecessary detail.
posted on December 08, 2010 at 2:31am by martin allman:
I’m finding EE a lot easier to work with than Joomla. Typically you start by buying in a great looking template from joomlart or similiar. It seems to offer a lot of functionality up front and that can have a real pull when you are starting off a project. As you progress and try to modify the template things start to grind down and the project starts to get difficult. My experience of EE is the opposite, a bit harder starting off your having to design your own templates but then by use of tagging you have complete freedom to move your content around- where you want it! In summary I would say EE allows you to take complete charge of your project. I found Joomla sites slow to load, I’m not sure how this pans with EE. Are EE quick loading?
posted on February 03, 2011 at 4:13pm by C:
Lots of words, and I guess, thanks.
But, can you at least take a few words to be specific about the steps you listed? I mean,
“3.Create a blank template in ExpressionEngine
4.Paste in the HTML
5.Setup your CSS files (either through EE or standalone)
6.Upload the images to the file system”
Do you know of an article that is specific and simply uses unassuming directions to perform steps 3 - 5? Where to “Upload the images…”?
Thanks
posted on February 03, 2011 at 4:33pm by Chad Crowell:
Hi C - sorry you are disappointed in the article. It wasn’t intended to be a tutorial, but rather, an essay on how choosing EE as your development platform gives you total creative freedom. The steps near the bottom we’re simply intended to show how simple, at its simplest level, it is to get a custom design implemented in EE. There are lots of tutorials out there about the actual process.
posted on February 04, 2011 at 2:51am by Jack:
There is a wealth of support on the mechanics of building sites using EE. Their own website has comprehensive tutorials, there are also several books, (just enter Expression Engine into Amazon for instance) comprehensive third party video tutorials (at a reasonable cost) and the usual plethora of free stuff.
This is a well supported system and a few minutes on Google will quickly deliver many of the answers a developer is likely to need.
posted on February 10, 2011 at 9:44pm by Milwaukee SEO:
I usually stick with WP as a CMS but this article on expression engine seems to cover a lot of the features. I’m going to try giving EE a shot for next mid to large projects. Thanks for good information.
posted on May 04, 2011 at 8:04am by search engine optimization specialist:
definately agree - gonna give EE a try also
posted on January 03, 2012 at 10:44am by Fireproofsocks:
I fully agree that Joomla and Drupal’s templating (and even their data model) are the work of a madman: they are an insane waste of time. WordPress is tolerable, but has script-kiddie written all over it. Expression Engine is a welcome relief for those who can recognize and appreciate good architecture and the flexibility it guarantees.
But here’s something that never made any sense to me: how can a system as elegant as CodeIgniter have been the jumping off point for Expression Engine? The way EE gives *templates* URLs seems back asswards to me. Look at Compare CodeIgniter’s clean MVC:
// The controller
public function index() {
$data[‘pagetitle’] = ‘My Site’; // <—from the model (optionally)
// other data for our view layer
$this->load->view(‘my_template’, $data); // <—the view
}
It’s clean and logical. I just can’t reconcile that with how EE does this… your *template* suddenly becomes the CONTROLLER?!? THE VIEW HAS A URL? It makes so little sense to me how a beautifully elegant framework could have such a deformed baby. (Yes, predictably I’ve gotten flamed many times for calling someone else’s baby “ugly”).
The only other PHP CMS that I’m aware of that’s worth discussing in this post is MODX (http://modx.com): it’s got a brilliantly simply template layer that’s really more or less what I would have expected from EE, and MODX is free.
Leave a Comment