Our website here at Climbing Turn (this one you're on right now) was developed many years ago and has been trundling along nicely ever since.

It's built using the ExpressionEngine CMS (EECMS) and because of that it hasn't needed much maintenance. We just kept the core CMS and add-ons updated regularly and everything just works. That's what we like about EECMS.

What we have done over the years though is added features and pages to the site, removed them later, tried stuff out and generally hacked about as the need arose. That's what we love about ExpressionEngine, it's super easy to make changes to a website and the system basically lets us do whatever we want without much hassle.

However, after over 5 years of running our current site it was time for a spring clean and a major service and this is where we think ExpressionEngine really excels.

The job was to do the following:

• tidy up and re-structure things without losing any of the content we've created over the years.
• preserve the URL structure (we didn't want to fall off Google completely)
• remove the old Bootstrap css and rebuild the site using Tailwindcss.
• remove as much JavaScript as possible (e.g.: a lot of stuff we used JavaScript for can be done using CSS transitions these days)
• reduce, or remove entirely, our use of template embeds (for performance)
• generally improve the navigation, content structure and UX

So we set to work on what we thought would be a long and arduous task, however we were pleasantly surprised.

Channels and Fields

What are they?

ExpressionEngine organises its data into "channels"; what these channels are is completely dependent on the the content so, for example, we have a "Blogs" channel, a "Case Studies" channel, a "Tech Tips" channel and so on. We then define fields to be used by these channels to hold the actual information such as the text for a blog post, or the image for a banner.

What we did

The first job was re-organising the ExpressionEngine channels and rationalising the fields we were using. Over the years many new fields were added for specific (sometimes long forgotten) reasons and some channels weren't being used at all.

So we cleaned these up and stripped everything back to only what was still relevant.

We then normalised as many channels as possible so that they were using the same field group - this would make it much easier to create common components (using template partials) later. We used the channel layouts to make these common field groups usable in the CP.

This did mean that we had to copy and paste some content over into our new fields - something that was a real bore to do but made a big difference when we were finished.

At the end of this process we had a content structure that reflected exactly what we wanted on the site and the use of common field groups allowed us to "component-ise" the display in the templates giving us an easy method of keeping a consistent UX accross the site.

Templates

What are ExpressionEngine Templates?

If you don't know much about ExpressionEngine then it's very important to know that it is a designer's dream CMS. It does not impose any restrictions on the way a site looks which means that you are free to create anything you like without the CMS getting in the way. Content and design are completely seperate and you can even display the same content in multiple places in as many ways as you can imagine.

So, when we say "templates" we don't mean they're "off-the-shelf", pre-designed or resticted in any way. ExpressionEngine lets us start with a blank page every time, allowing us the complete freedom to do what we want.

What did we do with the templates?

We set to work on the templates by identifying common elements that we could re-use which we put into template partials. At the same time we implemented Tailwindcss classes to make things look good.

This process was iterative, we'd display the content, decided how it should be displayed and if it looked like something that could be re-used we popped it in a partial.

Admittedly there was an element of "not planning ahead" here, however it was  great way to work because we were always looking at the real content and deciding how best to display it. So we basically used ExpresionEngine templates as our design system (sorry Figma). It's definitely not something we'd do for a client project, but because it was our own site this made sense to us as it meant we could make creative decisions as we went along... and it was fun as well.

During this process it became apparent (as if it wasn't alread) what a great CMS ExpressionEngine actually is. The infinite flexibility that you get with the way ExpressionEngine works means that changes can be made quickly and things can be tried out and adjusted, all while working with what would become the final website.

We also used Laravel Mix as our build system (thanks to Robert Games who introduced it to us) for the CSS and JS with BrowserSync constantly updating the site as we changed things in both the CSS, JS and EE templates.

JavaScript and CSS

Outside of working in ExpressionEngine we completely rebuilt the stylesheets using Tailwindcss. We're sold on this CSS framework now because, just like ExpressionEngine, it gives us 100% flexibility and allows us to concentrate on making things look how we want them to. Tailwindcss also produces the smallest possible styles sheets and we reduced ours from 281k to 68k.

We also stripped out as much JavaScript as possible and only use it very minimally now for features that just can't be implementated any other way.

Accessibility

We're very keen on making every site we develop as accessible as possible so we took this opportunity to refresh our knowledge of WAI (Web Accessibility Initiative) and took some time to check out the latest ISO standards. This meant using semantic HTML throughout to mark up our content in a logical and accessible way and using "aria" roles and attributes where appropriate.

We also paid close attention to our image's alt tags and re-wrote these to be more descriptive.

Accessibility is a big subject area and we're going to refine our site over time to make is more accessible.

What we Learned

1. ExpressionEngine is Great

We were reminded how good ExpressionEngine is as a website CMS. This re-build was major yet there wasn't any reason to scrap the site and start again because ExpressionEngine gave us the tools to re-work what we had. This was probably the most important lesson here, when it comes to managing a website over a long period of time, ExpressionEngine is very cost-effective. It's flexibility allows us to maintain websites for years and keeps costs down for our customers and this experience proved the point to us.

2. Ask yourself what you really need.

When a site gets old it's always worth taking a deep breath before throwing it all away (which is something we see being done too regularly). Our initial thought was "we need a new website" when actually what we really wanted was just a spring clean and some polish.

3. You're never too old to learn new tricks

Although we wouldn't do things this way with a client project (bringing in our designer would be required for that), we learned quite a few new tricks and techniques. We also had the space to make mistakes and learn from them because we weren't working to a deadline and were doing this for ourselves.

4. Have Fun

It's important to have fun! Rather than approach this task as a necessary evil (it's our own site so no one is paying us to do this!) we relaxed and got into playing with how far we could push ExpressionEngine and we learned a few things along the way.

...and finally

We deployed the new site and switched it back on. There it was, fully working and out in there in the wild! No fuss, ExpressionEngine just did what we asked it to.

We can use what we learned from this experience - when you're working away on the day-to-day stuff it's easy to forget that there's always something new to learn, even after 14 years of using EECMS.

If you've got an ExpressionEngine site that needs some TLC, an upgrade or a re-design then get in touch. We're happy to chat over what you want and how best to go about it.