Web Design & Development Portfolio

Sequence

Sequence - jQuery Slider Plugin

Sequence is a personal project I've been working on over the last few months. It is an open source jQuery slider plugin available on GitHub. Unlike any other slider plugin, a developer can write their own transitions using CSS3, meaning that the theme they create is unique to their site. No other slider plugin offers this capability and allows for an infinite number of themes.

I worked hard to make Sequence cross browser compatible. As it relies on CSS3, making it work in all browsers was a challenge because older browsers that are still in use today don't support CSS3. Where CSS3 wasn't supported, I implemented a graceful fallback that allows a slider to still function perfectly well.

Sequence also works on mobile devices and supports touch swiping to allow a user to navigate between frames.

Currently the plugin offers over 30 options for developers which allow them to extend its use and integrate custom functionality on their website.

The project is very much on going and I plan to continue supporting it with many more features in the future, as well as releasing lots of free themes that can be adapted by developers for their own sites.

Tigi Hair Reborn Product selector functionality Drop down menu

TIGI Hair Reborn

Having based their site on a technique I demonstrated in a blog tutorial, TIGI asked me to develop the JavaScript functionality of their site. I used a combination of custom JavaScript and third party jQuery plugins. I also assisted with the HTML & CSS for the desktop version of the site, and wrote a separate stylesheet specifically for the site when being viewed on an iPad.

The TIGI team and I implemented a parallax effect to make the users time on the site very much a unique experience, one that represented the product range.

Aside from this parallax effect, I integrated a slider that allows each section of the site to move left and right, displaying more content about each product. The slider is automatically scrolled to when a user clicks on a link for a particular slide and although the site consists of only one page, each slide has a unique URL, making it possible to link to any slide internally or externally. As a user moves between slides on the page, their history is recorded by the browser allowing use of the back button, much like a multi page web site.

I also developed the "Product Overview" -- allowing the user to see all of the products within the TIGI range, the navigation, as well as what we termed the "sticky" sections -- when a section automatically animates to its vertical centre so it best fits the users screen.

Finally, TIGI asked me to make it so that the site was optimised for the iPad in a way that would not detract from the desktop experience. Using JavaScript, I disabled the parallax effect -- which we deemed to be too performance heavy for the iPad -- and used media queries to serve a stylesheet specifically for the iPad whether it be held in landscape or portrait orientations.

Row Sham Bow Front Page Featured images animated via CSS3 Drop down menu

Row Sham Bow

We have the fortune of working with Ian on a very regular basis. Every single project is done in a timely fashion and is delivered exactly as is outlined. Beyond that, his development skills and expertise make him an invaluable part of our process. We absolutely offer our highest possible recommendation. Douglas Berger, R3M1X3D

R3M1X3D provided me with the design for Row Sham Bow's website and asked me to turn it into a WordPress theme that included some custom functionality.

The theme makes use of many of WordPress' in built features such as custom menus, links and widgets, as well as some third party plugins, such as the slider on the front page.

For the drop down navigation I used jQuery and made it so that the menus would expand as the content on the site grew.

On the "Game" pages, I used a small amount of CSS3 animation and transformation to make the screenshots animate when rolled over. In browsers that support 3D transforms, the screenshots appear to be on an angle. Browsers that don't support CSS3 display these images in a simpler way without the effects.

Devon Rest Front Page Wish you were here? - Sample from Devon Rest website Book today - Sample from Devon Rest website

Devon Rest

Devon Rest is a holiday home based in a popular holiday area in Devon, UK.

The client required a website that was informative with a look that resembled the family orientated and fun feeling of the resort.

In a competitive market, the client has been very impressed with the impact the website has made and it's ability to gain new custom.

Working with the client, we established that competition for Devon based holiday homes was very high. As a single holiday home -- only able to take on so many holiday makers a year -- getting a huge number of visitors to the site was not essential, but instead, creating a strong enough presence to make those that did visit convert into bookings.

The top of the front page resembles a postcard, with strong copy that sums up the experience of holidaying at Devon Rest. Along with a picture of inside the comfortable home and a button to take the visitor to a booking form that allows them to secure their chosen date of stay immediately.

Beyond the initial introduction to the holiday home and call to action, the website offers much more information about the home and destination. Large, JavaScript based pop-up boxes are used to present images that have been chosen to strengthen the copy.

5QuidHost

5QuidHost

"Ian provided top quality, thoughtful and high impact design work with outstanding attention to detail. His communication was excellent from the outset and showed a willingness to persevere until the perfect design was achieved. Obviously passionate about the work, a true professional. Wouldn't hesitate to recommend." Ronan Burnett, 5quidhost Ltd

I have been a customer of 5QuidHost for the last few years and was delighted to have the opportunity to redesign their website.

5QuidHost have the reputation of being friendly yet technically competent. Their previous web design however showed age and a redesign that emphasised these core principals was required.

The top of the front page introduces the services; it's features and benefits along with detailing some of the most purchased packages. These packages are displayed on cards that are stacked as if they are sitting behind each other; makin g good use of the limited space as well as making for easy comparison of the products. Call to actions are utilised to lead the customer to the process of ordering a package should they be ready to do so.

This initial introduction attempts to explain what the company is/does and how it can benefit a potential customer. Esentially, taking the customer from the point of knowing nothing about the company to purchasing a product. We took the view of using the rest of the website to reinforce what was explained in this section; building trust with the potential customer and explaining the company and its products in more detail.

Voxeo - Culture Corner

Voxeo Culture Corner

My role in producing Voxeo Culture Corner was to take the designs provided by R3M1X3D and implement them into a fully functional WordPress site.

The frontpage of the website utilises a slideshow plugin that can be easily customised by the client, should they wish to add/edit slides.

I made use of both WordPress' Pages and Posts features; the latter being used for Voxeo's blog.

Aside from the usual WordPress blog related features, the blog has multiple custom menus in the sidebar. These allow the client to update the sidebar with relevant links and images.

SuperSlow Zone

SuperSlow Zone

R3M1X3D provided me with the design to implement into WordPress. The site consisted of two page templates; front page and interior.

Throughout the site, each page makes use of custom fields which are used for including "find out more" information boxes as well as customer testimonials. Each page is able to support multiple custom fields.

jQuery is used for image rollovers as well as a small image rotator in the footer that displays logos of some of SuperSlow Zone's clients.