Skjermbilde av forsiden til drammens.museum.no

Building a museum site

Here at Apasje, we’re local patriots. Not the gung-ho variant, but still proud of our city and what it has to offer. Therefore we love to work with local companies and clients, and have been fortunate to do work for some of Drammen’s household names. Like the local theatre, rock scene and several well-established businesses. As the ball has been rolling, we somehow got into the culture-scene, and by recommendations got contacted by the local museum. Their site hadn’t been maintained for a decade, and they needed help. Looks like there’s a god for web designers, ’cause I’d been dreaming about this client!

The museum is a regional museum, covering a huge geographical area. They’ve got several buildings at several locations, changing exhibitions, spectacular collections and hosting a multitude of different events all through the year. In addition to present the buildings, collections and events, they wanted to maintain an archive of past exhibitions, of which there are many!

ExpressionEngine For The Win

Now, Apasje’s forte is flexibility, seeing what our clients need, and what their audience needs. And to cater for (almost) any kind of site, we naturally use ExpressionEngine. Granted, we also build the odd site with WordPress, but I’ve found myself paying for an EE-license myself when met with a tight budget. And the variety of content the museum needed to maintain spelled out ExpressioneEngine in bold letters.

Wireframes on rock-solid Foundation

We started by talking and asking questions, which resulted in some great personas and specifications. After the goals and specs where decided, we quickly moved into wireframes. The last year we’ve fallen in love with Zurb’s Foundation, which makes wireframes a breeze. And we are eager to get to work in the browser, where the site naturally belongs. We’ve got ourselves a Virtual Server, which – by magic, I think – we’ve got hooked up with Dropbox. So setting up a test site is a breeze. The wireframes are built as PHP-files, with heavy use of embeds, just like EE (ups, that’s swearing in church, these days…), with Foundation. It’s easy to change navigation, hierarchy and structure based on client feed-back. In this case, the existing site was used only to see what kind of information and content were needed, the rest was completely up to us.

Design or not?

 

 

When we got the sign-off on the wireframes we fired up Photoshop to work out the look-and-feel. Since the museum’s got a ton of beautiful images and footage, we decided to keep the design very subtle and clean. The main building of the museum is in a classical, 18th century style, but it’s got details from a renovation in 1911, when the building was made into a museum. Therefore we looked to art noveau, art deco and early 20th century for inspiration. We’re big fans of Google Webfonts, being a small company with limited resources, and found the perfect font for our purposes: Josefin Sans. It fits well with the existing logo, and together with the beige/brown color scheme we had ourselves a design.

 

 

Now for the fun part: building the site in EE! We got our usual suspects lined up:

  • Matrix, for galleries and every content-item there might be more than one of (downloads, links, emails)
  • Wygwam, this was before 2.5 and the RTE-module…
  • Image Sizer, which we ditched for CE Image just before launch; it was time to move on…

Add to that a handful of add ons as the development progressed:

  • Low’s Seg2Cat is just so super easy and super handy, and we’re using a lot of categories to show different stuff
  • GWCode’s Categories does what I expected the native category functions to do
  • EE Hive’s Hacksaw, cause I really want my client’s life to be as easy as possible, and often a separate field for an intro isn’t needed

Revelations

And this project’s big thing (almost every EE-site I’ve build has had a revelation, often an addon) was Stash! As I mentioned, we relied on categories to related different content, because that’s such an easy way to let the client build new relationships and maintain them. But the category function is not necessarily meant to be used like that. So sometimes I needed to display content from different entries in different channels in the sidebar, and the channel:entries tag was closed, the url was short and pretty, and I had no idea where to fetch the category ID’s from. Add to that the interesting scenario that one or two categories had child-categories, and they needed to be displayed, but linked to the parent-category. Ye, ye, I could probably have build this differently, but that’s the beauty (and the horror) of EE. But I was talking about Stash.

 

In the main articles entry tag, I simply set a Stash (hey, I’m no programmer, this is magic to me!), and later in the template, in the sidebar, I call it to get some related info. This was necessary because of that stupid decision to use child-categories… But it works! Like a charm! Which I do believe this, and every other add-on, is.

 

 

Aside from some (too) clever use of categories, we enjoyed the use of dynamic parameters, to let teachers find school programs by county and level. This is such a brilliant way of sorting entries, that I’ll use it as often as I can. And with the help of Dynamo I can paginate the results and give the reader a link to save.

Big images – tiny images: no problem

Another big thing on this project is the responsive work we did. We do all sites responsively these days. Thanks to Foundation. Often we only add a few lines of CSS to make it work, and almost the only extra markup we do is for navigation. Which we put in the footer and link to from the masthead. We also make sure the File Manager generates thumbnails we can use in listings and sidebars. But with this site, with, eventually, 100’s of slideshows, often more than 10 slides per entry (hey, it’s the client’s website, I only make recommendations), the page load on mobile would have been ridiculous. I’ve had a quick look at Matt Wilcox’ Adaptive Images technique before, but this time I decided to make it work. And, again: magic, it took me literally 15 minutes to set it up and working. My cache folder quickly filled up with 38kb images as opposed to 229kb. Come on, people, give it a try! Until the smarter-than-me boys and girls come up with a proper solution for the responsive images-thingy: this is the way to go.

The parts of this project that I’m not too happy with is the heavy use of conditionals… I’m guilty of trying to be clever with both my url’s (using the native template_group/template structure) and reusing the same template for different content. There’s a lot of if_segment_3 =»this-and-that» going on. But with such a small site I’ll take my chances. I also regularly use too many embeds. Because… they’re so damned easy! But all in all. I’m pretty happy with how the site turned out, and so is my client. Now to see if the public agrees!

Take a look yourself >>