Even if you are just dabbling with some custom code, perhaps playing around with AI, it is important to understand a few basic best practices to use when creating and inserting custom code. (You can even copy/paste this info into your AI agent to establish these parameters).
Understand the correct scope of where to insert code
When inserting custom code you should always first consider the scope of where the code needs to be inserted – whether it should be inserted site-wide or just on specific pages. This page explains the various places to insert code in the WideRange admin.
Embedding Third Party Forms/Content
One of the most common reasons for inserting code is to embed a third-party feature of some sort – usually a newsletter subscribe form but it could be any sort of embedded tool or media such as videos, maps, calendars, etc.
⚠️ Beware of breaking your site layout with embedded forms/content with fixed widths that are too wide! Be sure to double check that embedded third-party content is responsive – that its width is flexible and can adapt to fit into its container size. Oftentimes embedded content can have a fixed width that is too wide for the layout, or even too wide for the entire page when viewed on a smaller phone screen. When this happens you can break the responsive sizing of your entire site, causing a poor viewing experience with horizontal scrollbars on smaller screens.
So whenever you embed a form or other third party content, test it by resizing your browser narrower and check how it looks on a small phone screen. If you see horizontal scrollbars or overlapping content, it's broken and needs to be fixed or removed.
CSS Styling
It is possible to insert custom CSS code to add new styles to your site, or to override existing styles. Here are the best ways to do this:
👋 If you want to override existing site-wide CSS styles, it may be best to contact me first and ask me to adjust the existing styles for you. Keep in mind that I may need to bill for my time.
❌ Avoid embedding inline CSS styles (CSS rules that are embedded into the HTML tags), which can cause code bloat and if used extensively can be very tedious and frustrating to update later on.
✅ Instead it's better to only add CSS class names to the HTML elements, and then insert your CSS style code into the head section of the page (or into the site-wide head). Not only is this more efficient coding-wise but also you can then easily update the styles without having to edit every single page of embedded inline styles.
✅ If you add custom CSS class names, use unique class names that won't possibly conflict with existing class names on the website. One technique here is to add a unique prefix before all your custom class names. So for example instead of adding a class name like .highlight, do something like .yourname_highlight.
⚠️ NEVER apply custom CSS that effects image sizing! Not for large images, thumbnails, or slideshows. Our WideRange websites have very advanced and complex image sizing code and parameters. I guarantee that you will only mess things up if you start trying to change how the images are sized.
⚠️ Beware of breaking responsive design. Our websites are responsive, meaning that all content widths are flexible and will scale to fit into any screen size. If you are custom sizing HTML elements, avoid fixed widths; use percentages instead. Or use a pixel width, but always with a max-width: 100%. Test it by resizing your browser narrower and check how it looks on a small phone screen. If you see horizontal scrollbars or overlapping content, your CSS is broken and needs to be fixed or removed.
HTML
✅ The admin text editors can occasionally be finicky about not allowing some embedded HTML code. To avoid these headaches, whenever possible it's best to embed code via iframes or scripts.
For example, if you want to insert a custom form from a third party form builder app, the best way to do this is by inserting a script code that the app provides which will insert the form via javascript, rather trying to embed the raw HTML code of the entire form.
❌ Do not use HTML tables for content layout. Tables are non-responsive and will break your page on small screens.
Javascript
⚠️ Including too many external scripts can degrade site speed. User-screen-recording tools like Lucky Orange are among the worst offenders which can load many megabytes of external code. Other user-tracking or ad scripts like from Facebook can also cause bloat. So before you add third party scripts like this, it's worth asking yourself if it's really actually necessary and worth the performance hit that your site will take.
✅ When adding third-party scripts you can oftentimes add a "defer" tag to the script. This tells the browser to only load the script once the rest of the HTML has already loaded, keeping page rendering times quicker for your users.
✅ Use plain vanilla Javascript, which will run on any browser without needing to also load any library dependencies.