A movie of web design studio The Future Forward’s staff installing a neon sign—shaped like a hand giving the peace symbol—greets visitors to its new online platform. Designed to showcase its portfolio, the site makes use of large imagery, simple navigation and white space to show visitors the work that The Future Forward does and tell them about the studio. Multiple background videos are used on the homepage—the peace symbol is one viewable on desktop devices, but another film can be seen on mobile—and animated GIFs pepper the site, creating delightful interactions while visitors explore The Future Forward’s work in an easy-to-use navigation system. “We wanted to bring the user directly into our work without requiring extra clicks,” says Nick Hoag, creative partner at The Future Forward. “​We also wanted to make it easy to jump back to the projects section or the studio page at any time.”

The design studio built its site in HTML5 and CSS, using the open-source PHP CMS MODX; AJAX was utilized to seamlessly load pages. One challenge that The Future Forward faced in its site design was ensuring that all images would appear the same on the multitude of retina-display devices now available on the market. “We leveraged a server-side image compression and resizing library called phpThumb,” says Hoag. “This dynamically serves up the proper image size and quality based on both the device size and the device resolution being used to view the site.”