The Forecaster Interactive

The Forecaster Interactive seen across four viewports
The Forecaster Interactive across four different breakpoints

View The Forecaster Interactive

The Forecaster is a wonderful website that brings the traditional look and feel of a broadsheet newspaper and replicates it on the web. They’ve done well to replicate this across all viewports, starting mobile first and moving right the way across to a @media (min-width: 1580px) {}.

They’re using a Grunt task to compile their CSS, the give away being the code at the top of the file.

* File concatatenated by grunt @ 10.10.2015 13:41

It looks as though there is some server side browser sniffing going on as the


tag contains the following when I view source

<body class="home blog lang-en chrome osx">


The CSS is requested through a http request and so is one js file,


, however the remainder of the javascript inline instead. The JS is mainly for the layout, using Isotope for the positioning of the articles and SlabText for the big typography headlines. There is also a nice use of lazy load on the images/animatied gifs.

They use Eventie.js to make managing events on IE8 a little easier. Fancybox is used to control the image hovers on the site.

I love the simplicity of the media queries on this site. 3 basic media queries starting at 940px and capping at 1580px. The approach of building your site mobile first and only adding media queries when the layout breaks is the best approach, and should be the way you tackle your next project.

The Forecaster Interactive Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Media Queries

@media (min-width: 940px) { }

@media (min-width: 1180px) { }

@media (min-width: 1580px) { }

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.