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 min-width and 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.
- Previous post: The ‘lang’ Attribute
- Next post: Best Swedish blog
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
Great work, really nice looking and nice work with the min / max width. Really hard thing to implement so that it looks good and is still flexible.
Jens
Don't forget that IE doesn't understand those expressions when Javascript is disabled; they can also be flagged by Service Pack 2 as "active content", which could scare a lot of users.
Looking forward to reading more about Plone, as we're also going through a CMS selection phase.
Just a quick remark, after five second glimpse of the website: I can't really tell whether I like the italic font; it's quite hard to follow the text, if you ask me.
Nice writeup on the overall process. As webmaster for a college, it appears that I ran into the same issues that you did, and took similar steps to solve them. I had tested Plone at one time, but felt it lacked in usability, so we ended up going with Lenya. I'm looking forward to your post on your experiences with Plone and to see the faculty's reactions to using it.
One thing to note on WYSIWYG editors and making them work with all browsers - technically, it's incredibly difficult to do that. IE/Win's implementation of a WYSIWG editor built-in to the browser is actually better in many cases to Mozilla's implementation, called Midas. Putting that aside, some browsers just don't have a "design mode" available. Safari is one of them. Opera is another - a heated discussion about that can be found here. So, it seems to be a technical limitation at the moment.
One remark: By clicking on the text in the top right corner "Gå till sidans innehåll" (it is "jump to content", right?) the site reloads. The link points to http://hum.gu.se/home/#content while you are still at http://hum.gu.se/.
Oh, and overall it's a nice site.
Matthew: Yeah expressions being dependent on JavaScript sucks, but at least it covers for most IE users. And it's not exactly the end of the world if JS is off.
Lukasz: Hmm... italic font? Where? You mean all text is italic? What browser/OS combo are you on?
Eric: Yep, that's the "jump to content" link. Thanks for noticing that glitch - gotta be a problem with the way the link created. I'll look into it.
Looks good! If only more Institutional sites where this consistent in their feel and looks. Just compare it to my old Faculty.
I did see a 1px gap on the homepage though, that couldn't be seen on any of the other pages. This showed up in Firefox, not Safari.
One more thing. To me it feels like the bottom-nav should be center aligned. It feels a bit off-balance. But that just could be me.
Good read again. Thanks!
p.s. Why can't i post a reply with Firefox? I forgot that again, so i'm writing the comment again...
Med: I've seen a couple of rounding errors at certain window sizes in Firefox. No big deal, but it's on the to-do list.
I hadn't thought about the bottom nav, but now that you mention it, yeah, maybe it should be cetered.
You should be able to post comments with Firefox unless you have turned off referrer headers. I'm using Firefox to post this.
Not sure if I'm getting at the same point as Lukasz but the fonts are very hard on my eyes. I think my machine is using Lucida Sans from the stylesheet ad it's not very pretty to say the least. Using Firefox 1.0 on WinXP (Verdana set as default sans-serif in Firefox). Lucida seems a strange choice to me or is it just something to do with my display settings?
Hmm. The font issue is bothering me. We haven't had any complaints about that from the client, and looking at it on the Windows machines here I can't see a problem. In fact, I use the same fonts on this site. Is the text here hard to read as well?
Btw, Lucida Grande is an excellent font that comes with Mac OS X. IMO it beats anything else for web use.
I can't test on any Mac or Linux machines at the mo as I'm at work. Maybe it's the way my machine is set to display fonts on the TFT (smoothing, etc). Can't remember how you set that in Windows - anyone help so I can check?
This site looks better, though still not the best. Maybe it's just the Swedish content that's throwing me...
Hia,
It's a great looking site (even though I don't understand a word of it!). I'm looking at plone for a volunteer project, and if you can write up your experiences, I'm especially interested in how you get the navigation to play ball, and get the nice URLs.
There are just so many options and ways to do things!
You are the man. Great stuff. Many thanks for posting about your experiences, it's great to know the little details and decisions of projects.
Great stuff. The site is really nice. You've made great use of max- and min-width. I, too, look forward to hearing more about Plone. Ease of implementation, caveats, etc
Thanks :-)
I had another look at the fonts. For some reason "Lucida Sans" and Lucida were in the list of fonts, which is not the case on this site. I removed them, leaving "Lucida Grande" (for Macs) and "Lucida Sans Unicode" (for Windows), so now the text should be no harder to read than here.
Looking around at some other blogs this is a rather common font selection, so I'm surprised I haven't heard anyone mentioning readability problems with it before.
Nice one Roger, that's made a world of difference! Looks very slick now, great looking site ;-)
As someone who took a number of departmental websites and combined them into a single one nearly four years ago, it is nice to see someone else going through the same things.
We didn't look at CMSs because there was too much inconsistency in how the websites looked and were updated. In order to ensure content was updated similarly across all departments, we needed to centralise all development and updating.
Since then, we have given access to limited content to some users. However, ti's all custom built using ColdFusion. Nothing elaborate; they just log in, fill out a form and submit.
Wonderfull site! I like it alot! (Jim Carrey)
Wonderfull site! I like it alot! (Jim Carrey)
Nice one! I've just started using Expression Engine for a site so I'd really be interested about your experiences with Plone. Keep it up!
Buh??! No framesets? You lucky, lucky man. As a senior developer for a large University in Australia, I would give a limb to get approval to ditch the nested framset nightmare that is our CMS(s). Kudos mate -- very nice work :)
Great work Roger! I hope more customers will follow and insist on web standards.
// Christian
This is a lovely looking site - and a great article ... am looking forward to the Plone follow up!
One quick question ... is the whole page encased in a 'flexible teaser box with rounded corners' like your article (of a similar name!) from a little while back?
Looks lovely, and thanks for sharing,
David
Roger: yes, all fonts are in italics. I was using FF 1.0 under Linux. When running Windows all fonts are not "italicsized" of course.
Lukasz: Is the text still italic? I made some changes to the list of fonts after your first comment. The current set is
"Lucida Grande", "Lucida Sans Unicode", Geneva, Arial, Helvetica, sans-serif;.Yes, now it's much better. Still, there are small issues I do not fancy but it looks overall.
One of those small issues is that - I don't know whether this is intended - there's no padding in the lefthand list on this page http://hum.gu.se/organisation/ Bullets are placed directly next to left border of the navigation box.
Lukasz: Thanks for letting me know about the font issue.
About the bullets in the navigation: yeah that's intended and I'm not too fond of it either. It's a bit of a compromise.
This page has some problems with handeling the overflow of the very long url in the center column. This becomes visible as resize your browserwindow (both IE, FF - not in Opera). The easiest way to handle this is setting overflow: hidden or auto. Where te latter isn't really usefull as a scrollbars 'll appear at the bottom (and in IE also on the right). The first ain't too, but probably in the first place it isn't usefull the have such long unwrapped text. In a CMS however this 'll inevitable happen from time to time. (At least that's wath my limited knowledge tells me.)
jj: Oops. Well, as you say, things like that are pretty much bound to happen. I'll make them aware of it and think about workarounds.
Btw, that page does not cause a problem in my Firefox, nor in Safari. They just let the text continue behind the sidebar instead of dropping the float. Only IE does that. Big surprise, huh.
Great site and great post, and I'd like to see a future post about the width "hacking" and issues about compatibility and how to implement it. Or perhaps links to any existing posts somewhere else.
Roger,
Upon first seeing the length of your post I was taken aback, but I'm glad I read it. It has been the first decent review of plone implimentation I've ever read.
As a PHP developer, I am dismayed to hear that PHP cannot compete with the likes of Java and cold fusion applications; Indeed, I hear this more often than not. However, with the direction of both PHP5 and MySQL5, I'm hoping this stigma will change.
I've never had any kind of luck with Plone - I find it far too inflexible, and I've always decided to go with something else. I find it's code far too sloppy, and not to mention I've found that the documenation is somewhat lacking.
Though the University page didn't load for me, I found the screenshots most appealing. Very clean, and knowing you accessibility will be enough.
Well done; If you have any future plone reviews, please, post again.
-Ryan
Ryan: After spending a lot of time working with Plone I can say that it definitely does have some areas that could be improved, and you mention two of them. I'll be talking a bit about those in an upcoming article on Plone.
I don't find Plone inflexible though. Quite the opposite. It can seem inflexible, but it really isn't.
A successful design of university site, congratulations! Comfortable looking site.
The site looks simple and very nice .I am waiting for your article on Plone
Looks great but that IE min/max width expression stuff doesn't work in my browser; IE6 on xp proffesional sp2
Erik: Right. That's a typo. We only implemented max-width for IE, not min-width. It should work though -- it works in my IE6/Win2k.
Nice design! Are there screenshots of previous design? This article is comming a little bit late for me :( as i was also working on our University page redesign. The final result:
Klaipeda University in Lithuania
Tomas: I'll see if I can dig up anything from the old design. Not sure I can though, and I didn't think of taking any screenshots of it for documentation. Btw I really like the design of your University site.
A note on this design: I'm not responsible for anything but the odd detail here and there. It was designed by my colleague Tobias Nilsson, one of the best illustrators I know.
One suggestion, based on an old newspaper design trick: always have people facing inward into the center of the page. So, the photo of the couple walking in the winter/snow/trees photo -- I'd reverse the photo so that they are facing the center of the web page.
Brian: Thanks, that's a good tip. I'll bring it up with the team.
Roger: thanks, btw Brian mentioned one of those "hidden stones" about usage of photo-material in a Website.
Thanks for the reference to Plone - I haven't known this one. However, I was wondering whether it has become some kind of a standard to use CMS for creating web-sites for universities, schools, colleges et cetera.
It doesn't matter which page I visit, I always find myself on a page with a similar structure and, significantly, with the same level of readability. Which, of course, suprises me in a positive way.
Anyway, thanks for a good tip! I'll stay tuned... ;)
With warm greetings from Germany, Vitaly Friedman, http://www.alvit.de/vf/
Thanks for the reference to Plone - I haven't known this one. However, I was wondering whether it has become some kind of a standard to use CMS for creating web-sites for universities, schools, colleges et cetera.
It doesn't matter which page I visit, I always find myself on a page with a similar structure and, significantly, with the same level of readability. Which, of course, suprises me in a positive way.
Anyway, thanks for a good tip! I'll stay tuned... ;)
With warm greetings from Germany, Vitaly Friedman, http://www.alvit.de/vf/
I'm working on a new faculty site in Italy. Your post was a great reading for me!
Working w/plone already, so no doubt to adopt it (especially new-coming version 2.1), but your work is inspiring!
Thanks!!
Sorry, comments are closed for this post.