Base template

v.4.0.0 - Updated 20/07/18 Archives

Template

Use the following code as a basis for any page/template built using this framework.

Further guidance on specific items are provided below

HTML

<!DOCTYPE html>
<html lang="en-GB" class="no-js">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />

	<title>...</title>
	<meta name="description" content="..." />

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

	<!-- DNS prefetch -->
	<link rel="dns-prefetch" href="https://cdn.aviva.com/" />

	<!-- Standard favicon -->
	<link rel="icon" type="image/ico" href="[ CDN Folder Path ]/images/favicon/favicon.ico" />

	<!-- Apple touch icon (also used by other devices eg Android) -->
	<link rel="apple-touch-icon" href="[ CDN Folder Path ]/images/favicon/apple-touch-icon.png" />

	<!-- MS tile image and colour -->
	<meta name="msapplication-TileImage" content="[ CDN Folder Path ]/images/favicon/aviva-windows-logo.png" />
	<meta name="msapplication-TileColor" content="#ffd900" />

	<!-- Canonical tag for SEO -->
	<link rel="canonical" href="[ Page URL ]" />

	<meta name="twitter:card" content="summary" />
	<meta name="twitter:site" content="@[ Twitter username ]" />
	<meta name="twitter:url" property="og:url" content="[ Page URL ]" />
	<meta name="twitter:title" property="og:title" content="[ Page title ]" />
	<meta name="twitter:description" property="og:description" content="[ Page description ]" />
	<meta name="twitter:image" property="og:image" content="[ Social card image ]" />

	<link media="all" href="[ CDN Folder Path ]/css/vendor/normalize/normalize.css" rel="stylesheet" />
	<!--[if !IE | gt IE 8]><!-->
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split2.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/customer/core-split.css" rel="stylesheet" />
	<!-- [ Insert extension and custom css for all browsers apart from IE8 here ]-->
	<!--<![endif]-->
	<!--[if IE 9]>
		<link media="all" href="[ CDN Folder Path ]/css/customer/ie9.css" rel="stylesheet" />
		<!-- [ Insert custom IE9 fixes here ]-->
	<![endif]-->
	<!--[if lte IE 8]>
		<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split1.css" rel="stylesheet" />
		<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split2.css" rel="stylesheet" />
		<link media="all" href="[ CDN Folder Path ]/css/customer/core-unmq-split.css" rel="stylesheet" />
		<!-- [ Insert extension and custom IE8 styles and fixes here ]-->
	<![endif]-->

	<link media="print" href="[ CDN Folder Path ]/css/customer/print.css" rel="stylesheet" />
	<!-- [ Insert custom print styles here ]-->

	<!--[if !IE | gt IE 8]><!-->
	<script async src="[ CDN Folder Path ]/js/vendor/core/modernizr.js"></script>
	<!--<![endif]-->

	<!--[if lte IE 8]>
		<script src="[ CDN Folder Path ]/js/vendor/core/html5shiv.js"></script>
		<script src="[ CDN Folder Path ]/js/vendor/core/html5shiv-printshiv.js"></script>
	<![endif]-->
</head>
<body itemscope itemtype="http://schema.org/WebSite">
	<meta itemprop="name" content="[ Website name ]" />
	<meta itemprop="url" content="[ Root website URL ]" />
	<div class="l-whole-page">
		[ Insert modules / elements here ]
	</div>
	<script async id="js-init" src="[ CDN Folder Path ]/js/init.js"></script>
</body>
</html>

DNS prefetch

To improve page performance the different domains that appear on every page of the site (ie. for analytics, media etc) should be included in dns prefetch tags. The minimum that should be included is cdn.aviva.com

For Aviva.co.uk the list of prefetch domains would be:

<!-- DNS prefetch -->
<link rel="dns-prefetch" href="https://cdn.aviva.com/" />
<link rel="dns-prefetch" href="https://cdn.tt.omtrdc.net/" />
<link rel="dns-prefetch" href="https://avivauk.tt.omtrdc.net/" />
<link rel="dns-prefetch" href="https://aviva.demdex.net/" />
<link rel="dns-prefetch" href="https://www.googleadservices.com/" />
<link rel="dns-prefetch" href="https://www.google.com/" />
<link rel="dns-prefetch" href="https://www.google.co.uk/" />