The Forecaster Interactive
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.
* DO NOT EDIT THIS 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
body
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,
jquery-migrate.min.js?ver=1.2.1
, 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) { }
