Kyle #HubSpotting

Transcription

1 /0/3 INTERMEDIATE. AN INTRODUCTION TO BUILDING TEMPLATES WITH THE COS Kyle #HubSpotting If you plan on creating templates to sell in the HubSpot Marketplace, or do not currently have access to all of the COS tools, you should consider setting up a free Developer account. Get yours at developers.hubspot.com

2 /0/3 TODAY S GOAL: You will be able to describe and utilize the design features of the COS Template Builder. AGENDA Introduction to designing with the COS (5 min) How do the design tools work? (0 min) 3 Using the COS design tools (75 min) 4 Next Steps and Resources (5 min) INTRODUCTION TO DESIGNING WITH THE COS.

3 /0/3 WHAT IS THE COS? The Content Optimization System (COS) is the first integrated content system to recognize the unique needs of visitors and optimize content for each viewer. It is mobile-optimized out-of-the-box, fully integrated with every marketing channel, and adaptive to the changing needs of leads and customers. FLICKR USER CHRISJL WHAT IS RESPONSIVE DESIGN? Responsive websites are designed to automatically display correctly, regardless of the user s screen size. According to Google, more people now access the internet via mobile devices than with traditional computers, so site responsiveness is paramount. Templates built with the COS Layout Builder are responsive from the start. WHAT IS SMART CONTENT? Smart Content is a remarkable new HubSpot feature, allowing the creation of site content that changes based on the visitor. Want your leads to see a different page than your customers? Smart Content can do that, and more. Templates built for the COS are Smart Content ready. FLICKR USER MCGRATHS 3

4 /0/3 COS TEMPLATE BUILDER The Template Builder is a tool built for designers and developers to create responsive HubSpot website templates. It offers centralized website template and style creation, management, and the ability to preview changes on-the-fly. COS LAYOUT BUILDER File manager Visual editor 3 COS CODE EDITOR File manager Code interface 3 Live preview 4

5 /0/3 WHAT ABOUT STYLE MANAGER? This certification will not be covering the Style Manager tool that may be present in your portal. That tool is being phased out in favor of the Code Editor and hand-coded CSS stylesheets. Built on Twitter Bootstrap The widely-used grid framework for building structured, responsive websites is at the core of the COS Layout Builder. HOW DO THE DESIGN TOOLS WORK? 5

6 /0/3 WHAT IS A KEYWORD? IT S A LOT LIKE BUILDING A HOUSE. Layouts build the frame of your site and serve as the structure. Styles are the coats of paint, turning that structure into something wonderful. The Template Builder is comprised of two parts. The Layout Builder The Code Editor TWO WAYS TO CREATE TEMPLATES LAYOUT BUILDER VS CODE EDITOR 6

7 /0/3 TWO WAYS TO CREATE TEMPLATES LAYOUT BUILDERVS VS CODE EDITOR Simple, no-fuss building Easy access to many modules Ready-made with responsive design Marketplace-ready designs Slightly limited in design possibilities + Endless possibilities, anything can be edited Not reliant on starter templates + - Far more complex to learn and use Limited support TWO WAYS TO CREATE TEMPLATES LAYOUT BUILDERVS VS CODE EDITOR Q: Do I have to choose one? A: Nope! You can incorporate custom code into your visual layouts, as well. THE COS TEMPLATE BUILDER. 3 USING 7

8 /0/3 REMEMBER: Start with the user, and end with the user. FLICKR USER CHRISJL First things first: WHAT IS from the mouse. Step away RESPONSIVE DESIGN? Ask yourself: What does this template Responsive websites designed to automatically display correctly, regardless of the need? Plan first, makeare later. user s screen size. According to Google, more people now access the internet via mobile Start with the user. devices than with traditional computers, so site responsiveness is paramount. USING THE COS TEMPLATE BUILDER Creating a new template layout Building with modules in the Layout Builder 3 Styling layouts with the COS Code Editor 4 Creating Site Maps 5 Advanced COS Tactics 8

9 /0/3 CREATING A NEW TEMPLATE LAYOUT Select Design Center from the top menu Then, select Template Builder or 9

10 /0/3 The Template Builder The Template Builder Create: creates new template layout & adds to left hand folder Actions: clone to file or review revisions (if applicable) 3 Edit: toggle to active edit mode to manipulate modules 4 Preview: toggle to layout preview mode Group: toggle into module grouping mode Undo/Redo: undo or review previous step taken in module editing Related tools: jump to content settings, design center, and documentation Workspace: manipulate, style, add, and edit modules in template The Template Builder New: Get started creating a new template or style (either using layout builder or raw code) Clone & Edit: Copies an existing file from template layout menu and opens cloned template for editing 0

11 /0/3 Creating a new layout Default new page template Default template

12 /0/3 Default blog template System page templates Every set of templates should have a full set of System Pages, meant for handling 404 errors, subscription preferences, and other UX necessities. The Actions Menu Actions for Templates:. Clone creates a duplicate copy of the custom template, to preserve the original.. Edit switches into editing mode, so that you can design and refine the selected template View Revisions shows you all previouslysaved versions of that template, so that you can go back, if necessary Delete permanently removes the Custom Template from your Design Center.

13 /0/3 BUILDING WITH MODULES IN THE LAYOUT BUILDER Module options All module-specific styling, naming, and other options can be found here. Adding Modules. To add a module, click the Add Row button at the bottom of your template.. You can then use the settings gear icon to swap the default module for any module you d like. 3. Once you ve selected a module, move it into place by clicking and dragging. 3

14 /0/3 Arranging Modules To split modules: Hover over the module to be split, and click on the Split button that appears. Your original module will stay on the left, and a rich text module will appear on the right. To move modules: Just drag and drop into an empty space. Grouping Modules Global groups/modules Used when the group or module must be used across multiple page templates Local groups Used to ensure that specific modules always stick together Groups and Responsiveness Groups are essential for providing some rigid structure to responsive design: grouping modules adds them to a parent div. 4

15 /0/3 Why would you create a global group? Why would you create a local group? Discuss your thoughts in the chat pane. Common uses of Global Groups Mastheads Usually consist of a logo, brand slogan, company contact information and other details typically used across a variety of pages Footers Typically contain helpful navigation links for your site that are relevant across all pages. Tip: You can see a full list of your global modules by going to Content > Content Settings and selecting "Global Modules. Some common uses of Global Groups Copyright or Privacy Links This is a perfect use-case if you generally keep privacy and copyright information together in a footer. Sidebars Creating a sidebar global group enables you to change the sidebar site-wide, to reflect new offers or other changes efficiently. 5

16 /0/3 LIVE DEMO. WATER BREAK. Pro Tip To make changes to a global module in just one template, use the Make a Local Copy button to disassociate a module from its global parent. 6

17 /0/3 Available Module Types Rich Text Modules Rich Text The most basic type of content module, enabling WYSIWYG content editing. Can contain text, images, videos, Calls to Action, and more. One Line of Text A single line of text that can be edited, but not formatted, by the end user. Page Footer This basic footer module automatically pulls the company name and copyright information from a user s Content Settings. Pro Tip Always add descriptive filler text or model content into a text module to give the content creator an idea of how the module should appear when filled out. (Just be sure the allow editing option is checked!) 7

18 /0/3 Visual Content Modules 3 Logo The end user s logo, which can be uploaded under their Content Settings. Image A module meant specifically for uploading an image. Visual Content Modules 3 3 Image Slider An sliding image module that can provide some basic animation and visual intrigue for your pages. It can be animated or user-controlled. Use image sliders with care. In 03, the Nielson Norman Group did a usability study that determined that only % of site visitors clicked on links in an image slider, and of that group, 89% clicked on the first slide, and nothing else. We suggest using them as a design tool, rather than a marketing asset. 8

19 /0/3 Pro Tip When possible, include the ideal dimensions of an image in the module label, so the end user knows what size their image should be. Header Modules Header: A one line text header. Section Header: A one line text header with a smaller subheader. Header values (ex. <h> vs <h>) are chosen within the module s Edit Options menu. Conversion-related Modules Call-to-Action A module for buttons that create an offer, such as a free guide or whitepaper. They typically direct users to Landing Pages. Form Typically used on Landing Pages or Contact Us pages. They aim to convert site visitors into leads by gathering visitor information in exchange for an offer. 9

20 /0/3 Social Sharing Modules Social Sharing This module enables easy sharing across the end user s preferred social networks. Follow Me This module pulls information from the end user s Social settings, making it easy to follow their company s social media accounts. Blog-specific Modules Blog Content The most basic element of a blog template. It displays blog posts from the Blogging tool. Post Listing Creates a list of blog posts by date or by popularity. 3 Post Filter This module creates a list filtered by different criteria, such as authors or topics. 4 Blog Subscription A simple form that allows visitors to subscribe to the site s blog. 3 Navigation Modules Horizontal and Vertical Top Menus Two different styles of navigation. Which would your site visitors respond best to? 0

21 /0/3 Advanced Modules Flexible Column A column that allows the end-user to add modules to the site, via the Content Editor. Custom HTML/HubL Template A module for adding custom markup and modules or embeddable items such a Twitter feed. Horizontal Spacer Just like it sounds, this will add some empty space to your layout, to keep two modules separate. Advanced Modules Google Search This allows site visitors to search the contents of the site on Google. Essentially, it is equivalent to searching for site: mysite.com search term on Google. RSS Feed This module can pull in an RSS feed from another HubSpot blog or any other RSS-enabled source, including offsite blogs from other services. Regarding Flexible Columns When editing content, the end user has the option to add modules. After clicking this button, they can select a module. 3 Then, they will click the space to select where to put it and the module will appear in the flexible space.

22 /0/3 Home page Product Page Blog Page Landing Page Include multiple types of layouts You can t read your end users minds, so try to provide them with as many easy-to-use options as possible. QUESTIONS? 3 STYLING TEMPLATES WITH THE COS CODE EDITOR

23 /0/3 Building CSS stylesheets with the Code Editor Step Within the Template builder, click the New button. Step Select Code Editor and then Page from the following dialog. Custom stylesheets can be written and saved within the COS Code Editor, found in the Template Builder. Editing Your Custom Style: Building Stylesheets Saving your file is easy. Just select a folder and give it a name. Step 3 Select an existing folder or create a new one by typing a name and clicking Create item. Step 4 Give the sheet a name, and end with the extension.css. 3 4 COS Code Editor: Preview Configuration Style: Select a style to preview, when coding layouts Layout: Select a layout to preview, when coding styles 3 3 Blog Preview Mode: When previewing on a blog layout, select Full Post or Listing view. 4 4 Content: Select the type of content to fill modules NOTE You can change your settings at any time through the Preview Configuration button in the top-left of this section. 3

24 /0/3 COS Code Editor: Editing Mode The resulting file will display in a three-pane layout. Each pane has a defined purpose. File Manager Code Editor Live Preview Making a stylesheet available as a Style Once your stylesheet is ready to be used on a live site, you can do so by hitting Update and ensuring that Make this stylesheet available as a Style is checked. The style will then be available in the Style selector, under Content Settings. Regarding HubSpot Boilerplate Styles required_base.css: This performs rudimentary styling and enables responsiveness. modules.css: This stylesheet ensures absolute responsiveness, but may override some custom styling, such as form width or image width. recommended.css: These styles solve common responsiveness issues, such as code brought in from a Wordpress template, or with embedded Google Maps. 4

25 /0/3 NO.head-container-wrapper.body-container-wrapper.footer-container-wrapper YES.cool-rounded-square.sliding-nav-menu. product-name-header Pro Tip If possible, use custom classes instead styling the built-in structural classes. The structural classes have a very particular purpose, and their built-in attributes could change in the future to maintain responsiveness. DIV Class Names Need to find out what those DIV classes are called? You have two options.. You can clone your template to a file in the Template Builder, and look through the associated HTML.. You can use your browser s Inspect Element feature or a browser plugin like Firebug to check modules and return their associated style names. Assigning CSS Classes to modules After selecting the module s Settings icon, you can add class names to modules, directly from your CSS stylesheet 5

26 /0/3 Pro Tip Avoid using inline styling on a permanent basis. Instead, use it as a tool for experimenting with style changes on the fly. Using CSS IDs Module groups also provide the option to assign a CSS ID, which makes migration of existing stylesheets much easier. Configure Body Looking to add a CSS class to your page s <body> tag, or inline body styling? Both options can be found within the Body CSS Options tool. 6

27 /0/3 Configure Head Here, you can directly edit the <head> section of your template, for purposes like directly associating a stylesheet to your template or linking to JavaScript libraries. Remember: No metadata here! Your Page Title, Meta Description, and more are controlled through the content editing tools. Tie up those loose ends! Make sure that your code correctly styles all of your templates and module choices. Move modules around. Does it still look right? FLICKR USER QUINNANYA Configure Body Looking to add a CSS class to your page s <body> tag, or inline body styling? Both options can be found within the Body CSS Options tool. 7

28 /0/3 Preview your styles on Different Types of Pages It is incredibly important to check your style against multiple types of pages to ensure that you like how it appears under different circumstances, and that the design works well with different types of content, such as images, blog posts, embedded videos, etc. Styling Responsiveness Templates created with the COS Layout Builder are responsive by default, all you have to do is keep it that way. VS Desktop VS Tablet Mobile Check your work! Build it for computer screens, but check it on a tablet and smartphone too. Or, try using a free tool, like Dimensions App or Viewport Resizer. What about Styles? Unlike web pages, s are not styled using published stylesheets, because most clients do not reference outside code, by design. Instead, you can style s through inline styling. The end-user can change colors as well, through Content Settings > Settings. FLICKR USER POCIUS 8

29 /0/3 Inline Styling Once you ve created an layout that you feel happy with, you can style elements individually by selecting each module s Edit CSS button, and applying inline styling. 4 CREATING SITE MAPS How to build Site Maps Choose the Content menu in your portal navigation, then choose Content Settings. In Settings, choose Site Maps. 9

30 /0/3 Building Site Maps Once inside of the tool, you can build the architecture of your site, by adding pages, links to external pages, and defining your navigation. 5 ADVANCED COS TACTICS IMPORTANT: Due to their advanced nature, we provide little tech support for the following features. 30

31 /0/3 Using the Code Editor to Build Templates To code a template from scratch, you can clone and existing template to raw code using Clone to File, or simply start from a blank slate by creating an HTML file in the File Editor. Including and Using Javascript In addition to adding it to a template s Head Options, there are two other places to add scripting. If you are administrating the end-user s portal and website, you should add scripting under Content > Content Settings > Site Header HTML. If you are not administrating the portal, you can add script to a Custom HTML module anywhere in the header section of the template. When in doubt, include documentation. FLICKR USER TEARSANDRAIN For your users, using scripting languages could be as simple as copying and pasting your code into their Content Settings, so take the time to help simplify the process. 3

32 /0/3 Using jquery in the COS The jquery library is automatically referenced in all new templates created with the COS visual editing tools. No additional linking is necessary! What is HubL? HubL (pronounced Hubble ) is a Python-based server-side language used to create COS Templates. It is based loosely on another language, Jinja, but does not support all Jinja features. In the COS, it can be used for complex tasks such as creating full site templates or utilizing conditional logic, or for simple tasks like importing the current date or userspecified colors. What are HubL Tags? HubL Tags are bits of code used to dynamically generate the HTML that creates your templates, seen here in the Edit Options section of a Blog Content module. While many designers may never need to use HubL tags while designing in the COS, we have provided thorough documentation here: designers.hubspot.com 3

33 /0/3 QUESTIONS? 4 NEXT STEPS AND RESOURCES NEXT STEPS Create a Developer Portal, if necessary Create a new template in the Layout Builder 3 Add a variety of modules to your template 4 Create a new stylesheet in the Code Editor and add some basic styling to your template 33

34 /0/3 CLASS RESOURCES How to use the Template Builder HubSpot Template Documentation (and HubL Resource) 3 Layout Markup Documentation/Bootstrap Structure 4 How to Create a Custom Navigation THANK YOU. Kyle 34