Skip to content

Portfolio

The following are a number of recent projects on which I have worked. All had a major problem to fix and I will be explaining my solutions to fix them with and techniques used to implement them.
The Capital Radio London Guide

capitalradio.co.uk

I worked as lead front-end developer on this website rebrand project and created all base HTML/CSS templates as well as site wide JavaScript (using the jQuery library).

  • London guide application – “one of the best examples of progressive enhancement I’ve ever seen”
  • All main data marked up with Microformats for added semantic information
  • Site sponsorship is better supported and able to be implemented without a server deploy
  • HTML structure has made for vastly improved SEO on all pages
  • Traffic and travel application – an interesting take on showing the contents of a boring travel feed

Capital Radio
Heart orientation map

heart.co.uk – intermediate pages

In the near future the heart netwok is going to be re-branded and gain new stations. To support this strategy we required some orientation information for current listeners and a method to prepare the search engines of the plans.

  • Advanced CSS used to provide full experience for good browsers and a slightly scaled down experience for IE users, progressive CSS
  • Front-end techniques used to ensure fast page loads
  • ‘Perfect SEO’ for the inner orientation pages

Heart
Xfm - on air section

xfm.co.uk

The first rebrand project I worked on. All front-end templates created by myself. Progressive enhancement used through out the site when JavaScript is disabled. It was the first rebrand project to be done in house by the expanded web team and was one of the most intrinsic designs undertaken by GCap.

Not being part of the design stage the accessibility of the site isn’t as good as it could be but I educated the design team of these issues and they have been taken into effect on future projects.
Xfm
Code sample from our web standards cased templates

LSBU Web standards implementation

The project also saw the start of my push towards using web standards for our website templates. By doing this our site automatically became:

  • In line with current best practice in web design.
  • Complaint to WCAG accessibility guidelines so to be accessible for a larger user base.
  • Displayed consistently in all web browsers due to the use of valid XHTML and CSS.
  • Usable for people using devices other than a web browser to access it with.
  • Ranked higher on search engines

The use of web standards also made it easier to implement emerging technologies such as RSS, blogs and microformats that allowed for easy access for both users and machines to our data. This has substantially raised the profile of the University site.
The LSBU online prospectus - with highlighted key information and microformats.

Online prospectus

Problem

Students would search for a course from our homepage, read the course information but leave the site without reading further about the University.

Solution

  • Providing contextual links to further information found throughout our site, such as to our fees site, recruitment events, information on how to apply and entry requirements.
  • Promoting key facts to provide a quick summary of each course – enough to allow a user the ability to decide if a course is for them or not.
  • Proving a quick question box at the bottom of each course page. This will not only provide users with a feeling of us being their to help them but also allow for simple gathering of user data for the faculties.

www.lsbu.ac.uk/prospectivestudents/courses/search.shtml