Tutorial: How to organize your site content

The number 1 culprit of delayed website projects is content.

A lot of business owners underestimate the time necessary + quantity of content that is required when building a website. To help make that task feel less insurmountable, I want to start with the foundation – how to share site content with your team.
Knowing how to save, format + share your content will make it so much easier to collect what you need since you’ll be doing it an organized way from the start. And while it is important to understand that each person has their own preferences, these tips are pretty universal – whether you are providing the content to a designer or a developer.
tutorial: how to organize your website content // tiny blue orange

Tip 1: images + words

When providing both copy + images or graphics, it is essential that you separate them. Having a file that shows the page layout + which images are included is great, but this is about getting that content added to your site. In which case, it’s easier to work with individual elements.
Plus, if you have a photoshop file that you are using to provide content, think about how many text boxes you have it broken up into? The person adding that content to the site can’t grab everything in one copy + paste, they have to go box by box, which isn’t efficient at all.
I find that the best way to organize individual files is either with folders or filenames. For example, if you have a series of images for your about page, you could put them in a folder called “about page” or name them something like tinyblueorange_aboutpage_brutus.jpg, tinyblueorange_aboutpage_pixel.jpg + tinyblueorange_aboutpage_alison.jpg.

Tip 2: links

Roughly 80% of the time, when I get the finalized design files, I have to go back to the team + ask for links. In order to prevent that extra step, there are a couple of ways you can provide them.
The first option is to integrate links right into the copy that you are sending by adding the hyperlink to the word or phrase you want linked. Let’s say you wanted a link to your twitter profile in your about page copy, you could send your team this exact copy “want to connect with me outside of email? I’m seriously addicted to Twitter + would love to chat with you there.” See how the link was built right into the text?
Another option is to provide a list of the links at the end of the page copy, perhaps in a bulleted list. The only downside to this option is that you must clearly explain where the links should be applied, otherwise there could be confusion + misplaced links. Another variation on this is to add the link as a comment in whatever text editor you are using, which allows you to highlight the specific text + keep things clear.

Tip 3: page copy

How you physically provide your page copy is important too. The primary objective is to give the team something they can copy + paste from, which means a Word doc, Google doc or Pages doc {if your team is all Mac based} are all great options. Sending someone a jpg of copy isn’t much help since they will have to manually type each word out – if they don’t flat out refuse to, this is a major waste of time.
I’d also recommend saving each page of your site as its own document. That way if someone is working on the about page, they know to open up the tinyblueorange_aboutpage_content.doc file. But when they are ready for the contact page, they head to tinyblueorange_contactpage_content.doc for what they need. While saving everything in one giant doc keeps it all together, it can be problematic in terms of things getting lost in the shuffle of an 18 page file + you are removing the person’s ability to use select all to copy + paste the content per page.

Tip 4: formatting + styles

Another thing to consider with page copy is how you structure it. Adding things like bold, underline + italics might seem helpful but it can actually cost your team some time, especially if you have a PSD, AI or PDF file showing the exact page layout. the reason is because the way Word {or any other software} formats their text is likely not the same way your online text will be handled.
Your site will use HTML + CSS to apply underlines + bulleted lists. When someone copies a bulleted list from Word, it just adds a special character before each line item but doesn’t actually make it into a true HTML list. That means your team will have to go in + not only add the list styling but also delete the special character + extra spaces that Word added to the content.
WordPress does have an option for pasting copy into a page or post + strip away any formatting, so this tip isn’t as crucial as the other 3. However, not every style can be stripped, so it is a good idea to set up your single page documents with little to no formatting at all. Adding in new paragraphs is a great idea, but adding colors, lists + font sizes should be avoided.


Want to know more tips about working with a developer? I have a downloadable template, notes + checklist collection for designers to use no matter who they partner up with. There’s also a PDF content prep guide for you to share with your clients. Get it here.

on your keyboard hit enter to search or esc to close