Matthew Bull

MySource Matrix design

I’ve been playing around with mysource matrix on my laptop recently, as an early development stage to our pilot while we’re waiting for the server hardware to be set up.

One of the first things I’ve been looking at has been setting up designs, and I have to admit it’s been a somewhat mysterious process.

OK so I haven’t been on Squiz’s design training course, but I have taken a long hard look at the 94-page design manual (to their credit, Squiz have about 1300 pages of documentation, most of which is freely available.)

Part of the problem is our pretty complex set of css files. The other part of the problem seems to be the way mysource matrix deals with links to images in css files. Suffice to say that getting an existing design into mysource matrix isn’t much fun. Once you’ve got over that hurdle, performance seems to be an issue.

A far easier option is just to lift your static template, pointing to all those static css files and images sitting on your live webserver. In fact this works just great, and it’s what I’m now doing. But something makes me feel it’s not the ‘right’ way to do things. I should point out that I may have misunderstood something in how to set things up, so this review may not be entirely fair. Apologies in advance it that’s the case.

If you enjoy pain, and want to share some of mine, read on…

Getting Started

Let’s say you have an image that you want to call from a css file with something like

background-image:url(images/snap.gif)

How does matrix know where images/snap.gif lives? Unless it’s living somewhere on a publicly accessible web server, it has to be uploaded into matrix. You can then refer to it as mysource_files/snap.gif, and the system will know what you mean.

If this sounds simple enough, then wait. There’s much more. By the end of this you’ll think having teeth pulled is a fun experience. Read on…

CSS Files

You first have to tell matrix that each css file which has a url() is an asset, not just some static text file sitting there. OK, so I go through all 30 of my css files that are like this, creating them as children to my main design. Something is making me feel uneasy about this, but I carry on anyway.

Images

Right, now I have to make all the images that are referred to in each css file children of the corresponding css file. Ugh. Yep, well I don’t have anything better to do, so I reorganise all my images according to the css file they appear in. Some images in more than one place, but oh well I guess I could make them as copies if only I could remember which css file I already uploaded them to. Whatever. I battle on.

The process continues for some time…

Cool. It was painful, but now I have all my css files uploaded, with all their corresponding images. I’ve changed the css files to refer to mysource_files/imagename.gif rather than their original url.

Now I need to link these files into the main design. It turns out that I can’t actually do this directly. I have to create special design areas in the main design which point to the css files.

OK, not too bad? Erm, well it’s not that simple. I actually also need to put in what’s called a customization which acts as a bridge between design and css files, and it’s that thing which point to the css assets themselves. This feels very wrong, but I carry on.

Too slooowww…

Hoorah! Now after a few hours persistence I have a working design. I test it out. After about 8 seconds, my page loads with the correct design. Hoorah again!

Then I stop and think what’s just happened. 8 seconds? Hmmm, ok well I know this is just on my macbook, but that’s really a tad slow isn’t it?

At that point I realised that there’s a lot going on here. You can cache the css files, although that threw an error when I tried it. I eventually fixed that ‘feature’ temporarily, and it’s true things did start to speed up a lot.

But at that point I pretty much gave up. Life’s too short. The option to point all urls at the currently live designs was just too alluring. Anyway it was all a useful experience, if only to tell me that getting a design to work properly and load quickly in MySource Matrix isn’t a quick or simple procedure.