jQuery cycle plugin

Examples of jQuery cycle plugin options

Examples of jQuery cycle plugin options

Where would we be without jQuery, the JavaScript library that speeds up development no end?

I’ve recently been using the Bootstrap 2.3.2 CSS framework within our content management system, TerminalFour Site Manager and I ran into a number of issues with its built-in carousel.

The requirement we had was that the user should be allowed to choose however many carousel slides as she wanted: 1, 2, 5… 10? Which was fine, except that if we were to use the built-in Bootstrap carousel it uses very specific code which requires HTML5 data-* attributes and I didn’t fancy a) relying on the user to have to fill this in, or b) having to write some JavaScript or PHP to generate the code dynamically. Because I’m lazy like that!

So, I moved the carousel over to use a jQuery plugin that we’ve been using for a few years now: jQuery Cycle Plugin by malsup.

One of the things that I really like about this plugin is that it will create a carousel/cycle out of just about anything. For example, to create a simple carousel all you need is something as simple as:

<div class="slideshow">
  <img src="image-1.png" />
  <img src="image-2.png" />
  <img src="image-3.png" />
</div>

and then you call it from within your JavaScript like this:

$('.slideshow').cycle();

Brilliant!

If you want to add pagers, arrows or a variety of effects then jQuery Cycle Plugin will handle all of those to, dynamically creating the additional HTML to inject into your page much of which you have control of, such as class names which you can then use CSS to style.

We’ve found this to be a particularly useful plugin when using T4 Site Manager.

The plugin author has recently released a new version Cycle2 which I’ve still to check out, but if it’s anywhere as good as the first version then I imagine we’ll be moving to that in the not too distant future.

If you’re looking for a good, versatile carousel plugin then you can’t go far wrong adding this to your jQuery toolbox.

New Accommodation website

Another major website I worked on over the summer was the new Accommodation website, which went live in October.

Screenshot of the Accommodation homepage

I think it is quite a distinctive and bright looking website. This is largely due to the excellent use of photographs.

Photo galleries

It was widely felt that the photographs used on the old accommodation webpages could have been improved. So there was a big focus on making good use of good photographs on the new website.

Screenshot of the Andrew Melville Hall webpage

A big feature of the new residence webpages is the gallery of photographs. We settled on using the GalleryView jQuery plugin for this. It is fairly flexible, with plenty of options to configure. So when I was asked to make changes to the functionality of the gallery, it was fairly straightforward to update it.

Managed properties

Much more challenging was the managed properties page. This hasn’t gone live yet. But behind the scenes it works, although it’s not the most elegant of solutions.

We were asked to create a page that will contain information about a large number of individual properties — 80 or so. There is not enough information about each property to justify giving each property its own page. But, each property needs to have its own gallery, which opens up in a lightbox.

There was scope to split them up into five categories, so I have given each category its own webpage. This leaves us with around 15 or 20 per page. But whether there are 80 or 20, this leaves us with the problem of giving each property its own unique gallery while remaining on the one webpage.

This was a considerable challenge to implement within TerminalFour Site Manager, at least the way our Media Library is set up. The solution, as I said, is not ideal. It is certainly not the most user-friendly for the content owners to update. But it is good once again to push the limits, and learn what can be achieved when you set your mind to it.

No rush

Despite the sometimes tricky requests, I found the people at Residential and Business Services good to work with. They had brought on board a web expert who was able to do a lot of the heavy lifting and had great ideas for the website.

But best of all, we were given plenty of advance warning to work on the website several months before it was due to go live. In stark contrast to some others, who sometimes expect us to magic up an amazing website at the last minute with no prior warning, we were able to finish the majority of the work on the Accommodation website three or four months before it was due to go live.

It certainly made a nice change to be able to stop working on a website for a number of months rather than desperately rushing around at the last minute.

Should we still be supporting Internet Explorer 6?

Keep calm and debug IE6

Keep calm and debug IE6

Every couple of months the same topic of conversation comes up in the Web team office: should we still be supporting Internet Explorer 6? The answer so far has always been a resigned yes, but that may not be the case for too long.

A little history: IE6 was released on 27 August 2001, three days after Windows XP was released.  Since then IE7 was released in October 2006, IE8 in March 2009 and IE9 public beta in September 2010.  So, surely it’s now time to withdraw support for a browser that is over nine years old.

Bring down IE6

In 2009 .net magazine started a campaign called “Bring down IE6“.

Bring down IE6

Their mission:

The premise is simple: Internet Explorer 6 is antiquated, doesn’t support key web standards, and should be phased out. This isn’t about being anti-Microsoft, it’s about making sure that we encourage people to move to modern browsers such as IE8, Firefox, Chrome, Safari and Opera.

Case-by-case

In an article entitled “Calling time on IE6” Craig Grannell “asks designers and developers if it’s finally time to take IE6 behind the shed and shoot it”!  He leaves the conclusion of the article to Web standards hero Jeffrey Zeldman:

How much longer we prop up this ageing browser must be decided on a case-by-case basis. Not every site can afford to dump it today, but the writing’s on the wall.

I think that’s a really important point because until recently the primary browser on the University’s default PC setup, that was installed on every Windows PC in the PC classrooms, was Internet Explorer 6.  If we wanted our websites to be viewable and usable across the University then we had to support it, we had no option.

Supporting IE6 is a drag. As all web developers will know, you spend a couple of hours building something that works perfectly in Chrome, Firefox, Opera and Safari and then you spend twice as long again debugging it in IE6 and IE7 and IE8, which all appear to have introduced new bugs to the game.  Keep calm and debug IE!

Analytics

Since the University’s default PC setup (‘standard build’) has now moved to Windows XP (and will hopefully soon move again to Windows 7) the default browser is now IE8, and s the requirement to support IE6 has now been reduced.

This is backed up by the statistics from our Google Analytics account that tracks which pages are being view most often and by which browsers.

Unsurprisingly Internet Explorer, being the default browser on our standard build PC, is the most popular browser to use to visit the University website; Apple Safari (the default browser on Apple Macs) is second.  42.5% of all visitors in the last month have used one version or another of Internet Explorer.  The breakdown of which version is interesting:

  1. IE8: 79.8% (382,394 visits)
  2. IE7: 15.4% (73,944 visits)
  3. IE6: 4.4% (21,186 visits)
  4. IE9 beta: 0.29% (1,395 visits)

That means that only 1.8% of all visitors to the University website last month used IE6. But 21,186 visits is still quite a lot.

Frameworks

Adopting the Blueprint CSS framework a few years back made a considerable difference to our development time.  Blueprint comes with a build-in IE hacks/workarounds stylesheet that addresses a good number of common IE5, IE6 and IE7 issues that has literally saved us hours and hours of hair-pulling.

Similarly we’re using the jQuery JavaScript framework which still supports IE6 and so makes cross-browser coding much simpler.

My view is that with such good support built-in to these frameworks for IE6 there’s really no excuse at the moment to completely drop providing a certain degree of support for IE6. The bugs are well known and the hacks are well-documented, and so finding workarounds for those that are not already contained in the framework files really doesn’t take that long to code these days.

Yahoo! graded browser support

However, it doesn’t mean that pages need to look pixel-for-pixel identical in every browser.  Something that is made explicit in the Yahoo! Graded Browser Support chart:

Support does not mean that everybody gets the same thing. Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web. In fact, requiring the same experience for all users creates an artificial barrier to participation. Availability and accessibility of content should be our key priority.

Over the last two to three years I’ve used the Yahoo! GBS chart to inform the Web team about how much support we should be affording to the various browsers.  IE6 is still granted A-grade support but it appears from a blog post “Graded Browser Support Update: Q4 2010” on the Yahoo! User Interface Blog that this is all about to change.

Listed among the various changes, which includes dropping A-grade support for Firefox 3.0 and initiating support for WebKit browsers on iOS and Android OS, is this:

Forecast discontinuation of A-grade coverage for Internet Explorer 6 in Q1 2011; we expect to move IE6 to the C-grade browser list as of the next update.

C-grade browsers, according to the GBS page are “identified, incapable, antiquated and rare.”

I would say that the bell is tolling for IE6 but it would appear from some corners of the Web that it has already rung out.  Google has already held a Funeral for IE6 after it withdrew support for the aged browser.  Microsoft sent flowers!

Conclusion

According to Google IE6 is already dead and buried, while Yahoo! are expected to degrade support for it in early 2011. Microsoft themselves, on the other hand, have committed to supporting IE6 until Windows XP SP3 support is removed in 2014; but that just means removing security issues rather than adding new features.  IE6 will never, on its own, support HTML5 or CSS3, for example.

So, should we still be supporting Internet Explorer 6? I expect that we’ll follow Yahoo!’s lead next year and move to providing only a base level of support for it.  When we move to using HTML5 and CSS3 then I expect we’ll have to drop support for IE6 completely.

We’ll make sure that content is readable but not worry too much about the presentation (CSS) and behaviour (JavaScript) layers; we’re already kind of doing that already in places, to be honest.  But as we’re using frameworks for CSS and JavaScript which still support IE6 the elderly blue ‘e’ may be inadvertently supported for a little while to come.

Then all we need to do is try to kill off IE7.  Who’s with me?

Launch of new website design

Screenshot of new website design

Screenshot of new website design

Following consultation with staff and students, and nearly nine months of work we launched the new website design for the University of St Andrews during the early evening of Monday (8 September).

Unlike the website launch in May 2007, which combined for the first time all 27 of the support unit websites into one enterprise-wide site, this re-launch was more of a design update than a radical restructuring of information.

Feedback sessions

Back in February 2008 we meet over the course of three lunchtimes with both staff and students to elicit feedback on what people

  • liked
  • disliked
  • thought was missing (both information and features)

Those sessions were very helpful, and feedback from those were thrown into a melting pot of ideas that had also been compiled from Helpdesk calls received since the launch of the new site in May 2007, as well as our own thoughts and observations from using the site for nearly a year (remember, we had access to it for a few before it went public).

Re-design goals

Our redesign goals were quite clear:

  • Make the site easier to read
  • Offer more variety/flexibility in terms of layout, e.g. 2, 3 and 4 column
  • Ensure that it works in more browsers
  • Add new functionality

On the whole we’ve managed to achieve this, and the feedback during the last month when the site was quietly released to staff and students within a closed preview has been very positive.

The techie bit

When designing and building a new site you have to decide from the start which technologies you will definitely support and which you will try to break as least as possible.

We’ve built the site around a grid-based CSS framework called Blueprint CSS, which offers us a number of advantages such as ensuring that the site is built using accepted Web standards, a well-designed and attractive typography. It also makes it painlessly simple to develop new site designs and layouts.

Much of the new functionality (such as the carousel of images on the homepage, and the tabs on the Current Staff and Students’ pages) is largely provided using the jQuery JavaScript library.

While writing new features using JavaScript can be a long and arduous process the jQuery library allows you to do it in a fraction of the time — some of the functionality added to the site took less than a minute to write! It also works with a lot of modern browsers (Firefox 1.5+, IE6+, Safari 2.0.2+, Opera 9+).

Browsers

Speaking of browsers, based on statistics gathered by our Google Analytics account as well as Yahoo!’s guidelines for Graded Browser Support we settled on ensuring that the latest browsers received the best experience possible.  This included:

  • Firefox 2.0
  • Firefox 3.0
  • Internet Explorer 6
  • Internet Explorer 7
  • Opera 9.x
  • Safari 3.x

We tested the site back to Firefox 1.0, Internet Explorer 5.0, OPera 7.5 and Netscape Navigator 7.0, with varying degrees of success.  On the whole though the site is still usable in these older browsers, even if it doesn’t look exactly as it does in a modern, standards-compliant browser.

One major issue that we have become aware of is that the site crashes when viewed in Safari 2.0.4 (419.3) on a Mac. The issue it would appear is to do with how Safari handles JavaScript.  According to JavaScript expert, and jQuery author John Resig:

“Safari 2 has serious memory issues that are impossible to work around – simply loading and executing too much JavaScript will cause it to crash.” (J Resig, jQuery discussion group)

Our advice, following the graded browser support guideliness, would be to either disable JavaScript or upgrade to a more modern browser, such as Mozilla Firefox (the site works in everything back to Firefox 1.5).

Going live

Going live with a site is a strange experience of mixed emotions. There’s a combination of both elation that the site is going live, mixed with a little anti-climax and the nervousness of waiting for support calls to come in, hoping that we haven’t missed anything obvious.

On the whole, as a Web Team we’re really pleased with the results and the encouraging feedback that we’ve had from users, but we won’t stop there … there’s much still to be done, content to be improved on, sections to be reorganised and even more features to be added.