Building a university website
In mid January, a website that I’ve been spending a lot of time on at work was opened for public consumption. It’s the new site for The Faculty of Arts at Göteborg University. Their previous site was a bit of a jumble with most departments having very different designs, different information architecture, and very disparate content quality. One of the faculty’s goals with the new site was to fix that and give the whole faculty website a common look and feel.
As some of you may remember, I asked for advice on Open Source content management systems here a few months ago. That was on behalf of this client. Based on feedback from readers, some testing of our own, and the client’s requirements, we chose to build the site on top of Plone, which proved to be an interesting experience. A more in-depth article on what I’ve learned about Plone and its related technologies is coming up later.
At this time I’m not going to go into a lot of details about how we implemented the site. Instead I’m providing a general outline of the project.
The client had several goals with the new site:
- More effective information
- Improved quality of content
- Make it possible for more people to publish content
- Give the whole faculty website a common look and feel
- Build a technically sound and platform independent website that complies with any regulations that affect it
- Adhere to standards and use Open Source applications
To achieve those goals, we had to do a lot of work before doing any design or coding. Much time was spent inventorying the old site’s content and reworking the information architecture. Once that part was done, we created a design and built an HTML prototype for usability testing.
The client wanted to increase the quality of the content and keep it more current than on the old site. This is a huge job that is still ongoing – all content has not yet been updated and moved to the new site.
In order to ensure that content is as current and updated as possible, one key requirement was to enable more people to publish content. On the old site, everything was made up of static HTML documents, and only a few members of the staff have the skills needed to make changes. On the new site, the CMS enables a large number of editors to publish content without needing an in-depth knowledge of HTML. However, some knowledge is still necessary to make the content fully accessible, especially when it comes to data tables. This is another work in progress – teaching non-technical people how to build accessible tables is not an easy thing.
The site and CMS needed to be platform independent, both server and client side. Sometimes “platform independence” is just a buzzword that doesn’t really mean anything more than that an application works with more than one version of Windows. Not so in this case.
Since many of the editors working with the site use Macs the CMS could not use anything that is dependent on Internet Explorer for Windows, like most commercial CM systems are. Plone is great in this aspect since it runs on just about any hardware/OS, and its administrative interface (with the exception of the WYSIWYG editor, which only works in Gecko browsers and IE/Win) works in any browser. Hello, commercial CMS vendors. Wake up and stop making your applications require IE/Win.
The specs also demanded that the site is built according to web standards, is accessible, and follows the guidelines in Vägledningen 24-timmarswebben 2.0, a report made by The Swedish Agency for Public Management (Statskontoret). It is quite similar to the requirements put forward by governments in other countries. This was no big deal for us, since the guidelines in the document pretty much describe the way we normally build websites. However, it’s very encouraging to see more clients making it part of their requirements.
Design-wise we implemented a flexible layout with a minimum and a maximum width, something I think works really well, especially in browsers that support the
max-width CSS properties. Since Internet Explorer does not support them, we used IE/Win’s proprietary CSS expressions to create a workaround. It works, but it isn’t as smooth as in more capable browsers. IE/Mac doesn’t support expressions either, so the layout has no minimum or maximum width in that browser. To avoid invalidating the CSS for the sake of IE/Win we moved those rules to a separate CSS file and used conditional comments to make sure that no other browsers load the file.
The flexible width in combination with the rounded corners in the design made it necessary for a few non-structural divs to end up in the markup. No big deal, but time allowing I’ll take a look and see if I can come up with a way of removing some of them.
There’s nothing revolutionary going on in the CSS, but some of the tricks and techniques used may be of help to someone, so let me know if you’d like a detailed write-up of something.
As I stated earlier, content-wise everything isn’t quite there yet, and I’d like to see more use of photos where appropriate. Some parts of the markup (especially those that are hard to take complete control of) and CSS need a bit of polishing, and there are probably other improvements that can be made, but all in all I’m quite satisfied with the result and it’s been a very interesting project that I’ve learned a lot from.
Working with Plone was a new experience which took a lot of learning and hard work, but now that I’ve got a decent grasp of it I won’t hesitate to use it again for the right kind of website. Like I said at the beginning of this post I’ve got a more in-depth look at Plone coming up.
Check out the site at The Faculty of Arts at Göteborg university. Currently everything is in Swedish, but information in English is being worked on and will be available in the near future.
Subscribe / follow
- Experienced PHP / MySQL Developer at eTecc / Interactive (Oak Brook, IL, Il, US)
- Web Application Developer (Ruby on Rails) at Archon Systems Inc (Toronto, ON, Canada, CA)
- Remote Sensor Software Developer at charity: water (New York, NY, Ne, US)
- Android Mobile Developer at Quirky (New York City or San Francisco, Ca, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost