Dengvaxia
Brief
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.
Challenges
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.
Build notes
As with all builds I approached this one from the ground up, firstly taking a holistic view of the site as a whole, recognising and compartmentalising common components and design rules, that I then adapted and coded in via the base CSS rule files. This then allowed me to use simple BEM naming conventions throughout the code ensuring I had consistency between pages and objects.
Knowing that copy was likely to be altered during the build, and circular shapes and filled objects needed to house the said text with fairly accurate padding and margin weights, I came up with a clever solution for adapting text length and height through the use of javascript and adapting filled object sizes and SVG paths based on how much room text provided. This included keeping semantically correct code that could adapt over three fairly unique designs for three breakpoints, while at the same time being responsive in-between.
Not having a database to worry about actually freed up my build somewhat, and I created a bespoke templating build from scratch that kept a clean separation of concerns both in file structure and file naming mechanisms.
Once the core templates and had been built and designed, I then coded up each page individually, ensuring semantic code was used that could be easily manipulated via css for the responsive work, before finally placing in the images. Some fairly unique pages, such as the FAQ and Search Result page were given extra time due to their unique nature and complex interaction that was required, while at the same time cross browser testing and was carried out during and after the build.
Technology used
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.
Dengvaxia
A really interesting and unique project that?had almost pixel perfect requirements, that ultimately led to one of the best structured systems to date.?Beautiful designs tied with great imagery led to a website that worked?really fast over even slow network connections, while still serving up the beautiful nature of the site.
Complex, interesting and?unique,?but ultimately a very rewarding?project.