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