Posts Tagged: Web Design
HubSpot Themes vs Templates – What is the Difference?
Previously it was possible to download HubSpot template packs from the HubSpot marketplace. These were a collection of landing page, website page, blog, and email templates. The downside of these packs is they did not share any unified settings and they were not very portable between accounts. Now a group of templates, custom modules, and… Read more »
Category: Common Questions
10 Benefits of Building Your Website on HubSpot CMS
Your website is the front door to your business. Choosing the right content management system (CMS) is essential for your business growth. HubSpot CMS consists of tools that all work together to give control of all your web assets. Basically, it takes the pain out of managing your website. Instead, it helps you focus on… Read more »
Category: Articles
What is the Average Cost for a Freelance Hubspot CMS Developer?
Below are common ranges you will find the hourly rate. As you might imagine the rates depend on various things like the value given to the client, how busy the freelancer is, and the economic status of the country of the developer. You also have to factor in the working relationship of time-zones and language…. Read more »
Category: Common Questions
Throttle or Delay JavaScript Functions When Window is Resized [code snippet]
Underscore.js has a popular method for throttling and debouncing functions to prevent them from firing multiple times when a window is resized. I found this delay function that works for times when you don’t need to load the entire underscore library to achieve a similar effect.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | // delay function to use on resize to prevent multiple resize events var delay = (function () { var timer = 0; return function (callback, ms) { clearTimeout(timer); timer = setTimeout(callback, ms); }; })(); // Add the delayed functions here const delayedFunctions = function () { console.log('delayedFunctions running'); } // document ready $( document ).ready(function() { // delayedFunctions on load delayedFunctions(); }); // window resize window.onresize = function(event) { delay(function(){ console.log('Window Resize...'); delayedFunctions(); }, 500); }; |
Category: Code Snippets
Top Freelance HubSpot Developers and Web Designers
Below is a list of other freelance HubSpot CMS developers and website designers I recommend. Amy Andrews New York, USA https://amymandrews.com/ Ashley Hill Massachusetts, USA https://www.ashleyidesign.com/ Bob Walsh California, USA https://www.47hats.com/ Chad Pierce Florida, USA https://www.adesignlink.com/ Jacob Lett (this is me) Michigan, USA https://bootstrapcreative.com/ Nicholas Decker Florida, USA https://www.nickdeckerdevs.com/ Stephanie O’Gay Garcia Ontario, Canada https://www.stephanieogaygarcia.com/… Read more »
Category: Articles
Web Accessibility Evaluation Tool Code Snippets
Below are some code snippets to help resolve accessibility errors found using the WAVE accessibility evaluation tool. Remove redundant title text
1 2 3 | $('.slick-slide-inner-wrapper img, .hs_cos_wrapper_type_logo img, .hs-image-widget').removeAttr("title"); |
1 2 3 4 5 | window.addEventListener('load', function() { $('.cta_button').removeAttr("title"); }) |
Empty links used for javascript behavior like dropdown menus
1 2 3 4 5 | $('.hs-menu-item a[href="javascript:;"]').each(function() { $(this).prepend('<span class="sr-only">child menu</span>'); }); |
.sr-only CSS class to help bring meaning to visual elements like icons
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .sr-only { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */ -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; /* 2 */ height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; /* 3 */ font-size:18px; } /* Use in conjunction with .sr-only to only display content when it's focused. @note Useful for skip links @see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 @note Based on a HTML5 Boilerplate technique, included in Bootstrap @note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver @author Sylvain Pigeard @see https://github.com/twbs/bootstrap/issues/20732 */ .sr-only-focusable:focus, .sr-only-focusable:active { clip: auto !important; -webkit-clip-path: none !important; clip-path: none !important; height: auto !important; margin: auto !important; overflow: visible !important; width: auto !important; white-space: normal !important; } |
Category: Code Snippets
What are Some Questions to Ask a Client Before Building Their Website?
Before creating an estimate or project proposal, it is extremely important to know the business objectives of client. Website’s are a dime a dozen, but a lead generating website is a rare jewel. These websites are more strategic and help your client generate new business. Below is a list of common questions I ask in… Read more »
Category: Common Questions
How to Fire a jQuery Function When the Page is Loaded and Resized
When building responsive websites you often want to run a script when the page loads. But when you resize the window the layout breaks. You can use the on method to run your code if the page loads or has been resized.
1 2 3 4 5 6 7 | // run on page load and when the window is resized $(window).on("load resize",function(e){ console.log("adjust layout"); $('.page-header').matchHeight(".target"); }); |
Source
Category: Code Snippets
How to Visually See What Your jQuery Selection is Selecting
I was recently working on form validation and wanted to mark a.form-group as successful if it contained a particular icon inside the label. The icon was set using PHP depending if the data existed in the database. I was writing .prev() and .parent() to try and select the wrapping .form-group but it wasn’t working and… Read more »
Category: Code Snippets / Tutorials
How to Create a List of Urls and Meta Titles from a Domain
I was working on a site migration and I needed to create an excel spreadsheet of all of the urls, page titles, and meta description. This document would then be shared with the copywriters to work on editing the page copy. I found some nice online tools to make this process easy. Step 1: Generate… Read more »
Category: Tutorials