- CSS animations/transitions/transforms
- Web Performance
- Browser support & vendor prefixes
- NodeJS toolchain
- The JavaScript DOM-api (instead of jQuery)
- Keep the number of HTTP requests to a minimum
- Compress images as much as possible without visible image noise. PNG VS JPEG. With tools such as Tinypng
- On the initial load only use JavaScript to add event listeners
- Load the scripts last, so text and images show up while scripts are loading
- For smooth CSS-animations, only animate position, scale, rotaion and opacity
- How Browsers Work
When using Web Fonts keep in mind that users might not download the font because of bandwith issues, so make sure the fallback looks good. Design a version which looks good with the fallback version, then make sure the Web Font version also looks good.
Technology such as WebGL or new options in CSS can be used, but you must make sure that it has a built in fallback for mobile and legacy browsers.
You can use IE conditional comments to load JavaScript only in IE
<!--[if lte IE 9]>
<script src="ie-fallback.js"></script>
<![endif]-->
- HTML5 rocks for lots of articles about HTML5 (by Google)
- Can I use... for browser support
- Smashing Magazine: The Guide To CSS Animation
- Book: High Performance Web Sites
- Book: Even Faster Web Sites
- Book: High Performance Browser Networking
- Book: JavaScript: The Good Parts
- Most of the following examples are Node-based tools. If you haven't used Node before, go to http://nodejs.org/ and get started. Most likely it will change your life. Also, if you prefer tools such as Grunt, Gulp or other, many of the tools below have an associated plugin.*
- Image-min to minify images.
- Html-minifier to minify HTML.
- Clean-css to minify CSS.
- UglifyJS to minify Javascript.
Validate your banner using Page Speed Insights. This Chrome plugin analyses your page and gives you greate improvement suggestions.
Obviously. devtools.chrome.com. #networkTab #emulation #timeline
#Accessibility
Making content accessible to everyone is encouraged. Good accessibility can help people with disabilities (e.g. blindness and low vision, hearing loss, learning disabilities and limited movement) perceive content in a meaningful way.