Swiss Air | Examples | Responsive Web Design

Swiss Air

Swiss Air Responsive Website
Swiss Air across four different breakpoints

View Swiss Air

Swiss Air is an airline website built with progressive enhancement in mind.  A lovely responsive experience that works without javascript, however it does have some performance improvements that could be made.

There are 4 separate CSS file http requests (none of which are hidden in conditional comments) which means that they could be saving 3 http requests.

There are also 6 separate JS file requests, again some of them could be concatenated to save the additional http requests.

While there are some strange additional http requests they do include both Modernizr and Respond.js to help with providing a better experience for the user.

Require.JS loads in the relevant JS files and modules when required for each page/section, an example implementation from the homepage below.

var require = {
    paths: {
        jquery: "lib/util/loaded-jquery",
        moment: "vendor/moment"
    },
    shim: {
        "app/plugins": {
            deps: ["jquery"]
        },
        "app/modules": {
            deps: ["jquery", "app/plugins"]
        }
    }
};

Swiss Air Technical Details

Site Meta Tag

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

Media Queries

@media only screen and (max-width: 400px) { }
@media only screen and (max-width: 520px) { }
@media only screen and (max-width: 750px) { }
@media only screen and (max-width: 850px) { }
@media only screen and (max-width: 1020px) { }
@media (max-width: 1050px) { }
@media (min-width: 1051px) { }

Plugins used on Swiss Air

Subscribe to our Newsletter

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