HubSpot COS Design Notes

• PROGRESS: 
• DONE Introduction to Building Templates with the HubSpot Design Tools
• PENDING Constructing World Class Email Templates
• PENDING Creating Engaging Page Templates
• PENDING Engineering Effective Blog Templates
• PENDING Designing a User-Focused Experience
• PENDING Drafting Smarter Mobile Designs
• HubSpot COS (Content Optimisation System) Dfn: Inbound Marketing Communication Platform (for hosting various site content) that differentiates itself as a COS rather than a traditional CMS (Content Management System) like WordPress, Joomla, or Drupalincluding: 
• Security (Firewall, SSL with Search Engine Ranking Higher), Hosting (on CDN)
• Social Media Tools
• Analytics
• File Management
• Development Tools
• Responsive Design Templates (Cross-Device Auto Adjust Screen Size). Verify Responsiveness Maintained after Custom Styling
• Smart Content (Personalised User Experiences)
• Location
• Lifecycle Stage
• Example: CTA or Form different for Leads vs Customers
• HubSpot Design Manager Tool Content (Menu) > Design Manager
• Overview
• Staging Platform (Testing of New Content and Styling for Rapid Development)
• Template Builder (built upon Twitter Bootstrap grid)
• Structural HTML Template Visual Layout Design (Drag-and-Drop)
• Stylesheet Facade with CSS 
• Left Sidebar
• Templates
• Custom (Blog, Email, Page System)
• Global Groups
• HubSpot Default
• Coded Files - Stylesheets and Templates (only those built entirely from Code)
• Primary CSS File
• Custom Modules
• File Manager
• Right Sidebar
• Create New Template/Stylesheet
• Step 1: Usage:
• Template Builder
• Code Editor
• Custom Module
• Step 2: Template Type (includes respective Default Modules):
• Page, Email, Blog, or System Template
• Step 3a: Default Modules of Page Template
• Section Header
• Logo
• Page Footer
• Step 3b: Default Modules of Email Template
• Email Body
• View as Webpage
• CAN/SPAM
• Step 3c: Default Modules of Blog Template
• Content
• Recent Posts
• Email Subscription
• Step 3d: Default Modules of System Template
• Errors Page (404) - Retain / Maintain User Engagement
• Password Prompt
• Subscribe/Unsubscribe Preferences
• Page Types that exist
• Alert Pages
• System Pages
• Warning Pages
• Notification Pages
• Template Layout Examples:
• Home Page (i.e. free trial/demo as Content Strategy, visualisation, how it works) https://www.rezdy.com/
• Product Page (i.e. breakdown/summary of features) https://www.rezdy.com/booking-software/#
• Blog Plage (i.e. article/RSS feeds, social media footer for each, tools and resources sidebar, facebook feed sidebar) https://www.rezdy.com/blog/
• Landing Page (i.e. free ebook offering, free copy/trial sign-up form, image) 
• Template Dashboard
• Left Top
• Tab Menu - View Layout HTML + CSS Simultaneously
•  Tab > Open New Tab
• Actions Menu - Save / Clone / Delete / Revert to Template History State
• Edit Menu - Undo / Redo / Access Body CSS / Access HTML Head
• Group Menu - Group Modules together
• Left Sidebar (Modules)
• Default / Global / Custom Module & Group Access, etc (any changes to Globals are reflected on all Templates)
• Center Top
• Toggle Layout / Preview Button
• Center Bottom
• Workspace
• Add Modules - Drag-and-Drop Module from Sidebar to Workspace to Add it
• Split Modules - Hover over a Module in Workspace and click "Split" Button (Max 12 Columns since Twitter Bootstrap)
• Move Modules - Drag-and-Drop into empty space
• Module Options - Click Gear icon (right-side of Module) in Workspace to customise its Name, Edit CSS Styling, Change Module Type, etc
• Global Groups / Modules (Parent Div Structure with Multiple Modules for Responsiveness) - Usage of Group / Module across Multiple Page Templates Group > Click Modules in Workspace > Create Group (Note: Modules selected must be adjacent to each other to be grouped, otherwise they appear "red" in colour, instead of "green"). Example 1: Reuse and Wrap entire Header into Global Group (Global allows style modifications affecting multiple modules from single source reflected on multiple pages to prevents having to it re-build individually on each Page Template, and easily move around). Masthead / Header (logo / brand slogan, used across multiple pages). Footer (navigation links used across multiple pages, contact info, RSS feed). Copyright / Privacy Links. Offers / Ads (sidebar)
• Local Groups - Collection of specific Modules to always be used together
• List of Global Modules - Content > Content Settings > Global Content
• Configure Group (i.e. make it a Global "miniture" Tempate for use across multiple "larger" Templates) - Select Module > Click Gear icon > Make Group Global  (Global Group is compacted into a single Module that turns "green" upon successful creation, and is Reusable across the same or other Templates)
• Right Top
• Publish Button - Save / Update Template on Pages where used
• CSS Implementation
• Types:
• Primary CSS File (applies to domains/sub-domains account-wide: menu, header, footer, typography)
• Domain Stylesheets (where multiple domains used) Content > Content Settings
• Template Stylesheets (attach stylesheet to individual template, or Disable in templates Head Options, i.e. to appear different from other templates)
• Page-specific Stylesheets (attached in Content Editor)
• Setup
• New Tab > New Coded File
• Code Editor > File Type [Page, Email, Blog, System] > Create
• File Name (i.e. xyz.css) > Save
• Preview (Stylesheet)
• Note: Create Custom CSS Classes rather than re-styling built-in (as subject to change) 
• Browser Inspect Element (or plugin like FireBug)
• Review Structure (HTML and CSS Classes)
• Refined Template Design
• Add Multiple CSS Classes to Modules
• Gear icon > Edit CSS (use space between each, rather than comma i.e. abc.css xyz.css)
• Add CSS IDs on a Group of Modules
• Gear icon > Edit CSS 
• Add Inline CSS (experimenting)
• Edit > Body CSS
• Edit HTML Head
• Edit > Edit Head
• Email Styling
• Use Inline Styling
• Advanced Menus
• Content > Content Settings > Advanced Menus > Add Page > Select Page OR Enter URL
• Re-Ordering Menu items by Drag-and-Drop
• Sub-Menus - Click Sub-Menu icon
• Publish Changes
• Advanced Tactics
• Master Templates
• Add All Modules to a single Template (quickly view styles to work efficiently)
• HubSpot's Boilerplate CSS (commonly used CSS selectors)
• Custom Wrap Parent HTML Elements (help styling process with parent classes) i.e. <div class="wrap"><...
• Actions (button)
• Clone to File (clones an existing template using the Code Editor)
• Add JavaScript to Template's Head
• Content < Content Settings > Site Header HTML OR
• Edit Module Options > Raw HTML > [Add <script>...</script>]
• Note: jQuery script tag (latest) is automatically added in Head
• HubL
• Dfn: Python-based server-side language to create COS Templates based on Jinja.
• Usage: Creating simple task logic (import current date or colours)
• HubL Tags Integration
• Usage: Dynamically generate HTML for HubSpot Templates including HubL Tokens (i.e. handlebars {{ ... }} ) i.e. {% if ...%}, {{ content.publish_data_localised }}
• Custom Modules (using HubL) in Design Manager
• HubSpot Modules
• Module Types
• Text
• Rich Text (Text, Images, Videos, Calls-To-Action CTA)
• One Line of Text
• Page Footer (Company Name + Copyright Info from Content Settings. Customise by adding Contact Info + Navigation + Map)
• Note: Add descriptive Filler text so Content Creator understands how it should appear when filled out
• Visual Content
• Logo (upload in Content Settings)
• Image (placeholder for styling, include ideal dimensions in label to communicate to Content Creator)
• Header Gear icon > Edit > Options
• Header (one line text header)
• Section Header (one line text header with smaller sub-header)
• Conversion-Related
• Call-To-Action (Buttons, i.e. directing visitors)
• Form (convert visitors into leasds by gathering info in exchange for an offer)
• Social Sharing
• Social Sharing (share across end-users social networks)
• Follow Me (pull info from end-users social settings allow them to follow the org)
• Blog-specific
• Blog Content (display blog posts from Blogging Tool)
• Post Listing (list of blog posts by date or popularity)
• Post Filter (list filtered by different criteria like authors/topics)
• Blog Email Subscription (subscribe to site blog)
• Navigation
• Simple Menu (static menu on page-by-page basis)
• Advanced Menu (for site-wide)
• Advanced
• Flexible Column (column allowing more modules to be added to group)
• Custom HTML or HubL Template (HubL baby-locks the designer from viewing/editing code) (module to add custom markup and embedded items like Twitter feed)
• Horizontal Spacer
• Modules & Content
• Page Template Layout Design
• Prototyping/Mockup Tools
• User Personas for Guidance
• Accessibility
• Design Elements and CTAs Visible
• Design Constraints Integration
• Structure Design (Templates)
• Style Guide for Organisation
• Styling Integration
• User Feedback Integration
• User Experience (UX) Design focus (Minimise Complexity)
• Goals to Maintain & Achieve
• Consistency (across different Pages)
• User Environment (Surroundings) and User Device Considerations
• User Sensory Experience
• Visual
• Tactile
• UX Optimisation
• Standard Media Query Breakpoints
• Content Stack Ordering (Device Specific)
• Quick Check of Responsiveness
• Content Editor > Preview > [Select Device Type & Orientation]
• Browser Viewport Resizer
• User Testing 
• Timeframe
• Evaluate UX of Design including Functionality & Responsiveness (Effective/Engaging) on Desktop, Tablet, Mobile Devices
• Re-Design Website Steps
• Adaptive Design vs Responsive Design
• Common: Attempt to optimise UX by adjusting for different devices
• Responsive Design - single fluid/flexible design (using media queries, flexible grids, responsive images
• Adaptive Design - detects device/features and provides appropriate feature/layout based on predefined viewport/characteristics
• "The Fold" - Position all important content above "The Fold" (the pages fold), as visitors are less inclined to scroll to find content that is not immediately visible
• Strategic Marketing
• Page Views Increases
• Though Leadership Promotion
• Content Positioning for Conversions Increase
• Email Templates
• Note: Analytics and Contact Info stored automatically at HubSpot for emails sent
• Limitations of Email for Design
• Email Clients prevent auto image loading sometimes
• Email Clients ignore Linked CSS Stylesheets (use Inline Stylesheets instead)
• Testing Email Layouts, Functionality, Responsiveness (Cross-Device)
• Check images on different screen sizes
• Check zoom functional and text legible
• Check CTA functionality
• litmus.com
• Integration of Images and Structure
• Image Space in an Email is essential to visually encourage/engage user to continue reading the content such as headings, text and links and not delete as spam (images processed by humans incredibly faster than text)
• Compliance with CAN/SPAM Act 2003 (recipients must understand where the email came from and how to unsubscribe with a link to give recipients the right to no longer be emailed)
• Custom Module for Email Signatures (personably with photo for positive effect on recipient)
• Marketing
• Lead Generation Boost Specific
• Integration of Branding with Content Creation
• Personalisation Tokens
• Verify Loading (Cross-Device) of Calls-To-Action (CTA)
• Links
• HubSpot Designer Documentation
• Inbound.org

Post WDI - Node.js, Mocha, REPL, Dev Tools, Jade

Challenges

• Node.js App 
• Unable to view sub-directories after deploy to Heroku app:
•  Tested - Procfile, Script Start (in Package.json), Foreman
• Unable to remove error message that echos when running local Node.js server (tried creating a favicon.ico image and placing in main project directory, public folder, and the module folder indicated with no win)
• Error: ENOENT, open '/Users/ ... / ... / <project_name> /portfolio/node_modules/express/node_modules/connect/node_modules/static-favicon/../public/favicon.ico'
• Unable to overcome errors that appear when Testing in later Git Branch called 'Streams' (which includes pushes containing Express Module Sessions). Previous Branch without these Testing errors is 'Mongo', now cloned and progressing with 'Mocha2'. 
• ~/Documents/ <project_directory>/ ✗ streams ∴ 
• Error: Error setting TTL index on collection : sessions
• TypeError: Object Error: Cannot determine state of server has no method 'isCompatible'
• RIP Rohan Ramsay

Progress @ Development of New Products & Services (UNSW)

• Unit 5 - Phase 2 - Setting Priorities for Development - DONE
• Unit 6 - Phase 3 - Concept Definition - DONE 
• Unit 7 - Phase 4 - Product Dev & Feasibility Assessment - DONE 
• Assignment 1 - DONE

Activities @ Lynda - 

Up and Running with Evernote for Mac - DONE

Node.js Essential Training with Joseph LeBlanc - DONE

• Node.js(Modules, Require, Exports, Event Loops and Callbacks, Blocking vs Non-Blocking Environment, HTTP Module, RESTful, NPM Commands, Express Module and Framework,  Dependencies, Jade Templating Engine, Module Getters and Setters, Module Caching and Function Scopes, Reusable Modules with Module.Exports, Handling and Modifying Large Datasets with GET and PUT Requests Returning JSON, Creating Middleware to Modify HTTP Response Headers, Configuration for Unit Testing with Mocha, Should, and Supertest by Decoupling Seed Data and Server from App)
• Node Package Manager (NPM)
• Jade Templating Engine
• Bootstrap 
• Chrome Postman Plugin (HTTP Requests)
• Unit Testing (Mocha, Should, Supertest)
• Istanbul Code Coverage
• Foreman (Heroku Deployment)
• REPL (Read Eval Print Loop for interactive Node.js code debugging)
• Created Custom REPL Gaining Control of App (Command-Line Interface interacting with Node.js App and Inspecting Data in Real-Time, Built Custom Prompt, GET and PUT Actions without HTTP Interface with Equiv. Results)
• Optimise Module Cool!!
• Handed Command-Line Arguments passed to Node.js App (Code Written to Accept Command-Line Args, Used Optimist to Return Data as an Object  with Properties and Values at the Cmd-Line instead of as an Array for easier Look-up)
• Building Command-Line Tools 
• Package.JSON Bin Scripts, Hashbangs in Server.js so Shell feeds whole Server.js with Node, NPM Link for symbolic link to path of project
• Links
• nodejs.org
• npmjs.org
• NodeJS Mailing List

MongoDB via Mongoose Connection -  DONE

• Node.js, MongoDB, npm install (save dependencies), Mongo Lab, Mongoose to create schema data for chainable queries, Postman (Chrome Extension), Querying collections in MongoDB database and handling responses, route handling, Jade framework to render template Views, Connect-Mongo middleware to tie Express sessions with MongoDB by parsing cookies 

Activities @ Book Reading

Javascript The Good Parts - DONE

• Binding, Currying & Pubsub- Thank you Tom Ashworth for making learning fun ... "bind is your friendly neighbourhood currier" summed it up for me
• Call & Apply - 

Activities @ Code School

Discover DevTools - DONE

Activities - General

• My WDI Alumni Link
• Codium - pushed extra commits to GitHub pending merge and deploy Heroku

• TeamTreehouse - Using (Use my basic account) MUST USE PERKS!!!
• Amazon Web Services - Pending (Use Voucher by June 2014!)
• General Assembly Courses - Pending (Use Vouchers)
• Web Host - Pending (continue with Uber or change to Anchor?)

Events Upcoming

• ATTENDed - ROROSyd Dev Hub - 6:30pm Tues 1 Apr 2014 (2 Market St Syd) 
• ATTENDed - Codium - State Library of New South Wales, Macquarie Street
• ATTENDed - M&G Prep Workshop with Tarun - 10am-1pm 12 Apr 2014 (Fishburners)
• ATTENDed - M&G Graduates - 6:30-9pm 14 Apr 2014 (Mezzanine Level, 56-58 York St)
• Business Card

Curiosity

• Tutsplus - Thanks Alberto
• WeWorkRemotely.com
• Form Objects
• CodeClimate (Automated Code Review)
• Rubocop
• Async JS

WDI Progress Update - Final Project (Littlehumans), Brainstorming, Mock Interviews, Codium

Challenges

• Littlehumans (Medical App for Midwives and Parents of New Born Children)
• Problems faced
• Combined OAuth Login (Facebook, Twitter, Google) with Devise spend all day Saturday trying to get it to work in Production environment (managed to get Google, Facebook, and Twitter to work)
• See 'About Us' page at the Littlehumans website for other challenges
• Dancing at Karaoke!

Progress @ General Assembly (GA)

• Littlehumans Final Project
• Heroku Link: Littlehumans App    
• Tech Stack: View the 'About Us' page at the link above
• Purpose: Midwife app for Midwives and Parents to track and share New Born Baby information and key Moments (input from my partner who is a professional midwife)
• Sunday Javascript - with Daniel Tsui
• Challenging Tests
• Immediately Invoked Function (IIFE)
• .Then
• Hoisting
• First Class Citizen
• Javascript Ecosystem - Presentation by Je Turnbull
• Multi-paradigm (MPM) and styles 
• Automation and Task Runners
• Package Management
• JS Essential Knowledge and Tools
• Front-end Job Questions
• JS Testing
• Scope and Closures
• Recommended Books
• Codium Group Project
• Twitter Gem - Solved ability to scrape blog posts

Curiosity

• CodeKit
• Compass
• Edge Animate

WDI Progress Update - Production, Bootstrap, CSV migrations

Challenges:

• App exploded when tried to install bootstrap, used Heroku clone to recover
• Searching databases and filtering selections
• Resolved absolute file paths not being recognised when uploading to Heroku. Fixed data migration files and relocated CSV files to the root directory. Compiled successfully with this code:

require 'fileutils'require 'csv' 

class AddIdeaData < ActiveRecord::Migration
  def up
filepath = Rails.root.join("ideas.csv")
# locate the csv file in your /public folder if File.exist?(filepath) CSV.foreach(filepath)do |col| Idea.create(:name => col[0].to_s, :description => col[1].to_s, :author => col[6].to_s, :url => col[7].to_s, :country => col[8].to_s) end else  raise "No file exists with name: #{filepath}" end  end
  def down   Idea.all.destroy # only with team permission  end
end

Progress @ General Assembly (GA):

• Rails (Authentication vs Authorisation, Static page controller, Custom controller methods using routing collections and members, Hidden form fields)
• Production (Heroku)
• Gems (Sanitise for customising Devise Authentication, Rails_12factor for production and images on Heroku)
• Agile (Daily Scrum meetings)
• Bootstrap themes

Contributions to Developer Community 

• Exciting ideas and concepts explored with the The Slippery Gypseas!
• Sydney Tech Startup Meetup on 6th Feb

Curious:

• Cancan (Authorisation)

WDI Progress Update - Helpers, Authentication, Individual Project

Challenges:

1. Starting individual project (due 9th Feb) - Artificial intelligence hunch evaluator

          -------> Update 7:30pm 1st Feb: 

Backed up progress on version of AI app so far and uploaded to Luke's Github account, only includes very basic functionality to create robots, assign them senses, retain senses even when robots deleted, and allow them to be reassigned to other robots, but otherwise quite ugly still (no CSS, alignment, etc)! 

• Gem 'will_paginate', database column Hashes, Serialization
• Gem 'bundler' (Bundler.io), Rails bootstrap-sass

Progress @ General Assembly (GA):

• Rails (View and Form Helpers, basic HTTP Authentication)