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.

1. Create the design with real or placeholder imagery and data in Fireworks or Photoshop
2. Slice it up and build the HTML/CSS/JS files
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
7. Make sure everything displays correctly in a browser
8. Cut out the common header, footer, and other elements into their own embedded templates
9. 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.)