Web

Coding standards

Core Skills

Web engineers are expected to be self-directed in skill acquisition on these subjects, in addition to the shared core skills.

Browser support

Unless otherwise requested by a client:

Includes

Put your JavaScript includes at the end of your HTML document, before the </body> tag, ensuring that the page looks acceptable before the scripts load. If you are transforming and managing the document in a capacity where you don't want it to be seen until the changes are made, implement a pre-JavaScript loading state. Don't ever let the user see the page "build," unless you're prepared with loading bars, spinners, etc.

Progressive enhancement & graceful degradation

If you can do something with CSS instead of with JavaScript or images, do it.

CSS solutions can and should be used when you can degrade the design competently for browsers that don't support them. Gradients should degrade to appropriate solid colors, and shadows and rounded corners should always be for visual flair and not functional necessity. If an effect is absolutely needed in all renderings, whether due to the nature of the design or a client's desires, be prepared to build something a bit less elegant to enable it.

When building web applications and mobile websites you almost never have to consider a "what if JavaScript is disabled" situation, since most apps/sites will require JavaScript at their very cores. There may be cases where a site must be visible without JavaScript, though, typically in the case of an SEO-focused marketing site, so be prepared to build sites that use JavaScript for niceties rather than loading the content you need indexed. You can sometimes use _escaped_fragment_ to build your app in a way that can serve static HTML snapshots (read more), but this won't necessarily work for every layout.

Miscellaneous

When possible, use icon fonts or SVG images to account for the increasingly resolution-independent mobile web. If you have to work with rasterized imagery, use spritemaps to combat images loading slowly on hover states, minimize HTTP requests, and generally eliminate the need for pre-loading. Be prepared to build spritemaps at multiple DPIs, and ensure that when one gets swapped out for another (like via a media query), the graphics don't shift around. Work with the design team to get the assets in the format you need, if you're having trouble manipulating the PSDs.

Be wary of CSS3 font inclusion when they aren't "for the web" fonts. Cross-browser line heights will be a nightmare. If possible, convince a client or designer not to use a desktop font (ex. use Arial/Helvetica, but NOT HelveticaNeue), preferably a Web Font from services like Google Fonts.