Preparing for your project start date: content planning
Designing a website before determining a company’s essential content is a misstep that can offset strategy and waste time and money. As described by Rian van der Merwe, ‘If we design before we have content, we effectively create the packaging before we know what’s going to go in it. And if the content doesn’t fit the package, there are only two options: start from scratch, or try to jam the content into the existing package. We don’t want that.’ Instead of forcing content into a pretty design, the design should be created around the content to highlight the most important information in a meaningful way.
- Chris Johnson, Circle Studio
We have a content-first philosophy.
Even though your site content will be totally editable, avoiding the use of placeholder content during the design phase is so important. I’ll tell you why.
Having real content in my hands inspires me to create sites that are more interesting, more meaningful, and more beautifully tailored to your brand.
Using real content ensures that the site we build will be practical and convenient for you to maintain moving forward.
Example: a big, full width background image may look beautiful on an inspiration site, but is not as easy to create as you thought. Maybe the image dimensions don’t seem to work with your particular products, or you’re having a hard time creating something that doesn’t feel busy. Better to learn that ahead of time rather than use a placeholder image that will leave you stuck trying to fill that awkward space in the future.
Old or wrong content can be a launch day dealbreaker. The last thing we want is to design a beautiful new site that has to be shelved while content is developed.
Example: Your single product is a line of gorgeous handmade bags, and you’re ordering a new type of buckle to use moving foward. Unfortunately that means that all of the product photos have to be reshot.
It would be SO easy to keep moving forward using the old photos. (The new ones won’t be that different after all!) But my experience is that sourcing supplies and working around photography timelines can be wildly unpredictable.
For these reasons, I ask for launch-ready content on Day One.
“What does ‘launch-ready’ mean?” Don’t worry. It sounds serious, but it just refers to content that would be fine to go live. It doesn’t mean it has to be final, perfect, or that it won’t change. It just has to be accurate enough that it won’t represent a bottleneck to the design approval process, or launch.
But how will I know what kind of content will be needed?
Great question. Depending on the state of your current site, providing launch-ready content may be as simple as:
Giving me the green light to use what is already available online.
Green lighting some pages for my reference, and linking me to dropbox folders of fresh photos and copy for other pages.
Letting me know that you’re envisioning something completely new, and talking about a realistic production timeline together.
In all of these cases, right after a scope is approved and we schedule your start date range, the next step will be to talk about a content plan for each page. Our chat might include questions like:
“Our current About page is too minimal. We know want a more fun About page with lots of imagery on the new site. What kinds of photos, illustration, and copy should we have ready?”
Answer: let’s make a list! We may not use everything on the list in the final design, but if we have a lot to draw from in advance, we won’t kill momentum during the design phase.
Or: “Our current product photos have a white background, but we LOVE the look of a gray background like on this example site. Can that be done programmatically or do we need to edit the images on our end?”
Answer: it depends on the product. Either way, let’s try out a few first to see how they will really look, then talk more.
Product photo backgrounds are a great example of how real content makes site design better. Photos with a visible edge require fewer dividing lines and call for a different, less structured design than products that "float" on a pure white field. And status badges like “new” and “sold out” interact with framed and frameless photos in different ways. Using the real stuff takes care of fiddly issues like this painlessly!
Why do we use Lorem Ipsum… in our wireframes and prototypes? Because it quickly plugs the gaps in our emerging designs and lets us crack on with the next feature or page template. We’ve all done it. The problem with Lorem Ipsum is it conveniently fills the available space like an expanding gas. Unfortunately, it is inert, meaningless and lacks context, revealing very little about the relationship between the design and the content.
- the team at GatherContent.com
Allow me one last example! The box on the left uses Lorem Ipsum and is pretty easy to read. The box on the right uses real content. It looks crowded and messy, with line breaks in awkward places. This could have been addressed during the design stage, but placeholder content masked the problem.
Recap
I will need launch-ready content in order to start designing, but don’t worry, we'll talk through what that means for each page after we nail down your project scope, and before we schedule your ballpark start date.
P.S. If you end up needing more time to develop content as your start date approaches, NO PROBLEM. We can easily shift your timeline to accommodate.
A quick note on photo sizes.
Photo input will need to be scaled up, to double each photo’s largest visible size. For example, if your site is 1,100 px wide, and we design in a full-width hero image, the upload should be 2,200 px wide to make sure it’s dense enough to stay sharp on retina screens. Uploading images that are too small will result in a blurry experience for customers shopping on retina devices like iPhones. Once the site is built, these image size recommendations will be noted in your theme admin for easy reference as you add new content.
Homepage hero images.
The dimensions aren’t as important as the orientation. Landscape images are usually easier to work with than square or portrait style. Something like 2,400 x 1,600 pixels is a handy size. Better to err on the side of too big than too small. 2-5 images is a good number to start with. Remember to keep the sizing consistent from image to image. You may also want to create equivalent images for mobile viewers that are square (about 1,000 x 1,000 px).
Product photos for the product page.
Your theme will flex to accommodate all different sizes. But consistency usually creates the best-looking sites. I can design around whatever type of content is the easiest for you to create and looks the best with your products. If you're not sure or don't have a preference, go with square around 2,000 x 2,000 pixels. Easy!
Banner images at the top of collection pages. (Optional)
There is some flex here! Making them the same width as your hero images is a good idea (2,400 px), and they should definitely all be a consistent height. Sometimes a tall banner image works beautifully at the top of the page, depending on your products. But it usually looks nicer to keep the banners short and let the actual products below take center stage.
Sidenote: What about editing promotional text into photos?
Best practice is to let us create text overlays that will “float” over images rather than editing words right into the photo before uploading. Editable overlays are better for SEO (search engines can’t read your text when flattened into a photo), and better for mobile viewing. Phone users may have a hard time reading text edited into an image when it’s squeezed down from desktop to phone size. A text overlay on the other hand will move responsively below an image for mobile viewers, while staying crisp, large and readable.
Occasionally it does make sense to edit text right into your images. For example, you might have some beautiful hand-lettering that looks great incorporated into a flat lay. In that case, an exception makes sense, as long as you take the drawbacks into account.