Aber LINKS Website – Font Size and Google Search Box

I am currently doing a User Centred Design and Human Computer Interaction module at university, for which the assignment requires us to create a website that is user friendly and conforms to many design standards. These standards have been created to ensure that a website is as accessible as possible to all users, especially catering for disabled users. We are allowed to use websites that we have already created for this assignment, so I had the choice of using my personal site, the Aber LINKS site, or my CS25010 games website. I chose to use the Aber LINKS site, as it would benefit most from the improvements researched and implemented in this assignment, as well as giving the marker something physically real to mark full of real data with a real purpose, rather than junk data.

The first thing I did was make a bar at the top of the page for the accessibility options, and the search bar. I may move the search bar to the right end of the nav bar later on.

The Google search bar took a bit of fiddling and 3-4 different implementations before I found one that worked. This one is quite simple, and takes only the code pasted below to take your search term and search Google for that term within your site.

<form id="searchForm" method="get" action="http://www.google.com/search">

<table border="0" cellpadding="0">
	<tr>
		<td>
		<input type="text" name="q" size="25"
		 maxlength="255" value="Search Site.." onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
		<input id="searchButton" type="submit" value="Search" />
		</td>
	</tr>
	<tr>
		<td align="center" style="font-size:75%">
			<input type="hidden"  name="sitesearch" value="aber-links.co.uk" checked="checked" />
		</td>
	</tr>
</table>
</form>

This code makes a search box with a default  value that is cleared by JavaScript if the text box is clicked or focused (e.g by tabbing to it) on.

 

Font Size

Although not essential for our assignment, I thought it would be relevant to include a facility to allow users to change the size of the main text, to allow them to read text easier if they have sight or other problems.

I learnt about most of the information and code here.

I swapped out the hyperlink text for a “+” and “-” image that I created in Fireworks, and the following code calls the JavaScript to tell it to decrease or increase the font size:

<a href="javascript:changeFontSize(1)"><img src="images/fontPlus.png" alt="Increase Font Size" /></a>
<a href="javascript:changeFontSize(-1)"><img src="images/fontMinus.png" alt="Decrease Font Size" /></a>

The JavaScript called will then add or subtract one from the current paragraph size value:

<script type="text/javascript">
<!--
function changeFontSize(inc)
{
  var p = document.getElementsByTagName('p');
  for(n=0; n<p.length; n++) {
    if(p[n].style.fontSize) {
       var size = parseInt(p[n].style.fontSize.replace("px", ""));
    } else {
       var size = 20;
    }
    p[n].style.fontSize = size+inc + 'px';
   }
}
-->
</script>

And that’s about it. A bit of styling later, and all is looking well. The font changes size when the buttons are clicked, allowing the user to select a size suitable for them, without destroying the overall layout of the page.

Matt