How to Prepare Your Website Content

It might not come as a surprise. The better prepared your content is for your web developer, the faster your project will progress. But you may be wondering exactly what preparation means when it comes to content and images. 

The most likely culprit behind project delays isn’t the code, it’s the content. 

Your web developer may create an amazing page, but it serves little purpose without great content. Picture this – we have your site built based on your approved wireframes and mockups, ready to launch, aside from one important factor. Content. And that’s when the delays start. 

Why Preparation Matters

You are excited to launch your new site, and see the impact of your fresh, new design, especially if your previous site was severely outdated. Or you may be starting a business and need your website to drive new customers to your products or services. Delays don’t just mean a slow launching website. They can also hinder important business growth. 

For developers, delays can be frustrating because we spend countless hours working on a project just to see it stalled in the final stages. For clients, the level of frustration can be even higher. 

The Developers Perspective

A web developer’s job is to create a functional, responsive, and secure website for their clients. The best work is done when there are clearly defined parameters surrounding the content you provide. When they receive content that is poorly formatted, vague, or worse, they don’t receive content at all, it begins a back and forth content coordination cycle. 

• Lack of complete content hinders site structuring: The structure of your site is the literal foundation. And your content impacts how a developer structures each and every aspect of your site. If we don’t know whether content for a specific page will be 3-4 brief paragraphs with a few images or a lengthy, image heavy informational page, we have to make guesses on how a page should be built. Which leads us to…
• Reworking the design: We can only do so much with placeholder content. When we have incomplete content, we are left to make our best guess regarding the format of your site’s pages. Sometimes these guesses work great with the actual content once we receive it, and sometimes they don’t. When they don’t, we are left to redesign pages to fit the late-arriving content. And that almost always means project delays.
• Image and logo formatting: Images that aren’t correctly sized or optimized means your web dev team will have to spend unnecessary time formatting and optimizing them to best suit your site. These tasks take time and can further delay a launch. When it comes to images and logos, the issues typically arise from one of three things:
  • Images/logos that are too large (exceeding 1mb in size for banners and 500kb in size for content images)
  • Images/logos that are too small, such as thumbnails
  • Images/logos in the wrong file format (such as .pdf)

Some delays are inevitable, but providing your web developer with ready to use content in a timely manner often prevents unexpected delays. 

The Client’s Perspective

When you deliver content that is appropriately prepared and complete there are two key advantages: 

• A timely launch: Each day your site is delayed you’re missing out on potential customers.
• A higher quality end result: When developers receive complete, prepared content up front the site can be built around your content, not vice versa. This results in a cleaner, better performing site. And the end result is a site that looks just like the mockups. No surprises, just a site laid out perfectly to meet your company’s needs.

Delays work against you. But there is good news! You have the power to prevent content related delays. With proper preparation you’ll be well on your way to a timely website launch. 

Step 1: Prep Your Copy

One of the biggest content mistakes clients make is sending one long, disorganized document. Content that lacks sections and labeling means we will be pushing it back to you for further clarification. This results in pesky delays. 

• Structure the content you deliver by page and section: Your developer needs your content organized as you intend it to appear on your finished website.

• Format for readability: We look for clean, standard formatting with clear hierarchy.
• Avoid custom formatting: Don’t use special characters, colors, or fonts. The more readable your document formatting is, the easier it will be for your developer to understand.
  • Use proper heading structure: Each page should only have one H1 heading, which will be your main page heading. All subheadings should fall in the H2, H3 structure. Main sections should be H2 and sub-sections H3. You can use the pre-formatted H1, H2, H3 designations in your word processing program to accomplish this.
  • Keep your text clean: Remove extra spaces, tabs, and hidden formatting so your content can easily be copy+pasted into your new website.
• Clearly identify special content: It is vital that you label content that should be arranged in a way that differs from the standard copy.
  • Calls-to-Action (CTAs): Draw attention to CTA content by using bold text to clearly identify them as a special feature.
  • Testimonials: Draw attention to Testimonials similarly, by using bold text to clearly identify them as a special feature. Be sure to include all necessary information such as name, quote, and image (if desired).

Step 2: Prep Your Images

Unoptimized images are one of the main reasons a website loads slowly. Slow websites not only frustrate visitors, they also negatively impact search engine rankings. Optimizing images before sending them to your web dev team means they can focus on building your site rather than formatting images. This is just one more thing you can do to ensure a timely launch. 

• Use a clear naming system: Naming images img1.jpg, img2.jpg, img3.jpg, etc. can be confusing. Clearly naming images topically helps with image searching and organization once they are loaded onto your site. Examples of clear image names: CoolWave.jpg, Cool-Wave.jpg, CoolWater.jpg, Cool-Water.jpg.
• Don’t forget to optimize: We don’t need print-ready images straight from your photographer, camera, or mobile device. Image files such as these are likely to be far too large to add to a website.

• Don’t forget your logo and favicon: Logos should, ideally, be an SVG (.svg) file because this file type is scalable without loss of quality. If you don’t have an SVG file, a PNG (.png) is the next best thing. For PNG files, make sure transparency is preserved. And it’s always best to share all versions of your logo (such as text only, graphic only, stacked, etc as applicable) in multiple colorways to accommodate both light and dark backgrounds.
• Share images in structured folders via Google Drive, Box, or platforms used by your web developer such as Basecamp: Once images are named and optimized, create an images or assets master folder and sort pictures into sub folders by page (home, about us, contact, etc.) and place the corresponding images in each folder.

Step 3: The Handoff

Now that all of your content is prepared it’s time to deliver the final product to your web dev team. 

• Utilize a central sharing location: Using the same platform used to upload your images, create a master content folder and place content files (or links to your documents depending on the platforms you use) in this folder. Make sure to appropriately name files and links so your team can easily identify each item. Don’t forget to grant access to the appropriate parties, if applicable.
• Perform one last content check: Before sending your content, run through the checklist below to make sure it’s ready to go!
  • Is all copy organized how it should be placed on each page and labeled by page with clear headings and sections?
  • Are all special sections labeled accordingly and in bold to indicate the content is different from the body content on the page?
  • Are image names listed in the copy documents and placed in the correct corresponding location?
  • Are images properly resized and compressed?
  • Have you included all logos and favicons as SVG or PNG files in multiple colorways suitable for both light and dark backgrounds?
  • Are all documents and images placed in structured folders in one central sharing location?
  • Do the appropriate members of your web dev team have access to each folder and document?

If you’ve said yes to each item on the checklist, you’re ready to deliver your content! 

The Payoff

By taking charge of your content preparation, you’re not only being helpful, you’re speeding up the development process. Appropriately preparing and delivering your content means your web development team can focus on the task at hand – creating a beautiful, functional website for your business.  

The result is a more streamlined process, fewer delays, and minimal re-designs. This means your website will be completed on time and the end result will be exactly what you expect!