TPC Services Website

php html 5 css jquery design facebook sql Responsive


A local cleaning firm had been using a simple website for several years, but felt that it needed modernising. They already had web-hosting and were looking for a website which was mobile friendly and needed minimal maintenance.


There were several aspects to the design, primarily mobile friendly whilst also offering a good experience for non-mobile devices. It would have been possible to create the mobile friendly design from scratch, however there a lot of mobile friendly frameworks available, and having been previously impressed with Bootstrap's 'Mobile First' approach I opted to use Bootstrap.

A second key element was to present a modern, clean easy to navigate website, as the previous pages had contained information across multiple pages which could easily have been consolidated into a single page. It was decided that all pages would have the same template, with the exception of the homepage which had an image slider and a three column design which included a Facebook plugin.

One of the elements the company was keen to show where their client's testemonials, and so we agreed that we would have a styled box where we could include customer quotes.

A demonstration of the quote box used on the tpc page.


The cleaning firm's web-hosting had php support, so I broke the page down into sections, a generic header function that could be called to insert the header and navigation, and an equivalent footer function which meant that these could easily be updated and the changes would appear on all the pages.

Each page also had a narrower header picture relating to the content of the page, the cleaning firm had a large range of photos from jobs and these proved most useful for page headers as well as the image scroller on the first page.

The facebook element was inserted using Facebook's standard integration code, however, this was not responsive and as a result I wrote some jQuery to resize the element when the page size changed.


The live pages can be seen at

The front page of

On-going development

The next stage of development is an online 'eQuote' where people can upload pictures and a description of the job, using this staff at the cleaning firm can login and review the work before providing a quote to their client, this will save the company time on having to visit all sites for assessment.