#BRADLEY DYER CODING STANDARDS AND GUIDELINES
Valid code is code that meets the W3C's standards. You can check your code at any time using the W3C validator.
It is important that you understand how browsers work - this will allow you to understand the ‘why’ of best practice. We encourage you to watch this video.
Well formed code is neat, correctly aligned and indented. Indent your code using 4 spaces (not tabs). Comment your code as required.
To write semantically correct HTML, you need to select the correct HTML element to mark-up the content. In other words, this means using a <table> to mark-up tabulated content, using a <ul> to mark-up an unordered list, and so on.
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Pears</li>
<li>Peaches</li>
</u>
Not:
<p>Apples<br>Oranges<br>Pears<br>Peaches</p>
Semantically correct HTML is instrumental in creating SEO compliant and accessible web pages.
In practical terms, it’s easiest to break the concept of progressive enhancement into different layers, each one building on the previous to improve the experience of interacting with the website.
The first layer is clean, semantic HTML. This allows text-based, speech-based, antiquated and robotic user-agents to navigate the content of your website properly.
The second layer is CSS. This allows visual-based user-agents to display or alter the visual representation of your website’s content.
The third layer is JavaScript. This allows user-agents that are capable of using it to provide your users with enhanced usability.
html and php page names should be all lowercase and hyphenated.
search-results.html
Your css classes and id's should be logically named.
.user-error{background:red;}
not
.red-box{background:red;}
ID's should be unique and used once only per page.
Images should be logically named using hyphens between words.
mr-john-smith-ceo-galliard.jpg
When creating a number of images for the same use, consider naming them by what they are, followed by a unique identifier.
developments-slider-st-johns.jpg
developments-slider-st-venns.jpg
developments-slider-st-thomas.jpg
A series of IE conditional comments apply the relevant IE-specific classes to the html tag. This provides one method of specifying CSS fixes for specific legacy versions of IE.
When using the conditional classes technique, applying classes to the html element has several benefits:
- It avoids a file blocking issue discovered by Stoyan Stefanov and Markus Leptien.
- It avoids the need for an empty comment that also fixes the above issue.
- It can improve the clarity of code in multi-developer teams.
After implimenting the conditional comments, you can target Internet Explorer browsers in your css as follows:
footer {color:#505050;}
.lt-ie7 footer {color:#333;} /* ie6 */
.ie7 footer {color:#000;} /* ie7 */
.ie8 footer {color:#fff;} /* ie8 */
.ie9 footer {color:#aaa;} /* ie9 */
Allows you to target browsers with JavaScript disabled (.no-js) or enabled (.js).
After implimenting the conditional comments, you can target browsers with javaScrip enabled/disabled in your css as follows:
.js footer {color:#000;} /* javaScript enabled */
.no-js footer {color:#fff;} /* javaScript disabled */
More here: Avoiding the FOUC.
As recommended by the HTML5 spec (4.2.5.5 Specifying the document's character encoding), add your charset declaration early (before any ASCII art ;) to avoid a potential encoding-related security issue in IE. It should come in the first 1024 bytes.
The charset should also come before the <title> tag, due to potential XSS vectors.
This makes sure the latest version of IE is used in versions of IE that contain multiple rendering engines. Even if a site visitor is using IE8 or IE9, it's possible that they're not using the latest rendering engine their browser contains. To fix this, we use:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
The meta tag tells the IE rendering engine it should use the latest, or edge, version of the IE rendering environment.
This meta tag ensures that anyone browsing your site in IE is treated to the best possible user experience that their browser can offer.
This line breaks validation. To avoid this edge case issue it is recommended that you remove this line and use the .htaccess (or other server config) to send these headers instead. You also might want to read Validating: X-UA-Compatible.
If you are serving your site on a non-standard port, you will need to set this header on the server-side. This is because the IE preference option 'Display intranet sites in Compatibility View' is checked by default.
There are a few different options that you can use with the viewport meta tag. You can find out more in the Apple developer docs.
<meta name="viewport" content="width=device-width, initial-scale=1">
The shortcut icons should be put in the root directory of your site. The favicon and touch icons should be provided by the designer, but they are often overlooked, so feel free to prod the designer if they are not supplied.
Modernizr is a JavaScript library which adds classes to the html element based on the results of feature testing. Modernizr also ensures that all browsers can make use of HTML5 elements (as it includes the HTML5 Shiv). This allows you to target parts of your CSS and JavaScript based on the features supported by a browser.
For example, for browsers that don't support multiple background images, you could write fallback CSS as follows to specify a different background image:
.intro-wrapper{
background:url(img_tree.gif),url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
}
.no-multiplebgs .intro-wrapper{background:url(img_tree_and_flower.jpg) 0 0 no-repeat #333);}
In general, in order to keep page load times to a minimum, it's best to call any JavaScript at the end of the page because if a script is slow to load from an external server it may cause the whole page to hang. That said, the Modernizr script needs to run before the browser begins rendering the page, so that browsers lacking support for some of the new HTML5 elements are able to handle them properly. Therefore the Modernizr script is the only JavaScript file synchronously loaded at the top of the document.
The standard project header include includes a prompt to users of legacy browsers to upgrade their browser. The message will appear at the top of the page. It uses cookies (see main.js and plugins.js) to show the message once only per user session.
You are using an outdated browser. Please upgrade your browser to improve your experience.
The Google CDN (Content Delivery Network) version of the jQuery JavaScript library is referenced towards the bottom of the page using a protocol-independent path. A local fallback of jQuery is included for rare instances when the CDN version might not be available, and to facilitate offline development.
Regardless of which JavaScript library you choose to use, it is well worth the time and effort to look up and reference the Google CDN version. Our users may already have this version cached in their browsers, and Google's CDN is likely to deliver the asset faster than our server.
Finally, an optimized version of the latest Google Analytics tracking code is included at the bottom of each html page.
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X', 'auto');
ga('send', 'pageview');
</script>
You will need to change UA-XXXXX-X to the client's site ID to configure their analytics.
More information:
The designer will provide any non-standard fonts that are required. Fonts should be placed in the fonts folder and imported by adding the following CSS to styles.css (Substitute the correct fonts):
/* fonts ------------------------------------------------------------------ */
@font-face{
font-family:"BaskervilleMTW01-Roman";
src:url("/fonts/1c82c893-6f0a-4afd-9e72-b9bcfc9f52ae.eot?#iefix");
src:url("/fonts/1c82c893-6f0a-4afd-9e72-b9bcfc9f52ae.eot?#iefix") format("eot"),url("/fonts/e693baea-eb63-411f-a311-2a2e421ef6f2.woff") format("woff"),url("/fonts/98b07788-69ae-4704-a8e1-31d61e8ff83b.ttf") format("truetype"),url("/fonts/60054d7a-8ca2-4320-8c5d-3fc9aed09e58.svg#60054d7a-8ca2-4320-8c5d-3fc9aed09e58") format("svg");
}
/* fonts ------------------------------------------------------------ [END] */
We use font-awsome to display retina ready icons on our web sites. You can place Font Awesome icons just about anywhere with the <i> tag.
Designers that want to create their own icon set can follow this tutorial.
Please comment all your CSS with an apropriate opening and closing comment, as well as additional comments within the opening / closing comment if required. This will help when maintaining the codebase down the line.
/* map-canvas ---------------------------------------------------------------- */
#contact-map-canvas {
height: 450px;
margin: 0;
padding: 0;
border:1px solid #ccc;
}
/* contact-map-info-window */
.contact-map-info-window{width:300px;}
/* map-canvas ---------------------------------------------------------- [END] */
styles.css includes Media Queries to build up your mobile styles for wider/narrower viewports bassed on the bootstrap3 breakpoints.
styles.css is well commented, but if you have any questions, just ask.
We use jQuery. If you are unfamiliar with jQuery, a good place to start learning is the jQuery learning center.
Our scripts are organised as follows:
main.js
This file can be used to contain or reference your site/app JavaScript code. For larger projects, you can make use of a JavaScript module loader, like Require.js, to load any other scripts you need to run.
plugins.js
This file can be used to contain all your plugins, such as jQuery plugins and other 3rd party scripts.
Read more about jQuery plugin authoring
Vendor
This directory can be used to contain all 3rd party library code such as bootstrap and polyfiller.
Minified versions of the latest jQuery and Modernizr libraries are included by default. You may wish to create your own custom Modernizr build.
An essential part of good web design and development is SEO. Valid, well-structured code is the key to ensuring that content is properly indexed by search engines.
Read Google’s SEO starter guide and developer guidelines. You should also be aware of image sitemaps and follow Google’s image publishing guidelines.
Use semantic Mark-up that's readable and logical when JavaScript and CSS are disabled (progressive enhancement). All page content must be in HTML; avoid iframes or JavaScript for loading initial indexable content.
All links should be to HTML destinations.
<a href="/shelf/jordan/page/2">
Instead of:
<a href="javascript:loadPage(2);">
This lets the page get indexed correctly by search engines and allows users to open the page in new tabs and windows.
The title tag should feature target keywords for the unique page. The titles should be unique to each page. Headings (h1,h2,etc) should form an outline of the document and represent the most important keywords for that page. URLs should be human-readable with primary target keywords present in them:
http://domain.com/mens-shoes/basketball/jordan/jordan-mens-ajf-6-basketball-shoe/
vs
http://domain.com/ecomm.cfm?view=prod&prodId=23425
Consider adding a sitemap to compliment organic SEO.
(If required) Use schema to add semantic meaning to mark-up. Read SEO Benefits For Real Estate Companies Using Schema.org
More at schema.org
To set up a new analytics account for a client:
-
Set up a GMAIL account using the following format:
- First Name: northwest
- Last Name: village
- Email: northwestvillage@gmail.com
- Password: nwvillage!!!
-
Set up an analytics account:
- (same as Google Mail login)
- Email: northwestvillage@gmail.com
- Password: nwvillage!!!
-
Update the analytics tracking code on the client's site.
As with SEO, valid, well-structured code is the key to ensuring that content is made accessible to those with limited web capabilities.
Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities.
When sites are sympathetically designed, developed and edited, all users can have equal access to information and functionality. For example, when a site is coded with semantically meaningful HTML, with textual equivalents provided for images and with links named meaningfully, this helps blind users using text-to-speech software and/or text-to-Braille hardware.
When text and images are large and/or enlargeable, it is easier for users with poor sight to read and understand the content.
When links are underlined (or otherwise differentiated) as well as coloured, this ensures that colour blind users will be able to notice them.
When clickable links and areas are large, this helps users who cannot control a mouse with precision.
When pages are coded so that users can navigate by means of the keyboard alone, or a single switch access device alone, this helps users who cannot use a mouse or even a standard keyboard (Provide skip links).
When videos are closed captioned or a sign language version is available, deaf and hard-of-hearing users can understand the video.
When flashing effects are avoided or made optional, users prone to seizures caused by these effects are not put at risk. And when content is written in plain language and illustrated with instructional diagrams and animations, users with dyslexia and learning difficulties are better able to understand the content.
When sites are sympathetically built and maintained, all of these users can be accommodated without decreasing the usability of the site for non-disabled users.
All Bradley Dyer developers should be familiar with The W3C checklist of checkpoints for accessibility and strive to comply with them.
All Bradley Dyer developers should be familiar with the WCAG Accessibility Guidelines
For enterprise level web-builds, the completed template set could be independently audited by an external body such as the RNIB.
Some nice articles and other accessibility resources can be found at Web AIM.
If required, you could consider using cookie control, or cookie concent.
Test as you go, ensuring that your code is valid, well formed (neatly structured), well commented and progressively enhanced and meets our SEO and Accessibility standards. Also ensure that all components (sliders, calculaters, forms, maps, etc) work as expected.
Once you have finished writing the code base, you should perform a thorough cross browser / cross device check to ensure that there are no display issues.
If there's time, it's a good idea to have one of the other developers test your code for you.
Project managers should perform a final test to satisfy themselves that the clients brief has been met before showing the site to the client for sign off.
Some good stuff here... The Ultimate Website Launch Checklist