theblog.

To coincide with TPO’s changes to their Membership scheme I was tasked with redesigning the Join Scheme page to include information for the three different levels of membership – Membership, Registration Only and Residential Leasehold Management.

To keep the content concise I have used a jquery tabbed box so as not to overwhelm the user with too much content at once.

New TPO Join Scheme page

Perhaps the toughest task I have had to undertake to date was converting the TPO paper application form into an online equivalent (with nearly 300 separate fields), accepting uploaded documents and linking with Sage Pay in order to accept the payment of those applying for membership.

Online application form

I broke the form down into eight separate steps to make the join up process more manageable and used the Sage Pay Form Kit to integrate details from the form with data Sage Pay requires in order to bill for the correct amount. Once completed, a confirmation email is sent to the Membership department at The Property Ombudsman along with the uploaded documents.

Join Scheme confirm page

Having recently teamed up with JWDC, a creative design agency based in Spalding, Lincolnshire, to be on hand to update and amend their clients’ websites, it was decided by JWDC’s Creative Director, Jake Whiteley, that their own website was in need of a major overhaul.

Designed by Jake, this temporary solution is the bridge between their old website that ‘has been left to fester for a while‘ and a bigger, better, contemporary website that showcases their portfolio of work to the same high standards that their clients’ work demands.

I have built this site using plain old xHTML and CSS, keeping as much of the structure of the old site as was possible, but have included a new carousel – an amended version of the Nivo Slider – and real fonts (FF Dax Web Pro Regular) from Typekit.

JWDC's refreshed home page

This website redesign is only a stop-gap solution until an even more modern and functional website is fully designed, built and launched. Watch this space!

Finally! My ‘little’ project to create a complete search function that allows people to find those agents who are members of The Property Ombudsman scheme is complete. The search function involves two databases and is put together with MySQL, PHP and CSS.

The Find a Member section allows you to search for a registered agent by trading name, city and/or postcode. Once the search box has been completed, you are taken to the search results page which displays all the agents that match the criteria. You then have the option to search again or to refine your search – breaking the search down into the individual disciplines such as sales, lettings, commercial, etc.

Search results page for TPO Find a Member. First result displays 'Survey Report' button.

The ‘simple’ search functionality got slightly more complicated when I had to incorporate a review section for those agents that had been surveyed. This required the displaying of a button (only for those that had a survey) and a further page that displayed the cummulative results of all the surveys as well as the comments that were attached to those individual surveys in a simple and concise manner.

Survey Results page showing cummulative scores and customer reviews.

In addition to the Find a Member section, I had to create a search facility that allowed people to find Agents that have registered with TPO scheme to cover them for the minimum legal requirement but aren’t full members. Confusing I know!

For this I relied upon jquery – once I had retrieved the results from the database I used jquery to show the results by letter (or numbers) with a menu at the top of the results to allow the user to select a letter of the alphabet that an agent’s name would start with.

Once a letter is selected I used another simple open/close jquery function that allowed the agent’s details to be displayed if the company name was clicked.

Registered Only agents can be found with a separate search.

Both search options are easy to use and all the data is displayed clearly and concisely. I may add further functionality to the search fields, such as suggested search, to further enhance the usability of the Find a Member section.

ZRI Music home page

Today sees the launch of the ZRI Music website – a simple website designed by Ralph Hawkins of Moregood and built by Markers using WordPress and incorporating the Yahoo! WebPlayer.

I was asked by Ciaran Duke of Pharmabase Marketing to produce a design for his soon-to-be revamped website.

Website design for Pharmabase Marketing

The design wasn’t chosen but that is what I came up with anyway…

To improve the online presence for Woking locksmith, Roy Puttock, I have created a new website to promote his company’s lock opening, lock fitting and lock repair services.

The new website is to be used as a means of generating business mainly through the use of a pop-up ‘estimates’ form that captures the customer’s information and prospective lock related requirement without them having to leave any page.

As well as featuring a lot of SEO for locks and locksmithing, the website is also being used to cross-promote Roy’s lock and door handles website.

Heritage Locksmiths website

Content for iPhone

www.heritagelocksmiths.co.uk for the iPhone

As an added extra – and more of an experimentation – I wanted to make use of the fact you can create different content specifically for the iPhone.

Seeing as you may not be near your computer when you require a locksmith (and most people have their phone at the ready) I wanted to make it obvious that you can call any phone number simply by tapping the phone number on the iPhone screen.

Code

To create content specifically for the iPhone first add the following to the very top of your web page:

<?php
$browser = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
if ($browser == true){
$browser = 'iphone';
}
?>

Then add this to your CSS and put all your iPhone-only styling inside it:

@media screen and (max-device-width: 480px){
 /* iPhone CSS goes here */
}

See this website for 10+ code snippets for iPhone. They know more about it than I do!

As part of a recent project I was working on I wanted to display in a simple and visual way a series of marks out of ten – or a score as a percentage.

Percentage bars created using PHP and CSS

I had a quick look around the Internet but couldn’t quite find what I was after (it was a very quick search) so I thought about having a go at it myself – and it worked!

I already had the score out of ten coming from the database so I just needed to turn that into a percentage – basically multiply the figure by ten.

$krating = ($row['knowledge']*10);

To create the bars I first created a simple div (width 150px) with a grey background. I then created another div inside the background div and set the width (as %) of that box to the value I created from my simple multiplication.

<div class="score" style="width:' . $krating . '%"></div>

I simply styled the inner box with CSS and now I have my very own dynamic percentage bar. I impressed myself.

Heritage Handles is an online retailer of door furniture and architectural ironmongery. The website also stocks home furnishings such as bathroom accessories and lighting.

The original website was very dated and required a lot of work to bring it up to date from both a design perspective and to improve it’s search engine results performance.

The homepage was lacking any real purpose, there were no clear messages or instructions for the visitor, the duplicated menu was unnecessary and the all-important product images were too far down the page. It also featured a photo of the shop that didn’t exist anymore. All in all, the first impression of the homepage was that it didn’t look like a modern ecommerce store and was preventing people from delving further into the site.

Original Heritage Handles home page

Redesign

In order to bring the website up to date, the first change I made was to the width of the page – I increased this by 28% to allow me to include more information and to fill more of the screen. I took inspiration for the colour scheme from the original shop facia, giving it a heritage feel as the name suggests.

With the increased space I added a large slider that will display the main messages and products that we want the visitor to see. Beneath the slider I have separated the products into three popular categories – the images make it clear as to what the website is about and below that are deep links to the individual pages making it easier to go directly to the content. The text links are also an aid for SEO.

Redesigned Heritage Handles home page

As well as door furniture and home furnishings, a lighting section has been added to the website. I have given this prominent space and positioning to help establish the range and it will hopefully be an area of the website that we will be expanding and improving all the time.

Below the lighting section is a best sellers scroller that includes quick links to the best selling products – this is dynamic but can be controlled, if necessary, using the admin interface.

At the foot of the page is a lot more text, the purpose of this is to increase keywords, allows additional deep links but also helps explain the purpose of the site and the knowledge and experience that the owner of the website, Roy Puttock, has.

I have to thank Charlotte at www.superwebs.co.uk for making my designs a reality.

One of the first things I wanted to do when taking on the task of increasing the visits and sales of Babyface – designers of children’s bedding and fabric accessories – was to improve the search engine ranking of individual pages and products – beginning with their popular fabric alphabet letters.

In order to improve the performance of the page I needed to increase the number of keywords on the page but I also wanted to make the page useful for the visitor. By adding a jCarousel that showed the letters of the alphabet in different fabrics I could include a large amount of images in a small space.

Web page for fabric letters with carousel

So, not only have I increased the number of images on the page (and thereby increased the number of alt and title tags), but I have also included the jQuery lightbox plugin that allows the visitor to view the letters in more detail – and again uses keyword alt and title tags.

jQuery Lightbox to enlarge letters

Both of these uses of jQuery plugins means that Babyface now ranks highly for all searches that include fabric letters, nursery letters, fabric alphabet letters, etc and the number of letters sold per month has increased by over 400%.