Jim Al-Khalili | Virtual Jungle

Case study: Jim Al-Khalili

A full redesign and build from scratch transferring the domains away from squarespace to a Virtual Jungle server

grass border image
Screenshot of a wedding website inside a laptop frame Screenshot of a wedding website inside a mobile frame

Project overview

  • HTML,
  • SCSS,
  • PHP,
  • JQuery,
  • Ajax,
  • Twitter API,
  • SQLi,

Dynamic content generated by Ajax requests, secure login area, dynamic blog with WYSIWYG editor and full CRUD functionality, Email account setup, Search & filter functionality

The brief:

The client wanted a website that enabled him to add new content without breaking the layout of the site and in general, a website that was fully responsive and easy to navigate through.

Previously the site had been hosted on Squarespace, which proved to be more hassle in the long run when it came to updating content. Additionally the overall layout and style was inconsistent and needed updating.

The process:

The first step was to design the website from scratch, including colour schemes and layout. The primary focus here was maintaining a professional feel but also ensuring visitors could easily navigate to key areas of the site, such as peer-reviewed academic papers and current tv and radio shows.

Once the client was happy with the final designs it was a case of transferring these designs to code. The majority of the content on all pages is generated dynamically from a secure database and output with ajax requests to either load more or through pagination.

The next step was to update the A records for the domain and point the domain to the new host servers and away from Squarespace. Additionally, as this was a website with considerable previous and current traffic it’s essential that the .htaccess file is set up correctly to manage any redirects required.

Next, the secure login system and blog were set up to allow the client to log in and create, view, update and delete blog posts. To improve the clients’ ability to format the posts a WYSIWYG editor was linked via API calls to allow for considerably more control over the final output of the posts.

Finally, once the client was happy with the final product, which was previewed using the ‘Client demo site’, I put the site live and set up several email accounts to help manage the contact form submissions.

The outcome:

Screenshot of Jim Al-Khalili's 'about' page Screenshot of Jim Al-Khalili's 'academic' page Screenshot of Jim Al-Khalili's 'tv' page Screenshot of Jim Al-Khalili's 'science communication' page