It happens to me all the time—I'm clicking around our website looking for something, and suddenly I see a missing image, wonky formatting, media that won't load, or some other form of broken website content.
Broken content can be caused by the initial website design or any number of things that we do to modify our sites after they're launched, and often only the passage of time is to blame. Last time I counted, we had something like 700 pages and posts on our website, some dating all the way back to 2011.
Many of those pages contain images that are hosted on our site, embedded videos and social media posts, and elements like buttons and email forms that require both embedded code and "styling" by a developer. Any of those things can lead to jacked-up content, but don't worry—I'll walk you through how to figure out what's wrong.
10 Causes of Broken Website Content*
*Note: Don't stop reading because some of these terms sound technical. I promise, this post really is geared toward the low-tech crowd.
1. Broken HTML Tags
What it looks like: Headings look like normal text, bold or italics don't appear, extra spaces, problems with paragraphs and paragraph spacing.
One of the most common causes of broken content is a missing or incorrect HTML tag. HTML is the "source code" behind most of the internet. Here's the code for this section, for example.
If you look closely, you can see that most of the tags—the parts with the "<" and ">" on either side—come in pairs. If the opening and closing tags in each pair don't match, whatever they're telling the text inside to do won't happen.
Don't worry, I'm not trying to talk you into messing around with code you don't understand. Most of the time, you'll be working using an editing interface in your CMS (WordPress or HubSpot for example), and you won't see the HTML. You'll probably have an option to edit it, though. It looks something like this:
Often, broken HTML an easy fix for someone with minimal HTML knowledge (many a stray " " has left mysterious, random spaces in my copy), and I have found it really helpful to learn some basic code tidbits. However, if that's not feasible for you, just grab someone with basic HTML knowledge and they should be able to sort it out.
2. CSS Issues
What it looks like: You can see the words on a page but they aren't in the right location, font, or size. Or, the alignment is weird, such as items in a blog feed are bumping in to each other.
Issues with your Cascading Style Sheets (a.k.a. CSS or style sheets) are akin to the HTML problems we just discussed—behind-the-scenes code that gets outdated or broken. With CSS, it's often a compatibility problem. Maybe you added a new plugin or other element to your website, and there's something in your style sheets that won't work with it.
Since CSS controls how things appear, CSS issues tend to cause things to look weird. Objects or copy are still there, they just look wrong—like in the image to the right showing website search results that are bumping in to each other.
Distinguishing them from HTML is tricky if you don't have enough coding background to know what's controlled by HTML or CSS, so this one probably calls for a front-end developer (though most developers of any kind can handle CSS fixes).
What it looks like: Most of the page looks fine, but one element just won't load, like a media item or an expanding menu.
4. Missing File Source
What it looks like: Broken images and PDFs that won't download.
Things like pictures and documents are often hosted on your website, which means that they live at a URL just like any page or post. If you remove them or change that URL, they won't show up in all the places you put that item.
You may be able to fix this yourself. If the item only appears one place, just edit the code of the page substituting the correct URL for the incorrect one (you can find the correct URL by going into your media library and finding the picture or document). If the image appears multiple places and was broken only recently, try re-uploading the item and entering the original URL (the one that all those web pages are expecting).
If that sounds too complicated or the issue runs a little deeper than one or two broken images, get a webby friend to help you. This is the kind of thing hobbyists like me who have WordPress websites can help you with (though you'll need someone with HTML experience).
5. Broken Embedded Elements
What it looks like: There are too many examples to name—anything where you add code to your website from an outside source in order to display an element like a photo, video, form, button, badge, etc.
By embedded elements, I mean anything on your website that was added via embed code from another source, anything from an Instagram post or YouTube video to a certification badge from HubSpot. FYI, there are also lots of code snippets you may have added to your website that don't display anything on the front end, such as for tracking.
But for our purposes today, I'll assume we're working with an embedded element that is supposed to show up, like the badges below.
Embedded elements can be broken in two ways: on your end or on their end. If you accidentally copy and paste the code incorrectly, it will appear broken. If they change something about how their system works and don't plan ahead well, it will appear broken. Either way, it will look like this:
In systems with users (like social media sites), embedded items can also appear broken because the user took it down or changed the item's privacy settings.
There are two things you can do:
1) Verify that the original still exists
2) Get the code again from the original source and re-embed it
These errors aren't usually something you'll need professional help with, unless the embedded item is a major part of your website's functionality (e.g. an interactive calendar or booking widget). In those cases, contact the provider's customer service or support department.
6. Low-Quality Responsive Design
What it looks like: Things look fine on your computer, but don't look good or operate well on mobile devices. Elements may disappear, navigation may not function, text and images may be the wrong size, etc.
I hate to say it, but this one takes a full-on web designer who has experience in responsive design. It could be that your original designer and/or developer just did a bad job of coding the elements of your website to be responsive, or it could be that something was added at some point but wasn't tested on multiple devices (like new plugin functionality, embedded forms or calendars, etc.).
Regardless, don't let non-professionals muck around with your website to fix this one. They could do more damage than they fix.
Not, Strictly Speaking, Broken...
...but still a problem.
Ye Olde 404 Error
While 404 Errors may look like broken content, they're actually broken links. If you try to pull up a page or post and you get a 404 error, take a beat before you freak out.
First, check to see if you typed in the URL wrong, or if the link you clicked had an error in the URL. If the link appears in text like this, just right-click and select "copy link address" to see what it is. If the URL is correct but you're still getting a 404 Error, the page may have been deleted or the URL may have been changed without setting up a 301 redirect.
To find out if this is the case, download another browser and see how the page looks in that. Chrome and Firefox are popular, though I use Opera as my backup to Chrome when I need to do comparisons.
That's it for today, guys. I hope all this has been helpful!