Website Development Process

  1. Plan web page  file names /  URLs
    • Group common pages in a folder and name each page using only descriptive keywords in lowercase with dashes, where applicable, e.g.
      • https://www.site.com/products/iphone-cases/index.html
      • https://www.site.com/products/ipad-cases/index.html
    • Use Google Adwords Keyword Planner to find keywords that are frequently searched to improve SEO
  2. Prepare images, sprites
    • If image has a transparent background and is shared across multiple pages (e.g. icons), save as a PNG (24) sprite, e.g. sprite-products-common.png
    • If image has a transparent background and only appears on a single page, save a a PNG (24) sprite, e.g. sprite-products-iphone-cases.png
    • If image doesn’t have a transparent background and is shared across multiple pages, save as a JPG sprite (80% quality), e.g. sprite-products-common.jpg
    • If image doesn’t have a transparent background and only appears on a single page, save as a JPG sprite (80% quality), e.g. sprite-products-iphone-cases.jpg
    • If image needs to appear when web page it is on is printed, save it as a standalone image as either PNG or JPG (depending on transparency) and insert it using the <img> tag, e.g. iphone-case.jpg
    • Save images in sprites using a 50px x 50px grid and snap the top left corner of each image to the grid
    • Don’t save images with styles that can be applied using CSS, e.g. if an image has borders, remove the borders and use CSS borders to apply a border to the image
    • Save all images in /asset/image/
  3. Write HTML
    • Disable Javascript to ensure pages look good without Javascript
      Use only one H1 tag per page
      Don’t use CSS IDs. Just use CSS classes. Only use IDs for anchors.
      Indent all code using tabs where a tab is 4 spaces wide
      Use protocol-less URLs when referencing external files, e.g.
      <script src=”//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js”></script> making sure that a secure version (https) of the URL is available (or just use https for all external resources)
      All <a> tags should have an href attribute so that a user’s cursor changes appropriately and the link will work without Javascript
      Save all HTML in UTF-8 encoding
  4. Write CSS
    • If some CSS will be shared across multiple pages, e.g. header and footer, put it in a shared CSS file, e.g. global.css or products-common.css
    • If some CSS will only be used on a single page, put it in a separate CSS file, e.g. iphone-cases.css, ipad-cases.css
    • Use flexible widths whenever possible to accommodate translated text
    • For font sizes, use points (pt) instead of pixels or other units. See unit conversion chart.
    • Use tag name with class selectors to improve performance, e.g. span.trademark instead of .trademark
    • Use protocol-less URLs when referencing other files
    • Save all CSS files in /asset/stylesheet/in UTF-8 encoding
  5. Write Javascript
    • Enable Javascript
    • If some JS will be shared across multiple pages, e.g. header and footer, put it in a shared JS file, e.g. global.js or products-common.js
    • If some JS will only be used on a single page, put it in a separate JS file, e.g. iphone-cases.js, ipad-cases.js
    • Wrap code in anonymous functions to avoid polluting global namespace
    • Don’t use document.write() and eval() functions.
    • Remove or comment out all console.log references in Javascript
    • Save Javascript files in /asset/script/ in UTF-8 encoding
  6. Test
    1. Test pages in browsers that make up at least X% of your traffic (e.g. by looking at Google Analytics) 
  7. Optimize
    1. Use Google PageSpeed test to make performance improvements
    2. Minify and gzip files
    3. Put assets (especially images, audio and videos) in a CDN (e.g. Amazon CloudFront)
▲