Choose Your Theme
Warren Shea

Archive for the ‘warrenshea V4’ Category

warrenshea.com v4 notes

Tuesday, June 16th, 2015 at 8:49 pm

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