Working alongside a London based agency and a Brazilian technical team, the brief for the project was both complex and slightly unusual. The brief included the proviso that the site could not use a database, but also did not need a CMS. With these unusual requirements in place, I was given 3 layouts for mobile, tablet and desktop and had the brief to turn these designs into a working reality that had pixel perfect layouts based on the three designs. The system had to be private behind an API driven medical login system, and work over all modern browsers, including IE9.
After chatting to the team it was decided to build the site to be fluid and responsive, rather than adaptive at break points which in turn meant a host of challenges based on the 'pixel perfect' requirement I had been given. With some of the copy not being finalised with legal, this in turn meant a challenge in providing often complex shapes that housed text to be designed and implemented without the final text provided. Other challenges included the non-database driven site that ultimately had a host of text that needed implementing, and keeping all this neatly organised in files to be easily maintainable and editable as new text and copy changes were given. A final challenge, after the build of all the pages, included the search mechanism that needed implementing, that searched design orientated copy layouts for copy text only.
The site was built on a bespoke PHP build, not using any off the shelf templating system, and no database was utilised. jQuery was heavily used to deal with not only interactive parts but also some complex space filling code that was needed due to lack of copy early on, and the responsive nature of the site. It was decided early on to leverage the power of SVG's on the site, and these were implemented and adapted via code as needs be throughout the site. The login functionality utilised medicalservices.com.br API, as well as using CURL to pass through information through Proxy servers as needed, and the video play back was done through a pro-Vimeo account as to restrict playback on certain websites only. All the code was run through the pre-processor Gulp, combining and minifying SASS files, and allowing me to use ES6 by running it through Babel, whilst also ensuring code consistency through the use of .jscs and .jshint files.