Bagnall Software Consultants Ltd

Web Development

  • HTML, XHTML, HTML5, XML, CSS, CSS3
  • Web Based Mapping (Google Earth API, Google Maps API, MultiMap API, MS Live Maps)
  • ASP, VBScript, PHP
  • Adobe Photoshop and Dreamweaver
  • Full, database driven, web-based applications
  • AJAX, DHTML using JavaScript, jQuery, BBC Glow
  • Animation
  • VRML
  • SQL Server, MySQL
  • SEO (Search Engine Optimisation)
  • Content Management Solutions

From the simplest, single page store front, to full database driven, web-based applications, for example for resource scheduling or workflow, we can create or renew your website. You may have your own design inspirations or may want us to come up with standout, eye catching designs.

If you want to have more control of your website, we can write content management solutions, tailored to your needs, allowing you to upload and crop images, change the textual content of the pages and even the structure of the navigation.

Here is a small sample of web sites, You can see the kind of work we are capable of. Click on the thumbnail to visit the actual site.



[ - ]

sjdesign.co.uk

Spike Jackson Garden Design

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.


[ - ]

transformersuniverse.com

Transformers Universe

For The upcoming 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


[ - ]

jagex.com

Jagex Main Page

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


[ - ]

www.8realms.com

Jagex 8Realms Website

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


[ - ]

www.stellardawn.com

Jagex Stellar Dawn PR Site

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


[ - ]

RuneScape Cards Store Locator

RuneScape Store Locator

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


[ - ]

jagex achievements

Jagex Achievements Page

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


[ - ]

waroflegends.com

Jagex War of Legends

It was possible to build the War of Legends site very quickly thanks in part to the re-usable elements along with the enormous hard work of all the teams involved.

The War of Legends site incorporates a Forum feature which I have worked on extensively.

I also implemented the news pages and account management page.

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


[ - ]

HTML Newsletters

Jagex HTML Neswletters

For Jagex I tackled the thorny issue of HTML Newsletters.

From receipt of Photoshop designs through to pages which can be submitted to Lyris and will be compatible with the top email clients such as Outlook, Hotmail, gMail and Yahoo, across browsers.

Work undertaken at Jagex Ltd.
Involvement: HTML,CSS


[ - ]

Paul Gittins Notary Public

paulgittins.co.uk

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.

[ - ]

photo360

Photo360

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.

[ - ]

airlines.bagnall.co.uk

The World's Most Comprehensive List of the World's Airlines

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.


[ - ]

zestforlifefitness.co.uk

Zest for Life Fitness

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.


[ - ]

badminton.bagnall.co.uk

Badminton Club Site

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.