7 common (big) mistakes to avoid if you DIY’d your website
Table of Contents Show
📌 Pin it!
That's right. I know who you are because I've been there too. I've DIY'd every version of my website, even before I switched from print to web design. I DIY'd my website before I knew anything at all about website design, in fact. (Not gonna lie, that's basically what got me into this biz in the first place!)
I get it! Custom websites aren't in the budget for everyone, and I totally understand.
If you need a website (and I mean, who doesn’t these days? 😂), but getting a custom site built is not in the budgetary cards for you right now, you and I both know you can hop on Squarespace & get 'r done. We both saw their commercial; it looked easy, you set it up, hit publish ––BOOM. Website done.
Right? 😬 Eh… Kind of.
There’s a reason designers specialize in doing this one type of design work vs #doingallthethings and that’s because website design has a LOT of moving parts & pieces to get any site up & running properly (ie: so it is the most effective it can be).
I mean, my own checklist has about 50+ items in it across several stages of the project, ––and that doesn’t include the sub-tasks or any of the revisions requested!
So there’s a good chance you’re overlooking things when ya DIY because ya simply don’t know what ya don’t know yet.
That said, DIY definitely has its place in the industry & always will so… here’s a list of big mistakes to avoid or fix if you’re not quite in that place to hire out some help.
That lack of expertise can really affect how useful your website is for you though, and I don't want that for you –yes, even if you still can't afford to work with me yet.
So, on that note, I'm sharing...
7 common (but totally avoidable) mistakes I see on DIY'd websites
❶ There’s missing legal shit.
Disclaimer: I’m NOT an attorney and this is not legal advice!
*Affiliate notice: I am an affiliate for the Creative Law Shop, whose templates are mentioned in this section. If you use my affiliate code LAUNCH10 at checkout, you will get 10% off your purchase & I will get a small kickback at no extra cost to you. I’m also a very happy customer of CLS. I don’t recommend anything that I don’t love and use myself.
This one is probably an afterthought… or worse –not even a thought! But this is arguably the most important thing to get right before you launch, making it one of the BIGGEST mistakes you can easily avoid by simply buying a template from a contract template shop, editing it & popping it onto your website.
Of course, there are other (more expensive) ways to become legally compliant, such as hiring a lawyer on-the-regular, or buying a new policy every other quarter of the year even when you don’t know if anything has changed since the last version you purchased…
The cheapest way is to use a template. If you start with that, you can either
edit yourself, because fields that need to be edited are highlighted in yellow so you know exactly what to change & what not to change,
or you can take that to a lawyer where you live and have him/her edit it to fit your country, state/province, and business.
Either way, that route will be a lot cheaper than paying an attorney to draft it from scratch or getting in trouble for not having all of your legal requirements in place.
I use templates from (& am an affiliate for) the Creative Law Shop* in my business. I prefer using their templates because they come with LIFETIME updates at no extra charge. (Yes, you read that correctly!) Those updates are especially crucial for actively changing policies like the first one in this list because laws change all the time and you have to be compliant with those updates.
With a template from the Creative Law Shop, you only have to buy it once. At any time you can just log back into your portal to check for updates once a quarter or so, as Paige (the lead attorney at CLS) and her team check for updates regularly. If there’s an update, you can simply download the latest version, edit the highlighted fields in a word processor app and then pop the updated version on your site. Done-and-done.
How often are their templates updated? It depends on the template, of course, but in 2021 alone, the Creative Law Shop’s Privacy Policy template was updated at least twice, as of posting. If I hadn’t bought my template from CLS, to maintain full compliance, I’d have needed to buy an updated Privacy Policy at least twice in 2021, so you can see how quickly that would add up!
The four most common legalese most websites need are:
This is not a suggestion; you are legally required to have a Privacy Policy on your website, which means you are breaking the law if you don’t have one. Why?
Privacy Policies tell our website visitors what we do with their information & how it’s collected.
If you just sat back in your chair, rolled your eyes at me, and thought “I don’t collect anyone’s information on my website,” while you read that last sentence, –you’re wrong.
Collected information can (& often does) include everything from user-submitted online inquiry forms to analytics collected by Squarespace, Facebook, Google etc, to the cookies gathered & installed by the web browser, and the email sign-up forms on your website.
Even if you don’t have forms of any kind on your website (no inquiry forms, no email sign-up forms, etc), your website is almost certainly STILL collecting information in the background on anyone that comes to your website including what country they’re accessing it from, what pages they visit, what links are clicked, how long they stay on your website, etc –& that information is something you have to disclose by law.
Okay, so who does this apply to? If you’re now wondering which laws you have to comply with, that’s a great question!
You are subject to compliance with the privacy laws in any/all countries where someone is accessing your website from. That means if someone from Ireland, for example, visits your website, you are then subject to Ireland’s privacy laws because those laws protect people in Ireland even if you don’t live there or operate your business from Ireland.
That is quite frankly a hard thing to keep up with, because how do you know what Ireland’s laws are if you don’t live there and aren’t a lawyer? I don’t know about you, but take a wild guess at who’s definitely not spending her free time reading other countries’ privacy laws line by line? 🙋🏼♀️ You either? Heh. Thought so! In that case…
I’d recommend grabbing a privacy policy template drafted by a licensed attorney (NOT drafted by you, –just sayin’), and if you use my affiliate code LAUNCH10 at checkout, you’ll get 10% off any purchase, any time, and lifetime updates for whatever you buy there.
Where do you put this policy document?
Let’s say ya have one ready now. 🥳 It has to be accessible from EVERY page on your website, so the best place to put it is in the footer. It doesn’t have to be a button, it can just be linked text that goes to another page that lists the policy, but the policy has to be readily available from everywhere on your site. You should also put the link to it on any form(s).
Cookie Notice
There’s not as much to do here, thankfully, because a good privacy policy will also have a cookie notice in it.
Just to be safe, because the laws around this vary from country to country, you should enable that damn Cookie Notice popup or bar like everyone else. It’s annoying, I know, but it is what it is and if you have both the notice & the popup, you’ll be good to go.
“But it’s so ugly!” Yes, I’m aware! And I agree. There are a couple of things you can do though:
Go into your Squarespace site’s Settings to adjust the options for that notice; you can learn more about built-in Cookie Notice options from Squarespace.
You can also find some super helpful CSS snippets to cut/paste into your site that will help prettify it enough to be tolerable. A great resource for this on Squarespace sites is the simple cut/paste snippets from Ghost Plugins to change the popup color or round the corners of the popup block. Remember to keep it as legible as possible, or your design changes will defeat the legal purpose.
Don’t love the idea of keeping this manually updated? Check out Termageddon* and use my affiliate code LAUNCH10 to save 10% on your first year. It’s a subscription service at about $100/year, which embeds policies onto your website (where you want them) and keeps them updated for you. I love Termageddon specifically for their highly detailed Privacy Policy, and their Cookies widget which is way more robust than what Squarespace gives you and allows your website’s visitors to save their preferences individually.
This one is more of a highly recommended suggestion or recommendation, in that you really need it & you should have it, but it’s not legally required. So if it’s not mandatory why should you have one & what does it do?
Your website’s terms & conditions dictate how people use your site & the content on it. Your website is your property and you get to set the law-of-the-land, so to speak for how people interact with it, what they can and can’t do, including what can be reused or taken, etc.
This “contract” is not to protect others, it’s to protect YOU. If you want any legal protection or a proverbial leg-to-stand-on when someone does something with your intellectual property, you have a fallback already in place and ready to go.
There are several types of T&C’s though, so which one do you need?
Terms & Conditions - standard template for regular websites
Terms & Conditions for Online Sales - an extended version for businesses with online shops for physical and/or digital product sales.
Terms & Conditions for Online Courses - another extended version for businesses that sell online courses.
Each version covers specific terms and conditions, so if you have an online shop on your website AND you sell online courses, you probably need all 3 templates. Luckily, most shops, Creative Law Shop included, usually have bundles to help save ya some money when you need more than one related template, like the templates for websites.
Guess what? I’m also an affiliate for Creative Law Shop! If you use my code LAUNCH10 at checkout you can save 10% on any purchase, stackable on current discounts or sale prices!
Copyright notice
You really should also add that little copyright notice to your website’s footer. Something like © YEAR Business Name.
You can type the Copyright symbol by pressing Command+G (or Control+G) on your keyboard. Then type the current year (& keep it up to date), the year you started your business, or the accurate range of years you’ve been in business. (Talk to your attorney for specifics that fit your business, where you live!)
❷ There’s no favicon.
A favicon is the tiny little graphic that shows up on the tab for each website in your browser, next to the page’s title.
It’s a simple thing, but when it’s missing on Squarespace sites it’s noticeable because the name of the site in the tab of my browser is accompanied by a 3D-looking grey box. That’s the default favicon every Squarespace website is given, not just yours. 😉
Want to make it stand out a little bit more? Upload a custom favicon.
Go to the main menu when you’re logged into your Squarespace site, then click Design, then select Browser Icon and upload!
What size image?
Best practice is to keep it at least at 50x50 pixels so it’ll still be clear on larger screens. The size is somewhat debatable, needing to be anywhere from 16x16, 32x32, to 48x48 depending on the screen’s resolution.
What shape does it have to fit in?
This one is tricky. It looks like they can be any shape, because you’re probably used to seeing logos there, but actually, ALL favicons must fit into a square-shaped background, whether or not that background is transparent doesn’t matter.
My favicon is 4 light-colored letters in a square black background (as of posting), but it could also be 4 dark-colored letters over a transparent background that don’t visually “fit” inside any background color. The reason I did the background color is because of the newer light/dark modes; having the background color when my brand uses black/white imagery, helps keep the favicon appropriately visible no matter what the user is using.
What about the favicons that don’t look square?
They are, but they aren’t. Essentially it’s like putting a circle inside a square, as large as you can make it, without going past the square’s border. That square is the boundary of the icon’s size, and their logo just fits within that –and doesn’t have a background color. You can do that too in something like Canva if you export with a transparent background as a PNG file.
For Adobe users, that design boundary works differently than Canva’s simplified version, so you’ll need to export it with “clip to artboard” checked and as a PNG format (if you don’t want a background color). Otherwise uploading a rectangular shape as your favicon, it will be forced to stretch into a square regardless, and will stretch out your design with that movement.
Either way, PNG files only support transparent backgrounds, not create them where there isn’t one. That means they can have a background color or not, depending on how it was exported. So if you have a colored shape behind your logo as the background, but you want a transparent background, you’ll have to remove that piece before you export or it will be included in the exported PNG.
❸ There are no navigation links –or too many links.
I know, that sounded very contradictory, didn’t it? In this case, both are bad things, depending on where the links are located.
TOO MANY LINKS IN THE TOP NAVIGATION:
Best practice is to have 5 links, or fewer, in the top navigation of your website, –button included (if you have one). More than that provides too many options for the viewer & more of a reason to bail. (Remember that bounce rate? 😬)NOT ENOUGH LINKS IN THE FOOTER:
I think it’s best to have at least the same number of links as your top navigation, also in your footer. In theory, those are the most important pages (or groups of pages, if you use dropdown folders in your navigation) and they should be accessible from either the top or bottom of your website. Additional links can be added here to pages that are still important but not enough to put in the top nav, like FAQs or your online scheduler page, etc.
How to add links in your footer on v7.1:
Squarespace doesn’t have a setting that will populate this for you anymore (as they do on v7.0) which is both helpful and annoying. Helpful because that means it’s easier to customize, and annoying because you have to remember to do it since it’s not done for you. Thankfully, it’s super easy!
Simply type out the names of the pages you want to link in your footer. It doesn’t have to match the top navigation letter-for-letter but it’s good to keep it relevant & clear. For example, if you list “Contact” in the top navigation, it’s okay for it to say “Contact Us” in the footer.
Keep them apart with a few extra spaces between links, or use delimiters (ie: – dashes, | pipes, or • bullets, etc) to make it clear where each link starts/ends.
Highlight the text you want to link, then click the link icon in your text formatting options bar, paste the full link to an external page, or simply type /page-url to link to another page on your Squarespace website.
Pro tip: click the ⚙ icon in the link settings to open that popup & choose “Open in a new tab” for all links that take viewers off your website. That way they keep a tab open for your website, and can access the new page in a separate tab without losing their spot on yours.
When you’re done, (click Save on the popup if you turned on the “Open in new tab” toggle) then click Apply in the text format settings where you placed the link.
Next, click Done, then Save in the upper lefthand corner of your site to exit edit mode & save the changes you just made. Now those changes are live!
Why does this matter? Why should I care?
The longer website pages get, and index or long-scroll pages are very popular these days, it’s important for viewers to have quick & easy access to the navigation links on our sites.
What you don’t want, is for a viewer to get to the bottom of the page on your site and not know where to go next. If they don’t know what to do or where to go, they’re just going to leave your site. The faster people leave your site, and the more often they leave quickly, the lower your website will rank in search engines’ page results.
The name for the measure of time people stay on your site before leaving is your Bounce Rate, and it will be higher than you expect it to be. The closer to 100% you get, the worse your rate; the closer to 0% the better.
So it will behoove you to make sure viewers have links to help them navigate your website efficiently, and help them find what they’re looking for, so they don’t bounce as quickly, helping your SEO rank.
Want more information on what to put in your footer? Find out which 7 things you must have in your website’s footer.
❹ It’s too hard to contact you.
This is a huge pet peeve of mine!
Look, I get it. You don’t want spam showing up in your inbox and neither do I, but that cannot stop you from providing a simple & easy way for people to contact you.
Here are a few best practices, but for more details make sure you also read about the 5 things you need on your contact page after you finish this post:
Make sure your email address is listed; it doesn’t have to be linked to anything, but list it so it can be used by the right people.
Show your inquiry form if you have one; just make sure it has no more than 5-7 questions. The initial point of contact is not the place to throw 20-questions at them.
List your office hours AND how quickly they can expect a reply.
Include a photo of you so people know who they’ll be talking to. It matters more than you think!
Share where you’re working from (doesn’t have to be your address, just a city, state/province, country, region, etc will do) and who you want to work with (so they know whether or not they should contact you to begin with).
Far too often, I come across websites that are missing those things. Be kind to your viewers and give them an easy way to contact a human being with their questions, comments or inquiries.
❺ You’re a nameless, faceless business owner.
I know it can feel scary to put your name and face front-and-center, but it’s a reality of having a website. Because people aren’t walking into your building, seeing your face and hearing your voice as you greet & walk toward them to introduce yourself and ask how you can help, –you HAVE to make sure they know who they’re dealing with in order to build enough trust for them to work with or buy from you.
People want to know who’s the “who” behind the screen. Who wrote those words? Who would I be buying from? Who would I be working with? Especially in 1:1 service-based businesses.
Trust me, no one pays as much attention to things as you think they do, and very few people are sitting on your website zooming in to see if that red dot is a pimple on your face. It’s just not happening. 😂
Do not make this mistake just because you’re uncomfortable with the attention. In fact, ya need to get used to the attention if you want to have a successful business, because with success inevitably comes attention on some level. 😉
❻ Your tour guide took the year off.
I know that got your attention. You’re probably like WTF is she talking about?? 🤣 Let’s back up a step.
Each page of your website, the main pages especially, need to be well thought out & connected with a series of “call to actions” or CTAs (ie: buttons), so your viewers don’t have to fumble around trying to figure out where to go or what you want them to do.
Another DIY-er mistake I see far too often is a severe lack of on-page strategy. You’ve got the details, the photos, the pricing, the contact form, etc, but you don’t walk people through your website.
In other words, you have no tour guide.
The easiest way to map this out is visually, and based on your goals. What do you want the viewer to do? What’s the most important action you want them to take before they GTFO?
If you’re a service provider, that goal most likely is to book a call or inquire about working with you.
If you’re a produc-based business, that goal is most likely to buy a specific thing or type of thing from you.
Keeping that goal in mind, what step(s) must your viewer take in order to get become ready to make that decision?
Never allow any of your website’s pages to come to a full stop. Always put a button on every page that goes to the next one you want them to see from that one. ALWAYS.
You never know which page someone will land on, and it’s not always the home page, so make sure every page can get them somewhere they want and you want them to go.
One rule of them for this, is not to have more than 2 different CTAs at a time. So don’t put buttons that take the viewer to this page, fill out this form, contact you, go read the FAQs, learn more about you, etc. –all on the same page.
Consistency is always a good thing! It’s okay to have tons of CTAs on any long page, just not more than 2 different CTAs on any page, so pick just 1 or 2 and add as many buttons for those 2 options wherever it makes sense in the page layout.
If ya want more details make sure you also read about how many take-action buttons can be on any page of your website.
❼ Not formatting text properly.
I know it’s tempting to choose a font from the formatting bar based on what size or font style you want, but you have to choose based on what will have the most hierarchal value & what order makes the most sense in each spot.
Search engines use website-specific “tags” in the code that makes up the pretty stuff we see on screen, in order to decide how to read your content & what’s on the page. These tags are hidden in the code but triggered by the format you choose from the list of pre-styled options wherever you’re adding text to a page of your site.
READ MORE: Are you using the wrong headings on your DIY website?
What are the tags’ titles/names? You know them as:
Heading 1 – (v7.0 & 7.1) is greater than
Heading 2 – (v7.0 & 7.1) is greater than
Heading 3 – (v7.0 & 7.1) is greater than
Heading 4 – (v7.1 only) is greater than
Paragraph 1 – (v7.1 only) is greater than
Paragraph 2 – (v7.1 only) is greater than
Paragraph 3 – (v7.1 only)
Body – (v7.0 only)
But in the code they look more like:
HTML:
<h1></h1>or in CSS:
h1 { }
So when you choose your font from the formatting bar, you’re not just choosing a size or a style, you’re also choosing a tag that’s written into the code of your site, which Google will be watching for.
The fonts in each of those options should be sized according to their rank in order to organize your content in the most understandable way for both Google and your viewer. That means Heading 1 should always be the largest, and like the title on a book cover, there should only be one H1 used on any page of your site. Paragraph 3 (on 7.1 sites) or Body/Normal font used in paragraphs on your site should be the smallest font size on the page and isn’t limited in quantity.
Anything between Heading 1 and Heading 3 or 4 should be used in hierarchal order as well, with Heading 2 being larger and placed higher on the page than Heading 3, and H3 being larger and placed higher on the page than H4.
It wouldn’t make sense for you to use a smaller, less important heading for the title of a blog post, then for the subtitle use the largest & most important heading, –just like it wouldn’t make sense for Google if you used the H4 as the topmost subtitle, and then for the following subtitles or section titles to be in H2.
If you are using them willy-nilly, as they say, –stop and fix this fast!
Google (and other search engines) uses this hierarchy to determine how your content is organized kind of like the auto-formating features activated in word processors (like Microsoft Word or Apple’s Pages) when we started a numbered list or an outline, which we all both love and love-to-hate.
It can learn what you’re talking about with these titles & subtitles in the right order and it’s important for them to get it right, so they can display your page(s) to people the information is relevant to.
If your content ISN’T organized properly, Google can show someone a page to something that isn’t helpful for them. When that person can’t find what they wanted & leave your site too quickly, your Bounce Rate goes up, and then your SEO rank is penalized which means that page (& maybe eventually the whole site) will be shown to fewer and fewer people looking for that same content because Google notices when too many people leave your site too often.
