Fixing poor website design with GreaseMonkey

Some of the client work we do is with schools, working on projects to improve IT literacy of students through providing them with extranets they can use to start to learn about publishing information on the web, within the safety and security of a gated community of their friends and teachers. From this we also provide management information software and administrative capabilities for head teachers and other staff to ensure that they have full visibility and control of what happens.

As an aside, we were asked by one of these clients if there was something that could be done to improve the display on a site provided by the government for them. They were having real issues using it for it’s intended purpose and requests to improve it seemed to be falling on deaf ears.

An assessment of the site showed an interactive graphing application intended for presentations to staff and school governers that was crippled by several serious design flaws, making what was a very useful tool into something that was simply unusable. Below is a list of some of the main issues we found:

  • Approximately 50% of the screen was taken over with header information and portal logos
  • The remaining 50% of the screen was mainly filled with large titles for the particular graph selected, leaving a minimal amount of that graph actually showing on the page.
  • The overall viewport for the graph was too small to show the entire graph at any one time, causing heavy scrolling to be used in order to see the data plots and the reading on the axis.
  • Nested framesets caused further issues throughout. While framesets can still have their uses in very specific scenario’s, to nest them in this particular way was causing several issues that caused expected browser behaviours to fail.
  • Web standards for scrolling were broken and replaced with proprietary methods that were intended (yet failed) to improve display and unfortunately hindered the ability to use any browser zoom and full screen options to display more of the graph.

So what was the best way to quickly enable the site to become the valuable presentation tool that it could be? Enter the oddly named GreaseMonkey!

GreaseMonkey started life as an extension for Mozilla Firefox, one of the first wave of browsers that weren’t built in to operating systems to gain traction with the public due to it’s non-profit open architecture that allowed a community of programmers to be able to improve it collaboratively. GreaseMonkey essentially allowed a way of being able to execute JavaScript on a web page after it had loaded in order to change it’s look or functionality and is still available today, so if you are a Firefox user, we highly recommend you take a look at the GreaseMonkey Firefox Extension.

Our current web browser of choice is the free Google Chrome due to it’s overall speed and adaptability, and thankfully the ability to run GreaseMonkey scripts is already built into it, meaning we could use it for this particular issue. Installing GreaseMonkey scripts is a piece of cake too, just drag any script that follows the GreaseMonkey naming convention of name.user.js onto your Chrome browser and you will be asked if you would like to install it. We called our script report.user.js. You can always click the “wrench” icon and go to Tools, then Extensions to manage or delete them down the line.

You can learn everything you need to know about GreaseMonkey and how to write a GreaseMonkey script over at the GreaseMonkey wiki, however below is the script that was created to fix our particular problem to give you an idea of how it would go together. Website URL’s and names have been removed and replaced with XXX to protect the guilty!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// ==UserScript==
// @name          Improve report display for XXX
// @namespace     http://www.rndmr.com
// @description   Overwrites styling used on XXX and drastically increases the viewport for the graphs
// @homepage      http://www.rndmr.com
// @author        RNDMR Limited
// @icon          http://www.rndmr.com/favicon.png
// @include       https://www.XXX.org/Reserved.ReportViewerWebControl.axd?*
// @include       https://www.XXX.org/reportsandanalysis/ViewReport.aspx*
// ==/UserScript==
 
//If we are working on the main report page with associated controls and logos at the top
if (window.location == 'https://www.XXX.org/reportsandanalysis/ViewReport.aspx') {
 
	//kill header/logo area
	var header = document.getElementById('header');
	header.style.display = 'none';
 
	//kill report filtering options
	var reportfilter = document.getElementById('reportFilter');
	reportfilter.style.display = 'none';
 
	//kill export options in gold box
	var exportoptions = document.getElementById('_ctl0_ContentPlaceHolderContent_rvMain__ctl1');
	exportoptions.style.display = 'none';
 
	//Increase base size of report frame
	var reportframe = document.getElementById('ReportFrame_ctl0_ContentPlaceHolderContent_rvMain');
	reportframe.style.height = '1000px';
 
} else {
	//we are working with the actual report that is shown on the iframe
 
	//set report div height and report cell to auto since current setup overwrites this for some reason
	var innerreportdiv = document.getElementById('oReportDiv');
	innerreportdiv.style.height = 'auto';
 
	var reportcell = document.getElementById('oReportCell');
	reportcell.style.height = 'auto';
 
	//set all tables to auto height since they are also overwritten
	var tables = document.getElementsByTagName('table');
 
	for (i=0; i<tables.length; i++)
 
	{
	  tables[i].style.height = 'auto';
	  tables[i].style.overflow = 'auto';
	}
 
}

This entry was tagged , , , , , , , . Bookmark the permalink.


Click here to leave a reply