HubSpot Onboarding
Let's Talk

On this page: A Modern Design & Development Process | Layering | Drag & Drop vs HTML+HubL | Journey Mapping

 

A Design & Development Process You'll Love

As businesses mature, they realize that the "beautiful" aspect of a modern website lies in its ability to convert leads.

It's one of the reasons some people consider the Uber and Apple websites to be "plain". They are clutter-free. And they work. Adding every available module into page-specific custom templates doesn't help conversions. They introduce barriers to conversion and reduce trust.

A minimalist, business-positive approach is to create a minimum number of templates and then flow content into them at the page creation stage. There are many benefits to this approach, including:

  1. structured content prep helps avoid "filling the slots"
  2. reduced deployment effort saves time and costs
  3. reduced page creation effort speeds website build
  4. consistent layouts meet UX best practices
  5. future updates don't require a full redesign

Website design and development practices have changed.

The introduction of high-performance templates and content modules over the past few years has opened the door to quicker deployment of much higher-quality websites. It has also changed the way website design is done.

Pro Templates and Modules incorporate user-experience (UX) norms for common visitor intents. Ultimately, this helps you close more leads of higher quality because the experience feels 'right' with minimal friction.

This change impacts marketing teams most in the visual design area. Refocussed to fall under Content Design, it's handled differently from development tasks, and generally, in separate layers or phases.

Remember the good old days of matching Photoshop flats "pixel perfect" or selecting WordPress Themes? These still exist, of course. Pixel-perfect designs are often found at the high-cost custom design & development end, whereas pre-made themes are found at the low-cost, one-size-fits-all end. The new templates and modules approach can be found somewhere in the middle.

2022-design-dev-layers

In modern template-based design & development, we have 4 primary layers where different aspects of web design are handled:

  • Content Layer. Format text and place image/rich media within Modules.
  • Page Layer. Assemble purpose-built Content Modules into a page layout.
  • Template Layer. Incorporate brand elements and the website's foundational structure.
  • Platform Layer. Houses the underlying technology.

Developers generally address Platform, Template, Modules, and Page Layout elements. Marketers generally address Content Design elements. Developers are able to build frameworks that support UX right into their templates, making it easier and quicker for marketers to deploy websites with greater potential for conversion.


HubSpot Offers Drag & Drop or HTML+HubL Developer Environments

The drag and drop method makes it easy for do-it-yourselfers to create a website. The HTML+HubL alternative relies on a developer skilled and trained in creating high-quality templates and modules that marketers can use in their work. Both methods have pros and cons, with the primary difference being where the user experience is created (at the template level following best practices or at the page level dependent upon marketer knowledge).

Having built countless high-quality HubSpot websites, we prefer the HTML+HubL development environment. It allows us to develop Pro assets, quickly. And allows marketers to build pages without worrying about the technical aspects of website design.

We've even found a way to provide these pro-level assets without the traditionally high custom development price tag. In fact, we typically see savings of as much as $5,000 compared to traditional design and development projects as a result of our approach.


Tailor and Assemble Custom Content Modules

2022-responsive-design-2

Through our decade-plus experience developing HubSpot websites, we've created pretty much every pro-level module you can use on a HubSpot website. You save time and budget because we recommend which modules and template layouts to deploy based on your business needs.

Kayak's content modules are responsive, engineered for lead generation and lead qualification, and are loaded with pro-level features.

Fully responsive Hero modules that accept video, image, or colour blocks; contextual navigation modules that let you tailor the presentation of links; and repeater blocks that permit global styling of complex blocks within a variable grid, to name just a few. Assemble our modules into UX-friendly layouts to match your visitor's intent and role-based motivations.


Journey Map to Match Visitor Intent

Matching visitor intent is our focus for two types of visitors: decision-makers and researchers. For decision-makers, we do what many of our peers do, strategically position call-to-action modules and tailor advanced forms to segment leads right at the start. And for researcher-type visitors, incorporating UX structures right within our templates that guide information-seekers throughout the exploration of your content...transforming them into advocates.

2022-core-templates-icon

Apply Core Templates to Save Time and Cost

Kayak's page templates are structural, meaning they may be used on multiple pages, regardless of content. They are designed and coded in such as way as to be easily editable by both marketers and developers at the template level. For every project, we begin with three core templates into which almost any content can be placed. A benefit of creating these is that they contain the global content modules that future templates will require.

  1. Home Page (wayfinding for new visitors)
  2. Inside Page with Contextual Nav (may require light HTML formatting)
  3. Landing Page with Form (to convert leads)

Once the core templates have been created, and content is added at the page level, specialized layouts can be developed utilizing existing global modules such as headers and footers. A common example might be a product page or case study page where the content differs substantially from a standard page.

Why not just get a free or paid theme from the marketplace?

Themes and ready-made templates are interesting things. Clients love them. Professional developers love them, too. But, for entirely different reasons.

Clients love them because the imagery and marketing presentation position them as an instant visual design at the press of a button.

Developers love them because they offer an opportunity to optimize templates for performance in the development part of the design and development process.

Templates and themes like those found in the HubSpot marketplace can be beautiful, but, come with a hidden cost...they are created without your ideal prospects, journey mapping, or business processes in mind. It's the website equivalent of one-size-fits-all.

They can work of course, but in our experience, they're distracting temporary fixes, not long-term solutions. They'll require extensive edits or a full redevelopment very quickly. So, saving time and cost isn't an outcome.

Plus when that happens, you're doing the job twice.

2022-dominos-icon

Website Accessibility Matters

We develop websites that prioritize web accessibility, performance optimization, and HubSpot-specific best practices.

While we are all focussed on conversions, it's important to note that not everybody uses the web in the same way. To ensure that everyone, including individuals who use assistive technology, can access your website, we develop with web accessibility best practices in mind.

2022-accessibility-icons

Page Speed Matters

Page speed is a foundational aspect of user experience and ensuring that your users have the best experience possible when they visit your website.

How long a browser takes to load and render web pages can make or break your lead generation efforts. All Kayak modules and templates feature performance optimizations on the technical side.

2022-performance-icon

Collaboration Matters

There's a lot that goes into building a website. It takes collaboration between designers, developers, and content creators/editors. Kayak's modules and themes follow best practices for lead generation and journey mapping.

Our code is easy to maintain so that content editors can use the modules and templates without difficulty. We develop modules in a consistent way and develop modules that avoid code repetition.

2022-collaboration-icon

Expertise Matters

Our developer team is well versed in putting together the components of a professional HubSpot CMS template.

We've built hundreds of templates following best practices in over a decade as a HubSpot Certified Partner that ensures your content editors can work fast to deliver great marketing experiences.

 

Check out our Google reviews.

Check out our HubSpot reviews.

2022-certification-icon

HubSpot Onboarding

Kayak goes beyond regular HubSpot onboarding by diving deeper into strategy, while also incorporating practical tools training.

Oscar Zamorano (Principal Channel Consultant, HubSpot)