Project Brief / User Story

As a <user type>, I want to <function> so that <benefit>.

Copy and Content

• Have a simplified and a complete view
• Brand and Mandate
• Skills
• Awards
• Ratings
• Training: Responsive Design, WEM, AEM: Content Author
• Seminars
• Hobbies

UX Notes

• Prototyping: Axure / InVision / Justinmind / FluidUI / Proto / Lucid Chart / Draw
• Mega Menu
• Sticky Nav
• Hamburger Menu
• Columns / List / Card Layout
• Mobile First/Friendly
• Responsive: Bootstrap / Materialize
• Clean, Semantic markup (for Accessibility)
• Infographic + Parallax / Card Layout

Design Notes

• One Theme
• Font: ?
• Define
  • h1 – purpose – font-size (em) + line-height (em)
  • h2 – purpose – font-size (em) + line-height (em)
  • h3 – purpose – font-size (em) + line-height (em)
  • h4 – purpose – font-size (em) + line-height (em)
  • p – purpose – font-size (em) + line-height (em)

Development Notes

• Blogging: Engine – Ghost / Jekyll / WordPress
• Source Control: GitHub
• Coding: Text Editor – Sublime Text 3 / Adobe Brackets
• Coding: Shortcuts – Markdown / Emmet
• CSS: SASS / LESS / Stylus
• CSS Methodologies: OOCSS / BEM / SMACSS / SUIT CSS / Systematic CSS
• JavaScript: nodeJS
• JavaScript: Avoid jQuery if possible
• JavaScript + CSS: Minified version for delivery, uncompressed working version
• JavaScript + CSS: Cache: querystring for version?
• Package Manager: Handlebars / Bower / Jam
• Task Runner: Gulp / Grunt
• MVC/MVVM : Angular / Backbone / Knockout
• Programming: Object Oriented
• Easter Egg: Konami Code
• Database: NoSQL – MongoDB

QA Notes

• Mobile Friendly Checker – google.com/webmasters/tools/mobile-friendly/
• W3 Validator – validator.w3.org
• achecker (Accessibility) – achecker.ca
• wave – webaim (accessibility) – wave.webaim.org

Optimization Notes

• YSlow
• Page Speed – developers.google.com/speed/pagespeed/insights/
• CSS Stats – cssstats.com