Website Planning: “Form Follows Function” for websites, too

"Form follows function."

-- Louis Sullivan, architect

website planning: form follows function

This principle is not limited to architecture of buildings. It also holds true for website planning. It may seem evident that there is a difference between structure and content.

If you dive headfirst into creating your website without proper website planning, you might not think through all of the ramifications of this difference.

Website planning begins by separating structure from content.

Early on in your website planning, you should think about the difference between structure and content. Imagine you're using shoeboxes to build a structure, but each shoebox contains something different. The shoeboxes are your structure; whatever you've placed inside those boxes is the content.

Your website may use a "page builder." A page builder is an intuitive tool allowing the user to drag and drop various types of modules (like our shoeboxes, above) into the page. It's a visual way to construct your page. When planning your website with the help of a page builder, you might be tempted to copy the same content-holders from one page to the next. You are on the right track - keeping structure consistent is good for your website. But here is the catch: you should only copy the content-holders in which the content will differ on every page or almost every page.

If you're copying content-holders AND the exact same content from page to page, you're creating an exponentially higher amount of work for yourself later. For example, if you have used the page builder to add a footer module on each page, with the same content - what happens when you have to update the phone number included in that footer? That's right, you'd have to do that manually on Every. Single. Page.

Instead, that would be a great opportunity to use a global row or a footer "widget." A global row, included by some page builders, allows you to make one row that repeats the same content in various pages on your website. A widget is a small bit of text or code that can be inserted onto every page, or several select pages. If you used a global row or a widget in this case, you'd only have to update the content in one place when it changes, and it would be updated on every page of your website. That is a lot of time saved when your company moves or gets a new phone number. The same holds true for sidebars, headers, or any area of your website where you may want the same information on every page.

Use stylesheets for common design elements.

This is also true for design elements. If you are adding horizontal bars inside your content area to separate the same types of content on every page, then instead of inserting an <hr /> tag or using a button on your toolbar to accomplish this, your web designer can easily add this visual separation with CSS (cascading stylesheets) and save you a lot of work. CSS is how we add styles to elements on webpages; the same way you would use a template of styles in a word processing program. You could add a list and know that the bullet points will always look the same, or add a header and know that it will be the right size, bold, and underlined. This ensures visual harmony, continuity, and consistency on your website, and gives you that many fewer things to remember.

Website planning requires thinking about your site structure before you begin.

Good website planning also means thinking about the page and post structure of your WordPress site before you start building it. Recently, we had a situation where we were called in to a half-completed website. This client had posts, separated into categories, and pages. On the pages, the client wanted to see a list of associated posts. However, there was no link between the post categories and the pages. How could we accomplish this? It wasn't an impossible task, but it was considerably more complicated than it would have been if we had been called in before the project began, and been able to plan out an architectural strategy together with the client.

Imagine you work in a yarn factory.

You have started winding your balls of yarn with 45 rotations in one direction, and then 45 rotations in the other direction. You're three-quarters of the way through winding your skeins when your boss comes in and tells you that the balls need to be wound 30 rotations one way, and 30 the other way. There's no way to accomplish that at this point except by unwinding and starting over.

Don't waste your time unwinding and rewinding skeins of yarn. Talk through your website planning project with your in-house team and your web designer and/or web developer as comprehensively as possible before beginning. Be thorough in your website planning. Determine the function of your website, in its entirety, and section by section.

consider your website architecture

X marks the spot: website planning starts with a map.

One good way to decide on your site structure before beginning is by drawing a content map or a wireframe. This just means drawing what your site structure will look like. You can do this by hand on physical paper or use a computer program. It's an organizational chart, such as you might have for your company or organization's structure, but this time for your website. You list main pages, sub pages, and explain any other relationships between various parts of the website. This visual aid helps to ensure that during the website planning phase, you, your team, and your web designer and developer are all on the same page.

Day 1 of the website planning phase is the time to think about every eventuality of your site.

For example, if you're going to sell products on your website at some point, but don't want to open up your site for sales immediately - it's still the right time to consider which e-commerce software you'll want to use and what features it needs to have. Don't embark on your project without thinking through all the information and making a plan. Your web developer is your partner in this endeavor and can help you determine which parts of your site are "form" and which are "function."

Need help?

Red Earth Design, Inc. will be happy to help you plan your website. Contact us any time to start the conversation about your project.

Like it? Share it!


Alisa Cognard

Alisa was one of the first team members to join Red Earth Design, Inc. in early 2004. From data entry, she progressed to MySQL database manipulation and PHP coding. Alisa is responsible for all kinds of odds and ends: installing new websites, adding features to them, programming databases, PHP coding, website troubleshooting, website security, and organizational tasks for Red Earth Design.

Leave a Reply

Your email address will not be published. Required fields are marked *