Monday 30 May 2016

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:
      • 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