Website Deployment Checklist

Description:

This is my take on a website deployment checklist. Feel free to adapt it to your own projects. Hopefully this will act as a good stating point for you. If I've missed anything, please add your suggestions to the comments. Thanks!

• Proofread, check Spelling and Grammar (Yes, again)
• Have you ensured all HTML5 is semantically correct
• Have you checked all links to ensure no broken links exist?
  W3C Link Checker
• Have you evaluated all small images for base64 encoding?
  http://www.base64-image.de/
  https://www.nccgroup.com/en/blog/2014/06/image-optimisation-tips-no-8-be-aware-of-base64-encoding-but-approach-with-caution%E2%80%A6/
• Have you double checked all browser prefixes in CSS?
  http://cssprefixer.appspot.com/
• Have you linted everything?
  http://www.jslint.com/
  http://validator.w3.org/
  http://csslint.net/
• If using a CSS preprocessor (SASS/Compass, LESS, Stylus, etc.), have you switched to production mode from development mode?
• Have you compressed and concatenated your CSS?
  https://incident57.com/codekit/
  http://gruntjs.com/
• Have you compressed and concatenated your JavaScript?
  https://incident57.com/codekit/
  http://gruntjs.com/
• Did you build custom error pages (e.g. 404 page)?
  http://www.searchenginejournal.com/importance-of-404-error-page-top-404-designed-pages/64899/
• Have you tested usability / accessibility?
  http://wave.webaim.org/
• Have you verified basic site accessibility / usability with CSS & JavaScript disabled?
• Have you tried to navigate the site using screen-reader software to verify usability / accessibility?
  http://www.nvaccess.org/
  http://www.freedomscientific.com/Products/Blindness/Jaws
• Have you ensured images have appropriate ALT tags?
  http://www.feedthebot.com/tools/alt/
• Have you updated your version control system (GIT, subversion, etc.) with the latest changes prior to deployment?
  http://git-scm.com/
• Have you added the favicon?
  http://blog.teamtreehouse.com/how-to-make-a-favicon
• Have you added the necessary Meta Data?
  https://support.google.com/webmasters/answer/79812?hl=en
• Have you added the necessary code for analytics (e.g. Google Analytics)?
• Have you added the site map document?
  https://www.xml-sitemaps.com/
• Have you added the robots document?
  http://www.robotstxt.org/robotstxt.html

Basic HTML5 page template

Description:

This is my basic HTML5 page template. I hope it will help you get started when building your own web sites. If you have any suggestions for improvement or think I may have missed something, please feel free to let me know in the comments.

Notes:

Lines 2 - 5 add a class to the HTML element if the browser is IE and if it's earlier than IE 9, it will add a class for the version (IE 8, IE 7 or IE 6). This will allow you to target HTML at IE specifically and if needed, a specific version of IE.

Lines 8 - 12 are the standard head elements for any page including the basic meta tags for character set, site description, and author. You may add more depending on you requirements of course, but these are considered the bare minimum for best practice.

Line 15 is the meta for view port control on mobile deceives. It prevents mobile deceives, like smart phones, from auto-scaling your site down to fit the screen. This is particularly important for responsive sites. This version of the tag sets the initial scale to 1:1, but allows the user to zoom from there.

Lines 17 - 19 are the links to the CSS style-sheets. The first link (line 18) is to the Google CDN for normalize.css, my choice for CSS reset. You may want to host it directly on your site, or you may prefer a different CSS reset, if you do, it should go here. Line 19 points to your local style sheet. Don't forget to update the path.

lines 21 - 23 add the HTML5 Shiv for basic HTML5 compatibility for IE9 and earlier.

Lines 25 - 31 are for your favicons. You should update all the paths to point to your favicons. Line 26 is for your sites favicon as used by the browser.

Lines 28 through 31 are for Apple touch icons. If someone adds a link to your site to the homepage on their iOS device, it will use one of these icons (based on screen resolution). You will need to adjust the paths to point to your icons.

Lines 37 - 41 are the JavaScript links. All JavaScript links should be at the bottom of the page, just before the ending body tag. This ensures that all HTML elements are loaded before the JavaScript tries to manipulate them.

Line 40 links to the jQuery CDN on Google. Make sure that you get the right version of jQuery for your needs. Line 41 tests for the presence of jQuery (should be found if it was successfully download from the CDN). If jQuery is not found (CDN failed to load) it will add the link that points to your local copy of jQuery. Ensure you have the right version number and change the path to point to your local copy of jQuery.

Of course if you don't need jQuery, you can remove lines 40 and 41. If you have other jQuery libraries (angular.js, respond.js, etc.), this is where you should place them on the page.

Code:

1:  <!DOCTYPE html>  
2:  <!--[if lt IE 7]><html class="ie ie6" lang="en"><![endif]-->  
3:  <!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->  
4:  <!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->  
5:  <!--[if (gte IE 9)|(IE)]><!--><html lang="en"><!--<![endif]-->  
6:    
7:  <head>  
8:       <!-- Basic page elements -->  
9:       <meta charset="UTF-8">  
10:       <title>Document</title>  
11:       <meta name="description" content="Add a site description here">  
12:       <meta name="author" content="your name here">  
13:    
14:       <!-- basic mobile elements -->  
15:       <meta name="viewport" content="width-device-width, initial-scale=1">  
16:    
17:       <!-- CSS links -->  
18:       <link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />  
19:       <link rel="stylesheet" href="css/styles.css">  
20:    
21:       <!--[if lt IE 9]>  
22:            <script src="dist/html5shiv.js"></script>  
23:       <![endif]-->  
24:    
25:       <!-- Favicons -->  
26:       <link rel="shortcut icon" href="images/favicon.ico">  
27:    
28:       <link rel="apple-touch-icon" href="touch-icon-iphone.png">  
29:       <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">  
30:       <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">  
31:       <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">   
32:    
33:  </head>  
34:  <body>  
35:    
36:    
37:  <!-- Add all script links just before the body tag -->  
38:    
39:  <!-- jQuery -->  
40:  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>   
41:  <script>window.jQuery || document.write('<script src="js/1.11.1/jquery.min.js">\x3C/script>')</script>   
42:  </body>  
43:  </html>  

The file can be downloaded here:

HTML5 page template

Web tools

Description:

This is a list of the main tools that I use for web Development. While I will occasionally use other resources, these are the ones I use on a regular basis.

Sublime Text

My favorite code editor. Having look at and used many other code editors, sublime text is the editor I use for 99.9% of my work. It strikes the right balance between basic text editor and full blown development environment. With the robust plug-ins available, you can customize it to provide the functions you need without the the overhead and clutter of the things you don't need or want.

Speaking of plug-ins for sublime text, here are the ones I think are essential:

• Package Control - Install this first. Package control allows you to download, install, and manage all your other plug-ins with ease. It's like npm for node.js or apt-get in Ubuntu. It should be the first stop when adding plug-ins to sublime text. Get it here.
• Emmet - The fastest way to code HTML & CSS. Works with editors besides sublime text. View the demo
• Side​Bar​Enhancements - Provides enhancements for working with files in sublime text. Find, move, copy, delete files right from within the sidebar. You can copy file paths, encode images as data:uri base64, and a whole lot more. Install with Package Control.
• SublimeLinter - In-line code checking while you work. The fast, easy way to quality control your code. Install with Package Control.
• GIST - allows you to create code snippets that can be saved to and retrieved from GIT hubs GISTs. Great for storing and sharing reusable code through github. Install with Package Control.
• Code Highlighting - There are a number of languages supported by the built in code highlighting in sublime text, but for those that it doesn't support natively, you can install a package that will cover whatever language your coding in. I have installed packages for SASS, HTML5, jQuery, and more. Just look in Package control to find what you need.

Please don't think this is in any way a comprehensive list of sublime text plug-ins, there are literally hundreds of packages that cover a wide range of capabilities. Please note as well that a lot of these packages can be used with other editors (like text-mate), if sublime text isn't right for you.

MAMP

I develop on the Mac and so I need a local web server to work with. MAMP Pro is my choice for a simple local web server setup. MAMP (Mac, Apache, MySql, PHP) is super simple to setup and configure and is solid and stable. The latest version (V3) has added support for python and perl. They are now available on windows as well. Check them out here.

Code Kit

I used to use grunt.js to automate code compiling, auto-browser refreshes, file concatenation and minification, but not anymore. The latest version of code kit (v2) does everything I need and more. In addition to all the tasks above, it can install and manage packages using bower, which is built in. It has its own built in basic web server, but works with MAMP for more advanced capabilities. And it does all this from a simple GUI interface, no command line needed. Watch the demo video here.

SASS / Compass

SASS or Syntactically Awesome StyleSheets is an extension of CSS that adds innumerable capabilities to CSS, like the use of variables, nested rules, mixins, and in-line imports. It makes coding CSS fast and easy, and more importantly, it makes it easy to make changes. You can get SASS here. Compass is a framework for use in SASS. They have built the code that you would have built using SASS, and packaged it for you. You can learn more about Compass here.

GIT / Tower

Tower is a GUI interface for GIT. It makes using GIT and accessing github easy. If you didn't know, GIT is used for software version control. If your coding, but haven't used version control software, drop what your doing and take a look at GIT here. Once you have that sorted, Tower is the best GUI interface for GIT. Check out the screen cast here.

VMWare Fusion

VMWare Fusion is what I use to run virtual machines. I can download various versions of Windows and Internet Explorer from modern.IE and run them in VMWare Fusion for testing. I can also install and configure a Linux web server if I need a special configuration for a project. It's my indispensable tool for cross platform testing. Get it here.

Adobe Creative Cloud

For content creation, nobody beats Adobe and with the Adobe Creative Cloud Master Collection, you have everthing you need to create content for the web, or any other design project. Check it out here.