Stink are the film-arm of Stinkdigital; the redesign of their site had been an ongoing internal project for a year or so.
The previous site was made from 5 independent websites that shared a similar look and feel. The new website had to merge all these sites into one larger global site that represented all the different regions, and become the international home of Stink.
The design and build of the site is mobile-first; starting with the early designs using a narrow-viewport, and the CSS by default shows the mobile version, with breakpoints set to relayout content as the viewport becomes wider.
The site is rendered on the server and enhanced in the browser. It works as a single-page app but doesn’t make use of a JSON API like many. We opted to use a pjax-like method of loading the full site once, then subsequently loading the content of the next page as HTML and injecting it directly into the DOM. The following is a simplified version of the
model.parse method for the content:
Changes to these attributes (
contentHTML) are being watched for in their respective views and updated HTML is injected into the DOM when necessary.
On the server-side, the custom python back-end and CMS cache the site so that content is loaded lightening-fast.
Alex Coady is a freelance React / Redux developer based in London.
© Alex Coady 2016