Tillotts
Brief
Tillotts Pharmaceutical required a completely new website that operated over all devices and incorporated the Tillotts Services arm of the business. With multiple user level access to the backend, and a multi-lingual side effect forms, over 45 pages were needed to be programmed up, with a user friendly mobile accessible menu system.
As the requirements were specced out and discussions had, I also had the remit to develop an event booking system that allowed private and public events.
Challenges
Two core challenges were first evident to me - the multi-lingual aspect on only one element of the site, as well as the private and public event booking system. Deciding on a bespoke multi-lingual system that allowed an admin to alter the translations for the form elements through a simple backend form freed me up from integrating a 3rd part language system that I decided would be overkill for a simple form translation.
The page layout system offered up its own challenges, as the pages were ultimately divided up into 3 core sections, but laid out from bottom up dependant on user viewport width and height. Being able to adapt not only to mobiles and tablets, but also to user screen height to layout core information blocks appropriately was also essential in the build.
Build notes
I decided on a Wordpress backend, which allowed me to quickly program up the custom post types for events, and start work on the categorisation of the posts on the site. I also knew that down the line I could compartmentalise the backend based on user levels and user roles. Utilising flex box for the responsive layout of the 3 core sections on page layout then allowed me to work on the layout mechanisms for the bottom up content blocks. I ultimately decided to go for a bespoke javascript module that inspected users viewports and make choices based on the results from the calls.
Taking all the page designs and recognising core design choices was key when such a large variety of pages were in the build. After deciding on the key concepts I programmed up the stylesheets before working on the shortcodes that users could use to implement some of the core non-wordpress-native aspects, such as buttons and modal windows.
Technology used
The site as built using Wordpress as the CMS, utilising the popular plugin 'Advanced Custom Fields' to design user-manageable page choices. The jQuery library was used to aid in all the javascript work on the site, and to ensure cross browser compatibility to often complex functional calls.
The CSS was managed through the use of SASS, and all the JS and SASS files were run through the pre-processor Gulp, not only minifying and combining files, but also allowing me the user of ES6 by running the JS through Babel. I used .jscs and .jshint files during the pre-processing to ensure code consistency and complexity.
Tillotts
A large project form start to finish,?the key to the build was to ensure data consistency and in recognising core?design elements to ensure consistency on the final website look. A great fun design?that had to be professional, user accessible and data driven, the final website?works well over a host of devices?and ultimately provides the user with the information they require in a short succinct way.
Large, fun and?rewarding.