thaddeushunt.com

Planning the content layout of a new website is a daunting task to say the least. You always want your content to be easy to find, logically laid out, and as clean as possible navigation-wise. A new site (or a redesign of an old one) is a great opportunity for you finally to wrangle your site’s content and make it more accessible for your readership.

To do this, you need a plan of course and, for me anyways, I tend to go the visual route.  Luckily, you don’t get much more visual than Literature and Latte’s mind-mapping software: Scapple.

It's All in the Bubbles

For the title of the document, I simply put the name of the site. Below that, I put a bubble where the top banner is going to be, labeling it as such. Then directly below that, I place individual bubbles for each horizontal navigation tab, labeling them individually for what each tab was going to point to (“Home”, “About Me”, “Contact”, etc… ).

Next, I create a vertical line of square bubbles going down the right side of the content area, roughing out where a right column full of widgets would be. If you know what the widgets are going to be, feel free to label those as well. Otherwise, I just labeled mine “Widget 1, Widget 2, Widget 3…” - you get the idea.

After this, I place a big bubble in the middle of the layout that represents the main area where my content will be displayed.

Last but not least, I frame it all out with a bubble at the bottom that runs the width of the design for the site’s footer or colophon.

Here’s what I ended up with:

KISS: Keep It Simple. Seriously.

By keeping the document intentionally simple, it affords you the luxury to drag and drop these blocks around, resizing them to accommodate new ideas and layouts. I guarantee that once you get the basics fleshed out in this document - the core bits of content that you must have on your site - the process of manipulating the layout becomes WAY less of a chore and might even become a little fun (gasp)! So yeah, simple, simple, simple.

Now that you’ve got your layout nailed down, it’s time to fill out the content that is going to go in these bubbles.

This is where Scrivener comes in!

Old Hacks That Still Work

I start with a blank project (or choose whatever template you like) in Scrivener, again, using the name of my site as its title. Then I immediately drag and drop my Scapple file into the “Research” folder in the left column in Scrivener renaming that folder “New Site Layout”. This way it’s always easy to reference moving forward.

With that all in place it’s time to wrangle your content.

Every Folder is a Section of Your Site Layout

In my case, I had a “Header/Banner Area” section, a “Horizontal Navigation” section, a “Right Column” filled with widgets, a “Main Content Area” section for my content, and “Footer/Colophon” area for any information I wanted at the bottom of my site.

Since these are all definable areas of my site that will have content in them, I go ahead and create the following folders in my Scrivener project:

• Banner
• Horizontal Navigation
• Right Column
• Main Content Area
• Footer/Colophon

Now that’s in order, it’s time to fill those folders!

Every Page is a Block of Content

For my content I only use the text/Markdown that I want for each of these sections of my site. But you should feel free to drag whatever you want into these pages - pictures, PDF’s, etc… whatever you’d like. Just don’t make it confusing or cluttered. Again, keep it simple.

So for the “Banner” section I add the text and byline that will go in front of the banner image. If you don’t want text? Drag the top banner image into the page for reference.

For the “Horizontal Navigation” section, I add a page for each tab in my layout. In each of those pages I put in the text that I want the page to display. So the “About Me” page contains all of the text that I want to display on my “About Me” page. If the tab is a link to somewhere (as with the “Home” tab), I make sure that, that that information is written plainly in that page. If a tab links to something more form-like (as with the “Contact” tab), I list that info there as well, giving the fields that I’d like in the form along with what is required info when the visitor clicks the “Send" button.

I use the same methodology above for my “Right Column” section as well, giving each widget its own respective page. In those pages are descriptions of what each widget does along with formatting needs.

The “Main Content Area” section is more than likely going to be dynamic so there’s not much to add to this page other than its description. However, if your site is going to be filled with predominantly static content that rarely changes, than feel free to add whatever this page will contain. Tweak all of this to fit your site’s needs. It is important to remember that this is merely a guide/example of what you could do. Not what you should do. Do what makes sense for you and your project.

For the “Footer/Colophon” section I just add the blurb of text that I want showing up statically at the bottom of my site, regardless of where I navigate to.

Lastly, Don’t forget to save! Scrivener does a bang up job of backing up your work automatically, but when the thought flits across your brain - save your project.

Why I Like This Approach

Do you need Scapple and Scrivener to pull something like this off? Of course not. There are a lot of alternatives out there to choose from. I just chose them because they are powerful, intuitive, easy to use, and play well together. That and the idea of this nebulous task being collected, organized and bundled up into a single .scriv project file is tidy and easy to keep track of.

It also gives you a HUGE headstart on your new site design and since it is separate from your site’s file system, it is a very effective back up of the structure and content of where your site started. This is a huge win if you ever have a catastrophic failure and somehow loose your site and all of its content. With this, you’ll always have a copy of that gigantic “step one" to fall back on.

It’s also something you could easily hand to a designer who you’ve hired to build your site. Instead of saying “I think I would like this…” you’ve already taken the time to create the site that you need so you can say “I really appreciate your help. Here’s what I’d like you to build…”. ³

Trust me on this one. That developer you’ve hired? He/She just might openly weep tears of joy if you handed them something organized and fully realized like this.

I know I would.