How to cope with Website Mission Creep

Finally, a week before launch, the company gets bought out and all the branding has to change. The day before launch, Legal demand changes to all the text, and the CEO decides he doesn’t like the colours (his wife hates purple).

The Creep’s Gonna Get You

That’s all great if you’re being paid for all the extra work and have the resources to cope, but often your profit margin is badly hit and you just have to resolve to do it better next time.

So how can we deal with mission creep? The trick is to build flexibility into every aspect of the design, so that when changes are needed, they don’t require a coding change and can be dealt with within the CMS. That’s much easier said than done. There is always a trade-off between simplicity and flexibility.

Say you have a hundred pages on the website, using a small number of standard page layouts, nice and simple. To create a new page, choose a layout, add the content, easy. But this new page needs a widget half way down on the right hand side that isn’t in any of the layouts. So you make a copy of one of the layouts and adapt it, or you add conditional code. Either way you’re adding complexity, and after a while you end up with an unmaintainable mess.

Design for Flexibility

First, think modularly, rather than in set layouts. For graphic designers used to the constraints of print, this can be tricky. Design content blocks, lists, widgets, promos, forms, etc., so that they can be slotted in anywhere (within reason). Allow room in your layouts for items to expand or contract depending on content.

The next step is to choose the right CMS (content management system) to enable that flexibility. The likes of Wordpress, Drupal, and similar template-based systems have an enormous number of themes and modules to make building a website easy, but adapting them to look and work exactly how you want can be tricky. Better to start with something that gives you a clean slate to begin with, open source if possible, and with a big friendly community to help when you get stuck. For us at Pixel to Code, that's Umbraco, an area where we have years of experience.

Choose a front end framework that enables you to realise your designs precisely. For most websites we build, a version of Bootstrap’s grid system (ResponsiveBP) and basic jQuery are enough, but you may need something that enables fluid column widths, or additional client-side functionality, requiring plug-in frameworks. Using SASS or LESS means you can change colour schemes, column widths, etc without the need for wholesale CSS edits. 

Build your page layout templates as basic layouts only, with placeholders for major content areas. The fewer templates and the less detail in terms of content layout, the better. The aim should be to move complexity away from your templates and into the CMS content tree.

In the CMS, define content types for each module or widget you will need, and allow them to be added to the content tree hierarchy. The basic type will be a page, and within a page you might have several sections, and some sections could contain just text, or a collection of articles, or whatever.

For each content type, add front end code (HTML, CSS, javascript) to display the data on the page. Umbraco is based on ASP.Net MVC so you can use Partial Views for this, one or more per content type. You’ll also need back-end code to display the content from the tree, according to the hierarchy, in the placeholders.

Since version 7.2, Umbraco has included a grid editor that allows content editors to define their own multi-column layouts on any page. It’s a very powerful feature which certainly achieves the flexibility that we’re aiming for, but if not used properly can allow a little too much! You need to retain some control over what is allowed where, in order to retain the cohesion of the design.

The Payoff

You’ve built your site. All the content is in and it’s ready to go. The client phones to ask you for a significant change that would previously have had you banging your head against the wall, cancelling holiday plans and ordering pizza for the long nights ahead.

No problem you say, and you explain how to add content to achieve just the effect he or she is looking for. You might even do it for them, while recording a screengrab video they can refer to the next time. They thank you profusely and recommend you to all their friends. You catch the early train home.

If you like the idea but don’t have time to implement it yourself, worry not, we’ve done it and called it Simplismo. Simplismo is a system of basic layouts, fundamental functionality and comprehensive features, that can be built on and extended to meet any demands. The idea was born from the frequent customer need for a website where the requirements are vague and subject to change as time passes. The inherent flexibility works brilliantly for small and medium-size websites as is, and can be extended to cope with enterprise-level sites with any number of pages.

As an example, not long ago we got a call on a Monday to build a responsive and mobile-friendly website for a conference that was happening on the Thursday. We set up a Simplismo site on a sub-domain of their main url, applied the company branding, added all the required elements - agenda, venue map, lists of sponsors, speakers photos and biographies, contact form, social media links and feeds - and had it ready for review the following day. They requested a few changes to content and layout, and we were able to effect them immediately. The event was a success and the client mightily impressed.

Which is the way it should be.

Further Reading

How mission creep can spoil your web design experience