Using Konductor’s menu management tool, you can design their site so they only need to update a menu in one place, without any code, and it’ll then automatically apply across all the pages that use it.

Here’s how to set up your template(s):

1. In the DWT (Dreamweaver template) that needs a menu, create a dummy menu using an unordered list. The list items themselves don’t need to be the final product as they’re just a placeholder, but give them the CSS attributes that they’ll need. Your code will look something like this:

<ul id="topnav" class="big">
	<li><a href="/cat.html">Cat</a></li>
	<li><a href="/dog.html">Dog</a></li>
	<li><a href="/bird.html">Bird</a></li>
</ul>

2. Select this code inside Dreamweaver, with the ends of the selection being the unordered list tags.
3. Make this menu an editable region (Insert > Template Objects > Editable Region).
4. In Design View, click this new editable region’s top tab. This will cause Konductor’s properties inspector to show.
5. Select “Menu Region…” in Konductor’s properties inspector.
6. Save and upload the newly edited DWT.

This video recaps the above:

Now that the template is ready, you’ll be able to build and manage this menu in the Konductor app:

Here are some example files that you can practice on to create editable menus. The template “editable-menus.dwt” in /Templates is already completed for you, so try to mimic it using “to-make-editable.html”: Editable Menus Example Files

When should you start thinking about a CMS while designing a website? Probably around the same time that I noticed the numbers in the above image were the same as today’s date, long after the shot was taken. Most designers think about a CMS long before they start doing any work on the site itself. That’s inefficient. CMS should be allowed to be an afterthought.

One of the reasons Konductor exists is because of these frustrating workflows. Designers design websites because the web is open to whatever designs you want to create—so why treat your workflow any differently?

Sites managed with Konductor are built using native Dreamweaver templates, and Dreamweaver templates are essentially glorified HTML pages. If you can build an HTML page, then you can build a site on Konductor. Doing things this way means you can add the CMS at step one of designing, or long after the site has already been live on the web.

If you’re looking for a rigid and overly structured CMS that tells you how your sites should be built and designed, then Konductor’s not for you. If you’re looking for a CMS that will work with your style of designing, then we can help; we’ve thought about this a lot.

This isn’t a sales pitch per say, it’s just a question that we get asked a lot. You literally get that much freedom!

In addition to working on the actual application, I often have a chance to work with Konductor and create sites for use on our own system. (We’ve been dogfooding www.konductor.net since day one) I thought it might be nice to put together a list of hints and tips that we’ve found useful in creating sites for Kondcutor, which should help you to focus on designing beautiful sites and getting them online as fast as possible.

1. Write semantic code. Basically this means use your HTML to organize your content logically, then use the CSS to place it. Make the CSS do all the work, and use relevant tags for relevant data (ie. use styled h1-h6 elements for headings, not styled divs. Use styled p elements for paragraphs, not styled divs. Use styled lists for menus, not styled divs) This will not only make your content easiers to style, but also will help with SEO. Reference: http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/
2. Become a CSS ninja. This will make your job that much easier. This doesn’t mean you have to know everything there is to know about CSS; just learn some best practices, and learn some techniques used to solve common tasks. Reference: http://sixrevisions.com/css/100-exceedingly-useful-css-tips-and-tricks/
3. A little jQuery can go a long way. This may sound scary, but this doesn’t mean you have to learn everything about jQuery in order to use it effectively. There are many prepackaged modules out there to help you integreate with galleries, video sites, pull in RSS data, and perform all kinds of dynamic data manipulation. Reference: http://designm.ag/resources/28-fresh-jquery-tutorials/

Another tool that can provide some excellent suggestions is the Google Page Speed Online. This will give practical suggestions on how you can structure your site and it’s code n order to get the most out of your website.

We will post up another article soon looking at some CSS grid systems and HTML5 elements that can make your web pages quicker and more relevant.

By defining an editable region as being a menu in Dreamweaver you’re essentially defining a placeholder for where you and your clients can later start building and inserting menus dynamically from within the Konductor application. These menus will also be styled exactly how you want since we only use the CSS that you include. Since pages are built in the application, why not menus as well?

For more specifics on how to define and then build menus with Konductor see the following videos:

Over the last few weeks we’ve produced a number of tutorial videos that we’re now pleased to release to you through our YouTube account. Everything from downloading the tools you need to how to work with links and anchors within content regions is covered. Here are two of the playlists we’ve put together, one for designers and one for your clients:

Designer tutorials playlist:

Client tutorials playlist:

We hope that you enjoy and learn lots from these videos. If you have any requests or suggestions for new videos, feel free to leave a comment. And don’t forget that we’re still here to help one-on-one as well, so if you have any questions that aren’t covered in a video, someone will be sure to get back to you pronto.

Below is all the major steps we took to make this video:

1. Save the site using the “Save Complete” Firefox add on
2. Add editable regions using Adobe Dreamweaver
3. Modify content using the Konductor application
4. Preview the results in Firefox

The video was actually bit over 5 minutes long, but we decided to speed it up a little and get the point across a little faster Also, one of the cooler aspects of the process was that DJ Earworm gave us permission to use “United States of Pop 2009 (Blame it on the Pop)” as the sound track to the video! Big thanks for letting us use your track! Be sure to check out his videos.

One of the most requested features we get is galleries. So I’m sure many of you will be happy to hear that we have posted our first tutorial about implementing galleries to our tutorials section of the extension help.

From the beginning we have adopted the attitude that doing one thing to a very high standard is much better than doing everything poorly. We do content management very well—and we decided to leave galleries to the experts, Flickr.

You’ll get all the meat of the technical stuff in the post, but a couple of years ago, a full featured gallery would only have been possible using your favorite server side scripting language with a mish-mash of SQL. And it would have required much more code. Now, we can get access to all of Flickr’s functionality using a minimal amount of jQuery and JSON.

The above may or may not mean much to you, but it does illustrate nicely how easy integrating sophisticated services into your own designs has become. And that means we can help you integrate with many more top class web services; next in line is MailChimp for newsletters.

Anyway, let us know what you think about the tutorial, and also what else you would like to see Konductor integrate with.

We’re really happy to be receiving great responses from designers all over the world. Keep the feedback coming and know that we’re here because we support what you designers already do, without making your life more complicated.

Michael Coté:

Thus far, most examples have really just been web pages on the desktop that, at best, have off-line modes or are closed-up video players. It was nice, then, to find a use of AIR that took moved beyond these uses in Konductor’s AIR client.

Read the full article.