The Blog

Elections - a tip for targeting non-voters

Fri, 03 Feb 2012 15:14:00 Z

I'm sure some of you are already neck-deep in officer elections (and those that aren't soon will be!). This is just a quick post to highlight a handy widget you can use during the voting period to help push your elections without annoying those members who have already voted.

The voter popup widget lets you display one of four messages depending on the voting status of the current user. The initial assumption is that this person is eligible to take part in the election and assuming they are they can be in one of four states:

Not yet voted
Voted for some but not all positions
Voted for all positions
Polling has closed (so they can no longer vote)

So you can have a different message for each state, for example:

Don't forget to vote in our elections
Don't forget to finish voting
Thank you for voting
Don't miss the results party on Friday

Or you can choose to omit some messages and purely target the non-voters.

Where it gets smart is that you don't have to just display a text message on a page, you can use this in conjunction with some script to activate a popup notification to those who haven't voted, you could use CSS to have a different ad banner image to display in each state, you could even combine it with the person's name using a technique covered in a previous post for a bespoke message.

You can treat the four states as four possible values for a variable to be used in a script and really personalise a user's experience. If you have a splash page or redirect set up then in some way regular users of your site who vote early are punished but by making use of the voter popup widget you can ensure that voters don't have their browsing interrupted.

You could even get smart and sync it up with a countdown timer to display the countdown until voting closes OR result announcements based on whether the user has voted or not.

So although it's called the popup widget you are by no means tied into using it as a popup, you can use far less obtrusive methods to herd non-voters to your elections pages and make sure you give your voters a special thank you.

If you'd like any help setting up the Voter Popup Widget please email helpdesk.

WYSIWYG editor upgrade

Wed, 26 Oct 2011 14:15:00 +0100

We’re excited to give you some more details about the new WYSIWYG editor, which will be released in the system update scheduled for next week.

This editor version includes new features such as customising the styles dropdown, a built-in spell checker option and resizable editing area, as well as fixing the non-responding bug in Internet Explorer 9 that some of you have reported.

There are some changes to existing dialogs and toolbar options, so we strongly recommend reading through the FAQs below to familiarise yourself with this new version.

Jump to:

How do I upload images and flash?
Where’s my document uploader gone?
How do I edit tables?
How do I add YouTube code?
My toolbar looks weird – why aren't the icons using a full line?
Where’s the cool new stuff?

FAQs…

How do I upload images and flash?

To make uploading easier when adding images or flash, the ‘browse & upload’ tab has been replaced with a ‘browse’ button on the landing (image info) tab of the popup.

This means that wherever you have an image or flash icon on the toolbar, users can both ADD AND UPLOAD files.

Also noteworthy:

To edit/replace an image, just double click on it in the browser.
You can make the image into a link using the link tab of the popup dialog.
Aligning an image left and right now works cross-browser.

Where’s my document uploader gone?

The document icon has disappeared!

Don’t worry, you can now upload documents using the link icon > . Hit the ‘browse server’ link to get to your page document storage area – you can add the document and link it in one go.

How do I edit tables?

Right click on any existing table to get the table context menu, where you can manipulate rows, columns and cells, or edit the table properties.

How do I add YouTube code?

The previous YouTube uploader didn’t play nicely with the more recent version of the YouTube embed code. This has been fixed, so to add a video just copy and paste the code YouTube gives you into the YouTube dialog.

If you want to edit the size of the video, double click on the iframe that’s generated to get to the iframe properties dialog.

My toolbar looks weird – why aren’t the icons using a full line?

Have you got the ‘source’ button on your toolbar? If so, edit your toolbar, and give the source button a line of its own (i.e. make it a separate group). This should ensure that your toolbar groups wrap correctly and that the icons are placed along the full width of the editor.

**Where’s the cool new stuff?**

Here’s a quick rundown of new features that are in this release of the editor. You can add/edit all your toolbars through website admin > editor toolbars.

Customise the styles dropdown

You can now customise the styles that users see when they use the styles dropdown by setting any of your skin stylesheets to ‘show in toolbar’.

Check your work

There are two new spellcheck options that you can enable on the toolbar. ‘Spellcheck as you type’ toggles automatic underlining of any misspelled words in the editor. The ‘Spellchecker’ option takes this one stage further and suggests alternatives to misspelled words, lets you find and replace, and includes a thesaurus.

Expand the editing window – then expand it a bit more

There’s a built-in draggable handle in the bottom right of the editor that lets you resize the editor window to get a better view.

If that’s not enough space for you, try adding the maximize button to your toolbar. This toggles full screen mode so you can really see what you’re doing. Just remember to minimize it again so you can get to your save page buttons!

Hide the pesky toolbar

If space is at a premium for you, use the triangle in the corner of the toolbar to show/hide the icons.

See the page structure at-a-glance

Adding the ‘Showblocks’ icon to your toolbar lets you toggle an outline of the page structure on and off. Blocks such as div, p and headings are outlined and labelled in the WYSIWYG editor.

This is a great help when editing a complex layout to make sure that you’re really putting that paragraph in the right place!

Structure your content (‘add div’ option)

The ‘Create div’ option on the toolbar lets you add div blocks without needing to go into the HTML view.

Other new toolbar icons to try:

Iframe
Blockquote
Smiley

Member Lists and Admin Lists

Wed, 19 Oct 2011 11:43:00 +0100

Let's say you want to display a list of exec on a club/society page, you could use an Admin List which lists postname followed by their name, or you could use a Member List which includes their profile pic and contact info, but what if you want to combine the two?

In the same that the Grouping List widget was a step up from the Organisation List we will have a Member List Mk II but until then you can use this little snippet to combine the two. It uses jquery and assumes that there is only one admin list on the page, the only thing you need to ensure is that your Member List has Container Div ID set to memberlist:

$(document).ready(function () {
    $('dl.admin_list a').each(function () {
        personID = $(this).attr('href').slice(-6,-1);
        personAvatar = $('#memberlist').find('a[href*="' + personID + '"]').parents('.badge');
        $(this).parent().after(personAvatar);
        $(this).parent().remove();
     });
});

So to run through what it's doing:

It runs through each link in the Admin List widget (the only links it contains are the person names linked to their profiles)
It isolates their person ID from the URL
It then searches through the Member List for a link that contains a matching ID and finds assigns the div containing that person to the variable personAvatar
It then moves that person from the Member List into the Admin List and removes the link the old link the Admin List contained

If you had the same people in the Admin List multiple times you would need to amend this slightlt to clone the person from the Member List rather than just moving them but I imagine most Admin lists will only feature each person once.

Have a go and let us know how you get on - Kent are already using this to list all their Course Reps and you could use the same technique for officers, staff, trustees - any membership group you have in your system!

News Widget Showcase

Fri, 29 Jul 2011 17:00:00 +0100

By far the most commonly used widget in the system is the News widget and with good reason, it's certainly one of the most versatile widgets (and doesn't just have to be for news).

A few months ago I posted about how you can use a few CSS tricks to shape the images in your newslists and as something of a follow-on I've a few example styles to show just what you can do with newslists and you can view them on our demo site.*

Each lists varies as to whether it's just some neat styling or whether there's script involved too, some are also using newer CSS properties that aren't fully supported so it's worth looking in a few different browsers to see how each one interprets the widgets.

The slider at the top is using jQuery cycle (as many of your newslists are) but also adds an additional line of script that adds the article headline to the pager dots at the bottom allowing us to show the article headline in a little popup when you hover over any of the pager dots or over the forward/backward arrows. This is the script heaviest of the examples.

The second involves a small piece of script for the slide in animation of the leader on hover but most of this is pure CSS (you could even replace the slide animation with a :hover CSS class that shows the leader if you wanted it script-free). The diagonal sweep is a nice effect and really simple - the background image for the leader has a diagonal bottom edge, as it moves vertically it gives the impression of moving diagonally, with longer leaders the effect would probably be even better.

It's also worth noting that all of these newslists are showing the same articles, but even where the dimensions of the images are different you can use the 'Crop Image' option on the widget to ensure that your image isn't distorted and you're not left with whitespace.

This makes use of the itemOdd and itemEven classes the newslist generates. There's a line of script that rewrites the .msl_pubdate element to the format above but you could equally leave it as is if you didn't want the script. The publication/dispay date element means you can use the newslist to build up a timeline. You could even apply some smart script to calculate positioning based on the relative dates so you could build a to-scale timeline of your articles over a week/term/year.

This is pure CSS. The 'pins' are making use of the :before pseudo-element, for more on how you can use them for stylistic purposes (folded corners, pins) check out this post. The handwritten font is using the @font-face property, the web font kit was downloaded for free at Font Squirrel.

And this is making use of the same technique I described in that earlier post. IE users you'll notice that the image is circular but the box is not (also true of some of the rounded corners in some of the other examples), if you really want to guarantee rounded corners in all browsers there are javascript plugins you can use.

Next week I'll bundle each of these up into a zip so if you'd like to use/adapt any of these you can download the CSS and Styles from the support section (I'll tweet when they've been uploaded). if you can't wait till then feel free to inspect the markup and rip it from there. Also if any of you have done anything nifty using a news widget pop a link down in the comments, or if you happy to share your markup feel free to send us a bundle to post in the support section or start up a thread in the forums.

* As an aside we're currently building up the demo site to both show some both best practice and innovative use of the system. It's in its infancy at the minute but feel free to have a look at what's there and if you have anything you're quite proud of that you'd like us to showcase drop us a link or if there's anything you'd like to see drop us an email

Update: All styles, scripts and images now available for download on the support pages.

Have your website in any colour, as long as it is black

Thu, 14 Jul 2011 17:32:00 +0100

With rebrands, refreshes (and a few new signups) plenty of MSL Clients are working on website redesigns over the Summer and a common idea across more than one is colour coding.

Whether it’s areas of the site (each of your landing pages for example), event types (society, democracy, campaigns) or content types (news, events, resources) we’re all looking for ways to make it easy for users to know where they are and what they’re looking at and an obvious possibility is colour coding one or more of these options. If it’s done well it can contribute to both aesthetics and usability, but at the same time I think colour coding is just one possible solution. It’s important to look at what you’re trying to achieve/the problem you’re trying to solve and decide whether colours are the best solution rather than arbitrarily deciding to attach colour X to thing Y.

Across your organisation? Or just your website?

I think the most common implementation across our client’s sites is colour coding of sections (most commonly the landing pages of the primary navigation). Does this colour coding marry up with a user’s offline experience? Is it carried through publications and other media? How do I tell I’m standing in the advice centre vs viewing the advice centre’s pages? Is it part of your overall brand or just something you’ve stuck in for the website?

Purely aesthetics? Or an identification system?

If your colours make up part of an identification system how integral is knowing this system to their experience. Do you need to rely on users remembering that campaigns are green and advice is yellow? (And if so do you think they will?)

In most cases the colour you attach to an area is going to be arbitrary (I imagine most people would agree that environmental campaigns are green but what colour is advice?) and consequently users will need to learn and remember your system. Could you use a more obvious identifier? A megaphone icon for campaigns, a football icon for sports etc. Using icons doesn’t rule out using colour but it makes it a secondary identifier, one that users may grow to learn but aren’t *required* to learn.

You should also consider colour use outside of a system - what if users think things are colour coded when they're not?

What do you colour code?

Headings? Text? Links? Borders? What exactly gets colour coded and what doesn’t? Do you need to consider contrast and readability with elements thet won't be changing? Is it sensible (or indeed possible!) to have multiple systems? For example a system for sections AND system for content types. Do different shades or opacities of the primary colour have different connotations?

All of these things can lead to extra layers of complexity in your system, users may be oblivious to them (in which case you could be wasting your time) or at worst confused by them.

Some general colour pitfalls

How many colours do you need? Your monitor can display 16 million different colours, but in reality the number of discernable shades in terms of colour coding is pretty low, when you start getting into multiple shades of green or orange it can be less clear exactly which section is which.

Just what colour is it? If you ever need to refer to the colour by name (for example over the phone) one man’s red might be another man’s orange. Purple and blue can be quite subjective and even blue and green might not be as distinguishable as you think. As well as cultural interpretations of colour you might also need to consider the cultural connotations.

Accessibility. Bear in mind that some of users may be colour blind, if colour is essential to usability they’re going to struggle! I won’t go into too much detail here as there are hundreds of articles and web apps that cover the types of colour blindness and what a user with a certain type will see when they look at a site.

And of course, who chooses the colours? Anyone who’s seen Reservoir Dogs knows how that works.

Some notes on web design

A user should know where they are, where they’ve come from and where they can go, an identifier system (whether colour or other) can be very good at letting them know where they are, especially if they’ve jumped from one section to another, but at a more basic level you should be making good use of <MSL:Breadcrumb />, <MSL:PageTitle />, <MSL:OrganisationName />, <MSL:RootPageTitle /> and <MSL:Navigation /> throughout your site.

Some notes on design

As John will tell you I do love my black and white designs, but with good reason. If it works in black and white it’ll work when you add colour (in fact if it works in pencil on the back of an envelope you’re probably onto a good thing). Keep your wireframes loose and you can refine them as you build, having a pixel perfect beautifully coloured starting point can be a fragile foundation, you can end up compromising usability and optimisation trying to get your site to match your mockup exactly. And to round off my list of design clichés, the best design is invisible. The best systems are ones that don’t need an explanation. That doesn’t mean you can’t be novel, just make sure you’re not being too clever for your own good.

Final note

I thought I’d finish off by saying that this isn’t an anti-colour diatribe! Far from it. Colour in design can be great when it is used well and for the right reasons. But when you’re designing, knowing what it is someone wants to achieve is more useful than them stating an outcome (‘We want it to be clear to users that they are looking at a society page not a club page’ vs ‘We want it red’) and you should all consider whether the solution to that problem extends beyond your website.

Requirements

Fri, 27 May 2011 15:07:00 +0100

In our Memberships Admin training on Wednesday the area that took up the most time was requirements. I tried to explain requirements in two ways, as descriptions and using venn diagrams (you can see some of the supporting images we used here) and while the descriptions were accessible to all I think I lost some of the audience when I started talking about logical operators and colouring in portions of overlapping circles on the whiteboard so I've decided to have another go at the diagrams I use to explain requirements.

(Once I've cleaned this up it'll be incorporated into the requirements page of the support section)

Every requirement starts off with a single group to include, some requirements might just be that single group (for example First Years). If you add that one requirement then that's what you get, a group that only First Years can be a member of.

Any subsequent rule we add to this requirement takes what we currently have a splits it in two. For example we want to look at all first years who are in a society. So we add our second requirement, membership of Societies Federation, and everyone in our current group (First Years) is either in the Societies Federation, or they're not. Simple as that. By adding another rule to our requirement we've split the group in two:

As you can see we can choose to 'Include' or 'Exclude' on our second rule, if we choose to include those people that meet the requirement we end up with First Years in Societies, if we choose to exclude it we end up with 'First Years not in Societies'. All we've done is taken what we had and split it in two.

In our example we wanted to include the group so we have First Years in Societies. Now say we want to refine this further, we want First Years in a Society and a Sports Club. All we need to do is add a new rule, Member of Athletic Union, and it will split our group in two once more:

And once again we choose whether we want the group that includes the AU or excludes the AU and that's how you build a requirement.

You may have noticed that we only used one letter option, 'A', this is because each letter is a single requirement, if you want to have a list that includes First Years in Clubs OR First Years in Societies then you have two possible requirements (the clue is any time you use the word OR when describing it you're adding a new requirement). So take each one in turn:

'A' - will be anyone who is a First Year and in a Society
'B' - will be anyone who is a First Year and in a Club

And each requirement you build you're just refining down your initial group, splitting it in two with each rule and choosing which half you'd like to keep.

Hopefully for those of you who got a little lost amongst my venn diagrams that's made things a little clearer!

Sniffing Memberships

Mon, 23 May 2011 15:11:00 +0100

As mentioned in the previous post, to achieve more sophisticated effects based on memberships you can use a Memberships widget to 'sniff' someone's memberships.

To illustrate how we'll use an example from the MSL Demo Site (currently under construction). On the 'Representation' page we have a sidebar that lists a user's representatives:

As you can see there are three possible reps, Jasper, John and Dan. In brackets following their names (mainly to help show how each one works!) are the areas they represent, and as such the memberships that designate them as a representative. Jasper is just for Website Admins whereas John and Dan are based on self-definition groups we have set up on the Demo Site (the 'let us know more about you' link takes you to the list of Self-Defined groups where you can show your areas of interest, on an SU this would be groups like Black & ME, Women, SWD etc.).

In order to decide which areas of content to show there is a Memberships widget on the page that has been hidden using CSS and a script looks at the memberships listed by the widget and uses those to show the relevant sections.

The two things to remember when setting up your Memberships Widget are:

Check 'show individual memberships' - if this is unchecked the widget will just list organisations the user is a member of, as we are targeting Self-Defined Groups which are all part of the same organisation we need to see the individual memberships
Specify the Organisation - there's no point in loading in superfluous information, specify the IDs of the organisations you need to query

Now, in order to query this I've set up my 'Who represents me?' section so that each representative (Jasper, John and Dan) is wrapped in an ID that will match the name of the membership, for example:

<dt id="websiteadmin">Jasper (Website Admin)</dt>

Our script then looks through each listed membership and if it finds a matching representative it displays it:

$(document).ready(function() {
	memberships = $('.memberships dd');
	memberships.each(function() {
		membership = $(this).text().replace(/\s/g, "").toLowerCase();
		$('dt[id="' + membership + '"], dt[id="' + membership + '"] + dd').show();
	}); });

In our example we don't really need to loop it in this way as we only have three possible membership-content combinations, but using this method means we can easily scale this to include many more membership-content links. And as the content link is based on an ID you can apply it to an image, link, sidebar or any piece of content you like.

Another application of this membership sniffer is to style a page differently for different groups, for example having one design for Postgrads and one for Undergrads. You would change the memberhips widget to look at your University Organisation and change the script to look for the membership Postgraduate Student and if it finds it to add a class of 'postgrad' to the html element. You will then be able to create a set of styles for postgrads by preceding any style selector with .postgrad. For example:

#header {background: #900; color: #fff;}
.postgrad #header {background: #000; color: #ccc;}

So as standard the site would have a header with a dark red background and white text but on login if the user was a postgraduate it would be a black background with pale grey text. This is obviously a simple example but using the CSS selector you can change images and layouts and choose to show or hide content areas, creating a completely different experience with the same content. For some nice examples of how different CSS can make the same content appear check out CSS Zen Garden.

Creating personalised user navigation

Mon, 23 May 2011 13:32:00 +0100

There are a number of ways you can present a user with personalised content: members-only news and events are a great way to dynamically build content and with a bit of thought the news module especially can be used to build personalised messages. A more advanced technique is to use a hidden Memberships widget to 'sniff' a user's memberships and show/hide page content or alter page style based on the results (more on this in a future post), but by far the simplest way to build a customised set of links is using a simple navigation control.

The Navigation control or widget will only list pages a user has permission to see, for example if you were to add a Section Navigation for the /admin/ part of your site it would only be if somebody had permission to view the admin pages that anything would be listed at all. Pages that are logged in only won't be listed publicly, pages that are members only won't be listed to non-members and so on.

So the Navigation widget lists pages based on a user's memberships and permissions, but you might have a page of content that you would like to publicly viewable but also that you could specifically push to one group, here we can take advantage of the Redirect Page.

In Page Properties a page can be set to be Normal, Form or Redirect, in the case of Redirect you can specify any URL and anyone viewing the page in question will be forwarded to the new page (on your site or elsewhere). When that page is listed in a Navigation widget the forwarding is bypassed entirely and the linked URL is the redirect URL, but whether or not the page is listed is based upon the page security of the original page NOT the page it is forwarding to. So we can create a redirect page that points to a public page on our site, but that can only be viewed by Arts Faculty Students, or Society Presidents. You can build a full set of these redirects each based on certain memberships and create a 'My Links' navigation bar on your site that as the term progresses will always display a set of relevant links based upon a user's memberships.

I'd recommend creating a page on your site called /redirects/ or /signposts/ or another suitable name, then create child pages under there for your signposts, for example /signposts/arts/, /signposts/science/, /signposts/socialscience/ if we were going to do a faculty based message/link. On the page security settings for each page set a page security requirement (so in this case Memberships of 'University - Arts Faculty Student') and ensure that overall viewing permission is set to 'Only users who meet the requirements set below':

Then on the properties for that page set the page type to 'Redirect' and enter the URL of the page to redirect to, and change page title to the wording you would like the Navigation Control to display, you should make it relevant to the page you are forwarding to for example, 'Stand for Arts Faculty Student Rep', or 'Find out how you can stop Arts Funding Cuts' or whatever it might be.

By building a suite of such redirects you can then add a Navigation Control with ShowSectionNav="true" for the section /signposts/ and display a set of custom links/messages to relevant groups.

When you no longer want a message to appear to Arts Faculty Reps you can uncheck 'Show in Site Navigation' on Page Properties until you are ready to point it to a new page. In addition, if you have set up your own grouping types for Officers or Society Committees you can use more complex security requirements, for example you could have a link that displayed to Society Presidents and Treasurers promoting your Student Activities Finance Training, one to all Club and Society Exec members encouraging them to stand in Officer Elections, or one to all female students encouraging them to stand for Women's Officer.

As a way of building custom user messages this is the simplest to setup, it uses all the existing memberships in your system and doesn't require creating duplicate groups or new grouping types but is still very powerful. Also don't forget that Navigation is now a widget as well as a Template Control so you can display your signposting links anywhere on any page.

Loyalty through Birthdays

Wed, 09 Mar 2011 16:30:00 Z

Dan's last post about personalisation reminded me that the system says Happy Birthday in the account panel on the appropriate day to any logged in user - but there is a lot more you can do with date of birth information.

Let us know if you want us to create a grouping that is automatically populated every Sunday evening with all students whose birthday is in the following week. Just set up a list in Membership Admin and email the ID to helpdesk. You can then email the group each Monday with an email containing a voucher, or use that group as a guest list grouping for your entertainments that week.

If you have 10,000 students there will be about 200 people in the group each week so careful with your guest list estimates.

My birthday cake when I was 6.

Adding a Personal Touch

Mon, 28 Feb 2011 10:58:00 Z

A quick one for a Monday morning – you’ve probably all noticed that the ‘Account’ box (or ‘User Control Panel’) greets users with a ‘Good Morning/Afternoon/Evening Preferred Name’, so why not make use of that to make your pages more personal?

The Account/User Control Panel is probably present on most pages on your site (if it isn’t then you should think about putting it in – if only so users can Logout!), so wherever you are you’ve got two nuggets of information you can pull out to use elsewhere on a page.

(Note: the following assumes you’re using the jQuery library, though the principle should be clear enough if you’re using another/no library)

Your Name

So let’s say we’ve got a page that contains the sentence:

Don’t forget to subscribe to the MSL Blog

But I want it to address you personally I can check to see if you’re logged in and if so clone your name from that greeting and insert it into my sentence to give us:

Don’t forget to subscribe to the MSL Blog

Obviously if you're not logged in to this website those two sentences will look the same!

So how did we do that? Well first of all we need to add a span to our sentence where we want the name to be inserted, also in this case as it's the first word we'll wrap the word 'Don't' in it so we can correct the capitalisation.

<p><span class="name">Don't</span> forget to <a href="http://www.ukmsl.com/blogs/rss/msl/">subscribe to the MSL Blog</a></p>

Then we need the script to find the greeting if it exists and pull out the name part:

$(document).ready(function() {	
	checkLogin = $('.sidepanel.controlpanel'); if (checkLogin.length) {
	myGreeting = $('.sidepanel.controlpanel p').text();
	pattern = /(\bGood\W)?(\bmorning\W)?(\bafternoon\W)?(\bevening\W)?/g;
	myName = myGreeting.replace(pattern, "").slice(0, -1);
	$('span.name').empty().append(myName + ", don't");}
});

So just to run through line by line:

The first line checks we're logged in by looking for an object with class 'sidepanel' and 'controlpanel', if it's there it continues with the script
It creates a variable that contains the greeting line
It creates a regular expression pattern that will match the greeting part but not the name
We use that expression to replace the greeting part with just the user's name - we also remove the last character as that will be a trailing space the sentence includes.
It finds the span we'd previously defined, removes the contents then adds in the user's name along with the uncapitalised don't.

Take it further

It would be even simpler to pull the entire greeting rather then just the name, similarly you could use the same regular expression to match just the greeting part if you wanted to have a time of day specific greeting to any user.

In a future post I'll be looking at how you can build more heavily customised greetings (or any body of text) based upon demographics and membership groups.

20 Ways to improve voter turnout

Thu, 24 Feb 2011 16:25:00 Z

1. Look at last year’s voter demographics report.

Analyse last year’s voters by mode of study, year of study, department and nationality and use these figures to develop a strategy for any groups that are underrepresented. If English department students aren’t voting, make sure you set up a ballot station in the English Dept. If Postgrads aren’t voting, send a targeted email highlighting everything the SU has done for postgrads, if Chinese students aren’t voting, arrange a meeting with the Chinese Society etc.

2. Look at last year’s voters by hour report.

If your elections traditionally finish at five, but your analysis shows people usually vote in the evening, keep your ballots open until midnight.

3. Look at last year’s Election referring sites

Look at Google Analytics to see what drove people to the elections last year - Twitter, Facebook, University public website, University Student Portal/Intranet, Student Newspaper, Sabb Blogs etc. Have you made sure you have links from all those for this year’s election?
Think about email too - Union, University, Club and Society, E-commerce receipts . . .

4. Use the IP report to identify what computers your members voted from last year

If it shows that students voted from University public computers, see if they will let you change the screensaver to advertise your elections.

5. Ask people why they didn’t vote last year

A few weeks before the election send an email to everyone who is still a member of the SU who didn’t vote in last years’ election directing them to a survey (set it up with the MSL survey module) with the questions:

Why didn’t you vote last year?
- Not interested in the Union
- Not interested in the candidates
- Didn’t know about the election
- Other - open

What would make you vote in this year’s election?
- Open

Even if none of the responses give you ideas, the survey will be great advertising for this years’ election.

6. Targeted emails

Think about how you can explain the value of voting in elections to those who are 1st years, finalists, postgrads, have joined a club, haven’t joined a club, have been to an SU event, haven’t been to an event, have volunteered, haven’t volunteered etc.
Make a paragraph of text for each value and make groups that combine different values so each recipient gets an incredibly personalised email detailing their involvement with the SU. You can use this same technique to target news articles.

If that all seems like far too much work then at least match any parameters you have in your election e.g. email all Science Faculty students with who is standing for the Science Faculty rep.

7. Stakeholder marketing strategy

Have a strategy for every stakeholder group in the SU to make them feel involved with the process – Student staff, Full Time Staff, Course Reps, Club and Soc Committees, Course Reps. . . e.g:
-    Get bar staff to ask everyone if they have voted during the elections
-    Make sure course reps have it on the agenda of any meetings they have and encourage lecture announcements
-    Email Club committees during elections letting them know how many of their members have voted.

8. Utilise and encourage candidates

Take SMS details of candidates and text well done messages every time their position reaches a milestone number of votes. This is easier if you. . .

9. Put all candidates in a group

So you can contact them and run a demographics report on them so you can compare demographics of candidates compared to demographics of voters compared to demographics of your students. (We can put them in a group for you if you like – just let us know the election number and ID number of the group you want them to go in).

10. Help candidates with their manifestos

Rather than limit candidates to a few lines of text and a pdf download let them have free reign over their manifesto area and provide web training. Here’s an example of Warwick’s successful President candidate's manifesto this year.

11. Run a Referendum at the same time

Get some nice juicy referenda motion online at the same time so members have a chance to vote for immediate change as well as people.

12. Whopping big countdown on the front of your website before your elections

13. Facebook Interaction

Make sure you have a like button on your election and voting pages and ask voters to press it.

14. Mobile Site

Make a smartphone optimised skin for your elections area that recognises if someone is using a smartphone or tablet and changes the display accordingly. We have made these for Essex and Leeds this year. Let us know if you want one.

15. Target Non Voters

Make sure you email all non-voters halfway through your election.

16. Brand your site and use Pop Ups

Make sure you change the branding of your site to match your election design for the election period. if you are after something a bit more clever, we can build you a pop up that displays different information to people whether they have not voted, started voting but not finished or completed voting.

17. Use polling stations

We have a few SU’s trialling our new touchscreen Polling Station so grab a few touchscreen tills from your venue during the day and put them to use. A ballot station is a good advertisement that there is an election running and they are cool too.

18. Single Sign On

If you don’t currently use Shibboleth Single Sign On then lobby your University as it is much easier for students who haven’t been to the SU site before to vote if they are using the same login details they use for the University. You can find out if your University is part of the UK access management federation here.

19. Get your current Sabbs in these during the voting period

OK not very technical but at least it will make next year’s crop know what they are in for.

20. Reward voters and follow up!

Have a strategy for thanking voters. Whether it is free printer credits for the first 6000 voters (Leeds) or free entry to your election results party (Warwick). Maybe make your Graduation Ball half price for everyone who has joined a club, joined a society, volunteered, been to an event and voted in the primary election. This isn’t about bribes – it is about showing the interconnectedness of what the union does and the benefits of membership involvement. (though the whole concept of what makes ‘an involved and active student’ is for another post).

Most importantly, think of a ‘next step’ for everyone who has voted where they can get more involved in the SU. Use the results announcement as an opportunity to launch your new online feedback forum / council nominations / referenda motion requests / half-price on joining clubs and socs etc.

The Elections Checklist

Thu, 17 Feb 2011 18:32:00 Z

Just a quick one, as part of the Support Documentation updates we've written some (slightly more comprehensive) documentation on Elections - in places it gets a bit in depth (including the markup the Elections System pages generate for you web designers out there) but to help make it a bit easier to find the bits you need we've knocked up an Elections Checklist.

This runs through the basic steps you need to take when setting up an Election points you to the relevant section of the documentation at each stage. It also groups each stage by the part of the system you need to use (Elections Admin on the Website, the Membership Admin Application etc.).

Hopefully it'll make things a little easier for you whether you've set an Election up before or not and if you have a specific part of the process you can't quite understand you should be able to find what you need in the full documentation.

For those non-electioneers out there you can see the how the overall documentation is coming along via the usual Support link, or if you're looking for the old documentation (if there's something we haven't moved over yet) then you can still access that from the new documentation page.

Freshers Comparison 2009 2010

Thu, 03 Feb 2011 12:24:00 Z

So how are our clients doing with our system then? The following figures compare some key performance indicators for our 10 clients who had a live MSL system during Sep, Oct, Nov 2009, with the same months this academic year.

Now obviously there are lies, damn lies and statistics and it would be a bit simplistic to do straight inter SU benchmarking with these figures, but using them to show use of the system over time shows our clients getting more out of the system this year than last. The only figure that has gone down is number of tickets sold, but as income from tickets has gone up this suggests more SUs are selling freshers and season passes rather than individual event tickets.

You can draw your own conclusions from these figures but the highlights for me include total sales going up by 17% to over £315,000 per SU, a 19% rise in online transactions and a big rise in emails sent. The latter suggests that more and more clubs and societies are using the email functions of the system.

If you would like to see your own figures (and you are from one of the following SUs) please use the link below.

The Figures

Each of these figures shows the average number per MSL client for September, October and November.

KPI	Freshers 09	Freshers 10	% Rise
Individual members logging into website	6813	7607	12
Total number of logins	40795	43032	5
Individuals who attended at least 1 event	5613	5760	3
Individuals who received an email	26832	30891	15
Emails sent	357342	438158	23
Number of products sold*	2253	2581	15
Number of tickets sold	16986	15685	-8
Number of memberships sold	13239	14774	12
Total items sold	30329	32844	8
Value of products sold (£)	68271	86969	27
Value of tickets sold (£)	82534	86480	5
Value of memberships sold (£)	135636	151699	12
Total sold through system (£)	271361	316554	17
Online transactions	9508	11297	19
Total sold online (£)	206512	250188	21
% sold online compared to sold through tills	76	79	4
Page visits (recorded by Google Analytics)	1239000	1300000	5

*In MSL parlance a Product is an item sold that is not a Membership, Delivery or Ticket.

Cutting corners with newslist images

Fri, 21 Jan 2011 17:31:00 Z

This tutorial will show you how you can use CSS to style the shape of images in a newslist. To show you the effect we're aiming for here's a before and after screenshot of the NUS Connect news list we'll be playing with:

Here we've made the images circular but you could shape the images in any way or use the same method to watermark or brand images.

You can of course create images that are these shapes anyway and just upload them but the idea here is that with a few lines of CSS (and an optional line of script - we'll come on to him later) you can enable users who may not have access to image editing software to achieve this effect as well as having greater flexibility in how the same image is shaped in different newslists.

Step 1 - Creating your image mask

The first thing we need to do is create our image mask. My programme of choice in this situation is Adobe Fireworks but you can use whichever software you're most comfortable with.

Create an image of the same dimensions as the news list image (in our example above this is 100 x 80 pixels), create a new object or layer that fills your image and is the same colour as the background the image will sit on (in our case white).

Now delete from this layer whatever shape you would like your image to be. Essentially wherever you delete from this layer, the news image will show through. Here I've cut out a circle (the grey is just the Fireworks background, the white is my white layer and the checked layer is my hole):

You will need to save it as a .png file with your transparency set to Alpha transparency. If you choose no transparency (!) you'll get no hole and if you use a gif or choose index transparency you'll get a jagged, pixellated edge.

Step 2 - styling the news list

Now we have our image we just need a way to plonk it on top of the existing news image. You could use javascript to insert a new image element on top the existing image element but we've actually got enough in the existing newslist markup to achieve this jsut using CSS.

In the newslist markup is an element called <div class="news_item_hook">, it doesn't contain anything and is used to space and position the other elements in the news item in certain layouts. It could be that you're not using it at all in your news list styles or you may be using it in some but not in others.

In our example from NUS Connect it is being used to act as a spacer occupying the same space and position as the image element (this is its most common use - which is lucky for us!). If it's not being used you can just still style it in essentially the same way. What you are looking to do is have it the same height and width as the image, and in the same place.

The style attributes the news_item_hook element will definitely need are:

height: 80px; /* or whatever height your image is */

width: 100px; /* or whatever width your image is */

display: block;

It will also need its position attribute defining, this will either be absolute or relative:

If your news_image is postioned absolutely in the news list your hook is quite possibly being used already and will be positioned relatively.
If your news_image is positioned relatively you will want to position your hook absolutely, you will then also need to set your top and left attributes so that its position lines up with your news image.

It is important that your hook has a position attribute as we will also be setting its z-index which requires the position attribute to be set to relative, absolute or fixed.

Now that your hook is lined up with your image we just need to set the background of the hook to be our image mask (background: url(mask.png) top left no-repeat;) and then make it appear on top of (rather than underneath) the image (z-index:10; /*or whatever index is higher than that of the news_image if that has a z-index set).

Final bits

Hopefully that should've worked! You might need to tweak some of your styles to ensure the two element are positioned correctly but once they line up you should achieve a nice masking effect that allows you to apply any shape or image you like over every image in a newslist.

There is one limitation to this method which is that clicking the image no longer links to the article (the link is now covered up by our hook item which isn't a link). But you can get around this with a simple script to turn that element into a link. For those of you using jQuery something along the lines of:

$('.news .news_item').each(function() {

        var url = $(this).find('a').attr('href');

        $(this).find('.news_item_hook').wrap('<a href="' + url + '"></a>');

});

Would do the trick (where .news in this case is the class of the newslist container) allowing you to shape, brand or watermark your images leaving the existing links intact.

Take it further

Once you've got the hang of the basics you can start to do some pretty smart stuff with this using the automated classes on news items.

Use the item1, item2 classes to make a weekly top 5 list
Use the itemEven, itemOdd classes to play with symmetry or alternating shapes

Hopefully that was a useful little guide - let us know what you get up to with it!

Comparing Organisation Demographics

Tue, 11 Jan 2011 14:00:00 Z

Well that's a sexy title - but if you want to know whether you have more Postgrads in your Rugby Club or Football Club or more women in your Chess or Hill Walking Society then we have written the report for you (will be live from Thurs 13th Jan).

We have updated Demographic Reporting to make it easier to compare across different organisations as well as giving you the opportunity to remove parameters that you might not be using.

Go to 'Organisation Demographics Comparison' in your report site:

You can then select your parent organisation e.g 'Athletic Union', then select either all or individual organisations you want to compare. Next step is to choose the parameters you want to include:

Your report will then show you the comparison across your different organisations.

Top Tips:

It is a good idea to tidy up what parameters show in your reports at YOURADMINSITE/msl/unidata/uni_data_parameters.aspx. So if for instance you do not receive course data from your Uni you can untick the checkbox so this won't appear in your reports. You can always add it in at a later date when you do start receiving that data.

Remember you can now download a demographic report directly from Memberships Admin by right clicking on the organisation you wish to examine:

Site update

Mon, 13 Dec 2010 16:48:00 Z

Regular visitors to the site will probably have noticed we've been sprucing the old girl up over the past week or two, and with a bit of luck the changes we've made should make the site more useful to you - here's a bit of an overview:

The MSL Blog

You're looking at it! We'll be using this to showcase great things our clients are doing with the system and give some commentary and insight into work we're doing (including the impending development of the demo site)

The Homepage

The public page has a greater focus on system overview to let prospective clients know what we offer while the logged-in page is client-focused, highlighting the latest updates to our support content, blog and customer forums

Support

We've already made some changes to the support section and we plan to make more - there have been a lot of updates and improvements to the system over the past year but the documentation hasn't quite kept up. This is something we are rectifying and there are a few new pages beneath the support section that are worth noting:

Using Widgets in the Template - Get all the parameters and options you need to set up widgets in your template
Code Snippets - We'll be updating this section with more snippets of our own and client contributions through the forum, most recently we've added a guide to embedding your BUCS fixtures
Release Archive - a chronological list of the updates in each release, the fixes all correspond with the case numbers assigned by the MSL Helpdesk. To tie in with this we'll soon have a work in progress page that details the cases that will be included in the next release as well as page for upcoming work also tied into the helpdesk as a more dynamic alternative to the roadmap
We've also started afresh with customer forum, we think this is the best way for our clients to have collective input into new developments, as well as a great way for you to talk to and support each other. We'll be starting a thread in the next few weeks detailing our plans for some improvements to the eVoting system so you'll be able to let us know what you think and any great snippets, scripts or hacks that pop up will be added to the Code Snippets resource so feel free to share your handiwork!

Let us know what you think of the improvements so far, keep an eye on the forum, blog and support news to ensure you're not missing out, and if you're not already following us on twitter you can find us here (and hopefully we're already following you!)