Nation Wide

View Nation Wide

With a banking website I was expecting big things… but what I wasn’t expecting was the sheet number of media queries contained within the CSS file (I didn’t include them all here) – nor did I anticipate the large number of JS files that present.

Holy Javascript Batman

There are only 2 javascript files contained within the head, Modernizer and an app based JS file, however the horrific thing is that there are a further 48 JS script tags in the footer of the page.

That’s a whopping 50 http requests just for JS. That’s too much.

One particular JS files job is to set the media width variables for JS (see below)

nbs.config = {

    breakpoints: {
		mobile: 'mobile',
		smallTablet: 'smallTablet',
		tablet: 'tablet',
		desktop: 'desktop',
		largeDesktop: 'largeDesktop'
	},

	breakpointWidths: {
		mobile: 480,
		smallTablet: 599,
		tablet: 1022,
		desktop: 1280,
		largeDesktop: 5000
	}

};

Nation Wide Technical Details

Site Meta Tag

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

Media Queries

@-moz-viewport{width:device-width}@-ms-viewport{width:device-width}@-o-viewport{width:device-width}@viewport{width:device-width}@media screen and (min-width: 30em) and (max-width: 63.9375em) { }
@media only screen and (min-width: 30em) and (max-width: 63.9375em) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min--moz-device-pixel-ratio: 1.3), only screen and (min-width: 30em) and (max-width: 63.9375em) and (-o-min-device-pixel-ratio: 13 / 10), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min-device-pixel-ratio: 1.3), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min-resolution: 124dpi), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min-resolution: 1.3dppx) { }
@media only screen and (min-width: 30em) and (max-width: 63.9375em) and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min--moz-device-pixel-ratio: 1.3), only screen and (min-width: 30em) and (max-width: 63.9375em) and (-o-min-device-pixel-ratio: 13 / 10), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min-device-pixel-ratio: 1.3), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min-resolution: 124dpi), only screen and (min-width: 30em) and (max-width: 63.9375em) and (min-resolution: 1.3dppx) { }
@media screen and (min-width: 37.5em) and (max-width: 63.9375em) { }
@media screen and (min-width: 20em) { }
@media screen and (min-width: 20em) and (min-width: 20.0625em) { }
@media screen and (min-width: 30em) { }
@media screen and (min-width: 30em) and (min-width: 30.0625em) { }
@media screen and (min-width: 30em) and (min-width: 35.5em) { }
@media screen and (min-width: 30em) and (min-width: 35.5625em) { }
@media screen and (min-width: 37.5em) and (max-height: 400px) and (orientation: landscape) { }
@media screen and (min-width: 37.5em) and (min-width: 48em) { }
@media screen and (min-width: 37.5em) and (min-width: 48.0625em) { }
@media screen and (min-width: 37.5em) and (min-width: 41.25em) and (max-width: 46em) {
@media screen and (min-width: 50em) { }
@media screen and (min-width: 64em) { }
@media screen and (min-width: 64em) and (min-width: 64.0625em) { }
@media screen and (min-width: 70em) { }
@media screen and (min-width: 75em) { }