Whiteboard's all-or-nothing approach to responsive web design

Whiteboard is a creative agency based in Chattanooga, Tennessee that aims to create meaningful experiences with deep values - an attitude reflected in its own website.

"The challenging pieces were moving the mobile experience forward beyond the average, taking on more experimental elements such as the background animation loop and blur filtering. These types of experimental polish will no doubt be controversial: they're not suitable for every device," technology mainman Jonathan Cutrell and development director Taylor Jones tell us. "We adopt them with the belief that there's a balance between transferability of the medium and the impact that has on the message as it relates to design. If a message is degraded because the design fails to perform well on your device, we'd rather the site fail than give a lessened experience."

Quirks and constraints

Ideally, all elements would scale and perform as expected; under certain conditions, platforms have their quirks. "A motion picture is intended to be experienced within certain constraints, depending on the medium it's delivered through. It's hard to hook a Blu-ray player up to a CRT TV. But you can use very different HDMI-based devices for consumption of that medium. Web experiences can have similar constraints based on technological capabilities, while being transferable across multiple devices. Respecting and employing these is part of our responsive design process.

"As iOS devices don't support automatically streaming background video, we tried several solutions for a moving background. We settled on a throwback to the animated GIF: the only solution allowing motion to continue while the user scrolls."

Words: Jordan Moore

This article originally appeared in net magazine issue 247.

Liked this? Read these!

• Our favourite web fonts - and they don't cost a penny
• Brilliant Wordpress tutorial selection
• Create a perfect mood board with these pro tips

Seen an amazing responsive site? Tell us in the comments!