Frontend Checklist

I’ve put together a frontend checklist before you deploy your site. Or can be used as a friendly reminder. The list can be downloaded here: https://github.com/stephenherko/frontend-checklist

##CSS

  1. CSS is linked first
  2. CSS served concatenated
  3. CSS is minified
  4. Consider SASS instead of CSS
  5. Make sure each CSS file has a comment and title at top
  6. Never style ID’s
  7. Follow Structure
    • screen.scss (Contains all @include’s)
    • vendor/ (CSS related to javascript)
    • modules/ (mixins, variables and utilities (such as icons))
    • patterns/ (global styles, buttons, and forms)
    • components/ (groups of patterns with small bits of layout)
    • layouts/ (page layouts go and any page-specific changes to patterns and components)

##Javascript

  1. Javascript at bottom of page
  2. Javascript served concatenated
  3. Google API used when possible
  4. Javascript is minified
  5. Add Modernizr.js
  6. Make sure each JS file has a comment and title at top

##Gulp.js

  1. Use Gulp
  2. Clone gulpfile.js https://github.com/stephenherko/gulpfile.js
  3. CLI: npm init
  4. CLI: npm install –save-dev gulp-(node module specific name)

##Head

  1. Charset declared
  2. Expires headers are used advantageously
  3. Title tag is used - No more than 65 characters
  4. Meta description - No more than 150 characters
  5. Favicon
  6. Link to sitemap < link rel=”sitemap” type=”application/xml” title=”Sitemap” href=”/sitemap.xml” />”

##Load Times

  1. Single pages are less than 500k
  2. Run through Google page speed https://developers.google.com/speed/pagespeed/

##Images

  1. Images have height and width set
  2. Images used sparingly
  3. PNG’s instead of GIF’s
  4. All images have alt tags
  5. Minimize all images

##HTML

  1. ID’s are unique to a page
  2. HTML5 semanticly used (header, nav, main, section, article, aside, footer)
  3. Properly used H1-H6 tags
  4. No broken Links
  5. Validate with W3C http://validator.w3.org/
  6. Responsive if applicable
  7. < header > has role=”banner”
  8. < nav > has role=”navigation”
  9. < main > has role=”main”
  10. 404 error page included
  11. Clean up commented code/unnecessary code
  12. Make sure to follow secton/article HTML5 standards https://github.com/stephenherko/html5blank/blob/master/index.html

##SEO (On-Site)

  1. Friendly URL’s
  2. Sitemap.xml - Submit to Google
  3. Help pagination with rel=”next” and rel=”prev” tag
  4. Make sure robots can access page
  5. Use 301 instead of 302 when possible
  6. Responsive sites are better for SEO
  7. Use rel=”canonical” for duplicate content
  8. HTML sitemap
  9. Sign up for Google pages plus.google.com/dashboard
  10. Make use of rich snippets www.schema.org

##SEO (On-Page)

  1. Use hyphens to split urls
  2. Single keyword per page
  3. Keyword in URL
  4. Keyword in title
  5. Keyword in heading
  6. Keyword in content

##SEO (Off-Page)

  1. Google analytics http://www.google.com/analytics
  2. Google webmaster http://www.google.com/webmasters
  3. Google Business http://www.google.com/business/
  4. Google Plus Page https://plus.google.com//
  5. Add label and URL to Google plus page about contributor to section
  6. http://www.google.com/webmasters/tools/richsnippets
  7. Twitter Page https://twitter.com//
  8. Facebook Page https://facebook.com//
  9. Pinterest Page https://pinterest.com//

##Wordpress

  1. Yoast SEO plugin
  2. W3 Total Cache plugin