DOCTYPE and HTML validation
We use the HTML 5 DOCTYPE. All pages should validate with 0 Errors. Nested HTML tags are indented by four spaces.
We use a fixed-width 12-column, 960px grid. Further grid details are in our Visual Identity.
Most on-campus site visitors use IE. Externally there is a 25% equal share to IE, Firefox, Chrome and Safari. Our older templates use
<meta http-equiv="X-UA-Compatible" content="IE=7" /> to force IE 7 mode for later versions of Internet Explorer.
Pages should basically render in IE 6 and information on the page should be available to visitors but full functionality on a par with more modern browsers is not a requirement.
Fuller information is on our Browser support statement.
CSS, Coding Style and CSS validation
We use Eric Meyer's Reset CSS and provide our own base CSS after it.
Our CSS coding standards, including selector targeting, naming and indentation are specified in CSS and Sass coding conventions.
Our main CSS should be in a single CSS file. Per-page CSS should go in separate CSS files named appropriately.
Almost 100% of external visitors to our site have a horizontal resolution (width) of greater than 1024px. The width of our pages is dictated by the Visual identity.
Two-thirds of external visitors to our site have a vertical resolution (height) of 800px or lower.
We don't currently capture how much of this area is used by the browser but we can assume that the initially visible area of our pages is significantly less than this, so pages should be designed accordingly using tools like Google Browser Size to ensure that the key aspects of the page are obvious to the visitor when the page is loaded. A viewport of 600px in height is a sensible guide.
Page loading time
In May 2010 the average web page takes up 320KB according to Google. We use this as a guideline for creating our pages.
We use the statistics tab of YSlow for evaluating the total size of served pages.
No page may take longer than 3x the average loading time of the University homepage. In November 2010 the median of ten loads of the homepage with webpagetest is 3.624s. The detailed results are here.
For testing the performance of pages off-campus we use http://www.webpagetest.org testing from Chicago, IL at DSL speed. The page load time data should be used in relative terms, rather than absolute, but the Waterfall image can be used to identify resources which are too large or load too early in the page lifecycle (such as large JS files which could be loaded at the end of the <body> rather than in the <head>).
In addition to the above, we follow several good practices:
- appropriate image optimisation
- appropriate delivery of CSS for the correct media
- disabling JS when not in use (such as CrazyEgg)
- ensuring that images, JS and HTML are loaded at appropriate times during the page lifecycle
Based on this information from the author of jQuery, we do not pack our JS.
All pages using the Foundation framework will set the
<meta http-equiv> tag to use the highest possible rendering mode available to that version of IE.
A thorough explanation of the meta-equiv tag options with regards to IE rendering is available here: http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e