Splash of Style...Macs, Photography, Design, and other Passions

ReDesigning a Web Site with Expression Engine

May 16, 2009 by debbie T | Content Management • CSS • Expression Engine • Web Design • Web Development • XHTML

I have been a faithful Expression Engine user since 2004. I was lucky enough to be one of the thousand or so people who received free copy way back when. Movable Type had just released version 3, and there was a huge uproar over the new licensing agreement. Pmachine (Expression Engine) decided to take advantage of the bad publicity and give away a ton of free copies (originally $149).

Anyway, I have been a fan ever since. Yeah, version 1.5 might be looking a little long in the tooth, but it works for me. I know they are busy perfecting the new 2.0 version so it’ll be worth the wait.

So, back to the point of this post. I use Expression Engine on another large web site I have. It’s been almost 4 years since I last designed it, and it’s in bad baaaad need of a redesign. It’s true that if you don’t use it, you lose it; a lot of my web coding knowledge has been tucked away into back pockets in my brain, so it’s also been a challenge to relearn CSS. There has been so many new tips and tricks, and the good news is, no need to design for old outdated browsers. I do still need to worry about IE6 users, but further back than that, nope. Done!

So, for the past week or so, I have rolled up my sleeves and concentrated on relearning CSS and the Expression Engine design tags & templates. It’s been a blast. I forgot how much I loved coding!

My Process

I don’t know if anyone will care about my redesign process, but I figured that I would try to document it anyway, at least for my own sake.

Where to start?

First I created a design using all xhtml and CSS. Not to reinvent the wheel, I decided to find a bare bones starter template instead of coding it all myself. I found a bunch of awesome multi-column layouts and I chose the blogstyle liquid 3 column layout.

I inserted my headings, background image, graphics, and copied & pasted little bits of rendered content from my web site index page. You see, Expression Engine is a CMS, much like WordPress, Movable Type or Textpattern. Most of the content on the web site is dynamically delivered by the CMS to the web page from a database. So, to make it quick and easy, I just copied the content already rendered by Expression Engine into the new design.

From there, I tweaked the CSS, adding and editing until it was almost just right. Let me stop right here and briefly mention what software I am using.

For this project, I am using CSSEdit for CSS editing, Espresso for (x)HTML and Expression Engine coding, and Transmit for (s)FTP transfers.

Expression Engine

Once the design was at a certain point, I decided it was time to work with actual Expression Engine coding tags. Here is where I wasted a little bit of time, but it was a learning experience, so it’s all good.

I didn’t want to deal with the hassle of setting up a Unix server on my laptop, but I didn’t want to work on my real web site, because I was afraid the search engines might accidentally pick up my redesigned templates before they were ready. I thought the answer was setting up a test Expression Engine install on a different domain name with a password protection on the directory. That way I could work on the code and not have to worry about Google or Yahoo indexing my template pages.

So, I set up a new install, and created a template group matching the same name in my original site. It was getting a bit confusing, because I needed to figure out a way to export some of my entries from the original database into the new testing design database. It was looking bleak when I found a post on the Expression Engine forums from Lisa Wess advising another user to just create a new template group for the original install, that way your access to the database content will be the same.

Eureka! That does sound easier. So, I created a new template group named “redesign” with the option to copy all of the templates from the current template group. I knew there was a way to secure any or all templates from public view, and that would keep out the search engines.

In the Template Preferences Manager, choose the template group, select the appropriate templates, and at the bottom of the page, set yes to “Enable HTTP Authentication” – this will require member log on to view. So, as admin, I can log into view the new design, and I can also set up extra memberships for others to view the new design as well.

Note: I always set my templates to “save as file” so I can work on them on my hard drive. I can upload any changes using FTP and the template code is replaced. Initially I have set caching “off” for the templates, but once the redesign is complete, I will set most templates to cache so it will save server resources.

What’s Next?

I am no way near finished with the redesign, but I wanted to keep record of what I had done so far. Again, my process is not necessarily going to be helpful to others, but it will be helpful for me to remember for the next redesign.

I am now working on integrating the Expression Engine code into the design, trying to figure out the most efficient and effective approach.

My original design used CSS files saved in the main site directory. This time, I am utilizing the Expression Engine template system for CSS files. It saves the CSS as a .php file, but if linked to properly using the {stylesheet=template_group/css_template} code, the file will not be parsed as a normal html template, so it’s more lightweight.

My original design used plenty of nested templates (headings, footers, menus, affiliate links, etc) and I plan on doing the same with the redesign as well. I will try to be more efficient though, since my original template count ran amuck with over 35+ templates.

I am also looking into using User Defined Global Variables including using a Dynamically Assigned Global Variable at the top of each template file to specify what the template group path.

Expression Engine builds page URLs on the fly referencing the template group as part of the URL. To learn more, check out their user guide page on URLs. So, the problem is, if I hard code the original template group into the path, it will be displaying the old design when any link is clicked. And if I hard code the new template group into the path, when I unveil the new design, all my old links will be broken, and it will be a search engine disaster. So, I am inserting a dynamically assigned global variable at the top of each page template: {assign_variable:templateGroup=”redesign”} that way I can change the variable value later and paths will always reflect the template group properly.

Yikes, that sounds awfully complicated, and it sort of is, especially if you never worked with Expression Engine.

Well, that’s it for now. I will keep adding notes as my redesign goes further.

Commments are closed for this article.