Portfolio

A double opt in subscription system for a magazine newsletter, hosted on LAMP (Linux, Apache, MySQL and PHP), html/plain text email confirmation and newsletters.

Utilising HTML, JavaScript, DHTML, CSS, PHP, MySQL database design.

Lead client side developer for this website for a new Jagex game. Here we have started using CSS3 though browser support is still not solid, so we have to provide CSS3 features which can degrade gracefully on non CSS3 (or poorly supported CSS3) browsers.

Again, the reusability I advocated from the start of working for Jagex has been beneficial in contributing to delivering this website on time to a tight schedule and relatively bug-free at launch.

Work undertaken at Jagex Ltd. Involvement: Lead Client Side Developer, XHTML, CSS, CSS3, DHTML, JavaScript, jQuery, Modernizr

Server side scripting in JavaScript utilising jQuery libraries and the jQuery accordion. Data are retrieved on demand using ajax, so cutting the bandwidth demand on the servers and providing a smoother user experience. Note, the page will also function without JavaScript. To view this page you would need a free Jagex account.

Work undertaken at Jagex Ltd.
Involvement: XHTML,CSS,DHTML,JavaScript,Ajax,jQuery

This site utilizes ajax and jQuery to provide alphabetic lists of world airlines from a MySQL database. On selection of an individual iFrame, it switches from using Ajax so that the adsense adverts may be pertinent to the airline in question. I was responsible for site design in Photoshop.

Utilising XHTML, Ajax, jQuery, MySQL, ASP, JavaScript, DHTML and CSS.

Utilising a dark background and light text this site with an original graphic for the title serves as a meeting place for club members.

Also provides an email management system for emailing the opt in membership.

Utilising ASP, JavaScript and CSS.

The main site of an organisation has to be well executed, especially for a web based company such as Jagex Ltd.

Here, several controls on the page combine to make navigation simple and fluid. Tabs, buttons, filters and page controls.

When the browser is JavaScript enabled, every click is handled without a full page refresh. jQuery implementation provides subtle animation - not overdone.

The page has examples of some of the reusable items I created and encouraged the use of, for example the filter controls on the "All Games" page.

Work undertaken at Jagex Ltd.
Involvement: XHTML,CSS,DHTML,JavaScript,jQuery

In this design and implementation, we tried to utilise a fresh and modern style to convey approachability and not be bogged down with the intricadies of the legal world, after all, that's what our client is sought for and his clients pay for his expertise.

We advised against using legal stereotypes such as images of stuffy documents and tried to encourage the use of emotive photographs such as those on the "Making a Will" page. Unfortunately, the client insisted on images of legal documents, but we followed his wishes against our advice and reached a compromise.

The contact page has animated, context specific, expanding sections to lessen the impact of what might otherwise be a large, daunting form to fill. The essentials were to get the main contact details down for replies, but also to try and gather some data to allow the client to assess the needs of the their potential client before contacting them.

The menu utilises a subtle fade animation.

Utilising XHTML, JavaScript, jQuery, BBC Glow, CSS, PHP.

Lead client side developer for this brand new, high profile promotional site for an upcoming game release - Stellar Dawn. This needed to be a standout website, so in addition to the static designs, I added jQuery fade effects for the mouse-over states.

This site had to be delivered to short timescales and was delivered on time. The reusablilty I promoted in other projects once again reaped benefits in getting this project complete on time and to a high standard.

Work undertaken at Jagex Ltd.
Involvement: Lead Client Side Developer,XHTML,CSS,DHTML,JavaScript,jQuery

A website which has a compact form factor according to the client’s requirements and designed jointly by the client and myself to have rich graphical content. On entering the site, the visitor is presented with a white, letterbox shape which fills with a colourful floral scene, after which the menus are presented for navigation.

On less capable browsers like IE, users have a perfectly functional and pleasant experience with this site, but if they want to have a richer, more elegant experience, they need to start making more informed choices of browser. The intention is to have fluid navigation throughout the site with subtle transforms (on more capable browsers such as Chrome, Firefox, Opera and Safari). The right menu for example morphs from a wide section with content, to a narrow section when more space is given over to the gallery and other pages which require more space.

Not writing JS fallbacks for IE is by no means laziness, since as you will see, the site remains functional even when JavaScript is disabled. This thoughtfulness is not that of a lazy person.

The images are loaded stage by stage using prioritised image loading with the next most likely images from the users' possible navigation being loaded in preference to images which are more than a click away. The whole site is a single page navigated by JavaScript, but it is still navigable and functional with JavaScript disabled, thanks to the server side scripting which takes over in this event. This should also aid search engine spiders in spidering the site and keeping it search engine optimised.

The projects section is a horizontal accordion and each pane in the accordion provides 6 thumbnail images which expand to fill the frame when clicked, providing a small gallery of the project. When the cross is clicked, the larger image slips smoothly away, back to it’s corresponding thumbnail position.

The main image on each page has a subtle transitition where the background drops out of focus, leaving a small square or rectangle in focus.

Because of the rich photographic content, this site is not intended for a mobile audience, nevertheless, the form factor adapts when viewed on an iPad or a mobile device, preferably in a landscape view.

This is the third generation of this website for the same client.

This page opens with geolocation by IP so that your country should be the one displayed by default. Making use of jQuery to animate when changing country selection. The text on the page is styled to look engraved or etched by use of CSS3 text shadow for applying highlight and shadow together.

Work undertaken at Jagex Ltd.
Involvement: XHTML,CSS,DHTML,JavaScript,jQuery

For the now abandoned Jagex MMO browser based game, I was part of the team that developed an “acqusition” site which was intended to gather the details of interested parties. On entry to the site, the visitor is presented with a short video clip and Flash presentation (Non-flash users see a simple HTML version of the page). the flash presentation is a paralax scene driven by the relative cursor position horizontally within the scene. My task was to provide a responsive form to be hosted in the page in an iframe which would scale to fit the browser and therefore the Flash dimensions. This form was made responsive by writing bespoke JavaScript which modifies the proportions and relative position of the the elements in the form along with font sizes, line-height, padding and margins. The resultant messages on form submit also had to be responsive and left or right justified based on the visitors selection of a faction. I also created the “share page” which the user arrives at after validating their email address.

Work undertaken at Jagex Ltd.
Involvement: HTML5,CSS3,CSS,DHTML,JavaScript,jQuery,responsive form layout

Zest for Life Fitness includes a unique body mass index calculator. This BMI calculator, unlike other online body mass index calculators, allows you to enter data in imperial or metric units. A lot of thought has gone into the ease of use of the user interface for this tool. Written in bespoke javaScript. I was responsible for the design on this project.

Utilising HTML, ASP, JavaScript, DHTML and CSS.