Tag Archives: compass

Project Nightjar and responsive web design

Responsive web design is about how to deal with the multitude of different shaped screens that people are now using. Although it has some interesting technological aspects, it’s the philosophy that I find appealing – the idea of designing for the smallest and most limited form first, and then looking at how it can be progressively changed as the capabilities improve, in a continuous way rather than targeting specific devices. The idea is that this tends to be more successful than the other way around – i.e. thinking about the best case first, and taking stuff away as capabilities reduce.

For the design for Project Nightjar, we needed something colourful and accessible, and something we can build as we add games and other experiments later on. I decided to use compass, starting with fffunction’s tool sassaparilla for building the front end and django for the framework. This has meant that I’ve been able to quickly put together a site that the researchers can edit themselves, and that works on all devices.

Here are some quick screenshots, as the site isn’t public yet:

2013.07.10-15.03.28 2013.07.10-15.03.43


One of the things that caught me out was how to stop mobile browsers trying to display the site as a normal web page, it turns out they report the screen width differently unless you specifically tell them not to with:

    <meta name="viewport" content="width=device-width">