Responsibilities
- GIT Branching: Allow backup of code and work on multiple work streams.
- CSS3: Utilising advance features such as gradients, animations etc
- jQuery: Working with JSON feeds, animations and building web applications
- Mobile responsive: Developing mobile pages that can render across all screens on desktop, mobiles and smart phones
- Browser compatibility: Internet Explorer 6/7, Firefox, Safari, Opera
- Accessibility: Clear descriptive alt and title tags, with low coding
- Search engine optimisation (SEO): Clean simple coded pages with calls to external CSS/Javascript. Clear use of metadata and content and optimised layout.
- Work collaboratively with the product owners, designers and commercial partners to translate requirements into technical solutions.
- Work to the highest standards of front-end web development with respect to adherence to W3C compliant code and UK accessibility requirements.
High profile projects
Responsive international site
Whole international site developed for mobile devices. Supporting all major mobile operating systems such as IOS, Android and Blackberry and Windows.
Smartphone homepage
Hoempage for Smartphone developed for mobile devices. Includes sliding menu and
Supporting all major mobile operating systems such as IOS, Android and Blackberry and Windows.
iPhone 5 for launch day
I was responsible for the content pages on the launch day of Apple iPhone 5. I was trusted with this high profile project after working on other high profile business critical projects and delivering on targets.
The page contains much functionality like the ability to search for tariffs from a built in JSON feed to small animation scrollers and video play lists. I also introduced a mobile template that can be reused for any other content page and can be triggered depending on the users device.
Web application
Mobile games
The O2 Mobile games page allows users to browse EA games available for their mobile device. I worked closely with the Backend developers to integrate a JSON feed into the page. The Feed connects through to jQuery UI autocomplete to allow guessing of the mobile device the user is searching for.
Mixed in with some great jQuery animations to give a pleasent scrolling and sliding effect to guide the user to different sections of the page.
Animation pages
January Sale
January sale page was handcoded by me within 2 days to show the latest phons at low cut prices. The page provides a carousel with background animation.
This page was developed to be content friendly. The editor can add/remove in any number of handsets and the thumbnails will adjust automatically.
The background will also move at the correct speed and location depending on how many handsets are added.
Coming soon
This page utilises jQuery animations to scale phones and fade in and out information. The page also acts as a carousel allowing jQuery slide-in and slide-out to hide and show different categories.
The page was image free (apart from the mobile phones). All shadows, gradients and even multiple borders used advanced CSS3 with acceptable downgrading for all browsers.
There is even a clean non-js version as shown in the screenshot below!
Coming soon page
Coming soon page on non Javascript browsers
James Bond
I wanted to experiment with CSS3 animations. Although a new feature that not widely supported I wanted to make use of various browsers built in animation and test how it can degrade. CSS3 Animations is also supported on many smart phones and does not rely on Javascript.
Priority Sports
The page utilises jQuery animations to mimic the television advert of the brand halo flashing and then uncovering a silhouette of a phone.
By utilising the advance features of jQuery and CSS3 I was able to create animations that worked across all devices that are supported. The animations will also degrade successfully
Leave a Reply